From 78229a2d10d5d95470abcdd2a2f107ef0047de41 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 6 Jul 2026 19:33:51 +0300
Subject: [PATCH 01/30] fix(react): query builder snippets

---
 .../en/components/inputs/query-builder.mdx    | 145 ++++++++----------
 1 file changed, 66 insertions(+), 79 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 914d7ddb6e..57b9011c03 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -200,75 +200,62 @@ igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => {
 
 
 ```tsx
-private queryBuilderRef: React.RefObject<IgcQueryBuilderComponent>;
+const queryBuilderRef = useRef<IgrQueryBuilderComponent>(null);
+const [expressionTree, setExpressionTree] = useState<IgrFilteringExpressionsTree | null>(null);
 
-constructor(props: any) {
-  super(props);
-  this.queryBuilderRef = React.createRef();
-  this.state = {
-    expressionTree: null
-  };
-}
+const ordersFields: Field[] = [
+  { field: 'orderId', dataType: 'number' },
+  { field: 'customerId', dataType: 'string' },
+  { field: 'orderDate', dataType: 'date' }
+];
+
+const entities: Entity[] = [
+  { name: 'Orders', fields: ordersFields }
+];
+
+const onExpressionTreeChange = (newTree: IgrFilteringExpressionsTree) => {
+  // Handle expression tree changes
+  console.log('Expression tree changed:', newTree);
+};
+
+const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
+  setExpressionTree(event.detail);
+};
 
-componentDidMount() {
+useEffect(() => {
   const tree = new IgrFilteringExpressionsTree();
   tree.operator = FilteringLogic.And;
   tree.entity = 'Orders';
 
-  this.setState({ expressionTree: tree });
+  setExpressionTree(tree);
 
-  if (this.queryBuilderRef.current && tree) {
-    const queryBuilder = this.queryBuilderRef.current;
-    queryBuilder.entities = this.entities as any;
+  if (queryBuilderRef.current) {
+    const queryBuilder = queryBuilderRef.current;
+    queryBuilder.entities = entities as any;
     queryBuilder.expressionTree = tree;
-    queryBuilder.addEventListener('expressionTreeChange', this.handleExpressionTreeChange);
+    queryBuilder.addEventListener('expressionTreeChange', handleExpressionTreeChange);
   }
-}
-
-componentWillUnmount() {
-  if (this.queryBuilderRef.current) {
-    this.queryBuilderRef.current.removeEventListener('expressionTreeChange', this.handleExpressionTreeChange);
-  }
-}
-
-private handleExpressionTreeChange = (event: CustomEvent<IgcExpressionTree>) => {
-  this.setState({ expressionTree: event.detail });
-};
-
-private get ordersFields(): Field[] {
-  return [
-    { field: 'orderId', dataType: 'number' },
-    { field: 'customerId', dataType: 'string' },
-    { field: 'orderDate', dataType: 'date' }
-  ];
-}
-
-private get entities(): Entity[] {
-  return [
-    { name: 'Orders', fields: this.ordersFields }
-  ];
-}
 
-private onExpressionTreeChange() {
-  // Handle expression tree changes
-  console.log('Expression tree changed:', this.state.expressionTree);
-}
+  return () => {
+    if (queryBuilderRef.current) {
+      queryBuilderRef.current.removeEventListener('expressionTreeChange', handleExpressionTreeChange);
+    }
+  };
+}, []);
 
-public render(): JSX.Element {
-  return (
-    <div className="container sample">
-      <IgrQueryBuilder ref={this.queryBuilderRef} id="queryBuilder"></IgrQueryBuilder>
-    </div>
-  );
-}
+return (
+  <div className="container sample">
+    <IgrQueryBuilder ref={queryBuilderRef} id="queryBuilder"></IgrQueryBuilder>
+  </div>
+);
 ```
 
-The <ApiLink type="ExpressionTree" /> is stored in the component state which means you can subscribe to the `ExpressionTreeChange` event to receive notifications when the end-user changes the UI by creating, editing or removing conditions. The event listener is attached in `componentDidMount` and cleaned up in `componentWillUnmount`.
+The <ApiLink type="ExpressionTree" /> is stored in component state which means you can subscribe to the `ExpressionTreeChange` event to receive notifications when the end-user changes the UI by creating, editing or removing conditions. The event listener is attached in `useEffect` and cleaned up in the returned teardown function.
 
 ```tsx
-private handleExpressionTreeChange = (event: CustomEvent<IgcExpressionTree>) => {
-  this.setState({ expressionTree: event.detail });
-  this.onExpressionTreeChange();
+const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
+  setExpressionTree(event.detail);
+  onExpressionTreeChange(event.detail);
 };
 ```
 
@@ -452,23 +439,23 @@ igRegisterScript("SearchValueTemplate", (ctx) => {
 
 ```tsx
 <IgrQueryBuilder 
-  ref={this.queryBuilderRef} 
+  ref={queryBuilderRef} 
   id="queryBuilder"
-  searchValueTemplate={this.buildSearchValueTemplate}>
+  searchValueTemplate={buildSearchValueTemplate}>
   <IgrQueryBuilderHeader title="Query Builder Template Sample"></IgrQueryBuilderHeader>
 </IgrQueryBuilder>
 ```
 
 ```tsx
-componentDidMount() {
-  if (this.queryBuilderRef.current && tree) {
-    const queryBuilder = this.queryBuilderRef.current;
-    queryBuilder.entities = this.entities as any;
+useEffect(() => {
+  if (queryBuilderRef.current) {
+    const queryBuilder = queryBuilderRef.current;
+    queryBuilder.entities = entities as any;
     queryBuilder.expressionTree = tree;
   }
-}
+}, []);
 
-private buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
+const buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
   const field = ctx.selectedField?.field;
   const condition = ctx.selectedCondition;
   const matchesEqualityCondition = condition === 'equals' || condition === 'doesNotEqual';
@@ -478,22 +465,22 @@ private buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
   }
 
   if (field === 'Region' && matchesEqualityCondition) {
-    return this.buildRegionSelect(ctx);
+    return buildRegionSelect(ctx);
   }
 
   if (field === 'OrderStatus' && matchesEqualityCondition) {
-    return this.buildStatusRadios(ctx);
+    return buildStatusRadios(ctx);
   }
 
   if (ctx.selectedField?.dataType === 'date') {
-    return this.buildDatePicker(ctx);
+    return buildDatePicker(ctx);
   }
 
   if (ctx.selectedField?.dataType === 'time') {
-    return this.buildTimeInput(ctx);
+    return buildTimeInput(ctx);
   }
 
-  return this.buildDefaultInput(ctx, matchesEqualityCondition);
+  return buildDefaultInput(ctx, matchesEqualityCondition);
 };
 ```
 
@@ -865,7 +852,7 @@ For the Region Select example:
 { field: 'Region', dataType: 'string' }
 
 // Template
-private buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
+const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = ctx?.implicit?.value?.value ?? '';
   const key = `region-select-${currentValue}`;
 
@@ -881,10 +868,10 @@ private buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
         if (!value || value === currentKey) return;
 
         setTimeout(() => {
-          ctx.implicit.value = this.regionOptions.find(option => option.value === value) ?? null;
+          ctx.implicit.value = regionOptions.find(option => option.value === value) ?? null;
         });
       }}>
-      {this.regionOptions.map(option => (
+      {regionOptions.map(option => (
         <IgrSelectItem key={option.value} value={option.value}>
           <span>{option.text}</span>
         </IgrSelectItem>
@@ -901,7 +888,7 @@ For the Status Radio Group example:
 { field: 'OrderStatus', dataType: 'number' }
 
 // Template
-private buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
+const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue === null ? '' : implicitValue.toString();
   const key = `status-radio-${currentValue}`;
@@ -923,7 +910,7 @@ private buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
           ctx.implicit.value = numericValue;
         });
       }}>
-      {this.statusOptions.map(option => (
+      {statusOptions.map(option => (
         <IgrRadio
           key={option.value}
           name="status"
@@ -944,7 +931,7 @@ For the Date Picker example:
 { field: 'OrderDate', dataType: 'date' }
 
 // Template
-private buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
+const buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue instanceof Date
     ? implicitValue
@@ -979,8 +966,8 @@ For the Time Input example:
 { field: 'RequiredTime', dataType: 'time' }
 
 // Template
-private buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
-  const currentValue = this.normalizeTimeValue(ctx.implicit?.value);
+const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
+  const currentValue = normalizeTimeValue(ctx.implicit?.value);
   const allowedConditions = ['at', 'not_at', 'at_before', 'at_after', 'before', 'after'];
   const isDisabled = ctx.selectedField == null || allowedConditions.indexOf(ctx.selectedCondition ?? '') === -1;
   const key = `time-input-${currentValue}`;
@@ -1013,7 +1000,7 @@ For the Default Input template:
 { field: 'IsRushOrder', dataType: 'boolean' }
 
 // Template that handles all these types
-private buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityCondition: boolean) => {
+const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityCondition: boolean) => {
   const selectedField = ctx.selectedField;
   const dataType = selectedField?.dataType;
   const isNumber = dataType === 'number';
@@ -1063,14 +1050,14 @@ In order to change the appearance of the search value in the chip displayed when
 <PlatformBlock for="React, WebComponents">
 
 
-```ts
-this.ordersFields = [
+```tsx
+const ordersFields = [
   { field: 'OrderID', dataType: 'number' },
   { field: 'ShipCountry', dataType: 'string' },
   {
     field: 'OrderDate',
     dataType: 'date',
-    formatter: (value: any) => value.toLocaleDateString(this.queryBuilder?.locale, { 
+    formatter: (value: any) => value.toLocaleDateString(queryBuilderRef.current?.locale, { 
       month: 'short', 
       day: 'numeric', 
       year: 'numeric' 

From 5bbf868dac5a412691e7274ed58425f2e385c3d5 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 6 Jul 2026 16:54:57 +0000
Subject: [PATCH 02/30] fix(docs): address query-builder snippet review
 feedback

---
 .../en/components/inputs/query-builder.mdx    | 52 ++++++++++++++++++-
 1 file changed, 50 insertions(+), 2 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 57b9011c03..472469720b 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -200,7 +200,7 @@ igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => {
 
 
 ```tsx
-const queryBuilderRef = useRef<IgrQueryBuilderComponent>(null);
+const queryBuilderRef = useRef<IgrQueryBuilder>(null);
 const [expressionTree, setExpressionTree] = useState<IgrFilteringExpressionsTree | null>(null);
 
 const ordersFields: Field[] = [
@@ -220,6 +220,7 @@ const onExpressionTreeChange = (newTree: IgrFilteringExpressionsTree) => {
 
 const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
   setExpressionTree(event.detail);
+  onExpressionTreeChange(event.detail);
 };
 
 useEffect(() => {
@@ -852,6 +853,13 @@ For the Region Select example:
 { field: 'Region', dataType: 'string' }
 
 // Template
+const regionOptions = [
+  { text: 'North America', value: 'NA' },
+  { text: 'South America', value: 'SA' },
+  { text: 'Europe', value: 'EU' },
+  { text: 'Asia', value: 'AS' }
+];
+
 const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = ctx?.implicit?.value?.value ?? '';
   const key = `region-select-${currentValue}`;
@@ -888,6 +896,12 @@ For the Status Radio Group example:
 { field: 'OrderStatus', dataType: 'number' }
 
 // Template
+const statusOptions = [
+  { text: 'Open', value: 1 },
+  { text: 'In Progress', value: 2 },
+  { text: 'Done', value: 3 }
+];
+
 const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue === null ? '' : implicitValue.toString();
@@ -966,6 +980,14 @@ For the Time Input example:
 { field: 'RequiredTime', dataType: 'time' }
 
 // Template
+const normalizeTimeValue = (value: unknown): Date | null => {
+  if (value == null) {
+    return null;
+  }
+
+  return value instanceof Date ? value : new Date(value as string);
+};
+
 const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = normalizeTimeValue(ctx.implicit?.value);
   const allowedConditions = ['at', 'not_at', 'at_before', 'at_after', 'before', 'after'];
@@ -1047,7 +1069,7 @@ const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityC
 In order to change the appearance of the search value in the chip displayed when a condition is not in edit mode, you can set a formatter function to the fields array. The search value can be accessed through the value argument as follows:
 
 
-<PlatformBlock for="React, WebComponents">
+<PlatformBlock for="React">
 
 
 ```tsx
@@ -1073,6 +1095,32 @@ const ordersFields = [
 
 </PlatformBlock>
 
+<PlatformBlock for="WebComponents">
+
+
+```ts
+const ordersFields = [
+  { field: 'OrderID', dataType: 'number' },
+  { field: 'ShipCountry', dataType: 'string' },
+  {
+    field: 'OrderDate',
+    dataType: 'date',
+    formatter: (value: any) => value.toLocaleDateString(undefined, {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    })
+  },
+  {
+    field: 'Region',
+    dataType: 'string',
+    formatter: (value: any) => value?.text ?? value?.value ?? value
+  }
+];
+```
+
+</PlatformBlock>
+
 <PlatformBlock for="Blazor">
 
 ```razor

From dc1d35bcbe1b32e4e38ebf21aeb3e1701a0b4469 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Mon, 6 Jul 2026 20:04:05 +0300
Subject: [PATCH 03/30] fix(react): remove unneeded code

---
 .../en/components/inputs/query-builder.mdx    | 21 -------------------
 1 file changed, 21 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 472469720b..f870838e5d 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -853,13 +853,6 @@ For the Region Select example:
 { field: 'Region', dataType: 'string' }
 
 // Template
-const regionOptions = [
-  { text: 'North America', value: 'NA' },
-  { text: 'South America', value: 'SA' },
-  { text: 'Europe', value: 'EU' },
-  { text: 'Asia', value: 'AS' }
-];
-
 const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = ctx?.implicit?.value?.value ?? '';
   const key = `region-select-${currentValue}`;
@@ -896,12 +889,6 @@ For the Status Radio Group example:
 { field: 'OrderStatus', dataType: 'number' }
 
 // Template
-const statusOptions = [
-  { text: 'Open', value: 1 },
-  { text: 'In Progress', value: 2 },
-  { text: 'Done', value: 3 }
-];
-
 const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue === null ? '' : implicitValue.toString();
@@ -980,14 +967,6 @@ For the Time Input example:
 { field: 'RequiredTime', dataType: 'time' }
 
 // Template
-const normalizeTimeValue = (value: unknown): Date | null => {
-  if (value == null) {
-    return null;
-  }
-
-  return value instanceof Date ? value : new Date(value as string);
-};
-
 const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = normalizeTimeValue(ctx.implicit?.value);
   const allowedConditions = ['at', 'not_at', 'at_before', 'at_after', 'before', 'after'];

From ebfae68758ff8705ac877e20ca930e82616568eb Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 7 Jul 2026 10:18:56 +0300
Subject: [PATCH 04/30] fix(react): query builder changes

---
 .../en/components/inputs/query-builder.mdx    | 28 +------------------
 1 file changed, 1 insertion(+), 27 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index f870838e5d..e0deb3eea3 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -1048,7 +1048,7 @@ const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityC
 In order to change the appearance of the search value in the chip displayed when a condition is not in edit mode, you can set a formatter function to the fields array. The search value can be accessed through the value argument as follows:
 
 
-<PlatformBlock for="React">
+<PlatformBlock for="React, WebComponents">
 
 
 ```tsx
@@ -1074,32 +1074,6 @@ const ordersFields = [
 
 </PlatformBlock>
 
-<PlatformBlock for="WebComponents">
-
-
-```ts
-const ordersFields = [
-  { field: 'OrderID', dataType: 'number' },
-  { field: 'ShipCountry', dataType: 'string' },
-  {
-    field: 'OrderDate',
-    dataType: 'date',
-    formatter: (value: any) => value.toLocaleDateString(undefined, {
-      month: 'short',
-      day: 'numeric',
-      year: 'numeric'
-    })
-  },
-  {
-    field: 'Region',
-    dataType: 'string',
-    formatter: (value: any) => value?.text ?? value?.value ?? value
-  }
-];
-```
-
-</PlatformBlock>
-
 <PlatformBlock for="Blazor">
 
 ```razor

From e36421d470bfa9e9765221461e1a40ee0864345f Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 7 Jul 2026 12:21:07 +0300
Subject: [PATCH 05/30] fix(grid-lite): add api links

---
 .../content/en/components/grid-lite/binding.mdx    |  8 ++++++--
 .../en/components/grid-lite/cell-template.mdx      |  8 ++++++--
 .../components/grid-lite/column-configuration.mdx  |  8 ++++++--
 .../content/en/components/grid-lite/filtering.mdx  | 12 ++++++++++--
 .../en/components/grid-lite/header-template.mdx    |  8 ++++++--
 .../content/en/components/grid-lite/overview.mdx   |  8 ++++++++
 .../content/en/components/grid-lite/sorting.mdx    | 14 ++++++++++++--
 .../content/en/components/grid-lite/theming.mdx    |  8 ++++++--
 8 files changed, 60 insertions(+), 14 deletions(-)

diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index fed5a941bd..3d5601ecf9 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -202,8 +202,12 @@ the column collection is reset, and a new data source is bound to the grid.
 <Sample src="/{GridLiteSample}/data-binding" height={600} alt="{Platform} {GridLiteTitle} Data Binding" />
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index 10e9654f39..159b3daed4 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -251,8 +251,12 @@ export interface GridLiteCellContext<
 <Sample src="/{GridLiteSample}/column-config-basic" height={600} alt="{Platform} {GridLiteTitle} Column Config Basic" />
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index 9b34bd393f..8deea31f4a 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -361,8 +361,12 @@ In the sample below you can try out the different column properties and how they
 <Sample src="/{GridLiteSample}/column-config-dynamic" height={600} alt="{Platform} {GridLiteTitle} Column Config Dynamic" />
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index 4c951138ec..1e87a6d607 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -626,8 +626,16 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 </PlatformBlock>
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="IgbGridLiteFilterExpression" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index d279cd42a6..ef3e33563c 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -106,8 +106,12 @@ return (
 <Sample src="/{GridLiteSample}/column-config-headers" height={600} alt="{Platform} {GridLiteTitle} Column Config Headers" />
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
index d68ff73a09..eaddfe4e2a 100644
--- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
@@ -10,6 +10,7 @@ llms:
 ---
 import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 # Free & Open-Source {Platform} Data Grid (Grid Lite)
@@ -239,3 +240,10 @@ Yes. Ignite UI Grid Lite is a free, open-source {Platform} data grid released un
 - No feature gating
 
 However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free {Platform} data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.
+
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index b8b27c5199..0c07b486cc 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -767,8 +767,18 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 </PlatformBlock>
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+<ApiLink type="GridLiteSortingOptions" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="IgbGridLiteSortingExpression" /><br />
+<ApiLink type="GridLiteSortingMode" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index 3a6f3d5260..ced0060355 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -72,8 +72,12 @@ Here is an example showcasing the custom theming from above.
 <Sample src="/{GridLiteSample}/styling-custom-theme" height={600} alt="{Platform} {GridLiteTitle} Styling Custom Theme" />
 
 
-{/*TODO <ApiLink type="{ComponentName}" />
-<ApiLink type="Column" />*/}
+## API References
+
+<PlatformBlock for="WebComponents, Blazor">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
 
 ## Additional Resources
 

From b7729cea5bbfe03c4f2ff77099856260ea7f74eb Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Tue, 7 Jul 2026 12:28:26 +0300
Subject: [PATCH 06/30] fix(react): remove unused code from the snippets

---
 .../src/content/en/components/inputs/query-builder.mdx     | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index e0deb3eea3..7bf29c3530 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -201,7 +201,6 @@ igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => {
 
 ```tsx
 const queryBuilderRef = useRef<IgrQueryBuilder>(null);
-const [expressionTree, setExpressionTree] = useState<IgrFilteringExpressionsTree | null>(null);
 
 const ordersFields: Field[] = [
   { field: 'orderId', dataType: 'number' },
@@ -219,7 +218,6 @@ const onExpressionTreeChange = (newTree: IgrFilteringExpressionsTree) => {
 };
 
 const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
-  setExpressionTree(event.detail);
   onExpressionTreeChange(event.detail);
 };
 
@@ -228,8 +226,6 @@ useEffect(() => {
   tree.operator = FilteringLogic.And;
   tree.entity = 'Orders';
 
-  setExpressionTree(tree);
-
   if (queryBuilderRef.current) {
     const queryBuilder = queryBuilderRef.current;
     queryBuilder.entities = entities as any;
@@ -251,11 +247,10 @@ return (
 );
 ```
 
-The <ApiLink type="ExpressionTree" /> is stored in component state which means you can subscribe to the `ExpressionTreeChange` event to receive notifications when the end-user changes the UI by creating, editing or removing conditions. The event listener is attached in `useEffect` and cleaned up in the returned teardown function.
+The <ApiLink type="ExpressionTree" /> is a bindable property which means you can subscribe to the `ExpressionTreeChange` event to receive notifications when the end-user changes the UI by creating, editing or removing conditions. The event listener is attached in `useEffect` and cleaned up in the returned teardown function.
 
 ```tsx
 const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
-  setExpressionTree(event.detail);
   onExpressionTreeChange(event.detail);
 };
 ```

From a7112ad012ebe8185613f64b249986cd17873cc6 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 8 Jul 2026 14:03:26 +0300
Subject: [PATCH 07/30] fix(react): update query builder snippets

---
 .../content/en/components/inputs/query-builder.mdx    | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 7bf29c3530..e0274abddd 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -857,7 +857,7 @@ const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
       className="qb-select"
       key={key}
       value={currentValue}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         const value = sender.value;
         const currentKey = ctx?.implicit?.value?.value ?? '';
 
@@ -895,7 +895,7 @@ const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
       style={{ gap: '5px' }}
       alignment="horizontal"
       value={currentValue}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         const value = sender.value;
         if (value === undefined) return;
 
@@ -944,8 +944,7 @@ const buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
       key={key}
       value={currentValue}
       disabled={!isEnabled}
-      click={(sender: any) => sender.show()}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         setTimeout(() => {
           ctx.implicit.value = sender.value;
         });
@@ -974,7 +973,7 @@ const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
       inputFormat="hh:mm tt"
       value={currentValue}
       disabled={isDisabled}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         setTimeout(() => {
           ctx.implicit.value = sender.value;
         });
@@ -1022,7 +1021,7 @@ const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityC
       disabled={isDisabled}
       placeholder={placeholder}
       type={isNumber ? 'number' : 'text'}
-      input={(sender: any) => {
+      onInput={(sender: any) => {
         const value = sender.value;
         setTimeout(() => {
           ctx.implicit.value = isNumber

From 2ce50f3ecd7cd5ae26574991ef4e2132180309fe Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Wed, 8 Jul 2026 14:41:55 +0300
Subject: [PATCH 08/30] fix(docs): fixing blazor api links

---
 docs/xplat/src/content/en/components/grid-lite/binding.mdx | 7 ++++++-
 .../src/content/en/components/grid-lite/cell-template.mdx  | 7 ++++++-
 .../en/components/grid-lite/column-configuration.mdx       | 7 ++++++-
 .../src/content/en/components/grid-lite/filtering.mdx      | 4 +++-
 .../content/en/components/grid-lite/header-template.mdx    | 7 ++++++-
 .../xplat/src/content/en/components/grid-lite/overview.mdx | 7 ++++++-
 docs/xplat/src/content/en/components/grid-lite/sorting.mdx | 4 +++-
 docs/xplat/src/content/en/components/grid-lite/theming.mdx | 7 ++++++-
 8 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index 3d5601ecf9..fea073dcca 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -204,11 +204,16 @@ the column collection is reset, and a new data source is bound to the grid.
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
 ## Additional Resources
 
 - [Column Configuration](column-configuration.md)
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index 159b3daed4..eafa648829 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -253,11 +253,16 @@ export interface GridLiteCellContext<
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
 ## Additional Resources
 
 - [Column Configuration](column-configuration.md)
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index 8deea31f4a..be9bb03161 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -363,11 +363,16 @@ In the sample below you can try out the different column properties and how they
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
 ## Additional Resources
 
 - [Data Binding](binding.md)
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index 1e87a6d607..bb339de1e9 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -628,12 +628,14 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
 <ApiLink type="IgbGridLiteFilterExpression" /><br />
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index ef3e33563c..0fbec382e1 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -108,11 +108,16 @@ return (
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
 ## Additional Resources
 
 - [Column Configuration](column-configuration.md)
diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
index eaddfe4e2a..2eda3b7266 100644
--- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
@@ -243,7 +243,12 @@ However, if your project scales and grows in complexity and functionality, and y
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index 0c07b486cc..797ec77acf 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -769,13 +769,15 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 <ApiLink type="GridLiteSortingOptions" /><br />
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
 <ApiLink type="IgbGridLiteSortingExpression" /><br />
 <ApiLink type="GridLiteSortingMode" /><br />
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index ced0060355..9b9af45eb7 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -74,11 +74,16 @@ Here is an example showcasing the custom theming from above.
 
 ## API References
 
-<PlatformBlock for="WebComponents, Blazor">
+<PlatformBlock for="WebComponents">
 <ApiLink type="GridLite" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 </PlatformBlock>
 
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
 ## Additional Resources
 
 - [Column Configuration](column-configuration.md)

From ed1a2582049e316136bbf9aba3b1eb3ee165be27 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 8 Jul 2026 12:02:32 +0000
Subject: [PATCH 09/30] fix(docs): guard grid lite api reference sections

---
 docs/xplat/src/content/en/components/grid-lite/binding.mdx   | 5 +++++
 .../src/content/en/components/grid-lite/cell-template.mdx    | 5 +++++
 .../content/en/components/grid-lite/column-configuration.mdx | 5 +++++
 docs/xplat/src/content/en/components/grid-lite/filtering.mdx | 5 +++++
 .../src/content/en/components/grid-lite/header-template.mdx  | 5 +++++
 docs/xplat/src/content/en/components/grid-lite/overview.mdx  | 5 +++++
 docs/xplat/src/content/en/components/grid-lite/sorting.mdx   | 5 +++++
 docs/xplat/src/content/en/components/grid-lite/theming.mdx   | 5 +++++
 8 files changed, 40 insertions(+)

diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index fea073dcca..8eb354c6b8 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -202,6 +202,8 @@ the column collection is reset, and a new data source is bound to the grid.
 <Sample src="/{GridLiteSample}/data-binding" height={600} alt="{Platform} {GridLiteTitle} Data Binding" />
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -212,6 +214,9 @@ the column collection is reset, and a new data source is bound to the grid.
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index eafa648829..39978dcbd5 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -251,6 +251,8 @@ export interface GridLiteCellContext<
 <Sample src="/{GridLiteSample}/column-config-basic" height={600} alt="{Platform} {GridLiteTitle} Column Config Basic" />
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -261,6 +263,9 @@ export interface GridLiteCellContext<
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index be9bb03161..7c825fa9d2 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -361,6 +361,8 @@ In the sample below you can try out the different column properties and how they
 <Sample src="/{GridLiteSample}/column-config-dynamic" height={600} alt="{Platform} {GridLiteTitle} Column Config Dynamic" />
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -371,6 +373,9 @@ In the sample below you can try out the different column properties and how they
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index bb339de1e9..d77aa1117f 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -626,6 +626,8 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 </PlatformBlock>
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -637,6 +639,9 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
 <ApiLink type="IgbGridLiteFilterExpression" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index 0fbec382e1..c6d5506159 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -106,6 +106,8 @@ return (
 <Sample src="/{GridLiteSample}/column-config-headers" height={600} alt="{Platform} {GridLiteTitle} Column Config Headers" />
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -116,6 +118,9 @@ return (
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
index 2eda3b7266..3ff7297fcf 100644
--- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
@@ -241,6 +241,8 @@ Yes. Ignite UI Grid Lite is a free, open-source {Platform} data grid released un
 
 However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free {Platform} data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -251,4 +253,7 @@ However, if your project scales and grows in complexity and functionality, and y
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index 797ec77acf..ead4a37225 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -767,6 +767,8 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 </PlatformBlock>
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -780,6 +782,9 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 <ApiLink type="GridLiteColumn" /><br />
 <ApiLink type="IgbGridLiteSortingExpression" /><br />
 <ApiLink type="GridLiteSortingMode" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index 9b9af45eb7..5545f8ae1b 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -72,6 +72,8 @@ Here is an example showcasing the custom theming from above.
 <Sample src="/{GridLiteSample}/styling-custom-theme" height={600} alt="{Platform} {GridLiteTitle} Styling Custom Theme" />
 
 
+<PlatformBlock for="WebComponents, Blazor">
+
 ## API References
 
 <PlatformBlock for="WebComponents">
@@ -82,6 +84,9 @@ Here is an example showcasing the custom theming from above.
 <PlatformBlock for="Blazor">
 <ApiLink type="GridLite<TItem>" /><br />
 <ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
 </PlatformBlock>
 
 ## Additional Resources

From 0d0fe50de9db490536472582253006da72dbd19f Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 9 Jul 2026 11:32:14 +0300
Subject: [PATCH 10/30] fix(react): query builder input value

---
 docs/xplat/src/content/en/components/inputs/query-builder.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index e0274abddd..558bff2a90 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -1022,7 +1022,7 @@ const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityC
       placeholder={placeholder}
       type={isNumber ? 'number' : 'text'}
       onInput={(sender: any) => {
-        const value = sender.value;
+        const value = sender.detail;
         setTimeout(() => {
           ctx.implicit.value = isNumber
             ? value === '' ? null : Number(value)

From c01e21cd691b44a91a0dccc7fcb645c38d443b40 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 9 Jul 2026 10:44:38 +0000
Subject: [PATCH 11/30] fix(jp/grid-lite): add API reference links to Japanese
 grid-lite topics

Sync Japanese documentation with English changes from PR #420.
Adds API references section for WebComponents and Blazor platforms
to all grid-lite topics.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../jp/components/grid-lite/binding.mdx       | 18 ++++++++++++++--
 .../jp/components/grid-lite/cell-template.mdx | 18 ++++++++++++++--
 .../grid-lite/column-configuration.mdx        | 18 ++++++++++++++--
 .../jp/components/grid-lite/filtering.mdx     | 19 +++++++++++++++--
 .../components/grid-lite/header-template.mdx  | 18 ++++++++++++++--
 .../jp/components/grid-lite/overview.mdx      | 18 ++++++++++++++++
 .../jp/components/grid-lite/sorting.mdx       | 21 +++++++++++++++++--
 .../jp/components/grid-lite/theming.mdx       | 18 ++++++++++++++--
 8 files changed, 134 insertions(+), 14 deletions(-)

diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
index 69a61981bf..bee5281800 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
@@ -161,8 +161,22 @@ grid.data = [];
 
 <Sample src="/{GridLiteSample}/data-binding" height={600} alt="{Platform} {GridLiteTitle} データ バインディング" />
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
index b9f32def09..26ef683415 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
@@ -209,8 +209,22 @@ export interface GridLiteCellContext<
 
 <Sample src="/{GridLiteSample}/column-config-basic" height={600} alt="{Platform} {GridLiteTitle} 列の基本構成" />
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
index bd9f97dc3d..19be019560 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
@@ -314,8 +314,22 @@ return (
 
 <Sample src="/{GridLiteSample}/column-config-dynamic" height={600} alt="{Platform} {GridLiteTitle} 列のダイナミック構成" />
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
index 1aed4e2c63..ddf634a619 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
@@ -578,8 +578,23 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
 
 <ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+<ApiLink type="IgbGridLiteFilterExpression" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
index f554beb1e7..7190e5dada 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
@@ -95,8 +95,22 @@ column.headerTemplate = () => html`<h3>⭐ Rating ⭐</h3>`;
 
 <Sample src="/{GridLiteSample}/column-config-headers" height={600} alt="{Platform} {GridLiteTitle} 列設定ヘッダー" />
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
index 7775c74d6f..00edb5482e 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
@@ -11,6 +11,7 @@ llms:
 ---
 import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # 無料のオープン ソース {Platform} データ グリッド (Grid Lite)
 
@@ -224,3 +225,20 @@ Excel スタイルのフル キーボード ナビゲーションにより、大
 - No feature gating
 
 However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free {Platform} data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.
+
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
index 3cfcaef1db..951df5fff1 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
@@ -636,8 +636,25 @@ grid.DataPipelineConfiguration = new DataPipelineParams
 
 <ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+<ApiLink type="GridLiteSortingOptions" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+<ApiLink type="IgbGridLiteSortingExpression" /><br />
+<ApiLink type="GridLiteSortingMode" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
index 9563350e82..0272f9afa7 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
@@ -70,8 +70,22 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <Sample src="/{GridLiteSample}/styling-custom-theme" height={600} alt="{Platform} {GridLiteTitle} スタイル設定のカスタム テーマ" />
 
-{/*TODO <ApiLink type="{ComponentName}" /><br />
-<ApiLink type="Column" />*/}
+<PlatformBlock for="WebComponents, Blazor">
+
+## API リファレンス
+
+<PlatformBlock for="WebComponents">
+<ApiLink type="GridLite" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+<ApiLink type="GridLite<TItem>" /><br />
+<ApiLink type="GridLiteColumn" /><br />
+
+</PlatformBlock>
+
+</PlatformBlock>
 
 ## その他のリソース
 

From a563fbbf8a7f643f2bb56fa0cb8603da456a839a Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 9 Jul 2026 14:05:05 +0300
Subject: [PATCH 12/30] fix(react): query builder sample values

---
 .../src/content/en/components/inputs/query-builder.mdx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 558bff2a90..3206db11b9 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -858,7 +858,7 @@ const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
       key={key}
       value={currentValue}
       onChange={(sender: any) => {
-        const value = sender.value;
+        const value = sender.detail;
         const currentKey = ctx?.implicit?.value?.value ?? '';
 
         if (!value || value === currentKey) return;
@@ -896,7 +896,7 @@ const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
       alignment="horizontal"
       value={currentValue}
       onChange={(sender: any) => {
-        const value = sender.value;
+        const value = sender.detail;
         if (value === undefined) return;
 
         const numericValue = Number(value);
@@ -946,7 +946,7 @@ const buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
       disabled={!isEnabled}
       onChange={(sender: any) => {
         setTimeout(() => {
-          ctx.implicit.value = sender.value;
+          ctx.implicit.value = sender.detail;
         });
       }}>
     </IgrDatePicker>
@@ -975,7 +975,7 @@ const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
       disabled={isDisabled}
       onChange={(sender: any) => {
         setTimeout(() => {
-          ctx.implicit.value = sender.value;
+          ctx.implicit.value = sender.detail;
         });
       }}>
       <div slot="prefix">

From 34bf5664e12403ad58d66598106b9399c0d8d6d7 Mon Sep 17 00:00:00 2001
From: Hristo Hristov <HHristov@infragistics.com>
Date: Thu, 9 Jul 2026 15:35:02 +0300
Subject: [PATCH 13/30] fix(react): fix value on the select in the query
 builder topic

---
 docs/xplat/src/content/en/components/inputs/query-builder.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/xplat/src/content/en/components/inputs/query-builder.mdx b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
index 3206db11b9..904c2045bd 100644
--- a/docs/xplat/src/content/en/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/en/components/inputs/query-builder.mdx
@@ -858,7 +858,7 @@ const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
       key={key}
       value={currentValue}
       onChange={(sender: any) => {
-        const value = sender.detail;
+        const value = sender.detail.value;
         const currentKey = ctx?.implicit?.value?.value ?? '';
 
         if (!value || value === currentKey) return;

From a27825b76146b9c7947905233445f7af38494f78 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 9 Jul 2026 13:18:26 +0000
Subject: [PATCH 14/30] fix(jp/react): update query builder React snippets to
 functional components

Sync Japanese documentation with English changes from PR #403.
Updated React code examples from class-based to functional component
patterns using useRef, useEffect, and modern event handler conventions.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../jp/components/inputs/query-builder.mdx    | 162 ++++++++----------
 1 file changed, 72 insertions(+), 90 deletions(-)

diff --git a/docs/xplat/src/content/jp/components/inputs/query-builder.mdx b/docs/xplat/src/content/jp/components/inputs/query-builder.mdx
index c1bb5a0fa4..313fc1b0a8 100644
--- a/docs/xplat/src/content/jp/components/inputs/query-builder.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/query-builder.mdx
@@ -202,75 +202,58 @@ igRegisterScript("WebQueryBuilderExpressionTreeChange", (evtArgs) => {
 
 
 ```tsx
-private queryBuilderRef: React.RefObject<IgcQueryBuilderComponent>;
+const queryBuilderRef = useRef<IgrQueryBuilder>(null);
 
-constructor(props: any) {
-  super(props);
-  this.queryBuilderRef = React.createRef();
-  this.state = {
-    expressionTree: null
-  };
-}
+const ordersFields: Field[] = [
+  { field: 'orderId', dataType: 'number' },
+  { field: 'customerId', dataType: 'string' },
+  { field: 'orderDate', dataType: 'date' }
+];
+
+const entities: Entity[] = [
+  { name: 'Orders', fields: ordersFields }
+];
+
+const onExpressionTreeChange = (newTree: IgrFilteringExpressionsTree) => {
+  // Handle expression tree changes
+  console.log('Expression tree changed:', newTree);
+};
+
+const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
+  onExpressionTreeChange(event.detail);
+};
 
-componentDidMount() {
+useEffect(() => {
   const tree = new IgrFilteringExpressionsTree();
   tree.operator = FilteringLogic.And;
   tree.entity = 'Orders';
 
-  this.setState({ expressionTree: tree });
-
-  if (this.queryBuilderRef.current && tree) {
-    const queryBuilder = this.queryBuilderRef.current;
-    queryBuilder.entities = this.entities as any;
+  if (queryBuilderRef.current) {
+    const queryBuilder = queryBuilderRef.current;
+    queryBuilder.entities = entities as any;
     queryBuilder.expressionTree = tree;
-    queryBuilder.addEventListener('expressionTreeChange', this.handleExpressionTreeChange);
+    queryBuilder.addEventListener('expressionTreeChange', handleExpressionTreeChange);
   }
-}
-
-componentWillUnmount() {
-  if (this.queryBuilderRef.current) {
-    this.queryBuilderRef.current.removeEventListener('expressionTreeChange', this.handleExpressionTreeChange);
-  }
-}
-
-private handleExpressionTreeChange = (event: CustomEvent<IgcExpressionTree>) => {
-  this.setState({ expressionTree: event.detail });
-};
-
-private get ordersFields(): Field[] {
-  return [
-    { field: 'orderId', dataType: 'number' },
-    { field: 'customerId', dataType: 'string' },
-    { field: 'orderDate', dataType: 'date' }
-  ];
-}
-
-private get entities(): Entity[] {
-  return [
-    { name: 'Orders', fields: this.ordersFields }
-  ];
-}
 
-private onExpressionTreeChange() {
-  // Handle expression tree changes
-  console.log('Expression tree changed:', this.state.expressionTree);
-}
+  return () => {
+    if (queryBuilderRef.current) {
+      queryBuilderRef.current.removeEventListener('expressionTreeChange', handleExpressionTreeChange);
+    }
+  };
+}, []);
 
-public render(): JSX.Element {
-  return (
-    <div className="container sample">
-      <IgrQueryBuilder ref={this.queryBuilderRef} id="queryBuilder"></IgrQueryBuilder>
-    </div>
-  );
-}
+return (
+  <div className="container sample">
+    <IgrQueryBuilder ref={queryBuilderRef} id="queryBuilder"></IgrQueryBuilder>
+  </div>
+);
 ```
 
-<ApiLink type="ExpressionTree" /> はコンポーネントの state に保持されます。つまり、`ExpressionTreeChange` イベントを購読して、エンドユーザーが条件を作成、編集、削除して UI を変更したときに通知を受け取ることができます。イベント リスナーは `componentDidMount` で登録され、`componentWillUnmount` でクリーンアップされます。
+<ApiLink type="ExpressionTree" /> はバインド可能なプロパティです。つまり、`ExpressionTreeChange` イベントを購読して、エンドユーザーが条件を作成、編集、削除して UI を変更したときに通知を受け取ることができます。イベント リスナーは `useEffect` で登録され、返されるティアダウン関数でクリーンアップされます。
 
 ```tsx
-private handleExpressionTreeChange = (event: CustomEvent<IgcExpressionTree>) => {
-  this.setState({ expressionTree: event.detail });
-  this.onExpressionTreeChange();
+const handleExpressionTreeChange = (event: CustomEvent<IgrFilteringExpressionsTree>) => {
+  onExpressionTreeChange(event.detail);
 };
 ```
 
@@ -454,23 +437,23 @@ igRegisterScript("SearchValueTemplate", (ctx) => {
 
 ```tsx
 <IgrQueryBuilder 
-  ref={this.queryBuilderRef} 
+  ref={queryBuilderRef} 
   id="queryBuilder"
-  searchValueTemplate={this.buildSearchValueTemplate}>
+  searchValueTemplate={buildSearchValueTemplate}>
   <IgrQueryBuilderHeader title="Query Builder Template Sample"></IgrQueryBuilderHeader>
 </IgrQueryBuilder>
 ```
 
 ```tsx
-componentDidMount() {
-  if (this.queryBuilderRef.current && tree) {
-    const queryBuilder = this.queryBuilderRef.current;
-    queryBuilder.entities = this.entities as any;
+useEffect(() => {
+  if (queryBuilderRef.current) {
+    const queryBuilder = queryBuilderRef.current;
+    queryBuilder.entities = entities as any;
     queryBuilder.expressionTree = tree;
   }
-}
+}, []);
 
-private buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
+const buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
   const field = ctx.selectedField?.field;
   const condition = ctx.selectedCondition;
   const matchesEqualityCondition = condition === 'equals' || condition === 'doesNotEqual';
@@ -480,22 +463,22 @@ private buildSearchValueTemplate = (ctx: QueryBuilderSearchValueContext) => {
   }
 
   if (field === 'Region' && matchesEqualityCondition) {
-    return this.buildRegionSelect(ctx);
+    return buildRegionSelect(ctx);
   }
 
   if (field === 'OrderStatus' && matchesEqualityCondition) {
-    return this.buildStatusRadios(ctx);
+    return buildStatusRadios(ctx);
   }
 
   if (ctx.selectedField?.dataType === 'date') {
-    return this.buildDatePicker(ctx);
+    return buildDatePicker(ctx);
   }
 
   if (ctx.selectedField?.dataType === 'time') {
-    return this.buildTimeInput(ctx);
+    return buildTimeInput(ctx);
   }
 
-  return this.buildDefaultInput(ctx, matchesEqualityCondition);
+  return buildDefaultInput(ctx, matchesEqualityCondition);
 };
 ```
 
@@ -871,7 +854,7 @@ Region Select の例:
 { field: 'Region', dataType: 'string' }
 
 // Template
-private buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
+const buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = ctx?.implicit?.value?.value ?? '';
   const key = `region-select-${currentValue}`;
 
@@ -880,17 +863,17 @@ private buildRegionSelect = (ctx: QueryBuilderSearchValueContext) => {
       className="qb-select"
       key={key}
       value={currentValue}
-      change={(sender: any) => {
-        const value = sender.value;
+      onChange={(sender: any) => {
+        const value = sender.detail.value;
         const currentKey = ctx?.implicit?.value?.value ?? '';
 
         if (!value || value === currentKey) return;
 
         setTimeout(() => {
-          ctx.implicit.value = this.regionOptions.find(option => option.value === value) ?? null;
+          ctx.implicit.value = regionOptions.find(option => option.value === value) ?? null;
         });
       }}>
-      {this.regionOptions.map(option => (
+      {regionOptions.map(option => (
         <IgrSelectItem key={option.value} value={option.value}>
           <span>{option.text}</span>
         </IgrSelectItem>
@@ -907,7 +890,7 @@ Status Radio Group の例:
 { field: 'OrderStatus', dataType: 'number' }
 
 // Template
-private buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
+const buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue === null ? '' : implicitValue.toString();
   const key = `status-radio-${currentValue}`;
@@ -918,8 +901,8 @@ private buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
       style={{ gap: '5px' }}
       alignment="horizontal"
       value={currentValue}
-      change={(sender: any) => {
-        const value = sender.value;
+      onChange={(sender: any) => {
+        const value = sender.detail;
         if (value === undefined) return;
 
         const numericValue = Number(value);
@@ -929,7 +912,7 @@ private buildStatusRadios = (ctx: QueryBuilderSearchValueContext) => {
           ctx.implicit.value = numericValue;
         });
       }}>
-      {this.statusOptions.map(option => (
+      {statusOptions.map(option => (
         <IgrRadio
           key={option.value}
           name="status"
@@ -950,7 +933,7 @@ Date Picker の例:
 { field: 'OrderDate', dataType: 'date' }
 
 // Template
-private buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
+const buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
   const implicitValue = ctx.implicit?.value;
   const currentValue = implicitValue instanceof Date
     ? implicitValue
@@ -967,10 +950,9 @@ private buildDatePicker = (ctx: QueryBuilderSearchValueContext) => {
       key={key}
       value={currentValue}
       disabled={!isEnabled}
-      click={(sender: any) => sender.show()}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         setTimeout(() => {
-          ctx.implicit.value = sender.value;
+          ctx.implicit.value = sender.detail;
         });
       }}>
     </IgrDatePicker>
@@ -985,7 +967,7 @@ Time Input の例:
 { field: 'RequiredTime', dataType: 'time' }
 
 // Template
-private buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
+const buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
   const currentValue = normalizeTimeValue(ctx.implicit?.value);
   const allowedConditions = ['at', 'not_at', 'at_before', 'at_after', 'before', 'after'];
   const isDisabled = ctx.selectedField == null || allowedConditions.indexOf(ctx.selectedCondition ?? '') === -1;
@@ -997,9 +979,9 @@ private buildTimeInput = (ctx: QueryBuilderSearchValueContext) => {
       inputFormat="hh:mm tt"
       value={currentValue}
       disabled={isDisabled}
-      change={(sender: any) => {
+      onChange={(sender: any) => {
         setTimeout(() => {
-          ctx.implicit.value = sender.value;
+          ctx.implicit.value = sender.detail;
         });
       }}>
       <div slot="prefix">
@@ -1019,7 +1001,7 @@ Default Input テンプレートの例:
 { field: 'IsRushOrder', dataType: 'boolean' }
 
 // Template that handles all these types
-private buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityCondition: boolean) => {
+const buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualityCondition: boolean) => {
   const selectedField = ctx.selectedField;
   const dataType = selectedField?.dataType;
   const isNumber = dataType === 'number';
@@ -1046,8 +1028,8 @@ private buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualit
       disabled={isDisabled}
       placeholder={placeholder}
       type={isNumber ? 'number' : 'text'}
-      input={(sender: any) => {
-        const value = sender.value;
+      onInput={(sender: any) => {
+        const value = sender.detail;
         setTimeout(() => {
           ctx.implicit.value = isNumber
             ? value === '' ? null : Number(value)
@@ -1070,14 +1052,14 @@ private buildDefaultInput = (ctx: QueryBuilderSearchValueContext, matchesEqualit
 <PlatformBlock for="React, WebComponents">
 
 
-```ts
-this.ordersFields = [
+```tsx
+const ordersFields = [
   { field: 'OrderID', dataType: 'number' },
   { field: 'ShipCountry', dataType: 'string' },
   {
     field: 'OrderDate',
     dataType: 'date',
-    formatter: (value: any) => value.toLocaleDateString(this.queryBuilder?.locale, { 
+    formatter: (value: any) => value.toLocaleDateString(queryBuilderRef.current?.locale, { 
       month: 'short', 
       day: 'numeric', 
       year: 'numeric' 

From 9257b50b16bf3f67fecc5e427d60ce8d9f1073d9 Mon Sep 17 00:00:00 2001
From: jsakamotoIGJP <jsakamoto@infragistics.com>
Date: Fri, 10 Jul 2026 18:06:36 +0900
Subject: [PATCH 15/30] fix(jp/grid-lite): translate leftover English and align
 structure with EN

---
 .../jp/components/grid-lite/binding.mdx       |  17 +--
 .../jp/components/grid-lite/cell-template.mdx |   2 +-
 .../jp/components/grid-lite/overview.mdx      |   2 +-
 .../jp/components/grid-lite/binding.mdx       |  61 +++++++----
 .../jp/components/grid-lite/cell-template.mdx | 102 ++++++++++++------
 .../jp/components/grid-lite/overview.mdx      |  92 ++++++++--------
 6 files changed, 164 insertions(+), 112 deletions(-)

diff --git a/docs/angular/src/content/jp/components/grid-lite/binding.mdx b/docs/angular/src/content/jp/components/grid-lite/binding.mdx
index 0708946d7b..6a6376c920 100644
--- a/docs/angular/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/binding.mdx
@@ -22,11 +22,11 @@ Grid Lite は、データ ソースとしてプレーン オブジェクトの
 
 ## 実行時にデータ ソースを変更する
 
-コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。
+コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースのデータ構造 (フィールド構成) が以前のものと異なる場合は、列の構成も必ず更新してください。
 
 ```typescript
 grid.data = [...{
-  /** レコードが続きます */
+  /** ここにレコードを記述します */
 }];
 ```
 
@@ -37,7 +37,7 @@ grid.data = [...{
 </igx-grid-lite>
 ```
 
-グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
+グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に推論されます。
 
 ```typescript
 grid.autoGenerate = true;
@@ -57,8 +57,9 @@ grid.data = [];
 
 
 <DocsAside type="info" title="情報">
-Grid Lite のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。通常は <ApiLink type="GridLite" member="clearSort" label="clearSort()" /> または <ApiLink type="GridLite" member="clearFilter" label="clearFilter()" /> を呼び出してリセットすることをお勧めします。
+Grid Lite コンポーネントのソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。
 </DocsAside>
+通常は <ApiLink type="GridLite" member="clearSort" label="clearSort()" /> または <ApiLink type="GridLite" member="clearFilter" label="clearFilter()" /> を呼び出して、これらの状態をリセットすることをお勧めします。
 
 以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。
 
@@ -71,10 +72,10 @@ Grid Lite のソート/フィルター状態は、この方法でデータ ソ
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](/grid-lite/column-configuration)
+- [ソート](/grid-lite/sorting)
+- [フィルタリング](/grid-lite/filtering)
+- [テーマ設定とスタイル設定](/grid-lite/theming)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
index e10f811b58..7c8bd32361 100644
--- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
@@ -14,7 +14,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
-# 列セル テンプレート
+# 列のセル テンプレート
 
 デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。これは基本的なシナリオでは問題ありませんが、レンダリングされる出力をカスタマイズしたい場合や、最終的な出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレートをカスタマイズできます。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/overview.mdx b/docs/angular/src/content/jp/components/grid-lite/overview.mdx
index 37d7055ca6..d538ef71c4 100644
--- a/docs/angular/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/overview.mdx
@@ -64,7 +64,7 @@ export class AppComponent {
 
 ## 機能
 
-### パフォーマンス内蔵
+### 優れたパフォーマンスを標準搭載
 
 無料で提供される Angular データ グリッドを使用すると、行レベルの仮想化を実装できます。これにより、無制限のデータをスムーズなスクロールでレンダリングできます。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
index bee5281800..d3608fd6b4 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
@@ -24,22 +24,22 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="Blazor">
 
-データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。
+{GridLiteTitle} は、データ ソースとして `List<T>` を受け入れます。`T` はモデルを表します。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。
 
 </PlatformBlock>
 
-When applying data transformations, such as sorting and filtering, the grid does not modify the original data reference. That is to say, data transformations will not be reflected in the original source. The grid does not track changes to the objects inside the data array, so direct modification of the data objects will not be reflected.
+データの変換 (ソートやフィルターなど) を適用する場合、グリッドは元のデータ参照を変更しません。つまり、データ変換は元のソースには反映されません。グリッドはデータ配列内のオブジェクトの変更を追跡しないため、データ オブジェクトを直接変更しても反映されません。
 
 ## 実行時にデータ ソースを変更する
 
-コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースが前のものと異なる「形状」を持つ場合、列の設定も更新する必要があります。
+コンポーネントは実行時にデータ ソースの変更をサポートします。新しいソースのデータ構造 (フィールド構成) が以前のものと異なる場合は、列の構成も必ず更新してください。
 
 <PlatformBlock for="WebComponents">
 
 
 ```typescript
 grid.data = [...{
-  /** レコードが続きます*/
+  /** ここにレコードを記述します */
 }];
 ```
 
@@ -55,15 +55,22 @@ grid.data = [...{
 <PlatformBlock for="React">
 
 ```tsx
-this.gridRef.current.data = [...{
-  /** レコードが続きます*/
-}];
+/* 最初に初期データを設定します */
+const [data, setData] = React.useState([/* 初期データ */]);
+
+/* 次に、イベント ハンドラーまたは useEffect 内で setData を使用してデータを更新します */
+const updateData = () => {
+  setData([]);
+};
 
 return (
-    <igc-grid-lite data={data}>
-        {/* 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 */}
-        <igc-grid-lite-column field="id"></igc-grid-lite-column>
-    </igc-grid-lite>
+    <>
+        <IgrButton onClick={updateData}>Update Data</IgrButton>
+        <IgrGridLite data={data}>
+            {/* 新しいデータを表すために、必要に応じて列の構成を更新し、列を追加または削除します。 */}
+            <IgrGridLiteColumn field="id"></IgrGridLiteColumn>
+        </IgrGridLite>
+    </>
 );
 ```
 
@@ -80,7 +87,7 @@ return (
 @code {
     this.data = new List<T>
     {
-        // レコードが続きます
+        // ここにレコードを記述します
     };
 }
 ```
@@ -89,13 +96,13 @@ return (
 
 <PlatformBlock for="React, WebComponents">
 
-グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
+グリッドで `autoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に推論されます。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-グリッドで `AutoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に「推測されます」。
+グリッドで `AutoGenerate` が有効になっている場合、データが変更されると新しい列の構成が自動的に推論されます。
 
 </PlatformBlock>
 
@@ -114,13 +121,21 @@ grid.data = [];
 <PlatformBlock for="React">
 
 
-```razor
-<IgbGridLite Data="data" AutoGenerate="true" />
+```tsx
+const [data, setData] = React.useState([/* 初期データ */]);
 
-@code {
-    // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
-    this.data = new List<T>();
-}
+
+/** 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。 */
+const updateData = () => {
+  setData([/* 新しいデータ */]);
+};
+
+return (
+    <>
+        <IgrButton onClick={updateData}>Update Data</IgrButton>
+        <IgrGridLite id="grid-lite" data={data} autoGenerate={true} />
+    </>
+);
 ```
 
 </PlatformBlock>
@@ -132,7 +147,7 @@ grid.data = [];
 <IgbGridLite Data="data" AutoGenerate="true" />
 
 @code {
-    // After the new binding the grid will infer the column collection from the bound data.
+    // 新しいバインディング後、グリッドはバインドされたデータから列コレクションを推論します。
     this.data = new List<T>();
 }
 ```
@@ -144,7 +159,7 @@ grid.data = [];
 <DocsAside type="info" title="情報">
 {GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。
 </DocsAside>
-通常は `clearSort()` または `clearFilter()` を呼び出してリセットすることをお勧めします。
+通常は `clearSort()` または `clearFilter()` を呼び出して、これらの状態をリセットすることをお勧めします。
 
 </PlatformBlock>
 
@@ -153,7 +168,7 @@ grid.data = [];
 <DocsAside type="info" title="情報">
 {GridLiteTitle} のソート/フィルター状態は、この方法でデータ ソースを変更しても保持されます。
 </DocsAside>
-通常は `ClearSort()` または `ClearFilter()` を呼び出してリセットすることをお勧めします。
+通常は `ClearSort()` または `ClearFilter()` を呼び出して、これらの状態をリセットすることをお勧めします。
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
index 26ef683415..9b147b4b2e 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
@@ -9,11 +9,12 @@ _language: ja
 llms:
   description: "デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。"
 ---
+import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
-# 列セル テンプレート
+# 列のセル テンプレート
 
 デフォルトでは、グリッドは列のフィールドを使用してセル内の値を文字列としてレンダリングします。これは基本的なシナリオでは問題ありませんが、レンダリングされる出力をカスタマイズしたい場合や、最終的な出力が異なるデータ フィールドの組み合わせである場合は、セル テンプレートをカスタマイズできます。
 
@@ -33,9 +34,23 @@ column.cellTemplate = (params: IgcCellContext<T, K>) => { return html`<!-- templ
 </PlatformBlock>
 <PlatformBlock for="React">
 
-```razor
-<!-- Templates TBD in Blazor -->
-<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
+```tsx
+// cellTemplate 関数を定義します
+const currencyCellTemplate = (ctx: IgrCellContext) => (
+  {/* Template contents */}
+);
+
+// cellTemplate プロパティを設定します
+return (
+  <IgrGridLite data={data} id="grid-lite">
+    <IgrGridLiteColumn
+      field="price"
+      header="Price"
+      dataType="number"
+      cellTemplate={currencyCellTemplate}
+    ></IgrGridLiteColumn>
+  </IgrGridLite>
+);
 ```
 
 </PlatformBlock>
@@ -61,13 +76,29 @@ const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currenc
 // 列要素への参照を取得します
 const column = document.querySelector('igc-grid-lite-column');
 
-// 値 `value = 123456.789` に対してカスタム通貨形式を返します。
+// カスタム通貨形式の値を返します
 column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79"
 ```
 
 </PlatformBlock>
 <PlatformBlock for="React">
 
+```tsx
+const formatCurrency = new Intl.NumberFormat("en-150", {
+  style: "currency",
+  currency: "EUR",
+});
+
+// カスタム通貨形式の値を返します
+const currencyCellTemplate = (ctx: IgrCellContext) => (
+  <span>{formatCurrency(ctx.value)}</span>
+);
+```
+
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+
 ```razor
 <!-- Templates TBD in Blazor -->
 <IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
@@ -75,7 +106,11 @@ column.cellTemplate = (params) => asCurrency(params.value); // => "€123,456.79
 
 </PlatformBlock>
 
-<PlatformBlock for="Blazor">
+データ ソースの異なるフィールドの値を組み合わせることもできます。
+{/*TODO:
+Refer to the API documentation for `GridLiteCellContext` for more information.*/}
+
+<PlatformBlock for="WebComponents">
 
 ```typescript
 const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currency', currency: 'EUR' });
@@ -83,19 +118,8 @@ const { format: asCurrency } = new Intl.NumberFormat('en-150', { style: 'currenc
 // 列要素への参照を取得します
 const column = document.querySelector('igc-grid-lite-column');
 
-// 価格が 99.99 の品目 10 個の注文に対してカスタム通貨形式を返します
-column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count); // => "€999.90"
-```
-
-</PlatformBlock>
-
-
-
-<PlatformBlock for="WebComponents">
-
-```razor
-<!-- Templates TBD in Blazor -->
-<IgbGridLiteColumn Field="Price"></IgbGridLiteColumn>
+// カスタム通貨形式の値を返します
+column.cellTemplate = ({value, row}) => asCurrency(value * row.data.count);
 ```
 
 </PlatformBlock>
@@ -107,7 +131,7 @@ const { format: asCurrency } = new Intl.NumberFormat("en-150", {
   currency: "EUR",
 });
 
-// Return the custom currency formatted value
+// カスタム通貨形式の値を返します
 const totalCellTemplate = (ctx: IgrCellContext) => (
   <span>{asCurrency(ctx.value * ctx.row.data.count)}</span>
 );
@@ -126,14 +150,17 @@ const totalCellTemplate = (ctx: IgrCellContext) => (
 
 ## カスタム DOM テンプレート
 
-`cellTemplate` プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセルコンテナー内にレンダリングされます。
+`cellTemplate` プロパティを値フォーマッタとして使用する以外に、独自の DOM テンプレートを作成することもできます。これはセル コンテナー内にレンダリングされます。
 
 <PlatformBlock for="WebComponents">
-標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。
+宣言的な DOM フラグメントを構築するために、<a href="https://lit.dev/" target="_blank">Lit</a> とその<a href="https://lit.dev/docs/templates/expressions/" target="_blank">タグ付きテンプレート構文</a>が提供する機能を再利用しています。
 
 </PlatformBlock>
 
 
+標準の DOM 要素だけでなく、他のライブラリの Web コンポーネントもテンプレート化できます。
+
+
 
 <PlatformBlock for="WebComponents">
 
@@ -154,9 +181,18 @@ column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></
 <PlatformBlock for="React">
 
 
-```razor
-<!-- Templates TBD in Blazor -->
-<IgbGridLiteColumn Field="Rating"></IgbGridLiteColumn>
+```tsx
+// defineComponents と、rating コンポーネントなどの igniteui-webcomponents コンポーネントをインポートします。
+import { defineComponents, IgcRatingComponent } from "igniteui-webcomponents";
+
+defineComponents(IgcRatingComponent);
+
+// React のセル テンプレート内で、Web コンポーネントを通常どおりに使用します
+const satisfactionCellTemplate = (ctx: IgrCellContext) => (
+  <span>
+    <igc-rating readonly value={ctx.value}></igc-rating>
+  </span>
+);
 ```
 
 </PlatformBlock>
@@ -172,11 +208,13 @@ column.cellTemplate = ({ value }) => html`<igc-rating readonly value=${value}></
 
 </PlatformBlock>
 
-
+<DocsAside type="info" title="情報">
+テンプレートが複雑で込み入ったものになるほど、パフォーマンス コストが大きくなることに注意してください。パフォーマンスが重要な場合は、複雑な DOM 構造は避けてください。
+</DocsAside>
 
 ## セル コンテキスト オブジェクト
 
-カスタム セル レンダラーには `GridLiteCellContext` オブジェクトがパラメータｖとして渡され、以下のプロパティを持ちます。
+カスタム セル レンダラーには `GridLiteCellContext` オブジェクトがパラメータとして渡され、以下のプロパティを持ちます。
 
 <PlatformBlock for="React, WebComponents">
 ```typescript
@@ -228,11 +266,11 @@ export interface GridLiteCellContext<
 
 ## その他のリソース
 
-- [Column Configuration](column-configuration.md)
-- [Sorting](sorting.md)
-- [Filtering](filtering.md)
-- [Theming & Styling](theming.md)
+- [列の構成](column-configuration.md)
+- [ソート](sorting.md)
+- [フィルタリング](filtering.md)
+- [テーマ設定とスタイル設定](theming.md)
 
-Our community is active and always welcoming to new ideas.
+コミュニティに参加して新しいアイデアをご提案ください。
 
 - [{GridLiteTitle} **GitHub**]({GithubLinkLite})
diff --git a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
index 00edb5482e..505ee0388d 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
@@ -25,7 +25,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="WebComponents">
 
-Grid Lite は 無料のオープン ソースの JavaScript データ グリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。{Platform} Grid Lite は、高速で軽量なデータ表示を必要とする開発者向けに設計されています。
+Grid Lite は無料のオープン ソースの JavaScript データ グリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。{Platform} Grid Lite は、高速で軽量なデータ表示を必要とする開発者向けに設計されています。
 
 </PlatformBlock>
 
@@ -38,14 +38,14 @@ Grid Lite は 無料のオープン ソースの JavaScript データ グリッ
 ## インストールとセットアップ
 
 <PlatformBlock for="WebComponents">
-### Installation
-To install {GridLiteTitle}, go to the root folder of your project (where `package.json` is located) and run the following command using npm:
+### インストール
+{GridLiteTitle} をインストールするには、プロジェクトのルート フォルダー (`package.json` がある場所) に移動し、npm を使用して次のコマンドを実行します。
 
 ```cmd
 npm install igniteui-grid-lite --save
 ```
 
-Or using yarn:
+または、yarn を使用します。
 
 ```cmd
 yarn add igniteui-grid-lite
@@ -53,14 +53,14 @@ yarn add igniteui-grid-lite
 
 </PlatformBlock>
 <PlatformBlock for="React">
-### Installation
-To install {GridLiteTitle}, go to the root folder of your project (where `package.json` is located) and run the following command using npm:
+### インストール
+{GridLiteTitle} をインストールするには、プロジェクトのルート フォルダー (`package.json` がある場所) に移動し、npm を使用して次のコマンドを実行します。
 
 ```cmd
 npm install igniteui-react --save
 ```
 
-Or using yarn:
+または、yarn を使用します。
 
 ```cmd
 yarn add igniteui-react
@@ -68,10 +68,10 @@ yarn add igniteui-react
 
 </PlatformBlock>
 
-### インストール
+### {Platform} コードでの Grid Lite の使用
 
 <PlatformBlock for="React">
-In the file where you want to use Grid Lite, first we need to import it:
+Grid Lite を使用するファイルで、最初にインポートします。
 
 ```tsx
 import { IgrGridLite } from 'igniteui-react/grid-lite';
@@ -80,7 +80,7 @@ import { IgrGridLite } from 'igniteui-react/grid-lite';
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
-In the file where you want to use Grid Lite, import and register it before your component class or function is declared:
+Grid Lite を使用するファイルで、コンポーネント クラスまたは関数を宣言する前にインポートして登録します。
 
 ```ts
 import { IgcGridLite } from 'igniteui-grid-lite';
@@ -91,17 +91,17 @@ IgcGridLite.register();
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
-Get the element from the HTML in your TypeScript file by id:
+TypeScript ファイルで、HTML から id を指定して要素を取得します。
 
 ```ts
 const gridLite = document.getElementById('grid-lite') as IgcGridLite<ProductInfo>;
 ```
 
-Add the `<igc-grid-lite>` element to your markup:
+`<igc-grid-lite>` 要素をマークアップに追加します。
 </PlatformBlock>
 
 <PlatformBlock for="React">
-Add the `<IgrGridLite>` component to your markup:
+`<IgrGridLite>` コンポーネントをマークアップに追加します。
 
 ```tsx
 return (
@@ -127,41 +127,39 @@ return (
 
 <PlatformBlock for="Blazor">
 
-### {Platform} コードでの Grid Lite の使用
-
-Grid Lite を使用するファイルで、コンポーネント クラスまたは関数を宣言する前にインポートして登録します。
-
+### IgniteUI.Blazor.GridLite のインストール
 
+Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor.GridLite** NuGet パッケージを検索してインストールします。
 
-```tsx
-import { IgcGridLite } from 'igniteui-grid-lite';
+または、パッケージ マネージャー コンソール経由でインストールします。
 
-IgcGridLite.register();
+```cmd
+Install-Package IgniteUI.Blazor.GridLite
 ```
 
+または、.NET CLI 経由でインストールします。
 
-
-```ts
-import { IgcGridLite } from 'igniteui-grid-lite';
-
-IgcGridLite.register();
+```cmd
+dotnet add package IgniteUI.Blazor.GridLite
 ```
 
-### IgniteUI.Blazor.GridLite のインストール
+### Grid Lite の使用
 
-Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor.GridLite** NuGet パッケージを検索してインストールします。
+1 - **IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。
 
-```cmd
-Install-Package IgniteUI.Blazor.GridLite
+```razor
+@using IgniteUI.Blazor.Controls
 ```
 
-または、パッケージ マネージャー コンソール経由でインストールします。
+2 - プロジェクトの種類に応じて、適切な場所にスタイル シートを追加します。
 
-```cmd
-dotnet add package IgniteUI.Blazor.GridLite
+```razor
+<head>
+       <link href="_content/IgniteUI.Blazor.GridLite/css/themes/light/bootstrap.css" rel="stylesheet" />
+</head>
 ```
 
-または、.NET CLI 経由でインストールします。
+3 - Grid Lite コンポーネントを razor ページに追加します。
 
 ```razor
 <IgbGridLite Data="data" AutoGenerateColumns="true">
@@ -179,31 +177,27 @@ dotnet add package IgniteUI.Blazor.GridLite
 
 </PlatformBlock>
 
-## Grid Lite の使用
-<Sample src="/{GridLiteSample}/overview" height={600} alt="{Platform} {GridLiteTitle} メイン アプリ サンプル" />
-
-1 - **IgniteUI.Blazor.Controls** 名前空間を **_Imports.razor** ファイルに追加します。
-
 ## Grid Lite の動作
+<Sample src="/{GridLiteSample}/overview" height={600} alt="{Platform} {GridLiteTitle} メイン アプリ サンプル" />
 
 {GridLiteTitle} は、アプリで美しいデータ グリッド/データ テーブル体験を提供するために必要なコア機能を備えています。パフォーマンスと美しさを重視して設計されており、どのフレームワーク、どのプラットフォームでも動作します。
 
-## パフォーマンス内蔵
+## 優れたパフォーマンスを標準搭載
 
 行レベルの仮想化により、無制限のデータをスムーズなスクロールでレンダリングできます。
 
-<PlatformBlock for="WebComponents">
-
 ## 自動列タイプ
 
 列タイプは、データ ソースに基づいて自動的に生成され、各列タイプに合わせた組み込みのフィルタリングが提供されます。
 
-</PlatformBlock>
+<PlatformBlock for="WebComponents">
 
 ## カスタム列テンプレート
 
 列テンプレートを使用して、あらゆるタイプの UX を実現できます。思い描いたものを、グリッド列にそのまま描画できます。
 
+</PlatformBlock>
+
 ## インタラクティブ機能
 
 ユーザーが期待するすべてのコアなインタラクティブ機能を提供します: 列のフィルタリング、列の非表示、列のリサイズ、列のソートなどが含まれます。
@@ -216,15 +210,19 @@ Bootstrap、Material、Fluent 向けの組み込みテーマ ポートに加え
 
 Excel スタイルのフル キーボード ナビゲーションにより、大規模なデータセットでも高いパフォーマンスを維持しながら、ユーザーが期待する操作性を提供します。
 
-- MIT-licensed
+## Grid Lite は無料のオープン ソース {Platform} データ グリッドですか?
+
+はい。Ignite UI Grid Lite は、MIT ライセンスの下でリリースされた無料のオープン ソース {Platform} データ グリッドです。ライセンス料なしで、商用または個人のプロジェクトで使用できます。これは、Ignite UI をよりオープンで、透明性が高く、利用しやすいものにするための取り組みの一環です。
+
+- MIT ライセンス
 
-- Free for commercial use
+- 商用利用無料
 
-- Community-driven development
+- コミュニティ主導の開発
 
-- No feature gating
+- 機能制限なし
 
-However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free {Platform} data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.
+ただし、プロジェクトが拡大して複雑さや機能が増し、エンタープライズ グレードのアプリケーションが必要になった場合には、シームレスなアップグレード戦略を用意しています。これにより、無料の {Platform} データ グリッド (Grid Lite) からフル機能の高度な Data Grid への移行がよりシンプルかつ迅速になります。
 
 <PlatformBlock for="WebComponents, Blazor">
 

From 62049ee4c3827bbb694432c623a878ca1a54abc7 Mon Sep 17 00:00:00 2001
From: Galina Edinakova <gedinakova@infragistics.com>
Date: Fri, 10 Jul 2026 12:53:50 +0300
Subject: [PATCH 16/30] fix(*): Removed an obsolete section from Chart markers
 topic

---
 .../en/components/charts/features/chart-markers.mdx    | 10 ----------
 .../jp/components/charts/features/chart-markers.mdx    |  9 ---------
 2 files changed, 19 deletions(-)

diff --git a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
index d85a7e83de..30172b8e05 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
@@ -114,16 +114,6 @@ For `BubbleSeries`, the `MarkerSize` property does not override the bubble radiu
 
 <div class="divider--half"></div>
 
-## {Platform} Chart Checkmark Marker Type
-
-The {ProductName} charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
-
-You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
-
-The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
-
-<div class="divider--half"></div>
-
 ## {Platform} Chart Marker Templates
 
 In addition to marker properties, you can implement your own marker by setting a function to the  <ApiLink type="CategoryChart" member="markerTemplate" label="MarkerTemplate" /> property of a series rendered in the <ApiLink type="CategoryChart" /> control as it is demonstrated in example below.
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
index 522138bc9a..75159e1e81 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
@@ -107,15 +107,6 @@ import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro';
 </DocsAside>
 
 
-## {Platform} チャート チェックマーク マーカー タイプ
-
-{ProductName} チャートは、<ApiLink type="MarkerSeries" member="markerType" label="MarkerType" /> 列挙型に `Checkmark` オプションを含んでいます。このマーカーは、チャートのデータ ポイントに円の中に V 字型のチェックマーク アイコンを描画します。
-
-`Checkmark` マーカー タイプを個々のシリーズに適用するには、シリーズの <ApiLink type="MarkerSeries" member="markerType" label="MarkerType" /> プロパティを `MarkerType.Checkmark` に設定します。チャート内のすべてのシリーズに同時にチェックマーク形状を使用するには、チャートの <ApiLink type="CategoryChart" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> プロパティを `MarkerAutomaticBehavior.Checkmark` に設定します。
-
-`SeriesViewer.CheckmarkMarkerTemplate` プロパティは、チェックマーク マーカー タイプを持つシリーズに使用されるマーカー テンプレートを定義し、チャート全体の外観をカスタマイズするために使用できます。
-
-
 ## {Platform} チャート マーカー テンプレート
 
 以下の例に示すように、マーカー プロパティに加えて、<ApiLink type="CategoryChart" /> コントロールで描画されたシリーズの <ApiLink type="CategoryChart" member="markerTemplate" label="MarkerTemplate" /> プロパティに関数を設定することで、独自のマーカーを実装できます。

From d556fb9e1c29f9c69177d26227bb29096c9bf325 Mon Sep 17 00:00:00 2001
From: jsakamotoIGJP <jsakamoto@infragistics.com>
Date: Mon, 13 Jul 2026 13:16:47 +0900
Subject: [PATCH 17/30] fix(jp/grid-lite): fix misplaced platform blocks and
 unnatural phrasing

---
 .../jp/components/grid-lite/cell-template.mdx |   2 +-
 .../jp/components/grid-lite/sorting.mdx       |   4 +-
 .../jp/components/grid-lite/binding.mdx       |   6 +-
 .../jp/components/grid-lite/cell-template.mdx |   2 +-
 .../grid-lite/column-configuration.mdx        |  60 ++---
 .../jp/components/grid-lite/filtering.mdx     | 169 ++++++-------
 .../components/grid-lite/header-template.mdx  |  30 ++-
 .../jp/components/grid-lite/overview.mdx      |   2 +-
 .../jp/components/grid-lite/sorting.mdx       | 235 ++++++++++--------
 .../jp/components/grid-lite/theming.mdx       |   4 +-
 10 files changed, 271 insertions(+), 243 deletions(-)

diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
index 7c8bd32361..52e9309f83 100644
--- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
@@ -119,7 +119,7 @@ defineComponents(
 
 ## セル コンテキスト オブジェクト
 
-カスタム セル レンダラーには <ApiLink type="GridLiteCellTemplateContext" /> オブジェクトがパラメータｖとして渡され、以下のプロパティを持ちます。
+カスタム セル レンダラーには <ApiLink type="GridLiteCellTemplateContext" /> オブジェクトがパラメータとして渡され、以下のプロパティを持ちます。
 
 
 ```typescript
diff --git a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
index c9edaa6eed..55feca1061 100644
--- a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
@@ -113,7 +113,7 @@ type SortingExpression<T> = {
 
 Grid Lite は、ソート操作を API から適用するために 2 つの方法を提供します。`sort()`/`clearSort()` メソッドを使用するか、`sortingExpressions` プロパティを使用します。
 
-The `sort()` メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッド データをソートします。
+`sort()` メソッドは、単一式または複数のソート式の配列を受け取り、それらに基づいてグリッド データをソートします。
 
 ```typescript
 // 単一
@@ -126,7 +126,7 @@ grid.sort([
 ]);
 ```
 
-The `clearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。
+`clearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。
 
 ```typescript
 // `price` 列のソート状態をクリアします。
diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
index d3608fd6b4..680fef26c4 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
@@ -18,13 +18,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="React, WebComponents">
 
-{GridLiteTitle} は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。
+{GridLiteTitle} は、データ ソースとしてプレーン オブジェクトの配列を受け入れます。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の構成に基づいて制御されます。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-{GridLiteTitle} は、データ ソースとして `List<T>` を受け入れます。`T` はモデルを表します。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の設定に基づいて制御されます。
+{GridLiteTitle} は、データ ソースとして `List<T>` を受け入れます。`T` はモデルを表します。各グリッド行は配列内のデータ レコードをレンダリングしたもので、行のセルは列の構成に基づいて制御されます。
 
 </PlatformBlock>
 
@@ -172,7 +172,7 @@ return (
 
 </PlatformBlock>
 
-以下のサンプルでは、グリッドに列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。
+以下のサンプルでは、グリッドで列の自動生成が有効になっています。データ切り替えボタンをクリックすると、列コレクションがリセットされ、新しいデータ ソースがグリッドにバインドされます。
 
 <Sample src="/{GridLiteSample}/data-binding" height={600} alt="{Platform} {GridLiteTitle} データ バインディング" />
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
index 9b147b4b2e..b5fe4a4dbe 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
@@ -226,7 +226,7 @@ export interface GridLiteCellContext<
   K extends Keys<T> = Keys<T>
 > {
   /**
-   * テンプレートのセル要素の親要素です。
+   * テンプレートの親であるセル要素です。
    */
   parent: GridLiteCell<T>;
   /**
diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
index 19be019560..80c48978b1 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
@@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="React, WebComponents">
 
-列は、グリッド内の列子コンポーネントを使用して宣言的に定義されます。グリッド行内の関連データをマッピングしてレンダリングするためにも使用されます。`field` プロパティは、列識別子として機能するため、列に必須の唯一のプロパティです。
+列は、グリッド内の列子コンポーネントを使用して宣言的に定義されます。`field` プロパティは、列識別子として機能するため、列で唯一の必須プロパティです。また、グリッド行内の関連データをマッピングしてレンダリングするために使用されるプロパティでもあります。
 
 </PlatformBlock>
 
@@ -42,14 +42,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn
       field="account"
       header="Account Number"
       ...
-    ></igc-grid-lite-column>
-    <!-- 追加の列が続きます -->
-  </igc-grid-lite>
+    ></IgrGridLiteColumn>
+    {/* 追加の列が続きます */}
+  </IgrGridLite>
 );
 ```
 
@@ -57,7 +57,7 @@ return (
 
 <PlatformBlock for="Blazor">
 
-Columns are defined declaratively using `<IgbGridLiteColumn>` child elements within the grid. The <ApiLink type="Column" member="field" label="Field" /> property is the only required for a column, as it serves as the column identifier. It is also the property that is used to map and render the relevant data in the grid rows.
+列は、グリッド内の `<IgbGridLiteColumn>` 子要素を使用して宣言的に定義されます。<ApiLink type="Column" member="field" label="Field" /> プロパティは、列識別子として機能するため、列で唯一の必須プロパティです。また、グリッド行内の関連データをマッピングしてレンダリングするために使用されるプロパティでもあります。
 
 ```razor
 <IgbGridLite Data="@products">
@@ -69,9 +69,9 @@ Columns are defined declaratively using `<IgbGridLiteColumn>` child elements wit
 </IgbGridLite>
 ```
 
-## データ ソースに基づく設定
+## データ ソースに基づく構成
 
-グリッドは、`AutoGenerate` が true に設定されている場合、提供されたデータ ソースに基づいて列の構成を推測することをサポートします。データ内のレコードに基づいて、適切な <ApiLink type="Column" member="field" label="Field" /> および <ApiLink type="Column" member="dataType" label="DataType" /> プロパティを推測しようとします。
+グリッドは、`AutoGenerate` が true に設定されている場合、提供されたデータ ソースに基づいて列の構成を推論することをサポートします。データ内のレコードに基づいて、適切な <ApiLink type="Column" member="field" label="Field" /> および <ApiLink type="Column" member="dataType" label="DataType" /> プロパティを推論しようとします。
 
 ```razor
 <IgbGridLite AutoGenerate=true Data="@products"/>
@@ -101,9 +101,9 @@ Columns are defined declaratively using `<IgbGridLiteColumn>` child elements wit
 
 <PlatformBlock for="React, WebComponents">
 
-## データ ソースに基づく設定
+## データ ソースに基づく構成
 
-グリッドは、`autoGenerate` が true に設定されている場合、提供されたデータ ソースに基づいて列の構成を推測することをサポートします。データ内のレコードに基づいて、適切な `field` および `dataType` プロパティを推測しようとします。
+グリッドは、`autoGenerate` が true に設定されている場合、提供されたデータ ソースに基づいて列の構成を推論することをサポートします。データ内のレコードに基づいて、適切な `field` および `dataType` を推論しようとします。
 
 ```typescript
 const data: Record[] = [
@@ -127,7 +127,7 @@ const data: Record[] = [
 
 ```tsx
 return (
-  <igc-grid-lite data={data} auto-generate></igc-grid-lite>
+  <IgrGridLite data={data} autoGenerate={true}></IgrGridLite>
 );
 ```
 
@@ -152,11 +152,11 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column field="entryId" data-type="string"></igc-grid-lite-column>
-    <igc-grid-lite-column field="source" data-type="string"></igc-grid-lite-column>
-    <igc-grid-lite-column field="ts" data-type="number"></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn field="entryId" dataType="string"></IgrGridLiteColumn>
+    <IgrGridLiteColumn field="source" dataType="string"></IgrGridLiteColumn>
+    <IgrGridLiteColumn field="ts" dataType="number"></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -176,7 +176,7 @@ return (
 
 追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。
 
-## 追加の列設定
+## 追加の列の構成
 
 列は、カスタマイズのためのいくつかのプロパティを公開します:
 
@@ -203,9 +203,9 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite>
-    <igc-grid-lite-column field="price" width="250px"></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite>
+    <IgrGridLiteColumn field="price" width="250px"></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -222,7 +222,7 @@ return (
 
 </PlatformBlock>
 
-このプロパティは<a href="https://developer.mozilla.org/ja-jp/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages" target="_blank">有効な CSS 長さ単位</a>を受け入れます.
+このプロパティは<a href="https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages" target="_blank">有効な CSS 長さ単位</a>を受け入れます。
 
 ### 列の非表示
 
@@ -245,9 +245,9 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite>
-    <igc-grid-lite-column field="price" hidden></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite>
+    <IgrGridLiteColumn field="price" hidden></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -285,9 +285,9 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite>
-    <igc-grid-lite-column field="price" resizable></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite>
+    <IgrGridLiteColumn field="price" resizable></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -304,10 +304,10 @@ return (
 
 </PlatformBlock>
 
-列がサイズ変更可能に設定されている場合、列ヘッダー右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。
+列がサイズ変更可能に設定されている場合、列ヘッダーの右端をドラッグして幅を増減できます。リサイズ領域をダブルクリックすると、自動調整がトリガーされ、セルやヘッダーの最大コンテンツに合わせて幅が設定されます。
 
 <DocsAside type="info" title="情報">
-「流動的」幅 (fr、%、など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。
+「流動的」幅 (fr、% など) の列は、グリッドのリサイズ時に予期せぬ動作をする場合があります。アプリケーションのシナリオによっては、ユーザーがレイアウトのズレを経験しないように、「固定」単位を使用する方がよい場合があります。
 </DocsAside>
 
 以下のサンプルでは、さまざまな列プロパティと、それがレンダリングされたグリッドにどのように反映されるかを試すことができます。
diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
index ddf634a619..c19074f237 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
@@ -42,9 +42,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column field="price" filterable></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn field="price" filterable></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -68,7 +68,7 @@ return (
 
 <PlatformBlock for="React">
 
-`FilteringCaseSensitive` パラメーターを使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます:
+`filteringCaseSensitive` プロパティを使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます:
 
 </PlatformBlock>
 
@@ -89,13 +89,13 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column 
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn 
       field="price" 
       filterable
-      filtering-case-sensitive
-    ></igc-grid-lite-column>
-  </igc-grid-lite>
+      filteringCaseSensitive
+    ></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -103,7 +103,7 @@ return (
 
 <PlatformBlock for="Blazor">
 
-You can also control whether the filter operations for string columns should be case sensitive by using the `FilteringCaseSensitive` parameter:
+`FilteringCaseSensitive` パラメーターを使用して、文字列列のフィルター操作で大文字と小文字を区別するかどうかを制御することもできます:
 
 ```razor
 <IgbGridLiteColumn 
@@ -130,6 +130,7 @@ You can also control whether the filter operations for string columns should be
 
 </PlatformBlock>
 
+<PlatformBlock for="React, WebComponents">
 
 ```typescript
 export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
@@ -146,16 +147,16 @@ export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
    * フィルター条件関数で使用されるフィルター値です。
    *
    * @remarks
-   * フィルター条件関数で使用されるフィルター値です。
+   * 単項条件の場合はオプションです。
    */
   searchTerm?: T[K];
   /**
-   * この式が他の式と関係してフィルター操作でどのように解決されるべきか
+   * この式がフィルター操作において他の式との関係でどのように解決されるべきか
    * を指定します。
    */
   criteria?: FilterCriteria;
   /**
-   * ソート操作で大文字と小文字を区別するかどうかを指定します。
+   * フィルター操作で大文字と小文字を区別するかどうかを指定します。
    *
    * @remarks
    * 指定されていない場合、値は列のフィルター構成 (存在する場合) に基づいて解決されます。
@@ -164,9 +165,11 @@ export interface FilterExpression<T, K extends Keys<T> = Keys<T>> {
 }
 ```
 
+</PlatformBlock>
+
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 public class IgbGridLiteFilterExpression
 {
     /// <summary>
@@ -176,7 +179,7 @@ public class IgbGridLiteFilterExpression
     public string Key { get; set; }
 
     /// <summary>
-    /// 適用するフィルター条件です。条件名 (string) または FilterOperation を指定できます。 // TODO
+    /// 適用するフィルター条件です。条件名 (string) または FilterOperation を指定できます。
     /// </summary>
     [JsonPropertyName("condition")]
     public object Condition { get; set; }
@@ -199,7 +202,7 @@ public class IgbGridLiteFilterExpression
     public string Criteria { get; set; } // "and" または "or"
 
     /// <summary>
-    /// フィルター操作が大文字小文字を区別するかどうかを指定します。
+    /// フィルター操作で大文字と小文字を区別するかどうかを指定します。
     /// 指定されていない場合、値は列のフィルター構成に基づいて解決されます。
     /// </summary>
     [JsonPropertyName("caseSensitive")]
@@ -214,7 +217,7 @@ public class IgbGridLiteFilterExpression
 
 <PlatformBlock for="React, WebComponents">
 
-{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.filter()`/`GridLite.clearFilter()`メソッドまたは `Grid.Lite.filterExpressions` プロパティのいずれかを使用します。
+{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.filter()`/`GridLite.clearFilter()` メソッドまたは <ApiLink type="GridLite" member="filterExpressions" label="GridLite.filterExpressions" /> プロパティのいずれかを使用します。
 
 `filter()` メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッド データをフィルターします。
 
@@ -222,7 +225,7 @@ public class IgbGridLiteFilterExpression
 
 <PlatformBlock for="Blazor">
 
-{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.Filter()`/`GridLite.ClearFilter()`メソッドまたは `Grid.Lite.FilterExpressions` プロパティのいずれかを使用します。
+{GridLiteTitle} は、API からフィルター操作を適用する 2 つの方法を提供します。`GridLite.Filter()`/`GridLite.ClearFilter()` メソッドまたは <ApiLink type="GridLite" member="filterExpressions" label="GridLite.FilterExpressions" /> プロパティのいずれかを使用します。
 
 `Filter()` メソッドは、単一の式またはフィルター式の配列を受け入れ、それらの式に基づいてグリッド データをフィルターします。
 
@@ -238,7 +241,7 @@ grid.filter({ key: 'firstName', condition: 'contains', searchTerm: 'George' });
 // 複数
 grid.filter([
   { key: 'firstName', condition: 'startsWith', searchTerm: 'a' },
-  { key: 'firstName', condition: 'startsWith' searchTerm: 'g', criteria: 'or' },
+  { key: 'firstName', condition: 'startsWith', searchTerm: 'g', criteria: 'or' },
 ]);
 ```
 
@@ -247,28 +250,31 @@ grid.filter([
 <PlatformBlock for="React">
 
 
-```razor
+```typescript
 // 単一
-await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "contains", SearchTerm = "George" });
+gridRef.current.filter({ key: 'firstName', condition: 'contains', searchTerm: 'George' });
 
 // 複数
-await grid.Filter(new IgbGridLiteFilterExpression[]
-{
-    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" },
-    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" }
-});
+gridRef.current.filter([
+  { key: 'firstName', condition: 'startsWith', searchTerm: 'a' },
+  { key: 'firstName', condition: 'startsWith', searchTerm: 'g', criteria: 'or' },
+]);
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-```typescript
-// `age` 列のフィルター状態をクリアします。
-grid.clearFilter('age');
+```csharp
+// 単一
+await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "contains", SearchTerm = "George" });
 
-// グリッドのフィルター状態をクリアします。
-grid.clearFilter();
+// 複数
+await grid.Filter(new IgbGridLiteFilterExpression[]
+{
+    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" },
+    new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" }
+});
 ```
 
 </PlatformBlock>
@@ -288,12 +294,12 @@ grid.clearFilter();
 <PlatformBlock for="WebComponents">
 
 
-```razor
-// `Age` 列のフィルター状態をクリアします。
-grid.ClearFilter("Age");
+```typescript
+// `age` 列のフィルター状態をクリアします。
+grid.clearFilter('age');
 
 // グリッドのフィルター状態をクリアします。
-grid.ClearFilter();
+grid.clearFilter();
 ```
 
 </PlatformBlock>
@@ -302,10 +308,10 @@ grid.ClearFilter();
 
 
 ```typescript
-// Clear the filter state for the `age` column.
+// `age` 列のフィルター状態をクリアします。
 gridRef.current.clearFilter('age');
 
-// Clear the filter state of the grid.
+// グリッドのフィルター状態をクリアします。
 gridRef.current.clearFilter();
 ```
 
@@ -313,11 +319,11 @@ gridRef.current.clearFilter();
 
 <PlatformBlock for="Blazor">
 
-```razor
-// Clear the filter state for the `Age` column.
+```csharp
+// `Age` 列のフィルター状態をクリアします。
 grid.ClearFilter("Age");
 
-// Clear the filter state of the grid.
+// グリッドのフィルター状態をクリアします。
 grid.ClearFilter();
 ```
 
@@ -327,7 +333,7 @@ grid.ClearFilter();
 
 <PlatformBlock for="Blazor">
 
-`FilterExpressions` プロパティの動作は、`Filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。
+`FilterExpressions` プロパティの動作は、`Filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なのは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。
 
 例:
 
@@ -346,16 +352,16 @@ private IgbGridLiteFilterExpression[] filterState = new[]
 
 <PlatformBlock for="React, WebComponents">
 
-`filterExpressions` プロパティの動作は、`filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。
+`filterExpressions` プロパティの動作は、`filter()` メソッド呼び出しと非常に似ています。これはグリッド内のフィルター状態を制御する宣言的な方法を公開していますが、最も便利なのは、{GridLiteTitle} コンポーネントが最初にレンダリングされるときに初期フィルター状態を設定できることです。
 
 <PlatformBlock for="WebComponents">
-For example here is a Lit-based sample:
+たとえば、Lit ベースのサンプルを次に示します。
 
 ```typescript
 {
   filterState: FilterExpression<User>[] = [
     { key: 'age', condition: 'greaterThan', searchTerm: 21 },
-    /** unary condition so `searchTerm` is not required */
+    /** 単項条件のため `searchTerm` は不要です。 */
     { key: 'active', condition: 'true' },
   ];
 
@@ -367,12 +373,12 @@ For example here is a Lit-based sample:
 
 </PlatformBlock>
 <PlatformBlock for="React">
-Here is an example:
+例を次に示します。
 
 ```tsx
 const filterState: FilterExpression<User>[] = [
   { key: 'age', condition: 'greaterThan', searchTerm: 21 },
-  /** unary condition so `searchTerm` is not required */
+  /** 単項条件のため `searchTerm` は不要です。 */
   { key: 'active', condition: 'true' },
 ];
 
@@ -385,23 +391,15 @@ return(
 
 </PlatformBlock>
 
-たとえば、Lit ベースのサンプルを次に示します。
+このプロパティを使用してコンポーネントの現在のフィルター状態を取得し、アプリケーション内の別の状態に応じて追加の処理を行うこともできます。
 
 <PlatformBlock for="WebComponents">
 
 
 ```typescript
-{
-  filterState: FilterExpression<User>[] = [
-    { key: 'age', condition: 'greaterThan', searchTerm: 21 },
-    /** 単項条件のため `searchTerm` は不要です。 */
-    { key: 'active', condition: 'true' },
-  ];
-
-  render() {
-    return html`<igc-grid-lite .filterExpressions=${filterState}></igc-grid-lite>`
-  }
-}
+const state = grid.filterExpressions;
+// 現在のフィルター状態を保存します。
+saveUserFilterState(state);
 ```
 
 </PlatformBlock>
@@ -410,7 +408,7 @@ return(
 
 
 ```typescript
-const state = grid.filterExpressions;
+const state = gridRef.current.filterExpressions;
 // 現在のフィルター状態を保存します。
 saveUserFilterState(state);
 ```
@@ -419,7 +417,7 @@ saveUserFilterState(state);
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 var state = grid.FilterExpressions;
 // 現在のフィルター状態を保存します。
 SaveUserFilterState(state);
@@ -431,7 +429,7 @@ SaveUserFilterState(state);
 
 <PlatformBlock for="React, WebComponents">
 
-UI を通じてフィルター操作が実行されると、コンポーネントはカスタム `filtering` イベントを発行します。`detail` プロパティは、{GridLiteTitle} によって適用されるソート式です。イベントはキャンセル可能であり、キャンセルされると現在のフィルター操作が防止されます。
+UI を通じてフィルター操作が実行されると、コンポーネントはカスタム `filtering` イベントを発行します。`detail` プロパティは、{GridLiteTitle} によって適用されるフィルター式です。イベントはキャンセル可能で、キャンセルすると現在のフィルター操作が停止します。
 
 グリッドが新しいフィルター状態を適用すると、`filtered` イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。
 
@@ -439,9 +437,9 @@ UI を通じてフィルター操作が実行されると、コンポーネン
 
 <PlatformBlock for="Blazor">
 
-UI を介してソート操作が実行されると、コンポーネントは `Filtering` および `Filtered` イベントを発生させます。`Filtering` イベントはキャンセル可能であり、キャンセルされると現在のフィルター操作が防止されます。
+UI を通じてフィルター操作が実行されると、コンポーネントは `Filtering` および `Filtered` イベントを発生させます。`Filtering` イベントはキャンセル可能で、キャンセルすると現在のフィルター操作が停止します。
 
-グリッドが新しいソート状態を適用した後、`Filtered` イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。
+グリッドが新しいフィルター状態を適用すると、`Filtered` イベントが発生します。対象列のフィルター状態を含み、このイベントはキャンセルできません。
 
 </PlatformBlock>
 
@@ -458,20 +456,9 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 <PlatformBlock for="React">
 
 
-```razor
-<IgbGridLite Filtering="OnFiltering" Filtered="OnFiltered" />
-
-@code {
-    private void OnFiltering(IgbGridLiteFilteringEventArgs args)
-    {
-        // filtering イベントの処理
-    }
-
-    private void OnFiltered(IgbGridLiteFilteredEventArgs args)
-    {
-        // filtered イベントの処理
-    }
-}
+```typescript
+gridRef.current.addEventListener('filtering', (event: CustomEvent<GridLiteFilteringEvent<T>>) => { ... });
+gridRef.current.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>) => { ... });
 ```
 
 </PlatformBlock>
@@ -484,12 +471,12 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 @code {
     private void OnFiltering(IgbGridLiteFilteringEventArgs args)
     {
-        // Handle filtering event
+        // filtering イベントを処理します
     }
 
     private void OnFiltered(IgbGridLiteFilteredEventArgs args)
     {
-        // Handle filtered event
+        // filtered イベントを処理します
     }
 }
 ```
@@ -504,20 +491,20 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 
 フィルタリングをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、{GridLiteTitle} は、この動作を実装およびカスタマイズできるフックを公開します。
 <PlatformBlock for="React, WebComponents">
-Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a <ApiLink type="DataPipelineParams" /> object.
+`dataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
 ```typescript
 export type DataPipelineParams<T extends object> = {
   /**
-   * The current data state of the grid.
+   * グリッドの現在のデータ状態です。
    */
   data: T[];
   /**
-   * The grid component itself.
+   * グリッド コンポーネント自体です。
    */
   grid: GridLite<T>;
   /**
-   * The type of data operation being performed.
+   * 実行されるデータ操作の種類です。
    */
   type: 'sort' | 'filter';
 };
@@ -536,22 +523,22 @@ gridRef.current.dataPipelineConfiguration = { filter: (params: DataPipelineParam
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-Using the <ApiLink type="DataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a filter operation is about to run. The callback is passed a <ApiLink type="DataPipelineParams" /> object.
+<ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
 ```razor
 public class DataPipelineParams
 {
     /// <summary>
-    /// The current data state of the grid.
+    /// グリッドの現在のデータ状態です。
     /// </summary>
     [JsonPropertyName("data")]
     public object[] Data { get; set; }
 
     /// <summary>
-    /// The type of data operation being performed.
+    /// 実行されるデータ操作の種類です。
     /// </summary>
     [JsonPropertyName("type")]
-    public string Type { get; set; } // "sort" or "filter"
+    public string Type { get; set; } // "sort" または "filter"
 }
 ```
 
@@ -560,7 +547,7 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
 {
     Filter = async (params) =>
     {
-        // Custom filter logic
+        // カスタム フィルター ロジック
         return await Task.FromResult(params.Data);
     }
 };
@@ -568,16 +555,14 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
 
 </PlatformBlock>
 
-`dataPipelineConfiguration` プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
-
+カスタム コールバックは非同期にすることができ、グリッドは解決されるまでコールバックを待機します。
 
+次の例では、コンポーネントのフィルター状態に基づいて生成される REST エンドポイントを反映して、リモート フィルター操作をモックしています。
 
 <Sample src="/{GridLiteSample}/filtering-config-remote" height={600} alt="{Platform} {GridLiteTitle} フィルタリング リモート構成" />
 
 </PlatformBlock>
 
-<ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、フィルター操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
-
 <PlatformBlock for="WebComponents, Blazor">
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
index 7190e5dada..cae3302c46 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
@@ -9,6 +9,7 @@ _language: ja
 llms:
   description: "セル テンプレートと同様に、列ヘッダーも目的のユース ケースに合わせてカスタマイズできます。"
 ---
+import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
 import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
 import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
@@ -21,7 +22,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="React, WebComponents">
 デフォルトでは、列はラベル テキストに `field` プロパティを使用します。ラベルをカスタマイズするには、`header` プロパティをより人間が読みやすい形式に設定します。
-
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
@@ -36,16 +36,16 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ```tsx
 return (
-  <igc-grid-lite>
-    <igc-grid-lite-column field="price" header="Price per item"></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite>
+    <IgrGridLiteColumn field="price" header="Price per item"></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-
+デフォルトでは、列はラベル テキストに <ApiLink type="Column" member="field" label="Field" /> プロパティを使用します。ラベルをカスタマイズするには、<ApiLink type="Column" member="header" label="Header" /> プロパティをより人間が読みやすい形式に設定します。
 
 
 ```razor
@@ -55,7 +55,9 @@ return (
 
 </PlatformBlock>
 
-デフォルトでは、列はラベル テキストに <ApiLink type="Column" member="field" label="Field" /> プロパティを使用します。ラベルをカスタマイズするには、<ApiLink type="Column" member="header" label="Header" /> プロパティをより人間が読みやすい形式に設定します。
+<DocsAside type="info" title="情報">
+`headerTemplate` が指定されている場合、`header` は無視されます。
+</DocsAside>
 
 ## ヘッダー テンプレートによるカスタマイズ
 
@@ -76,9 +78,17 @@ column.headerTemplate = () => html`<h3>⭐ Rating ⭐</h3>`;
 <PlatformBlock for="React">
 
 
-```razor
-<!-- Templates TBD in Blazor -->
-<IgbGridLiteColumn Field="Rating"></IgbGridLiteColumn>
+```tsx
+const ratingHeaderTemplate = (ctx: IgrHeaderContext) => (
+  <h3>{"⭐ Rating ⭐"}</h3>
+);
+
+
+return (
+  <IgrGridLite>
+    <IgrGridLiteColumn field="rating" headerTemplate={ratingHeaderTemplate}></IgrGridLiteColumn>
+  </IgrGridLite>
+);
 ```
 
 </PlatformBlock>
@@ -118,6 +128,6 @@ column.headerTemplate = () => html`<h3>⭐ Rating ⭐</h3>`;
 - [セル テンプレート](cell-template.md)
 - [テーマ設定とスタイル設定](theming.md)
 
-Our community is active and always welcoming to new ideas.
+コミュニティに参加して新しいアイデアをご提案ください。
 
 - [{GridLiteTitle} **GitHub**]({GithubLinkLite})
diff --git a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
index 505ee0388d..5125127d31 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
@@ -1,6 +1,6 @@
 ---
 title: 無料の {Platform} Data {GridLiteTitle} (オープン ソース) - Ignite UI Grid Lite | MIT ライセンス
-description: オープン ソースの {GridLiteTitle} を使用してアプリを作成できます。軽量でありながら、フィルタリング、非表示、ソート など、必要な機能がすべて搭載されています。今すぐお試しください。
+description: オープン ソースの {GridLiteTitle} を使用してアプリを作成できます。軽量でありながら、フィルタリング、非表示、ソートなど、必要な機能がすべて搭載されています。今すぐお試しください。
 keywords: overview, {Platform}, {ComponentKeywords}, {ProductName}, Infragistics, 概要, インフラジスティックス
 mentionedTypes: [{ComponentApiMembers}]
 namespace: Infragistics.Controls
diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
index 951df5fff1..f5430b148a 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
@@ -18,13 +18,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <PlatformBlock for="React, WebComponents">
 
-{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、`sortable` プロパティで明示的に設定されない限り、列のソートは無効です。
+{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、列の `sortable` プロパティで明示的に設定されない限り、列のソートは無効です。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、`sortable` プロパティで明示的に設定されない限り、列のソートは無効です。
+{GridLiteTitle} はデータ ソースに対してソート操作をサポートします。ソートは列単位で制御され、ソート可能な列とソート不可の列を設定できます。グリッド自体も特定のソート動作を制御します。デフォルトでは、列の <ApiLink type="Column" member="sortable" label="Sortable" /> プロパティで明示的に設定されない限り、列のソートは無効です。
 
 </PlatformBlock>
 
@@ -43,9 +43,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column field="price" sortable></igc-grid-lite-column>
-  </igc-grid-lite>
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn field="price" sortable></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -69,7 +69,7 @@ return (
 
 <PlatformBlock for="React">
 
-カスタム比較ロジックの場合は、`comparer` 関数を使用して `sortConfiguration` プロパティを設定します:
+`sortingCaseSensitive` プロパティを使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます。
 
 </PlatformBlock>
 
@@ -90,13 +90,13 @@ return (
 
 ```tsx
 return (
-  <igc-grid-lite data={data}>
-    <igc-grid-lite-column 
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn 
       field="name" 
       sortable
-      sorting-case-sensitive
-    ></igc-grid-lite-column>
-  </igc-grid-lite>
+      sortingCaseSensitive
+    ></IgrGridLiteColumn>
+  </IgrGridLite>
 );
 ```
 
@@ -104,7 +104,7 @@ return (
 
 <PlatformBlock for="WebComponents">
 
-`SortingCaseSensitive` パラメーターを使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます:
+カスタム比較ロジックの場合は、`comparer` 関数を使用して `sortConfiguration` プロパティを設定します:
 
 ```typescript
 const column = document.querySelector('igc-grid-lite-column[field="name"]');
@@ -121,20 +121,31 @@ column.sortConfiguration = {
 
 <PlatformBlock for="React">
 
-For custom comparison logic, set the `sortConfiguration` property with a `comparer` function:
+カスタム比較ロジックの場合は、`comparer` 関数を使用して `sortConfiguration` プロパティを設定します:
 
-```razor
-<IgbGridLiteColumn 
-    Field="Name" 
-    Sortable="true"
-    SortingCaseSensitive="true" />
+```tsx
+/**
+ * この列のソート操作に使用されるカスタム比較関数を指定します。
+ * 次のサンプルでは、`name` の値をその長さに基づいて比較します。
+ */
+return (
+  <IgrGridLite data={data}>
+    <IgrGridLiteColumn 
+      field="name" 
+      sortable
+      sortConfiguration={{
+        comparer: (a: string, b: string) => a.length - b.length
+      }}
+    ></IgrGridLiteColumn>
+  </IgrGridLite>
+);
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-You can also control whether the sort operations for string columns should be case sensitive by using the `SortingCaseSensitive` parameter:
+`SortingCaseSensitive` パラメーターを使用して、文字列列のソート操作で大文字と小文字を区別するかどうかを制御することもできます:
 
 ```razor
 <IgbGridLiteColumn 
@@ -151,13 +162,13 @@ You can also control whether the sort operations for string columns should be ca
 
 <PlatformBlock for="React, WebComponents">
 
-{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列はデフォルトで有効で、グリッドの `sortingOptions` プロパティを通じて設定可能です。`mode` プロパティは、値として `'single'` または `'multiple'` を受け入れます。
+{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列ソートはデフォルトで有効で、グリッドの `sortingOptions` プロパティを通じて設定可能です。`mode` プロパティは、値として `'single'` または `'multiple'` を受け入れます。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列はデフォルトで有効で、グリッドの <ApiLink type="SortingOptions" /> プロパティを通じて設定可能です。<ApiLink type="SortingOptions" member="mode" label="Mode" /> プロパティは、値として <ApiLink type="GridLiteSortingMode" member="Single" label="GridLiteSortingMode.Single" /> または <ApiLink type="GridLiteSortingMode" member="Multiple" label="GridLiteSortingMode.Multiple" /> を受け入れます。
+{GridLiteTitle} は単一および複数列ソートの両方をサポートします。複数列ソートはデフォルトで有効で、グリッドの <ApiLink type="SortingOptions" /> プロパティを通じて設定可能です。<ApiLink type="SortingOptions" member="mode" label="Mode" /> プロパティは、値として <ApiLink type="GridLiteSortingMode" member="Single" label="GridLiteSortingMode.Single" /> または <ApiLink type="GridLiteSortingMode" member="Multiple" label="GridLiteSortingMode.Multiple" /> を受け入れます。
 
 </PlatformBlock>
 
@@ -174,28 +185,31 @@ grid.sortingOptions = { mode: 'single' };
 <PlatformBlock for="React">
 
 
-```razor
+```tsx
 // 単一列のソートを有効にします
-grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode.Single };
+gridRef.current.sortingOptions = { mode: 'single' };
+
+// または JSX 内で直接指定します
+<IgrGridLite sortingOptions={{ mode: 'single' }}/>
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-```razor
-// Enable single-column sorting
+```csharp
+// 単一列のソートを有効にします
 grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode.Single };
 ```
 
 </PlatformBlock>
 
 <DocsAside type="info" title="情報">
-単一/複数列ソートの動作は、ユーザーが {GridLiteTitle} を操作する方法を制御します。API で複数の式によるソートを実行しても、単一ソートが有効な場合でも動作します。
+単一/複数列ソートの動作は、エンド ユーザーが {GridLiteTitle} を操作する方法を制御します。単一ソートが有効な場合でも、API を介した複数の式によるソートは引き続き機能します。
 </DocsAside>
 
 ### 3 状態ソート
-{GridLiteTitle} は 3 状態ソートをサポートしており、常に有効になっています。エンド ユーザーはソート可能な列ヘッダーをクリックすると、次の方向状態を順番に切り替えます:
+{GridLiteTitle} は 3 状態ソートをサポートしており、常に有効になっています。エンド ユーザーがソート可能な列ヘッダーをクリックすると、ソート方向が次の順序で切り替わります:
 
 <PlatformBlock for="React, WebComponents">
 
@@ -204,7 +218,7 @@ grid.SortingOptions = new IgbGridLiteSortingOptions { Mode = GridLiteSortingMode
 ascending -> descending -> none -> ascending
 ```
 
-`none` はデータの初期状態で、グリッドによるソートが適用されていません。
+`none` はデータの初期状態、つまりグリッドによるソートが適用されていない状態です。
 
 </PlatformBlock>
 
@@ -215,13 +229,13 @@ ascending -> descending -> none -> ascending
 Ascending -> Descending -> None -> Ascending
 ```
 
-`None` はデータの初期状態で、グリッドによるソートが適用されていません。
+`None` はデータの初期状態、つまりグリッドによるソートが適用されていない状態です。
 
 </PlatformBlock>
 
 ### ソート インジケーター
 
-複数列ソートが有効な場合、列ヘッダーにはソートインジケーターが表示されます。これはソート操作が適用された順序を示す番号です。
+複数列ソートが有効な場合、列ヘッダーにはソート インジケーターが表示されます。これはソート操作が適用された順序を示す番号です。
 
 <PlatformBlock for="React, WebComponents">
 
@@ -241,16 +255,17 @@ Ascending -> Descending -> None -> Ascending
 
 <PlatformBlock for="React, WebComponents">
 
-{GridLiteTitle} におけるソート操作の基本単位は <ApiLink type="IgbGridLiteSortingExpression" /> で、以下のプロパティを持ちます:
+{GridLiteTitle} におけるソート操作の基本単位は `SortingExpression<T>` で、以下のプロパティを持ちます:
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-グリッドはこれらの式をソート API メソッドや設定で使用し、ユーザー操作時にイベントやソート状態を生成します。詳細は以下を参照してください。
+{GridLiteTitle} におけるソート操作の基本単位は <ApiLink type="IgbGridLiteSortingExpression" /> で、以下のプロパティを持ちます:
 
 </PlatformBlock>
 
+<PlatformBlock for="React, WebComponents">
 
 ```typescript
 type SortingExpression<T> = {
@@ -263,7 +278,7 @@ type SortingExpression<T> = {
    */
   direction: 'ascending' | 'descending' | 'none';
   /**
-   * 操作を大文字と小文字を区別するかどうかを指定します。デフォルトの string タイプに適用されます。
+   * 大文字と小文字を区別して操作するかどうかを指定します。デフォルトの string タイプに適用されます。
    * 明示的に渡されていない場合、該当する列のソート設定の値が使用されます。
    */
   caseSensitive?: boolean;
@@ -275,9 +290,11 @@ type SortingExpression<T> = {
 };
 ```
 
+</PlatformBlock>
+
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 public class IgbGridLiteSortingExpression
 {
     /// <summary>
@@ -304,8 +321,7 @@ public class IgbGridLiteSortingExpression
 
 </PlatformBlock>
 
-The grid consumes these expressions for its sort API methods and configuration and produces them for events and its sorting state when
-an end-user interacts with the component. See below for additional information.
+グリッドはこれらの式をソート API メソッドや構成で使用するほか、エンド ユーザーがコンポーネントを操作したときには、イベントやソート状態のためにこれらの式を生成します。詳細は以下を参照してください。
 
 ## ソート API
 
@@ -344,53 +360,56 @@ grid.sort([
 <PlatformBlock for="React">
 
 
-```razor
+```typescript
 // 単一
-await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending });
+gridRef.current.sort({ key: 'price', direction: 'descending' });
 
 // 複数
-await grid.Sort(new IgbGridLiteSortingExpression[]
-{
-    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
-    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }
-});
+gridRef.current.sort([
+  { key: 'price', direction: 'descending' },
+  { key: 'name', direction: 'descending' },
+]);
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-```typescript
-// `price` 列のソート状態をクリアします。
-grid.clearSort('price');
+```csharp
+// 単一
+await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending });
 
-// グリッドのソート状態をクリアします。
-grid.clearSort();
+// 複数
+await grid.Sort(new IgbGridLiteSortingExpression[]
+{
+    new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending },
+    new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }
+});
 ```
 
 </PlatformBlock>
 
 <PlatformBlock for="React, WebComponents">
 
-`clearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。
+`clearSort()` メソッドは、その名の通り、渡された引数に応じて、単一列またはグリッド コンポーネント全体のソート状態をクリアします。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-`ClearSort()` メソッドは、その名の通り、単一列またはグリッド全体のソート状態をクリアします。引数に応じて挙動が変わります。
+`ClearSort()` メソッドは、その名の通り、渡された引数に応じて、単一列またはグリッド コンポーネント全体のソート状態をクリアします。
 
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
 
 
-```razor
-// `Price` 列のソート状態をクリアします。
-await grid.ClearSort("Price");
+```typescript
+// `price` 列のソート状態をクリアします。
+grid.clearSort('price');
 
 // グリッドのソート状態をクリアします。
-await grid.ClearSort();
+grid.clearSort();
 ```
 
 </PlatformBlock>
@@ -399,10 +418,10 @@ await grid.ClearSort();
 
 
 ```typescript
-// Clear the sort state for the `price` column.
+// `price` 列のソート状態をクリアします。
 gridRef.current.clearSort('price');
 
-// Clear the sort state of the grid.
+// グリッドのソート状態をクリアします。
 gridRef.current.clearSort();
 ```
 
@@ -410,11 +429,11 @@ gridRef.current.clearSort();
 
 <PlatformBlock for="Blazor">
 
-```razor
-// Clear the sort state for the `Price` column.
+```csharp
+// `Price` 列のソート状態をクリアします。
 await grid.ClearSort("Price");
 
-// Clear the sort state of the grid.
+// グリッドのソート状態をクリアします。
 await grid.ClearSort();
 ```
 
@@ -424,19 +443,19 @@ await grid.ClearSort();
 
 <PlatformBlock for="React, WebComponents">
 
-`sortingExpressions` プロパティは `sort()` メソッド呼び出しと同様の動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。
+`sortingExpressions` プロパティは `sort()` メソッド呼び出しと非常に似た動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なのは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-`sortingExpressions` プロパティは `Sort()` メソッド呼び出しと同様の動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なプロパティは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。
+`SortingExpressions` プロパティは `Sort()` メソッド呼び出しと非常に似た動作をします。これはグリッド内のソート状態を制御する宣言的な方法を公開していますが、最も便利なのは、{GridLiteTitle} が最初にレンダリングされるときに初期ソート状態を設定できることです。
 
 </PlatformBlock>
 
 <PlatformBlock for="WebComponents">
 
-たとえば、Lit ベースのサンプルを次に示します。
+たとえば、Lit ベースのサンプルを次に示します:
 
 ```typescript
 {
@@ -457,6 +476,23 @@ await grid.ClearSort();
 
 例:
 
+```tsx
+const sortState: SortingExpression<Products>[] = [
+  { key: 'price', direction: 'descending' },
+  { key: 'name', direction: 'ascending', caseSensitive: true },
+];
+
+return (
+  <IgrGridLite sortingExpressions={sortState} />
+);
+```
+
+</PlatformBlock>
+
+<PlatformBlock for="Blazor">
+
+例:
+
 ```razor
 private IgbGridLiteSortingExpression[] sortState = new[]
 {
@@ -469,27 +505,15 @@ private IgbGridLiteSortingExpression[] sortState = new[]
 
 </PlatformBlock>
 
-<PlatformBlock for="Blazor">
-
 これを使用すると、コンポーネントの現在のソート状態を取得し、アプリケーション内の別の状態に応じて追加の処理を実行できます。
 
-```typescript
-const state = grid.sortingExpressions;
-// 現在のソート状態を保存します
-saveUserSortState(state);
-```
-
-</PlatformBlock>
-
-It can be used to get the current sort state of the component and do additional processing depending on another state in your application.
-
 <PlatformBlock for="WebComponents">
 
 
-```razor
-var state = grid.SortingExpressions;
+```typescript
+const state = grid.sortingExpressions;
 // 現在のソート状態を保存します
-SaveUserSortState(state);
+saveUserSortState(state);
 ```
 
 </PlatformBlock>
@@ -499,7 +523,7 @@ SaveUserSortState(state);
 
 ```typescript
 const state = gridRef.current.sortingExpressions;
-// Save the current sort state
+// 現在のソート状態を保存します
 saveUserSortState(state);
 ```
 
@@ -507,9 +531,9 @@ saveUserSortState(state);
 
 <PlatformBlock for="Blazor">
 
-```razor
+```csharp
 var state = grid.SortingExpressions;
-// Save the current sort state
+// 現在のソート状態を保存します
 SaveUserSortState(state);
 ```
 
@@ -521,7 +545,7 @@ SaveUserSortState(state);
 
 UI を通じてソート操作が実行されると、コンポーネントはカスタム `sorting` イベントを発行します。`detail` プロパティには {GridLiteTitle} が適用するソート式が含まれます。イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。
 
-グリッドが新しいソート状態を適用した後、`sorted` イベントが発行されます。最後のソート操作で使用された式を含み、キャンセルはできません。
+グリッドが新しいソート状態を適用した後、`sorted` イベントが発行されます。このイベントには最後のソート操作で使用された式が含まれ、キャンセルはできません。
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -540,13 +564,24 @@ gridRef.current.addEventListener('sorted', (event: CustomEvent<SortingExpression
 
 <PlatformBlock for="Blazor">
 
-UI を介してソート操作が実行されると、コンポーネントは `Sorting` および `Sorted` イベントを発生させます。`Sorting` イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。
+UI を通じてソート操作が実行されると、コンポーネントは `Sorting` および `Sorted` イベントを発生させます。`Sorting` イベントはキャンセル可能で、キャンセルすると現在のソート操作が停止します。
 
-グリッドが新しいソート状態を適用した後、`Sorted` イベントが発生します。最後のソート操作で使用された式を含み、キャンセルはできません。
+グリッドが新しいソート状態を適用した後、`Sorted` イベントが発生します。このイベントには最後のソート操作で使用された式が含まれ、キャンセルはできません。
 
-```typescript
-grid.addEventListener('sorting', (event: CustomEvent<SortingExpression<T>>) => { ... });
-grid.addEventListener('sorted', (event: CustomEvent<SortingExpression<T>>) => { ... });
+```razor
+<IgbGridLite Sorting="OnSorting" Sorted="OnSorted" />
+
+@code {
+    private void OnSorting(IgbGridLiteSortingEventArgs args)
+    {
+        // Sorting イベントを処理します
+    }
+
+    private void OnSorted(IgbGridLiteSortedEventArgs args)
+    {
+        // Sorted イベントを処理します
+    }
+}
 ```
 
 </PlatformBlock>
@@ -562,20 +597,20 @@ grid.addEventListener('sorted', (event: CustomEvent<SortingExpression<T>>) => {
 ソートをリモートで実行する必要がある場合、または現在の状態/データをどこかのサーバーに保存する必要がある場合、{GridLiteTitle} は、この動作を実装およびカスタマイズできるフックを公開します。
 
 <PlatformBlock for="React, WebComponents">
-Using the `dataPipelineConfiguration` property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a <ApiLink type="DataPipelineParams" /> object.
+`dataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
 ```typescript
 export type DataPipelineParams<T extends object> = {
   /**
-   * The current data state of the grid.
+   * グリッドの現在のデータ状態。
    */
   data: T[];
   /**
-   * The grid component itself.
+   * グリッド コンポーネント自体。
    */
   grid: IgcGridLite<T>;
   /**
-   * The type of data operation being performed.
+   * 実行されるデータ操作の種類。
    */
   type: 'sort' | 'filter';
 };
@@ -594,31 +629,31 @@ gridRef.current.dataPipelineConfiguration = { sort: (params: DataPipelineParams<
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
-Using the <ApiLink type="DataPipelineConfiguration" /> property, you can provide a custom hook which will be called each time a sort operation is about to run. The callback is passed a <ApiLink type="DataPipelineParams" /> object.
+<ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
 
-```razor
+```csharp
 public class DataPipelineParams
 {
     /// <summary>
-    /// The current data state of the grid.
+    /// グリッドの現在のデータ状態。
     /// </summary>
     [JsonPropertyName("data")]
     public object[] Data { get; set; }
 
     /// <summary>
-    /// The type of data operation being performed.
+    /// 実行されるデータ操作の種類。
     /// </summary>
     [JsonPropertyName("type")]
-    public string Type { get; set; } // "sort" or "filter"
+    public string Type { get; set; } // "sort" または "filter"
 }
 ```
 
-```razor
+```csharp
 grid.DataPipelineConfiguration = new DataPipelineParams
 {
     Sort = async (params) =>
     {
-        // Custom sort logic
+        // カスタム ソート ロジック
         return await Task.FromResult(params.Data);
     }
 };
@@ -626,16 +661,14 @@ grid.DataPipelineConfiguration = new DataPipelineParams
 
 </PlatformBlock>
 
-`dataPipelineConfiguration` プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
-
+カスタム コールバックは非同期にすることができ、グリッドはそれが解決されるまで待機します。
 
+次の例は、コンポーネントのソート状態に基づいて生成された REST エンドポイントを反映し、リモート ソート操作をモックします。
 
 <Sample src="/{GridLiteSample}/sort-config-pipeline" height={600} alt="{Platform} {GridLiteTitle} ソート構成パイプライン" />
 
 </PlatformBlock>
 
-<ApiLink type="DataPipelineConfiguration" /> プロパティを使用すると、ソート操作が実行されるたびに呼び出されるカスタム フックを提供できます。コールバックには <ApiLink type="DataPipelineParams" /> オブジェクトが渡されます。
-
 <PlatformBlock for="WebComponents, Blazor">
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
index 0272f9afa7..4bb2fcbdf0 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
@@ -15,11 +15,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # スタイルとテーマ
 
-{GridLiteTitle} には、Bootstrap、Material、Fluent、Indigo の 4 つのテーマが用意されています。グリッドおよび UI コンポーネントにはテーマが組み込まれていますが、パレット、タイポグラフィ、その他のグローバル設定にはグローバル スタイルシートが必要です。
+{GridLiteTitle} には、Bootstrap、Material、Fluent、Indigo の 4 つのテーマが用意されています。グリッドとその UI コンポーネントにはテーマが組み込まれていますが、パレット、タイポグラフィ、その他のグローバル構成を機能させるには、コンポーネントにグローバル スタイルシートが必要です。
 
 ## 基本テーマの読み込み
 
-プロジェクトのタイプ、セットアップ、ビルド構成に応じて、以下のいずれかのファイルを組み込む方法が異なります。フレームワーク/ビルドツールを使用している場合は、外部スタイルを出力バンドルに追加する方法についてドキュメントを参照してください。
+プロジェクトのタイプ、セットアップ、ビルド構成に応じて、以下のいずれかのファイルを組み込む方法が異なります。フレームワーク/ビルド ツールを使用している場合は、外部スタイルを出力バンドルに追加する方法について、そのドキュメントを参照してください。
 
 原則として、`themes` フォルダーをアセット ディレクトリにコピーし、index.html からテーマをリンクするだけで構いません。
 

From 0af9189f1b5028f8ba8308c4bdec96e9db685ea5 Mon Sep 17 00:00:00 2001
From: Dobromir Tsvetkov <46093564+dobromirts@users.noreply.github.com>
Date: Mon, 13 Jul 2026 16:59:54 +0300
Subject: [PATCH 18/30] Merge pull request #348 from
 IgniteUI/dtsvetkov/fix-cta-area-hrefs

fix(ctaArea): resolve root relative hrefs
---
 .../xplat/src/content/en/components/grids/grids-header.mdx | 2 +-
 .../xplat/src/content/jp/components/grids/grids-header.mdx | 2 +-
 src/components/mdx/CtaArea/CtaArea.astro                   | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx
index 9c38d7aa1b..ed8ef4923d 100644
--- a/docs/xplat/src/content/en/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx
@@ -88,7 +88,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     title="Quick and Easy to Customize, Build and Implement"
     description="The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code."
     label="View Samples"
-    href="data-grid.md"
+    href="data-grid"
 />
 
 <Feature
diff --git a/docs/xplat/src/content/jp/components/grids/grids-header.mdx b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
index 1c3b978949..59fae75170 100644
--- a/docs/xplat/src/content/jp/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
@@ -290,7 +290,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     title="Quick and Easy to Customize, Build and Implement"
     description="The Ignite UI {Platform} Data Grid can handle unlimited rows and columns of data, while providing access to custom templates and real-time data updates. Featuring an intuitive API for easy theming and branding, you can quickly bind to data with minimal code."
     label="View Samples"
-    href="data-grid.md"
+    href="data-grid"
 />
 <hr style="border: .5px solid #ccc;" />
 <igc-divider></igc-divider>
diff --git a/src/components/mdx/CtaArea/CtaArea.astro b/src/components/mdx/CtaArea/CtaArea.astro
index 1c3a77d9a3..58192e158d 100644
--- a/src/components/mdx/CtaArea/CtaArea.astro
+++ b/src/components/mdx/CtaArea/CtaArea.astro
@@ -32,6 +32,11 @@ interface Props {
 
 const { title, description, label, href, note, logo = true, variant = 'default', backgroundImage, overlay } = Astro.props;
 
+const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+const resolvedHref = href.startsWith('/') && !href.startsWith('//')
+    ? `${base}${href}`
+    : href;
+
 const resolvedLogo = logo === true ? logoUrl : (typeof logo === 'string' ? logo : null);
 const isHorizontal = variant === 'horizontal';
 
@@ -60,7 +65,7 @@ const overlayColor = typeof overlay === 'string' ? overlay : undefined;
             {description && <p class="cta-area__description">{description}</p>}
         </div>
         <div class="cta-area__action">
-            <a class="cta-area__btn no-external-icon" href={href}>{label}</a>
+            <a class="cta-area__btn no-external-icon" href={resolvedHref}>{label}</a>
             {note && <p class="cta-area__note">{note}</p>}
         </div>
     </div>

From 3b0dc0fd653fd77eeb353f4f6f4118f86bec6091 Mon Sep 17 00:00:00 2001
From: Arkan Ahmedov <105818882+Zneeky@users.noreply.github.com>
Date: Mon, 13 Jul 2026 17:00:35 +0300
Subject: [PATCH 19/30] Remove xplat-generated topics from the Angular source
 (#410)

---
 .github/CONTRIBUTING.md                       |   6 +
 README.md                                     |   1 +
 docs/angular/src/content/en/.gitignore        |  17 +
 .../content/en/components/bullet-graph.mdx    | 329 ---------
 .../en/components/charts/chart-api.mdx        | 122 ----
 .../en/components/charts/chart-features.mdx   |  82 ---
 .../en/components/charts/chart-overview.mdx   | 241 -------
 .../charts/features/chart-animations.mdx      |  35 -
 .../charts/features/chart-annotations.mdx     | 102 ---
 .../charts/features/chart-axis-gridlines.mdx  | 129 ----
 .../charts/features/chart-axis-layouts.mdx    |  93 ---
 .../charts/features/chart-axis-options.mdx    | 124 ----
 .../charts/features/chart-axis-types.mdx      | 163 -----
 .../features/chart-data-aggregations.mdx      |  36 -
 .../features/chart-data-annotations.mdx       |  94 ---
 .../charts/features/chart-data-filtering.mdx  |  49 --
 .../charts/features/chart-data-legend.mdx     | 159 -----
 .../charts/features/chart-data-selection.mdx  |  90 ---
 .../charts/features/chart-data-tooltip.mdx    | 145 ----
 .../features/chart-highlight-filter.mdx       |  85 ---
 .../charts/features/chart-highlighting.mdx    |  65 --
 .../charts/features/chart-legends.mdx         |  28 -
 .../charts/features/chart-markers.mdx         |  73 --
 .../charts/features/chart-navigation.mdx      |  92 ---
 .../charts/features/chart-overlays.mdx        |  91 ---
 .../charts/features/chart-performance.mdx     | 366 ----------
 .../charts/features/chart-synchronization.mdx |  33 -
 .../charts/features/chart-titles.mdx          |  45 --
 .../charts/features/chart-tooltips.mdx        |  60 --
 .../charts/features/chart-trendlines.mdx      |  71 --
 .../features/chart-user-annotations.mdx       |  92 ---
 .../en/components/charts/types/area-chart.mdx | 199 ------
 .../en/components/charts/types/bar-chart.mdx  | 131 ----
 .../components/charts/types/bubble-chart.mdx  |  45 --
 .../components/charts/types/column-chart.mdx  | 165 -----
 .../charts/types/composite-chart.mdx          |  39 -
 .../charts/types/data-pie-chart.mdx           | 168 -----
 .../components/charts/types/donut-chart.mdx   |  75 --
 .../en/components/charts/types/line-chart.mdx | 190 -----
 .../en/components/charts/types/pie-chart.mdx  | 132 ----
 .../components/charts/types/point-chart.mdx   |  54 --
 .../components/charts/types/polar-chart.mdx   |  66 --
 .../components/charts/types/radial-chart.mdx  |  82 ---
 .../components/charts/types/scatter-chart.mdx |  86 ---
 .../components/charts/types/shape-chart.mdx   |  47 --
 .../charts/types/sparkline-chart.mdx          | 129 ----
 .../components/charts/types/spline-chart.mdx  | 102 ---
 .../components/charts/types/stacked-chart.mdx | 144 ----
 .../en/components/charts/types/step-chart.mdx |  47 --
 .../components/charts/types/stock-chart.mdx   | 134 ----
 .../components/charts/types/treemap-chart.mdx | 121 ----
 .../content/en/components/dashboard-tile.mdx  | 115 ---
 .../components/excel-library-using-cells.mdx  | 346 ---------
 .../components/excel-library-using-tables.mdx | 117 ---
 .../excel-library-using-workbooks.mdx         |  99 ---
 .../excel-library-using-worksheets.mdx        | 236 -------
 .../excel-library-working-with-charts.mdx     |  44 --
 .../excel-library-working-with-grids.mdx      |  30 -
 .../excel-library-working-with-sparklines.mdx |  40 --
 .../content/en/components/excel-library.mdx   | 132 ----
 .../content/en/components/excel-utility.mdx   | 121 ----
 .../en/components/general-changelog-dv.mdx    | 616 ----------------
 .../components/geo-map-binding-data-csv.mdx   | 127 ----
 .../geo-map-binding-data-json-points.mdx      | 123 ----
 .../components/geo-map-binding-data-model.mdx | 170 -----
 .../geo-map-binding-data-overview.mdx         |  27 -
 .../geo-map-binding-multiple-shapes.mdx       | 522 --------------
 .../geo-map-binding-multiple-sources.mdx      | 204 ------
 .../components/geo-map-binding-shp-file.mdx   | 139 ----
 .../geo-map-display-azure-imagery.mdx         | 110 ---
 .../geo-map-display-bing-imagery.mdx          |  82 ---
 .../geo-map-display-esri-imagery.mdx          |  62 --
 .../geo-map-display-heat-imagery.mdx          | 136 ----
 .../geo-map-display-imagery-types.mdx         |  58 --
 .../geo-map-display-osm-imagery.mdx           |  44 --
 .../en/components/geo-map-navigation.mdx      |  52 --
 .../en/components/geo-map-resources-esri.mdx  |  87 ---
 ...eo-map-resources-shape-styling-utility.mdx | 259 -------
 .../geo-map-resources-world-connections.mdx   | 146 ----
 .../geo-map-resources-world-locations.mdx     | 662 -----------------
 .../geo-map-resources-world-util.mdx          | 200 ------
 .../geo-map-shape-files-reference.mdx         | 100 ---
 .../en/components/geo-map-shape-styling.mdx   | 169 -----
 .../geo-map-type-scatter-area-series.mdx      | 164 -----
 .../geo-map-type-scatter-bubble-series.mdx    | 154 ----
 .../geo-map-type-scatter-contour-series.mdx   | 160 -----
 .../geo-map-type-scatter-density-series.mdx   | 128 ----
 .../geo-map-type-scatter-symbol-series.mdx    | 104 ---
 .../en/components/geo-map-type-series.mdx     |  32 -
 .../geo-map-type-shape-polygon-series.mdx     | 148 ----
 .../geo-map-type-shape-polyline-series.mdx    | 137 ----
 .../src/content/en/components/geo-map.mdx     | 124 ----
 .../en/components/inputs/color-editor.mdx     |  76 --
 .../accessibility-compliance.mdx              | 195 -----
 .../content/en/components/linear-gauge.mdx    | 333 ---------
 .../content/en/components/maps/map-api.mdx    |  95 ---
 .../content/en/components/menus/toolbar.mdx   | 234 ------
 .../content/en/components/radial-gauge.mdx    | 344 ---------
 .../en/components/spreadsheet-activation.mdx  |  46 --
 .../components/spreadsheet-chart-adapter.mdx  | 166 -----
 .../en/components/spreadsheet-clipboard.mdx   |  55 --
 .../en/components/spreadsheet-commands.mdx    |  55 --
 .../spreadsheet-conditional-formatting.mdx    |  68 --
 .../en/components/spreadsheet-configuring.mdx | 187 -----
 .../spreadsheet-data-validation.mdx           |  37 -
 .../en/components/spreadsheet-hyperlinks.mdx  |  33 -
 .../en/components/spreadsheet-overview.mdx    | 123 ----
 .../en/components/zoomslider-overview.mdx     |  78 --
 docs/angular/src/content/jp/.gitignore        |  19 +
 .../content/jp/components/bullet-graph.mdx    | 332 ---------
 .../jp/components/charts/chart-api.mdx        | 125 ----
 .../jp/components/charts/chart-features.mdx   |  84 ---
 .../jp/components/charts/chart-overview.mdx   | 227 ------
 .../charts/features/chart-animations.mdx      |  38 -
 .../charts/features/chart-annotations.mdx     | 105 ---
 .../charts/features/chart-axis-gridlines.mdx  | 124 ----
 .../charts/features/chart-axis-layouts.mdx    |  74 --
 .../charts/features/chart-axis-options.mdx    | 112 ---
 .../charts/features/chart-axis-types.mdx      | 162 -----
 .../features/chart-data-aggregations.mdx      |  39 -
 .../features/chart-data-annotations.mdx       |  85 ---
 .../charts/features/chart-data-filtering.mdx  |  51 --
 .../charts/features/chart-data-legend.mdx     | 161 -----
 .../charts/features/chart-data-selection.mdx  |  90 ---
 .../charts/features/chart-data-tooltip.mdx    | 148 ----
 .../features/chart-highlight-filter.mdx       |  79 ---
 .../charts/features/chart-highlighting.mdx    |  68 --
 .../charts/features/chart-markers.mdx         |  72 --
 .../charts/features/chart-navigation.mdx      |  95 ---
 .../charts/features/chart-overlays.mdx        |  93 ---
 .../charts/features/chart-performance.mdx     | 368 ----------
 .../charts/features/chart-synchronization.mdx |  35 -
 .../charts/features/chart-titles.mdx          |  44 --
 .../charts/features/chart-tooltips.mdx        |  62 --
 .../charts/features/chart-trendlines.mdx      |  74 --
 .../features/chart-user-annotations.mdx       |  95 ---
 .../jp/components/charts/types/area-chart.mdx | 173 -----
 .../jp/components/charts/types/bar-chart.mdx  | 141 ----
 .../components/charts/types/bubble-chart.mdx  |  53 --
 .../components/charts/types/column-chart.mdx  | 169 -----
 .../charts/types/composite-chart.mdx          |  38 -
 .../charts/types/data-pie-chart.mdx           | 181 -----
 .../components/charts/types/donut-chart.mdx   |  85 ---
 .../jp/components/charts/types/line-chart.mdx | 173 -----
 .../jp/components/charts/types/pie-chart.mdx  | 143 ----
 .../components/charts/types/point-chart.mdx   |  62 --
 .../components/charts/types/polar-chart.mdx   |  76 --
 .../components/charts/types/radial-chart.mdx  |  71 --
 .../components/charts/types/scatter-chart.mdx |  85 ---
 .../components/charts/types/shape-chart.mdx   |  50 --
 .../charts/types/sparkline-chart.mdx          | 137 ----
 .../components/charts/types/spline-chart.mdx  |  91 ---
 .../components/charts/types/stacked-chart.mdx | 147 ----
 .../jp/components/charts/types/step-chart.mdx |  49 --
 .../components/charts/types/stock-chart.mdx   | 135 ----
 .../components/charts/types/treemap-chart.mdx | 124 ----
 .../content/jp/components/dashboard-tile.mdx  | 114 ---
 .../components/excel-library-using-cells.mdx  | 348 ---------
 .../components/excel-library-using-tables.mdx | 118 ----
 .../excel-library-using-workbooks.mdx         | 101 ---
 .../excel-library-using-worksheets.mdx        | 238 -------
 .../excel-library-working-with-charts.mdx     |  47 --
 .../excel-library-working-with-grids.mdx      |  32 -
 .../excel-library-working-with-sparklines.mdx |  42 --
 .../content/jp/components/excel-library.mdx   | 133 ----
 .../content/jp/components/excel-utility.mdx   | 123 ----
 .../jp/components/general-changelog-dv.mdx    | 603 ----------------
 .../components/geo-map-binding-data-csv.mdx   | 129 ----
 .../geo-map-binding-data-json-points.mdx      | 125 ----
 .../components/geo-map-binding-data-model.mdx | 172 -----
 .../geo-map-binding-data-overview.mdx         |  29 -
 .../geo-map-binding-multiple-shapes.mdx       | 524 --------------
 .../geo-map-binding-multiple-sources.mdx      | 206 ------
 .../components/geo-map-binding-shp-file.mdx   | 138 ----
 .../geo-map-display-azure-imagery.mdx         | 113 ---
 .../geo-map-display-bing-imagery.mdx          |  84 ---
 .../geo-map-display-esri-imagery.mdx          |  64 --
 .../geo-map-display-heat-imagery.mdx          | 140 ----
 .../geo-map-display-imagery-types.mdx         |  55 --
 .../geo-map-display-osm-imagery.mdx           |  46 --
 .../jp/components/geo-map-navigation.mdx      |  55 --
 .../jp/components/geo-map-resources-esri.mdx  |  89 ---
 ...eo-map-resources-shape-styling-utility.mdx | 261 -------
 .../geo-map-resources-world-connections.mdx   | 148 ----
 .../geo-map-resources-world-locations.mdx     | 664 ------------------
 .../geo-map-resources-world-util.mdx          | 202 ------
 .../geo-map-shape-files-reference.mdx         |  90 ---
 .../jp/components/geo-map-shape-styling.mdx   | 171 -----
 .../geo-map-type-scatter-area-series.mdx      | 166 -----
 .../geo-map-type-scatter-bubble-series.mdx    | 153 ----
 .../geo-map-type-scatter-contour-series.mdx   | 159 -----
 .../geo-map-type-scatter-density-series.mdx   | 130 ----
 .../geo-map-type-scatter-symbol-series.mdx    | 106 ---
 .../jp/components/geo-map-type-series.mdx     |  34 -
 .../geo-map-type-shape-polygon-series.mdx     | 150 ----
 .../geo-map-type-shape-polyline-series.mdx    | 139 ----
 .../src/content/jp/components/geo-map.mdx     | 126 ----
 .../jp/components/inputs/color-editor.mdx     |  74 --
 .../accessibility-compliance.mdx              | 196 ------
 .../content/jp/components/linear-gauge.mdx    | 336 ---------
 .../content/jp/components/maps/map-api.mdx    |  96 ---
 .../content/jp/components/menus/toolbar.mdx   | 235 -------
 .../content/jp/components/radial-gauge.mdx    | 347 ---------
 .../jp/components/spreadsheet-activation.mdx  |  46 --
 .../components/spreadsheet-chart-adapter.mdx  | 163 -----
 .../jp/components/spreadsheet-clipboard.mdx   |  52 --
 .../jp/components/spreadsheet-commands.mdx    |  52 --
 .../spreadsheet-conditional-formatting.mdx    |  67 --
 .../jp/components/spreadsheet-configuring.mdx | 185 -----
 .../spreadsheet-data-validation.mdx           |  39 -
 .../jp/components/spreadsheet-hyperlinks.mdx  |  32 -
 .../jp/components/spreadsheet-overview.mdx    | 120 ----
 .../jp/components/zoomslider-overview.mdx     |  80 ---
 213 files changed, 43 insertions(+), 27813 deletions(-)
 delete mode 100644 docs/angular/src/content/en/components/bullet-graph.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/chart-api.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/chart-features.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/chart-overview.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-animations.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-legends.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-markers.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-navigation.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-performance.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-titles.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/area-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/bar-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/bubble-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/column-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/composite-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/donut-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/line-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/pie-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/point-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/polar-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/radial-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/scatter-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/shape-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/spline-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/stacked-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/step-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/stock-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/charts/types/treemap-chart.mdx
 delete mode 100644 docs/angular/src/content/en/components/dashboard-tile.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-using-cells.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-using-tables.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-using-workbooks.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-working-with-charts.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-working-with-grids.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-library.mdx
 delete mode 100644 docs/angular/src/content/en/components/excel-utility.mdx
 delete mode 100644 docs/angular/src/content/en/components/general-changelog-dv.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-navigation.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-resources-esri.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-resources-world-util.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-shape-styling.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
 delete mode 100644 docs/angular/src/content/en/components/geo-map.mdx
 delete mode 100644 docs/angular/src/content/en/components/inputs/color-editor.mdx
 delete mode 100644 docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
 delete mode 100644 docs/angular/src/content/en/components/linear-gauge.mdx
 delete mode 100644 docs/angular/src/content/en/components/maps/map-api.mdx
 delete mode 100644 docs/angular/src/content/en/components/menus/toolbar.mdx
 delete mode 100644 docs/angular/src/content/en/components/radial-gauge.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-activation.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-commands.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-configuring.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
 delete mode 100644 docs/angular/src/content/en/components/spreadsheet-overview.mdx
 delete mode 100644 docs/angular/src/content/en/components/zoomslider-overview.mdx
 delete mode 100644 docs/angular/src/content/jp/components/bullet-graph.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/chart-api.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/chart-features.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/chart-overview.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-animations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-axis-options.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-axis-types.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-filtering.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-highlight-filter.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-highlighting.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-markers.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-performance.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-synchronization.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-titles.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-tooltips.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-trendlines.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/area-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/bar-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/bubble-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/column-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/composite-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/donut-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/line-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/pie-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/point-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/polar-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/radial-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/scatter-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/shape-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/spline-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/stacked-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/step-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/stock-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx
 delete mode 100644 docs/angular/src/content/jp/components/dashboard-tile.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-using-cells.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-using-tables.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-using-workbooks.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-using-worksheets.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-working-with-grids.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library-working-with-sparklines.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-library.mdx
 delete mode 100644 docs/angular/src/content/jp/components/excel-utility.mdx
 delete mode 100644 docs/angular/src/content/jp/components/general-changelog-dv.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-data-overview.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-imagery-types.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-navigation.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-resources-esri.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-resources-world-connections.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-resources-world-locations.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-resources-world-util.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-shape-styling.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
 delete mode 100644 docs/angular/src/content/jp/components/geo-map.mdx
 delete mode 100644 docs/angular/src/content/jp/components/inputs/color-editor.mdx
 delete mode 100644 docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
 delete mode 100644 docs/angular/src/content/jp/components/linear-gauge.mdx
 delete mode 100644 docs/angular/src/content/jp/components/maps/map-api.mdx
 delete mode 100644 docs/angular/src/content/jp/components/menus/toolbar.mdx
 delete mode 100644 docs/angular/src/content/jp/components/radial-gauge.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-activation.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-commands.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
 delete mode 100644 docs/angular/src/content/jp/components/spreadsheet-overview.mdx
 delete mode 100644 docs/angular/src/content/jp/components/zoomslider-overview.mdx

diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 350120f89d..3819775212 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -483,6 +483,12 @@ The cross-platform (xplat) documentation MDX source files live in this repositor
 
 If content originates from or must be synced with the upstream [`igniteui-xplat-docs`](https://github.com/IgniteUI/igniteui-xplat-docs) repository, use the merge scripts in `scripts/` (e.g. `merge-vnext-updates.mjs`, `migrate-vnext-new-files.mjs`) to pull in updates rather than editing generated files directly.
 
+## These topics are generated into the Angular tree — don't edit or commit them there
+
+For **Angular**, the xplat output is compiled and copied over the Angular content tree on every build by `docs/angular/scripts/sync-generated.mjs` (run via `sync:generated-from-xplat` before every `angular:dev`/`angular:build`). It overwrites everything under `docs/angular/src/content/{en,jp}/components/` **except** `grids/`, `changelog/`, and `toc.json`, which stay Angular-owned.
+
+As a result these Angular copies (charts, geo-map, gauges, spreadsheet, excel-library, `general-changelog-dv`, etc.) are **not committed** — editing them under `docs/angular/` has no effect, so edit the xplat source instead. They are kept out of git by the `xplat-generated topics` block at the bottom of `docs/angular/src/content/en/.gitignore` and `docs/angular/src/content/jp/.gitignore`. If you add a **new** cross-platform topic group under `docs/xplat/src/content/`, add a matching pattern to those two `.gitignore` blocks so the generated Angular copy is not accidentally committed.
+
 # <a name='#adding-images'>Adding of images in the topic</a>
 
 Images in MDX topics use the Astro `<Image>` component for automatic optimization and lazy loading. Images must be placed in the `docs/xplat/public/images/` or `docs/angular/public/images` folder (depending on the platform) and imported at the top of the MDX file.
diff --git a/README.md b/README.md
index dbdf81da9d..ca26caa6bb 100644
--- a/README.md
+++ b/README.md
@@ -98,6 +98,7 @@ The check is read-only and reports the source file and line for missing or malfo
 
 - Angular content lives under `docs/angular/src/content/<locale>/`.
 - Shared xplat content lives under `docs/xplat/src/content/<locale>/`.
+- Cross-platform topics are also generated into the Angular tree at build time (by `docs/angular/scripts/sync-generated.mjs`) and are therefore **not committed** under `docs/angular/` — they are gitignored, and editing those Angular copies has no effect. Edit the xplat source instead. See [.github/CONTRIBUTING.md](.github/CONTRIBUTING.md#updating-of-data-visualization-related-topics).
 - Static images and assets are stored in the nearest product package when product-specific, or in the root `public/` directory when shared.
 
 ## Collaboration Docs
diff --git a/docs/angular/src/content/en/.gitignore b/docs/angular/src/content/en/.gitignore
index bf43056a16..53b9d5e19c 100644
--- a/docs/angular/src/content/en/.gitignore
+++ b/docs/angular/src/content/en/.gitignore
@@ -51,3 +51,20 @@ components/pivotGrid/*.mdx
 !components/pivotGrid/pivot-grid.mdx
 !components/pivotGrid/pivot-grid-features.mdx
 !components/pivotGrid/pivot-grid-custom.mdx
+
+# All xplat-generated topics that should be ignored:
+/components/charts/
+/components/geo-map*.mdx
+/components/spreadsheet-*.mdx
+/components/excel-library*.mdx
+/components/excel-utility.mdx
+/components/bullet-graph.mdx
+/components/dashboard-tile.mdx
+/components/linear-gauge.mdx
+/components/radial-gauge.mdx
+/components/zoomslider-overview.mdx
+/components/general-changelog-dv.mdx
+/components/inputs/color-editor.mdx
+/components/interactivity/accessibility-compliance.mdx
+/components/maps/map-api.mdx
+/components/menus/toolbar.mdx
diff --git a/docs/angular/src/content/en/components/bullet-graph.mdx b/docs/angular/src/content/en/components/bullet-graph.mdx
deleted file mode 100644
index 260824b749..0000000000
--- a/docs/angular/src/content/en/components/bullet-graph.mdx
+++ /dev/null
@@ -1,329 +0,0 @@
----
-title: "Angular Bullet Graph | Data Visualization Tools | Infragistics"
-description: Infragistics' Angular bullet graph control allows you to create dashboards displaying ranges or comparing multiple measurements. View our data visualization tools!
-keywords: "Angular Bullet Graph, animation, labels, needle, scales, ranges, tick marks, Infragistics"
-license: commercial
-mentionedTypes: ["BulletGraph"]
-namespace: Infragistics.Controls.Gauges
-llms:
-  description: "The Angular bullet graph component allows for a linear and concise view of measures compared against a scale."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Bullet Graph Overview
-
-The Angular bullet graph component allows for a linear and concise view of measures compared against a scale.
-
-The Ignite UI for Angular bullet graph component provides you with the ability to create attractive data presentations, replacing meters and gauges that are used on dashboards with simple yet straightforward and clear bar charts. A bullet graph is one of the most effective and efficient ways to present progress towards goals, good/better/best ranges, or compare multiple measurements in as little horizontal or vertical space as possible.
-
-## Angular Bullet Graph Example
-
-The following sample demonstrates how setting multiple properties on the same <ApiLink type="BulletGraph" /> can transform it to completely different bullet graph.
-
-<Sample src="/gauges/bullet-graph/animation" height={155} alt="Angular Bullet Graph Example" />
-
-The bullet graph supports one scale, one set of tick marks and one set of labels. The bullet graph component also has built-in support for animated transitions. This animation is easily customizable by setting the <ApiLink type="BulletGraph" member="transitionDuration" label="TransitionDuration" /> property.
-The features of the bullet graph include configurable orientation and direction, configurable visual elements such as the needle, and more.
-
-## Dependencies
-When installing the gauge package, the core package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## Component Modules
-
-The <ApiLink type="BulletGraph" /> requires the following modules:
-
-```ts
-// app.module.ts
-import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxBulletGraphModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Usage
-
-The following code walks through creating a bullet graph component, and configuring a performance bar, comparative measure marker, and three comparative ranges on the scale.
-
-```html
- <igx-bullet-graph height="100"
-                   width="300"
-                   minimumValue="5"
-                   maximumValue="55"
-                   value="35"
-                   targetValue="43">
-        <igx-linear-graph-range startValue="0"
-                                endValue="15"
-                                brush="#828181">
-        </igx-linear-graph-range>
-        <igx-linear-graph-range startValue="15"
-                                endValue="30"
-                                brush="#AAAAAA">
-        </igx-linear-graph-range>
-        <igx-linear-graph-range startValue="30"
-                                endValue="55"
-                                brush="#D0D0D0">
-        </igx-linear-graph-range>
- </igx-bullet-graph>
-```
-
-## Comparative Measures
-The bullet graph can show two measures: performance value and target value.
-
-Performance value is the primary measure displayed by the component and it is visualized as a bar that stretches along the length of the whole graph. The target value is a measure which the performance value compares against. It is displayed as a small block that runs perpendicular to the orientation of the performance bar.
-
-```html
-<igx-bullet-graph
-    value=50
-    valueBrush="DodgerBlue"
-    valueStrokeThickness=1
-    valueInnerExtent=0.5
-    valueOuterExtent=0.65
-    targetValue=80
-    targetValueBreadth=10
-    targetValueBrush="LimeGreen"
-    targetValueOutline="LimeGreen"
-    targetValueStrokeThickness=1
-    targetValueInnerExtent=0.3
-    targetValueOuterExtent=0.85
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/measures" height={125} alt="Angular bullet graph measures" />
-
-## Highlight Value
-
-The bullet graph's performance value can be further modified to show progress represented as a highlighted value. This will make the <ApiLink type="BulletGraph" member="value" label="Value" /> appear with a lower opacity. A good example is if <ApiLink type="BulletGraph" member="value" label="Value" /> is 50 and  <ApiLink type="BulletGraph" member="highlightValue" label="HighlightValue" /> is set to 25. This would represent a performance of 50% regardless of what the value of <ApiLink type="BulletGraph" member="targetValue" label="TargetValue" /> is set to. To enable this first set <ApiLink type="BulletGraph" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> to Overlay and then apply a <ApiLink type="BulletGraph" member="highlightValue" label="HighlightValue" /> to something lower than <ApiLink type="BulletGraph" member="value" label="Value" />.
-
-```html
-<igx-bullet-graph
-    #bulletGraph
-    height="80px"
-    width="400px"
-    value=70
-    targetValue=90
-    minimumValue=0
-    maximumValue=100
-    interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    highlightValueDisplayMode="Overlay"
-    highlightValue=25>
-  </igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/highlight-needle" height={125} alt="Angular bullet graph highlight needle" />
-
-## Comparative Ranges
-The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same time the degree to which it resides within that state.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=80 interval=10
-    maximumValue=100 targetValue=90
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=0 endValue=40
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=40 endValue=70
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=70 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/ranges" height={125} alt="Angular bullet graph ranges" />
-
-## Tick Marks
-The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the bullet graph.
-- Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties.
-- Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70
-    maximumValue=100 targetValue=90
-    interval=10
-    tickBrush="DodgerBlue"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.2
-    tickEndExtent=0.075
-    minorTickCount=4
-    minorTickBrush="DarkViolet"
-    minorTickEndExtent=0.1
-    minorTickStartExtent=0.2
-    minorTickStrokeThickness=1>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/tickmarks" height={125} alt="Angular bullet graph tickmarks" />
-
-## Labels
-The labels indicate the measures on the scale.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="DodgerBlue"
-    font="11px Verdana">
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/labels" height={125} alt="Angular bullet graph labels" />
-
-## Backing
-The backing element represents background and border of the bullet graph component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    backingBrush="#bddcfc"
-    backingOutline="DodgerBlue"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/background" height={125} alt="Angular bullet graph background" />
-
-## Scale
-The scale is visual element that highlights the full range of values in the gauge. You can customize appearance and shape of the scale. The scale can also be inverted (using <ApiLink type="BulletGraph" member="isScaleInverted" label="IsScaleInverted" /> property) and all labels will be rendered from right-to-left instead of left-to-right.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    isScaleInverted=false
-    scaleBackgroundBrush="DodgerBlue"
-    scaleBackgroundOutline="DarkViolet"
-    scaleBackgroundThickness=2
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/scale" height={125} alt="Angular bullet graph scale" />
-
-## Summary
-For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the bullet graph with all features and visuals enabled.
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100
-    isScaleInverted=false
-    scaleBackgroundBrush="Gray"
-    scaleBackgroundOutline="Gray"
-    scaleBackgroundThickness=2
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95
-
-    value=50
-    valueBrush="Black"
-    valueStrokeThickness=1
-    valueInnerExtent=0.5
-    valueOuterExtent=0.65
-    targetValue=80
-    targetValueBreadth=7.5
-    targetValueBrush="Black"
-    targetValueOutline="Black"
-    targetValueStrokeThickness=1
-    targetValueInnerExtent=0.3
-    targetValueOuterExtent=0.85
-
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="Black"
-    font="11px Verdana"
-
-    backingBrush="#cecece"
-    backingOutline="#cecece"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1
-
-    interval=10
-    tickBrush="Black"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.2
-    tickEndExtent=0.075
-
-    minorTickCount=4
-    minorTickBrush="Black"
-    minorTickEndExtent=0.1
-    minorTickStartExtent=0.2
-    minorTickStrokeThickness=1
-
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=20 endValue=40
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=40 endValue=60
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=60 endValue=90
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-</igx-bullet-graph>
-```
-
-## API References
-<ApiLink type="BulletGraph" />
-<ApiLink type="LinearGraphRange" />
-## Additional Resources
-
-You can find more information about other types of gauges in these topics:
-
-- [Linear Gauge](Linear-gauge.md)
-- [Radial Gauge](radial-gauge.md)
diff --git a/docs/angular/src/content/en/components/charts/chart-api.mdx b/docs/angular/src/content/en/components/charts/chart-api.mdx
deleted file mode 100644
index 09be9aebfd..0000000000
--- a/docs/angular/src/content/en/components/charts/chart-api.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: Angular Chart API | Data Visualization Tools | Infragistics
-description: Use Infragistics Ignite UI for Angular chart provides useful API to configure and styles chart visuals
-keywords: Angular charts, chart API, API, Ignite UI for Angular, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular charts provide simple and easy to use APIs to plot your data in CategoryChart, FinancialChart, DataChart, DataPieChart, DoughnutChart, PieChart, and Sparkline UI elements."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Charts API
-
-The Ignite UI for Angular charts provide simple and easy to use APIs to plot your data in <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, <ApiLink type="DataChart" />, <ApiLink type="DataPieChart" />, <ApiLink type="DoughnutChart" />, <ApiLink type="PieChart" />, and <ApiLink type="Sparkline" /> UI elements.
-
-## Angular Category Chart API
-
-The Angular <ApiLink type="CategoryChart" /> has the following API members:
-
-| Chart Properties | Axis Properties | Series Properties |
-|------------------|-----------------|-------------------|
-| - <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> <br /> - <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="CategoryChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" /> <br /> - <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> <br /> - <ApiLink type="DataChart" member="highlightingBehavior" label="HighlightingBehavior" /> <br /> - <ApiLink type="DataChart" member="highlightingMode" label="HighlightingMode" /> <br /> - <ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> <br /> |  - <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> <br /> - <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> <br /> - <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> <br /> - <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" />  <br /> - <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />  <br /> - <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> <br />  - <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> <br /> - <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> | - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> <br />  - <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> <br /> <br /> <br /> <br /> <br /> |
-
-## Angular Financial Chart API
-
-The Angular <ApiLink type="FinancialChart" /> has the following API members:
-
-| Chart Properties | Axis Properties | Series Properties |
-|------------------|-----------------|-------------------|
-| - <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> <br /> - <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" />  <br /> - <ApiLink type="CategoryChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" />  <br /> - <ApiLink type="DataChart" member="highlightingBehavior" label="HighlightingBehavior" /> <br /> - <ApiLink type="DataChart" member="highlightingMode" label="HighlightingMode" /> <br /> - <ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> |  - <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> <br /> - <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" /> <br /> - <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />  <br /> - <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> <br />  - <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> <br /> - <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> <br /> - <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> <br /> - <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" /> | - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" />  <br /> - <ApiLink type="FinancialChart" member="indicatorTypes" label="IndicatorTypes" /> <br />  - <ApiLink type="FinancialChart" member="volumeType" label="VolumeType" /> <br />  - <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> <br /> <br /> <br /> |
-
-## Angular Data Chart API
-
-The Angular <ApiLink type="DataChart" /> has the following API members:
-
-| Chart Properties | Axis Classes |
-|------------------|--------------|
-| - <ApiLink type="SeriesViewer" member="title" label="Title" /> <br /> - <ApiLink type="SeriesViewer" member="subtitle" label="Subtitle" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="DataChart" member="axes" label="Axes" /> <br /> - <ApiLink type="SeriesViewer" member="series" label="Series" /> <br /> |  - <ApiLink type="Axis" /> is base class for all axis types <br /> - <ApiLink type="CategoryXAxis" /> used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br /> - <ApiLink type="CategoryYAxis" /> used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md) <br /> - <ApiLink type="CategoryAngleAxis" /> used with [Radial Series](types/radial-chart.md) <br /> - <ApiLink type="NumericXAxis" /> used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)   <br /> - <ApiLink type="NumericYAxis" /> used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br /> - <ApiLink type="NumericAngleAxis" /> used with [Polar Series](types/polar-chart.md) <br /> - <ApiLink type="NumericRadiusAxis" /> used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md) <br /> - <ApiLink type="TimeXAxis" /> used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md) <br /> <br /> |
-
-The Angular <ApiLink type="DataChart" /> can use the following type of series that inherit from <ApiLink type="DataChart" member="Series" label="Series" />:
-
-| Category Series  | Stacked Series |
-|------------------|----------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="BarSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - `RangeBarSeries` <br /> - <ApiLink type="WaterfallSeries" /> <br /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedBarSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100BarSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> <br /> <br /> |
-
-| Scatter Series | Financial Series |
-|----------------|------------------|
-| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - and [many more](types/stock-chart.md) |
-
-| Radial Series | Polar Series |
-|---------------|--------------|
-| - <ApiLink type="RadialLineSeries" /> <br /> - <ApiLink type="RadialAreaSeries" /> <br /> - <ApiLink type="RadialPieSeries" /> <br /> - <ApiLink type="RadialColumnSeries" /> <br /> <br /> | - <ApiLink type="PolarScatterSeries" /> <br /> - <ApiLink type="PolarLineSeries" /> <br /> - <ApiLink type="PolarAreaSeries" /> <br /> - <ApiLink type="PolarSplineSeries" /> <br /> - <ApiLink type="PolarSplineAreaSeries" /> <br /> |
-
-## Angular Data Legend API
-
-The Angular <ApiLink type="DataLegend" /> has the following API members:
-
-- <ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" />
-- <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" />
-- <ApiLink type="DataLegend" member="includedSeries" label="IncludedSeries" />
-- <ApiLink type="DataLegend" member="excludedSeries" label="ExcludedSeries" />
-- <ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" />
-- <ApiLink type="DataLegend" member="valueFormatMode" label="ValueFormatMode" />
-- <ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" />
-- <ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" />
-- <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" />
-- <ApiLink type="DataLegend" member="valueTextColor" label="ValueTextColor" />
-- <ApiLink type="DataChart" member="titleTextColor" label="TitleTextColor" />
-- <ApiLink type="DataLegend" member="labelTextColor" label="LabelTextColor" />
-- <ApiLink type="DataLegend" member="unitsTextColor" label="UnitsTextColor" />
-- <ApiLink type="DataLegend" member="summaryType" label="SummaryType" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="badgeShape" label="BadgeShape" />
-
-## Angular Donut Chart API
-
-The Angular <ApiLink type="DoughnutChart" /> has the following API members:
-
-- <ApiLink type="DoughnutChart" member="allowSliceExplosion" label="AllowSliceExplosion" />
-- <ApiLink type="DoughnutChart" member="allowSliceSelection" label="AllowSliceSelection" />
-- <ApiLink type="DoughnutChart" member="innerExtent" label="InnerExtent" />
-
-## Angular Data Pie Chart API
-
-The Angular <ApiLink type="DataPieChart" /> has the following API members:
-
-- <ApiLink type="DataPieChart" member="highlightingBehavior" label="HighlightingBehavior" />
-- <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />
-- <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />
-- <ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" />
-- <ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" />
-
-## Angular Pie Chart API
-
-The Angular <ApiLink type="PieChart" /> has the following API members:
-
-- <ApiLink type="PieChart" member="legendItemBadgeTemplate" label="LegendItemBadgeTemplate" />
-- <ApiLink type="PieChart" member="legendItemTemplate" label="LegendItemTemplate" />
-- <ApiLink type="PieChart" member="legendLabelMemberPath" label="LegendLabelMemberPath" />
-- <ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />
-- <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" />
-- <ApiLink type="PieChart" member="selectionMode" label="SelectionMode" />
-
-## Angular Sparkline Chart API
-
-The Angular <ApiLink type="Sparkline" /> has the following API members:
-
-- <ApiLink type="Sparkline" member="displayNormalRangeInFront" label="DisplayNormalRangeInFront" />
-- <ApiLink type="Sparkline" member="displayType" label="DisplayType" />
-- <ApiLink type="Sparkline" member="lowMarkerBrush" label="LowMarkerBrush" />
-- <ApiLink type="Sparkline" member="lowMarkerSize" label="LowMarkerSize" />
-- <ApiLink type="Sparkline" member="lowMarkerVisibility" label="LowMarkerVisibility" />
-- <ApiLink type="Sparkline" member="normalRangeFill" label="NormalRangeFill" />
-- <ApiLink type="CategoryChart" member="unknownValuePlotting" label="UnknownValuePlotting" />
-
-## Additional Resources
-
-You can find more information about charts in these topics:
-
-- [Chart Overview](chart-overview.md)
-- [Chart Features](chart-features.md)
diff --git a/docs/angular/src/content/en/components/charts/chart-features.mdx b/docs/angular/src/content/en/components/charts/chart-features.mdx
deleted file mode 100644
index 5b3fb1a799..0000000000
--- a/docs/angular/src/content/en/components/charts/chart-features.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: "Angular Chart Features | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Features
-keywords: "Angular Charts, Features, Infragistics"
-license: commercial
-mentionedTypes: ["FinancialChart", "CategoryChart", "DataChart"]
-llms:
-  description: "The Ignite UI for Angular Charts allow you to display many different features to portray the full data story to be told with your chart."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Features
-
-The Ignite UI for Angular Charts allow you to display many different features to portray the full data story to be told with your chart. Each of these features are fully customizable, and can be styled to suit your design needs — allowing you full control. Interactions such as highlighting and annotations allow you to call out important data details allowing for a deeper data analysis within your chart.
-
-The Angular Charts offer the following chart features:
-
-## Axis
-
-Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the Angular chart's [Axis Gridlines](features/chart-axis-gridlines.md), [Axis Layouts](features/chart-axis-layouts.md), and [Axis Options](features/chart-axis-options.md) topic.
-
-<Sample src="/charts/data-chart/axis-crossing" height={500} alt="Angular Axis Crossing Axes Example" />
-
-## Annotations
-
-These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the [Chart Annotations](features/chart-annotations.md) topic.
-
-<Sample src="/charts/category-chart/line-chart-with-annotations" height={500} alt="Angular Annotations Example" />
-
-## Animations
-
-Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the [Chart Animations](features/chart-animations.md) topic.
-
-<Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="Angular Configuration Options Example" />
-
-## Highlighting
-
-Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This feature is enabled on all chart types. You can learn more about this feature in the [Chart Highlighting](features/chart-highlighting.md) topic.
-
-<Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="Angular Highlighting Example" />
-
-## Markers
-
-Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the [Chart Markers](features/chart-markers.md) topic.
-
-<Sample src="/charts/category-chart/marker-options" height={500} alt="Angular Configuration Options Example" />
-
-## Navigation
-
-You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the [Chart Navigation](features/chart-navigation.md) topic.
-
-<Sample src="/charts/data-chart/chart-navigation" height={500} alt="Angular Navigation Example" />
-
-## Overlays
-
-Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the [Chart Overlays](features/chart-overlays.md) topic.
-
-<Sample src="/charts/data-chart/series-value-overlay" height={600} alt="Angular Value Overlay Example" />
-
-## Performance
-
-Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the [Chart Performance](features/chart-performance.md) topic.
-
-<Sample src="/charts/category-chart/high-volume" height={600} alt="Angular Chart Performance Example" />
-
-## Tooltips
-
-Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the [Chart Tooltips](features/chart-tooltips.md) topic.
-
-<Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="Angular Tooltip Types Example" />
-
-## Trendlines
-
-Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the Angular chart, such as CubicFit and LinearFit. You can learn more about this feature in the [Chart Trendlines](features/chart-trendlines.md) topic.
-
-<Sample src="/charts/financial-chart/trendlines" height={500} alt="Angular Trendlines Example" />
-
-## API References
-<ApiLink type="FinancialChart" />
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/chart-overview.mdx b/docs/angular/src/content/en/components/charts/chart-overview.mdx
deleted file mode 100644
index 90b8471a59..0000000000
--- a/docs/angular/src/content/en/components/charts/chart-overview.mdx
+++ /dev/null
@@ -1,241 +0,0 @@
----
-title: "Angular Charts & Graphs Library | Ignite UI for Angular"
-description: "Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts for your web and mobile apps. Try for FREE."
-keywords: "Angular Charts, Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "DataChart", "CategoryChartType"]
-llms:
-  description: "Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your web and mobile apps."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import igniteUiAngularFinancialChartModularDesign1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg';
-import igniteUiAngularFinancialChartSmartDataBinding1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg';
-import igniteUiAngularFinancialChartTrendlines1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg';
-import igniteUiAngularFinancialChartZooming1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif';
-import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg';
-
-# Angular Charts & Graphs Overview
-
-Ignite UI for Angular Charts & Graphs is an extensive library of data visualizations that enable stunning, interactive charts and dashboards for your web and mobile apps. Built for speed and beauty, designed to work on every modern browser, and with complete touch and interactivity, you can quickly and easily build responsive visuals into your next app on any device.
-
-The Ignite UI for Angular Charts support over 65 types of series and combinations that let you visualize any type of data, including Category Series, Financial Series, Polar Series, Radial Series, Range Series, Scatter Series, Shape Series, and Geospatial Series. No matter the type of comparison you are doing, or what type of data story you are trying to tell, you can represent your data in any of these ways:
-
-- Change Over Time
-- Comparison
-- Correlation
-- Distribution
-- Geospatial
-- Overview + Detail
-- Part to Whole
-- Ranking
-
-Power your most demanding visualizations with Infragistics Angular charting!
-
-## Angular Chart and Graph Types
-
-The Angular product has over 65 different chart and graph types for any scenario – from a single chart display to an interactive dashboard. You can create Angular charts like Pie, Bar, Area, Line, Point, Stacked, Donut, Scatter, Gauge, Polar, Treemap, Stock, Financial, Geospatial Maps and more for your mobile or web apps. The benefit of our Angular chart vs. others is full support for features like:
-
-- Responsive Web Design built in
-- Interactive Panning and Zooming with Mouse, Keyboard and Touch
-- Full Control of Chart Animation
-- Chart Drill-Down Events
-- Real-Time Streaming Support
-- High-Volume (Millions of Data Points) Support
-- Trends Lines and other Data Analysis features
-Built with a modular design of axis, markers, series, legend, and annotation layers, the Angular chart makes it easy to design a render any type of data story. Build a simple chart with a single data series, or build more complex data stories with multiple series of data, with multiple axis in composite views.
-
-## Category and Financial Chart vs. Data Chart
-
-The Angular Category and Financial Chart is what we refer to as our domain specific charts. It's a wrapper around Angular Data Chart that assumes your domain is a category, or financial price series.
-
-Choosing these specific domain charts allows to simplify the API and draw a lot of interfaces about the data to automatically configure the chart scenario, all without needing to explicitly define attributes such as axes, series, and annotations. In contrast, the data chart is very explicit and every critical part of the chart needs to be defined.
-
-Domain charts are using a data chart at its core; so the same performance optimizations apply to both. The difference lies in whether they are trying to make things very easy to specify for the developer, or to be as flexible as possible. Angular Data Chart is more verbose, unlocking all of our charting capabilities you need, allowing you to mix and match of any number of series, axes or annotation for example. For the category and financial charts, there might be a situation that cannot be easily done that the data chart is more suited for, such as a series with a scatter series with a numeric x axis.
-
-It can be difficult to know which chart to pick at first. It's crucial to understand the type of series and how many additional features you want to present. For a more light-weight basic category or financial series, we recommend using one of the domain charts. For more advances scenarios we recommend using Angular Data Chart, such as presenting something other than what is covered by the category chart's <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property such as a stacked or scatter series, or numeric or time-based data. It's worth noting that the Angular Financial Chart covers only column, OHLC bar, candlestick, and line series types.
-
-We make Angular Category and Financial Chart easier to use, the good news you can always switch to data chart in the future.
-
-### Angular Bar Chart
-
-The Angular Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our [bar chart](types/bar-chart.md)
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="Angular Bar Chart Multiple Sources" />
-
-### Angular Pie Chart
-
-The Angular Pie Chart, or Pie Graph, is a very common part-to-whole chart type. Part-to-whole charts show how categories (parts) of a data set add up to a total (whole) value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed. A pie chart renders data values as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. The total values represented by the pie slices represent a whole value, like 100 or 100%. Pie charts are perfect for small data sets and are easy to read at a quick glance. Learn more about our [pie chart](types/pie-chart.md)
-
-<Sample src="/charts/pie-chart/overview" height={600} alt="Angular Pie Chart Overview" />
-
-### Angular Line Chart
-
-The Angular Line Chart, or Line Graph is a type of category line graph shows the continuous data values represented by points connected by straight line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. Learn more about our [line chart](types/line-chart.md)
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="Angular Line Chart Multiple Sources" />
-
-### Angular Donut Chart
-
-The Angular Donut Chart or Donut Graph, is a variant of a Pie Chart, proportionally illustrating the occurrences of a variable in a circle to represents parts of a whole. The donut chart has a circular opening at the center of the pie chart, where a title or category explanation can be displayed. Donut charts can support multiple concentric rings, with built-in support for visualizing hierarchical data. Learn more about our [Donut chart](types/donut-chart.md)
-
-<Sample src="/charts/doughnut-chart/legend" height={600} alt="Angular Doughnut Legend" />
-
-### Angular Area Chart
-
-The Angular Area Chart is rendered using a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). Area Charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Learn more about our [area chart](types/area-chart.md)
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="Angular Area Chart Multiple Sources" />
-
-### Angular Sparkline Chart
-
-The Angular Sparkline Chart, or Sparkline Graph is a type of category graph intended for rendering within a small-scale layout such as within a grid cell, or anywhere a word-sized visualization is needed to tell a data story. Like other Angular chart types, the Sparkline Chart has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. Sparkline charts can render as a Line Chart, Area Chart, Column Chart or Win / Loss Chart. The difference between the full-sized chart equivalent to the Spark-chart, is the Y-Axis (left side labels) and X-Axis (bottom labels) are not visible. Learn more about our [sparkline chart](types/sparkline-chart.md).
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular Sparkline Example" />
-
-### Angular Bubble Chart
-
-The Angular Bubble Chart, or Bubble Graph, is used to show data comprising of three numeric values. Two of the values are plotted as an intersecting point using a Cartesian (X, Y) coordinate system, and the third value is rendered as the diameter size of the point. This gives the Bubble Chart its name - a visualization of varying sized bubbles along the X and Y coordinates of the plot. The Angular Bubble Chart is used to show relationships of data correlations with the data value differences rendered by size. You can also use a fourth data dimension, typically color, to further differentiate the values in your Bubble chart. Learn more about our [bubble chart](types/bubble-chart.md).
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="Angular Bubble Chart" />
-
-### Angular Financial / Stock Chart
-
-The Angular Financial or Stock Chart, is a composite visualization that renders stock data and financial data in a time-series chart that includes interactive visual elements in a toolbar like day / week / month filters, chart type selection, volume type selection, indicators selection and trends lines selection. Designed for customization, the Angular Stock Chart can be customized in any way to give an easier visualization and interpretation of your data. The financial chart renders the date-time data along the X-Axis (bottom labels) and shows fields like Open, High, Low and Close volumes. The type of chart to render the Time-Series data can be Bar, Candle, Column, or Line. Learn more about our [stock chart](types/stock-chart.md).
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular Stock Chart Example" />
-
-### Angular Column Chart
-
-The Angular Column Chart, or Column Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by vertical bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the top to bottom of the chart towards the values of data points. Learn more about our [column chart](types/column-chart.md).
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="Angular Column Chart Multiple Sources" />
-
-### Angular Composite Chart
-
-The Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. Learn more about our [composite chart](types/composite-chart.md).
-
-<Sample src="/charts/data-chart/composite-chart" height={600} alt="Angular Composite Chart Example" />
-
-{/* ### Angular Gantt Chart
-
-The Angular Gantt Chart is a type of bar chart, that visualizes various categories into time series. Gantt charts illustrate the start and finish time in time period blocks. It is often used in project management as one of the most popular and useful ways of showing activities (tasks or events) displayed against time. On the left of the chart is a list of the activities and along the top is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. Learn more about our [gantt chart](types/gantt-chart.md). */}
-
-{/* ### Angular Network Chart
-
-The Angular Network Chart, also called Network Graph or Polyline Chart, visualizes complex relationships between a large amount of elements. This visualization displays undirected and directed graph structures. It also shows relationships between entities that are displayed as round nodes and lines show the relationships between them. Learn more about our [network chart](types/network-chart.md). */}
-
-### Angular Polar Chart
-
-The Angular Polar Area Chart or Polar Graph belongs to a group of polar charts and has a shape of a filled polygon which vertices or corners are located at the polar (angle/radius) coordinates of data points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Chart but wraps data points around a circle rather than stretching them horizontally. Like with other series types, multiple Polar Area Charts can be plotted in the same data chart and they can be overlaid on each other to show differences and similarities between data sets. Learn more about our [polar chart](types/polar-chart.md).
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular Polar Line Chart" />
-
-{/* ### Angular Pyramid Chart
-
-The Angular Pyramid Chart, also called an age pyramid or population pyramid, is a graphical illustration that shows distribution of various age groups in a population, which forms the shape of a pyramid when the population is growing. It is also used in ecology to determine the overall age distribution of a population; an indication of the reproductive capabilities and likelihood of the continuation of a species. Learn more about our [pyramid chart](types/pyramid-chart.md). */}
-
-### Angular Scatter Chart
-
-The Angular Scatter Chart, or Scatter Graph, is used to show the relationship between two values using a Cartesian (X, Y) coordinate system to plot data. Each data point is rendered as the intersecting point of the data value on the X and Y Axis. Scatter charts draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The Angular Scatter chart organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. Learn more about our [scatter chart](types/scatter-chart.md).
-
-<Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="Angular Scatter Marker Chart" />
-
-### Angular Shape Chart
-
-The Angular Shape Charts is a group of chart that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. Learn more about our [shape chart](types/shape-chart.md).
-
-<Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="Angular Scatter Polygon Chart" />
-
-### Angular Spline Chart
-
-The Angular Spline Chart, or Spline Graph is a type of category line graph shows the continuous data values represented by points connected by smooth line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. The Angular Spline chart is identical to the Angular Spline chart, the only different being the line chart is points connected by straight lines, and the spline chart points are connected by smooth curves. Learn more about our [spline chart](types/spline-chart.md).
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="Angular Spline Chart Multiple Sources" />
-
-### Angular Step Chart
-
-The Angular Step Chart, or Step Graph, is a category charts that renders a collection of data points connected by continuous vertical and horizontal lines forming a step-like progression. Values are represented on the Y-Axis (left labels) and categories are displayed on the X-Axis (bottom labels). The Angular Step Line chart emphasizes the amount of change over a period of time or compares multiple items. The Angular Step Line chart is identical to the Angular Step Area Chart in all aspects except that the area below the step lines is not filled in. Learn more about our [step chart](types/step-chart.md)
-
-<Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="Angular Step Line Chart Multiple Sources" />
-
-{/* ### Angular Timeline / Time-Series Charts
-
-A Time-Series Chart, or Timeline Graph, is a visualization that treats the data as a sequence of category data items that are sorted by then rendered by date. Labels on this axis are placed along the X-Axis (bottom Axis), according to the date-time value. The Angular Time-Series is use to show Financial Series, Range Series, and Category Series (Line, Area, Column, Point, Spline, Scatter, Waterfall and the Stacked equivalents of those chart types). The Time-Series also supports the ability to exclude intervals of data with breaks. As a result, labels will not appear at the excluded interval. For example, working/non-working days, holidays, or weekends. */}
-
-### Angular Treemap
-
-The Ignite UI for Angular Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node's rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. Learn more about our [treemaps](types/treemap-chart.md).
-
-<Sample src="/charts/tree-map/overview" height={600} alt="Angular Treemap Example" />
-
-## Angular Charts Key Features
-
-Show how your data changes over time with our built-in Time Axis. We'll dynamically change time scales and label formats, as you interact with your chart. We've included a complete Financial Chart with all of the features you've come to expect in your financial charts, like Yahoo Finance or Google Finance.
-
-### Dynamic Charts
-
-Visualize your data by creating new [Composite Chart](types/Composite-chart.md) and overlapping multiple series in single chart. In the Chart, you can display and overlap multiple chart columns to create stacked columns.
-
-### Custom Tooltips
-
-Visualize your data by creating new composite views and overlapping multiple series in single chart. In the Chart, you can create [Custom Tooltips](features/chart-tooltips.md#angular-chart-tooltip-template) with images, data binding, and even combine tooltips of multiple series into single tooltip.
-
-### High-Performance, Real-Time Charting
-
-Display thousands of data points with milliseconds-level updates in real time with live, streaming data. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. For a demo, refer to the [Chart with High-Frequency](features/chart-performance.md#angular-chart-with-high-frequency) topic.
-
-### High-Volume Data Handling
-
-Optimize [Chart Performance](features/chart-performance.md) to render millions of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. For a demo, refer to the [Chart with High-Volume](features/chart-performance.md#angular-chart-with-high-volume) topic.
-
-### Modular Design
-
-The Angular chart is designed for modularity. Only features that are needed are part of your deployment, so you get the smallest possible footprint in your rendered pages.
-
-<Image src={igniteUiAngularFinancialChartModularDesign1100} alt="Angular Charts Modular Design" class="responsive-img" />
-
-### Smart Data Binding
-
-Let us choose the chart type. Our smart Data Adapter automatically chooses the best chart type for the data. All you do is set the data source and we do the rest.
-
-<Image src={igniteUiAngularFinancialChartSmartDataBinding1100} alt="Angular Charts Smart Data Binding" class="responsive-img" />
-
-### Trendlines
-
-Angular Charts support all [Trendlines](features/chart-trendlines.md) you'll ever need, including linear (x), quadratic (x2), cubic (x3), quartic (x4), quintic (x5), logarithmic (log x), exponential (ex), and power law (axk + o(xk)) trend lines.
-
-<Image src={igniteUiAngularFinancialChartTrendlines1100} alt="Angular Charts Trendlines" class="responsive-img" />
-
-### Interactive Panning and Zooming
-
-Use single or multi-touch, keyboard, zoom bar, mouse wheel, drag-select for any rectangular region with the mouse to zoom in for close-up look at data points, scroll data history, or pan data regions.
-
-<Image src={igniteUiAngularFinancialChartZooming1100} alt="Angular Charts Interactive Panning and Zooming" class="responsive-img" />
-
-### Markers, Tooltips, and Templates
-
-Use one of 10 [Marker Types](features/chart-markers.md) or create your own [Marker Template](features/chart-markers.md#angular-chart-marker-templates) to highlight data or use simple [Tooltips](features/chart-tooltips.md) or multi-axis and multi-series chart with [Custom Tooltips](features/chart-tooltips.md#angular-chart-tooltip-template) to give more context and meaning to your data.
-
-<Image src={igniteUiAngularFinancialChartCustomTooltips1100} alt="Angular Charts Markers, Tooltips, and Templates" class="responsive-img" />
-
-## But Wait, There's More!
-
-If you are considering any other Angular Charts on the market, here are a few things to think about:
-
-- We include over 65 Angular chart types and combination charts, with the simplest configuration on the market with our smart data adapter.
-- Our charts are optimized on all platforms including Angular, Blazor, jQuery / JavaScript, React, UNO, UWP, WPF, Windows Forms, WebComponents, WinUI, and Xamarin. They support the same API and same features on every platform.
-- Our stock chart and financial charting gives you everything you need for a Yahoo Finance or Google Finance-like experience – all with a single line of code.
-- We test against everyone elses performance. Everyone says they are fast and can handle lots of data, but we can prove it. See for yourself how we handle high-volume data and real-time data streaming.
-- We are here 24x5. Infragistics has global support that is always online. For North America, Asia Pacific, Middle East, and Europe, we are on the clock when you are!
-- We have many more UI controls in Angular besides the Charts. We offer a complete Angular solution to build your applications!
-
-- Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular.
-- We offer the world's first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls.
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
-<ApiLink type="FinancialChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx b/docs/angular/src/content/en/components/charts/features/chart-animations.mdx
deleted file mode 100644
index cbad7f6767..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-animations.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Angular Chart Animations | Data Visualization | Infragistics
-description: Infragistics' Angular Chart Animations
-keywords: Angular Charts, Animations, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Animations allow you to ease-in the series as it loads a new data source."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Animations
-
-Animations allow you to ease-in the series as it loads a new data source. The available animation differs depending on the type of series involved. For example, the column series animates by rising from the x-axis, a line series animates by drawing from the origin of y-axis.
-
-Animations are disabled in the Ignite UI for Angular Charts, but they can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
-
-## Angular Chart Animation Example
-
-The following example depicts a [Line Chart](../types/line-chart.md) with an animation set to the default <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> - "Auto." The drop-down and slider at the top in this example will allow you to modify the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> and <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" />, respectively, so that you can see what the different supported animations look like at different speeds.
-
-<Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="Angular Configuration Options Example" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Tooltips](chart-tooltips.md)
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
deleted file mode 100644
index 356a7d629e..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-annotations.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Angular Chart Annotations | Data Visualization | Infragistics
-description: Infragistics' Angular Chart Annotations
-keywords: Angular Charts, Annotations, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Annotations
-
-The Angular chart's hover interactions and annotations are implemented through hover interaction layers, which are series that are added to the series collection. These layers are dependent on the cursor position. Each of these annotation layers provides a different hover interaction that may be used individually or combined with others to provide powerful hover interactions.
-
-## Angular Annotations Example
-
-The following example demonstrates the annotation layers that are available on the Angular chart. Click on the checkboxes to turn each layer on and off.
-
-<Sample src="/charts/category-chart/line-chart-with-annotations" height={600} alt="Angular Annotations Example" />
-
-Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a>
-
-## Angular Crosshair Layer
-
-The <ApiLink type="CrosshairLayer" /> renders as crossing lines intersecting at the actual value of every series that they are configured to target with each series rendering a separate set of lines.
-
-Crosshair types include:
-- Horizontal
-- Vertical
-- Both
-
-The chart's crosshairs can also be configured to snap to data points by setting the <ApiLink type="CategoryChart" member="crosshairsSnapToData" label="CrosshairsSnapToData" /> property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
-
-You can configure the crosshair layer so that the layer will only display on one specific series, as by default they will target all series in the chart control. To achieve this, set the <ApiLink type="CrosshairLayer" member="targetSeries" label="TargetSeries" /> property.
-
-By default, the color of the crosshair lines is a lighter color than the series that it is interacting with. However, this default setting can be overridden so that you can select a color that will be used for the crosshair lines. This is done by setting the <ApiLink type="CrosshairLayer" member="brush" label="Brush" /> property of the Crosshair Layer.
-
-The following example shows how to configure the crosshair layer but targeting a single series, setting the type to vertical and styling the brush color.
-
-<Sample src="/charts/data-chart/crosshair-layer-styling" height={500} alt="Angular Crosshair Layer Styling" />
-
-## Angular Final Value Layer
-
-The <ApiLink type="FinalValueLayer" /> of the <ApiLink type="DataChart" /> control provides a quick view along the axis of the ending value displayed in a series.
-
-You can configure this annotation to target a specific series if you want to have multiple final value layers present with different configurations. This can be done be setting the <ApiLink type="FinalValueLayer" member="targetSeries" label="TargetSeries" /> property.
-
-You can also customize this annotation by setting the following properties:
-
-- <ApiLink type="FinalValueLayer" member="axisAnnotationBackground" label="AxisAnnotationBackground" />: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
-- <ApiLink type="FinalValueLayer" member="axisAnnotationTextColor" label="AxisAnnotationTextColor" />: This property is used to choose the brush for the annotation's text color.
-- <ApiLink type="FinalValueLayer" member="axisAnnotationOutline" label="AxisAnnotationOutline" />: This property is used to choose the brush for the annotation's outline color.
-
-The following example demonstrates how to style the final value layer annotation by setting the properties listed above.
-
-<Sample src="/charts/data-chart/final-value-layer-styling" height={500} alt="Angular Final Value Layer Styling" />
-
-```html
-<igx-category-chart
-    [dataSource]="data"
-    finalValueAnnotationsVisible="true">
-</igx-category-chart>
-```
-
-## Angular Callout Layer
-
-The <ApiLink type="CalloutLayer" /> displays annotations from existing or new data on the chart control. The annotations appear next to the given data values in the data source.
-
-Use the callout annotations to display additional information, such as notes or specific details about data points, that you would like to point out to your users.
-
-You can configure the callouts to target a specific series if you want to have multiple callout layers present with different configurations. This can be done by setting the <ApiLink type="CalloutLayer" member="targetSeries" label="TargetSeries" /> property.
-
-You can also customize this annotation by setting the following properties:
-
-- <ApiLink type="CalloutLayer" member="calloutLeaderBrush" label="CalloutLeaderBrush" />: This property is used to choose the brush for the leader lines for the callouts for the layer.
-- <ApiLink type="CalloutLayer" member="calloutOutline" label="CalloutOutline" />: This property is used to choose the brush for the annotation's outline color.
-- <ApiLink type="CalloutLayer" member="calloutBackground" label="CalloutBackground" />: This property is used to choose the brush for the annotation's background color. The default is to use the series brush.
-- <ApiLink type="CalloutLayer" member="calloutTextColor" label="CalloutTextColor" />: This property is used to choose the brush for the annotation's text color.
-- <ApiLink type="CalloutLayer" member="calloutStrokeThickness" label="CalloutStrokeThickness" />: This property is used to choose the thickness for the callout backing.
-- <ApiLink type="CalloutLayer" member="calloutCornerRadius" label="CalloutCornerRadius" />: This property is used to curve the corners of the callouts.
-- <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" />: This property is used to choose which positions that the callout layer is allowed to use. eg. top, bottom
-
-The following example demonstrates how to style the callout layer annotations by setting the properties listed above:
-
-<Sample src="/charts/data-chart/callout-layer-styling" height={500} alt="Angular Callout Layer Styling" />
-
-```html
-<igx-category-chart
-    [dataSource]="data"
-    calloutsVisible="true"
-    [calloutsDataSource]="calloutData"
-    calloutsXMemberPath="index"
-    calloutsYMemberPath="value"
-    calloutsLabelMemberPath="info">
-</igx-category-chart>
-```
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx
deleted file mode 100644
index bb610320c2..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-axis-gridlines.mdx
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: "Angular Axis Gridlines | Data Visualization | Infragistics"
-description: Infragistics' Angular Axis Gridlines
-keywords: "Angular Axis, Gridlines, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "XYChart", "DomainChart", "DataChart", "NumericXAxis", "NumericYAxis", "NumericAxisBase" ]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Axis Gridlines
-
-All Ignite UI for Angular charts include built-in capability to modify appearance of axis lines as well as frequency of major/minor gridlines and tickmarks that are rendered on the X-Axis and Y-Axis.
-
-<DocsAside type="info">
-the following examples can be applied to <ApiLink type="CategoryChart" /> as well as <ApiLink type="FinancialChart" /> controls.
-</DocsAside>
-
-Axis major gridlines are long lines that extend horizontally along the Y-Axis or vertically along the X-Axis from locations of axis labels, and they render through the plot area of the chart. Axis minor gridlines are lines that render between axis major gridlines.
-
-Axis tickmarks are displayed along all horizontal and vertical axes at each label at all major line positions of the Angular chart.
-
-## Angular Axis Gridlines Example
-
-This example shows how configure the axis gridline to display major and minor gridlines at specified intervals:
-
-<Sample src="/charts/category-chart/axis-gridlines" height={450} alt="Angular Axis Gridlines Example" />
-
-<div class="divider--half"></div>
-
-## Angular Axis Gridlines Properties
-
-Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.
-
-In order to display minor gridlines that correspond to minor interval, you need to set <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /> and <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> properties on the axis. This is because minor gridlines do not have a default color or thickness and they will not be displayed without first assigning them.
-
-You can customize how the gridlines are displayed in your Angular chart by setting the following properties:
-
-| Axis Visuals           | Type    | Property Names                                               | Description |
-| -----------------------|---------|--------------------------------------------------------------|---------------- |
-| Major Stroke Color     | string  | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" />                   | These properties set the color of axis major gridlines. |
-| Minor Stroke Color     | string  | <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorStroke" label="YAxisMinorStroke" />                   | These properties set the color of axis minor gridlines. |
-| Major Stroke Thickness | number  | <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /> | These properties set the thickness in pixels of the axis major gridlines. |
-| Minor Stroke Thickness | number  | <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /> | These properties set the thickness in pixels of the axis minor gridlines. |
-| Major Interval         | number  | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" />                         | These properties set interval between axis major gridlines and labels. |
-| Minor Interval         | number  | <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" />               | These properties set interval between axis minor gridlines, if used. |
-| Axis Line Stroke Color | string  | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" />                   | These properties set the color of an axis line. |
-| Axis Stroke Thickness  | number  | <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" /> | These properties set the thickness in pixels of an axis line. |
-
-Regarding the Major and Minor Interval in the table above, it is important to note that the major interval for axis labels will also be set by this value, displaying one label at the point on the axis associated with the interval. The minor interval gridlines are always rendered between the major gridlines, and as such, the minor interval properties should always be set to something much smaller (usually 2-5 times smaller) than the value of the major Interval properties.
-
-On category axes, the intervals are represented as an index between first item and last category item. Generally, this value should equal to 10-20% of total numbers of category items for the major Interval so that all axis labels fit on axis so that they are not clipped by other axis labels. For minor intervals, this is represented as a fraction of the major interval properties. This value generally should equal between 0.25 and 0.5.
-
-On numeric axes, the interval values are represented as a double between axis minimum value and axis maximum value. By default, numeric axes will automatically calculate and find a nice and round interval based on axis minimum values and maximum value.
-
-On date time axes, this value is represented as time span between axis minimum value and axis maximum value.
-
-The following example demonstrates how to customize the gridlines by setting the properties above:
-
-<Sample src="/charts/category-chart/axis-gridlines" height={450} alt="Angular Axis Gridlines Example" />
-
-The axes of the <ApiLink type="DataChart" /> also have the ability to place a dash array on the major and minor gridlines by utilizing the <ApiLink type="NumericXAxis" member="majorStrokeDashArray" label="MajorStrokeDashArray" /> and <ApiLink type="NumericXAxis" member="minorStrokeDashArray" label="MinorStrokeDashArray" /> properties, respectively. The actual axis line can be dashed as well by setting the <ApiLink type="NumericXAxis" member="strokeDashArray" label="StrokeDashArray" /> property of the corresponding axis. These properties take an array of numbers that will describe the length of the dashes for the corresponding grid lines.
-
-The following example demonstrates a <ApiLink type="DataChart" /> with the above dash array properties set:
-
-<Sample src="/charts/data-chart/dash-array-axes" height={450} alt="Angular Axis Dash Array Example" />
-
-<div class="divider--half"></div>
-
-## Angular Axis Tickmarks Example
-
-Axis tick marks are enabled by setting the <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> and <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
-
-Tick marks are always extend from the axis line and point to the direction of the labels. Labels are offset by the value of the length of tickmarks to avoid overlapping. For example, with the <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> property is set to 5, axis labels will be shifted left by that amount.
-
-The following example demonstrates how to customize the tickmarks by setting the properties above:
-
-<Sample src="/charts/category-chart/axis-tickmarks" height={450} alt="Angular Axis Tickmarks Example" />
-
-<div class="divider--half"></div>
-
-## Angular Axis Tickmarks Properties
-
-You can customize how the axis tickmarks are displayed in our Angular chats by setting the following properties:
-
-| Axis Visuals           | Type    | Property Names                                             | Description |
-| -----------------------|---------|------------------------------------------------------------|------------------------- |
-| Tick Stroke Color      | string  | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" />                   | These properties set the color of the tickmarks. |
-| Tick Stroke Thickness  | number  | <ApiLink type="CategoryChart" member="xAxisTickStrokeThickness" label="XAxisTickStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickStrokeThickness" label="YAxisTickStrokeThickness" /> | These properties set the thickness of the axis tick marks. |
-| Tick Stroke Length     | number  | <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" />                   | These properties set the length of the axis tick marks. |
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Axis Layout](chart-axis-layouts.md)
-- [Axis Options](chart-axis-options.md)
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-
-| <ApiLink type="DataChart" />                                     | <ApiLink type="CategoryChart" /> or <ApiLink type="FinancialChart" /> |
-| -------------------------------------------------- | ----------------------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="interval" label="Interval" />             | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> (Major Interval) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="interval" label="Interval" />             | <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> (Major Interval) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="minorInterval" label="MinorInterval" />        | <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="minorInterval" label="MinorInterval" />        | <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="majorStroke" label="MajorStroke" />          | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="majorStroke" label="MajorStroke" />          | <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="majorStrokeThickness" label="MajorStrokeThickness" /> | <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="majorStrokeThickness" label="MajorStrokeThickness" /> | <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="minorStrokeThickness" label="MinorStrokeThickness" /> | <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="minorStrokeThickness" label="MinorStrokeThickness" /> | <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="strokeThickness" label="StrokeThickness" />      | <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="strokeThickness" label="StrokeThickness" />      | <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="stroke" label="Stroke" />               | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /> (Axis Line Color) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="stroke" label="Stroke" />               | <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" /> (Axis Line Color) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="tickLength" label="TickLength" />           | <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="tickLength" label="TickLength" />           | <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="tickStroke" label="TickStroke" />           | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="tickStroke" label="TickStroke" />           | <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="strip" label="Strip" />                | <ApiLink type="CategoryChart" member="xAxisStrip" label="XAxisStrip" /> (Space between Major Gridlines) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="strip" label="Strip" />                | <ApiLink type="CategoryChart" member="yAxisStrip" label="YAxisStrip" /> (Space between Major Gridlines) |
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
deleted file mode 100644
index edc68e7cf1..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-axis-layouts.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: "Angular Axis Layouts | Data Visualization | Infragistics"
-description: Infragistics' Angular Axis Layouts
-keywords: "Angular Axis, Layouts, Location, Position, Share, Multiple, Crossing, Infragistics"
-license: commercial
-mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "DataChart", "Axis", "AxisLabelSettings", "ScatterSplineSeries", "TimeXAxis" ]
-llms:
-  description: "All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Axis Layouts
-
-All Ignite UI for Angular charts include options to configure many axis layout options such as location as well as having the ability to share axis between series or have multiple axes in the same chart. These features are demonstrated in the examples given below.
-
-<DocsAside type="info">
-the following examples can be applied to <ApiLink type="CategoryChart" /> as well as <ApiLink type="FinancialChart" /> controls.
-</DocsAside>
-
-## Axis Locations Example
-
-For all axes, you can specify axis location in relationship to chart plot area. The <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property of the Angular charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> property to position y-axis on left side or right side of plot area.
-
-The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
-
-<Sample src="/charts/category-chart/axis-locations" height={450} alt="Angular Axis Locations Example" />
-
-{/* ## Axis Orientation Example
-
-TODO add info/example of 4 charts with all possible combinations of XAxisInverted and YAxisInverted
-e.g. https://www.infragistics.com/help/wpf/datachart-axis-orientation
- */}
-
-## Axis Advanced Scenarios
-
-For more advanced axis layout scenarios, you can use Angular Data Chart to share axis, add multiple y-axis and/or x-axis in the same plot area, or even cross axes at specific values. The following examples show how to use these features of the <ApiLink type="DataChart" />.
-
-### Axis Sharing Example
-
-You can share and add multiple axes in the same plot area of the Angular <ApiLink type="DataChart" />. It a common scenario to use share <ApiLink type="TimeXAxis" /> and add multiple <ApiLink type="NumericYAxis" /> to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).
-
-The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.md) and a [Column Chart](../types/column-chart.md) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.md) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.md), while the X-Axis is shared between the two.
-
-<Sample src="/charts/data-chart/axis-sharing" height={450} alt="Angular Axis Sharing Example" />
-
-<div class="divider--half"></div>
-
-### Axis Crossing Example
-
-In addition to placing axes outside plot area, the Angular <ApiLink type="DataChart" /> also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> and <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
-
-The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.md) with the X and Y axes crossing each other at the (0, 0) origin point.
-
-<Sample src="/charts/data-chart/axis-crossing" height={450} alt="Angular Axis Crossing Axes Example" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Options](chart-axis-options.md)
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-d in the above sections:
-
-| <ApiLink type="DataChart" />                                         | <ApiLink type="CategoryChart" />                 |
-| ------------------------------------------------------ | ------------------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" />             | None                            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="crossingValue" label="CrossingValue" />            | None                            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="isInverted" label="IsInverted" />               | <ApiLink type="CategoryChart" member="xAxisInverted" label="XAxisInverted" />                 |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="isInverted" label="IsInverted" />               | <ApiLink type="CategoryChart" member="yAxisInverted" label="YAxisInverted" />                 |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="labelLocation" label="LabelLocation" />            | <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="labelLocation" label="LabelLocation" />            | <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="labelHorizontalAlignment" label="LabelHorizontalAlignment" /> | <ApiLink type="CategoryChart" member="yAxisLabelHorizontalAlignment" label="YAxisLabelHorizontalAlignment" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="labelVerticalAlignment" label="LabelVerticalAlignment" />   | <ApiLink type="CategoryChart" member="xAxisLabelVerticalAlignment" label="XAxisLabelVerticalAlignment" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="labelVisibility" label="LabelVisibility" />          | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" />          |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="labelVisibility" label="LabelVisibility" />          | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" />          |
-
-{/*TODO correct links in Transformer */}
-{/*
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.location`            | <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.location`            | <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.horizontalAlignment` | <ApiLink type="CategoryChart" member="yAxisLabelHorizontalAlignment" label="YAxisLabelHorizontalAlignment" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.verticalAlignment`   | <ApiLink type="CategoryChart" member="xAxisLabelVerticalAlignment" label="XAxisLabelVerticalAlignment" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.visibility`          | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" />          |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.visibility`          | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" />          |*/}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx
deleted file mode 100644
index 2cd7fc538f..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-axis-options.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: Angular Axis Options | Data Visualization | Infragistics
-description: Infragistics' Angular Axis Options
-keywords: Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Axis Options
-
-In all Ignite UI for Angular charts, the axes provide properties for visual configurations such as titles, labels, and ranges. These features are demonstrated in the examples provided below.
-
-## Axis Titles Example
-
-The axis titles feature of the Angular charts, allows you to add contextual information to the your chart. You can customize the look and feel of the axis titles in many different ways such as applying different font styles, colors, margins, and alignments.
-
-<Sample src="/charts/category-chart/axis-titles" height={450} alt="Angular Axis Titles Example" />
-
-<div class="divider--half"></div>
-
-## Axis Labels Example
-
-The Angular Charts allows you full control over configuring, formatting, and styling the font of the labels displayed on an axis in your chart. You can change the rotation angle, margin, horizontal and vertical alignment, color, padding, and visibility of axis labels. The following example shows how to use these features of axes.
-
-<Sample src="/charts/category-chart/axis-labels" height={450} alt="Angular Axis Labels Example" />
-
-<div class="divider--half"></div>
-
-## Axis Labels Management & Formatting
-
-The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis.
-
-This enhanced calculation is something that you need to opt-in to, which you can do by setting the <ApiLink type="Axis" member="useEnhancedIntervalManagement" label="UseEnhancedIntervalManagement" /> property to true. Then, if you prefer to display as many labels as can fit in the dimensions of the axis without manually setting the <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> property of the axis, you can set the <ApiLink type="Axis" member="enhancedIntervalPreferMoreCategoryLabels" label="EnhancedIntervalPreferMoreCategoryLabels" /> property on the axis to true.
-
-The chart also has the ability to consider auto-rotation of the labels if they will not fit in the allotted space as well as the ability to apply an automatic margin to the plot area to ensure the labels can fit. This is something that can be opted into initially by first setting the <ApiLink type="CategoryChart" member="autoMarginAndAngleUpdateMode" label="AutoMarginAndAngleUpdateMode" /> property on the chart to either `SizeChanging` or `SizeChangingAndZoom`. This will tell the chart when to re-evaluate the auto margin and angle applied to the labels, if desired.
-
-After setting the <ApiLink type="CategoryChart" member="autoMarginAndAngleUpdateMode" label="AutoMarginAndAngleUpdateMode" />, you can set the <ApiLink type="CategoryChart" member="shouldAutoExpandMarginForInitialLabels" label="ShouldAutoExpandMarginForInitialLabels" /> property to true to opt into the automatic margin or set the <ApiLink type="CategoryChart" member="shouldConsiderAutoRotationForInitialLabels" label="ShouldConsiderAutoRotationForInitialLabels" /> property to true for the auto-rotation. You can also further customize the automatic margin that is applied by setting the <ApiLink type="CategoryChart" member="autoExpandMarginExtraPadding" label="AutoExpandMarginExtraPadding" /> and <ApiLink type="CategoryChart" member="autoExpandMarginMaximumValue" label="AutoExpandMarginMaximumValue" /> to provide extra space or a maximum possible margin, respectively.
-
-Custom label formats such as <ApiLink pkg="geo-core" type="NumberFormatSpecifier" /> and <ApiLink type="DateTimeFormatSpecifier" /> can be added to each axis via the <ApiLink type="CategoryChart" member="xAxisLabelFormatSpecifiers" label="XAxisLabelFormatSpecifiers" /> and <ApiLink type="CategoryChart" member="yAxisLabelFormatSpecifiers" label="YAxisLabelFormatSpecifiers" /> collections. Commonly used for applying Intl.NumberFormat and Intl.DateTimeFormat language sensitive number, date and time formatting. In order for a custom format to be applied to the labels, the <ApiLink type="CategoryChart" member="yAxisLabelFormat" label="YAxisLabelFormat" /> or <ApiLink type="CategoryChart" member="xAxisLabelFormat" label="XAxisLabelFormat" /> need to be set to data item's property name on the <ApiLink type="CategoryChart" />, eg. `{Date}`. For the <ApiLink type="FinancialChart" /> the number is the context because it uses a numeric axis, therefore this needs to be set to `{0}`.
-
-The following example formats the yAxis with a <ApiLink pkg="geo-core" type="NumberFormatSpecifier" /> to represent $USD prices for top box office movies in the United States.
-
-<Sample src="/charts/category-chart/format-specifiers" height={450} alt="Angular Format Specifiers for Axis Labels" />
-
-<div class="divider--half"></div>
-
-## Axis Range Example
-
-In the Angular charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> and <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> options.
-
-By default, charts will calculate the minimum and maximum values for the numeric and time axis range based on the lowest and highest corresponding value points in your data, but this automatic calculation may not be appropriate for your set of data points in all cases. For example, if your data has a minimum value of 850, you may want to set the <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> to 800 so that there will be a space value of 50 between the axis minimum and the lowest value of data points. The same idea can be applied to the axis minimum value and the highest value of data points using the <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> property.
-
-<Sample src="/charts/category-chart/axis-range" height={450} alt="Angular Axis Range Example" />
-
-<div class="divider--half"></div>
-
-## Axis Modes & Scale
-
-In the <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" /> controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> property is set to true or on linear scale when this property is set to false (default value). With the <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" /> property, you can change base of logarithmic scale from default value of 10 to other integer value.
-
-The <ApiLink type="FinancialChart" /> and control allows you to choose how your data is represented along the y-axis using <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> property that provides <ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> and <ApiLink type="FinancialChartYAxisMode" member="PercentChange" label="PercentChange" /> modes. The <ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> mode will plot data with the exact values while the <ApiLink type="FinancialChartYAxisMode" member="PercentChange" label="PercentChange" /> mode will display the data as percentage change relative to the first data point provided. The default value is <ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> mode.
-
-In addition to <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> property, the <ApiLink type="FinancialChart" /> control has <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" /> property that provides <ApiLink type="FinancialChartXAxisMode" member="Time" label="Time" /> and <ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> modes for the x-axis. The <ApiLink type="FinancialChartXAxisMode" member="Time" label="Time" /> mode will render space along the x-axis for gaps in data (e.g. no stock trading on weekends or holidays). The <ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> mode will collapse date areas where data does not exist. The default value is <ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> mode.
-
-<Sample src="/charts/financial-chart/axis-types" height={450} alt="Angular Axis Range Example" />
-
-<div class="divider--half"></div>
-
-## Axis Gap Example
-
-The <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> property of the Angular charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
-
-The <ApiLink type="CategoryChart" member="xAxisMaximumGap" label="XAxisMaximumGap" /> property of the Angular charts, determines the maximum gap value to allow. This default is set to 1.0 but can be changed depending on what you set <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> to.
-
-The <ApiLink type="CategoryChart" member="xAxisMinimumGapSize" label="XAxisMinimumGapSize" /> property of the Angular charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
-
-The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
-
-<Sample src="/charts/category-chart/axis-gap" height={450} alt="Angular Axis Gap Example" />
-
-<div class="divider--half"></div>
-
-## Axis Overlap Example
-
-The <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> property of the Angular charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
-
-The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
-
-<Sample src="/charts/category-chart/axis-overlap" height={450} alt="Angular Axis Overlap Example" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Layout](chart-axis-layouts.md)
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-
-| <ApiLink type="DataChart" />                                         | <ApiLink type="FinancialChart" />       | <ApiLink type="CategoryChart" />        |
-| ------------------------------------------------------ | ---------------------- | ---------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="maximumValue" label="MaximumValue" />             | <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" />    | <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="minimumValue" label="MinimumValue" />             | <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" />    | <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="isLogarithmic" label="IsLogarithmic" />            | <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" />   | <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="logarithmBase" label="LogarithmBase" />            | <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" />   | <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="CategoryXAxis" /> -> <ApiLink type="CategoryXAxis" member="gap" label="Gap" />                     | None                   | <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" />             |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="CategoryXAxis" /> -> <ApiLink type="CategoryXAxis" member="overlap" label="Overlap" />                 | None                   | <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" />         |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="TimeXAxis" />                                  | <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" />            | None                   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="PercentChangeYAxis" />                         | <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" />            | None                   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.angle`      | <ApiLink type="CategoryChart" member="yAxisLabelAngle" label="YAxisLabelAngle" />      | <ApiLink type="CategoryChart" member="yAxisLabelAngle" label="YAxisLabelAngle" />      |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.angle`      | <ApiLink type="CategoryChart" member="xAxisLabelAngle" label="XAxisLabelAngle" />      | <ApiLink type="CategoryChart" member="xAxisLabelAngle" label="XAxisLabelAngle" />      |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.textColor`  | `YAxisLabelForeground` | `YAxisLabelForeground` |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.textColor`  | `XAxisLabelForeground` | `XAxisLabelForeground` |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.visibility` | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" /> | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.visibility` | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" /> | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" /> |
diff --git a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx
deleted file mode 100644
index 3291d16b8c..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-axis-types.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: "Angular Axis Types | Data Visualization | Infragistics"
-description: Infragistics' Angular Axis Types
-keywords: "Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Category Chart uses only one CategoryXAxis and one NumericYAxis type."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Axis Types
-
-The Ignite UI for Angular Category Chart uses only one <ApiLink type="CategoryXAxis" /> and one <ApiLink type="NumericYAxis" /> type. Similarly, Ignite UI for Angular Financial Chart uses only one <ApiLink type="TimeXAxis" /> and one <ApiLink type="NumericYAxis" /> types. However, the Ignite UI for Angular Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
-
-## Cartesian Axes
-
-The <ApiLink type="DataChart" /> with Cartesian Axes, allows you to plot data in horizontal (X-axis) and vertical (X-axis) direction with 3 types of X-Axis
-(<ApiLink type="CategoryXAxis" />, <ApiLink type="NumericXAxis" />, and <ApiLink type="TimeXAxis" />) and 2 types of Y-Axis (<ApiLink type="CategoryYAxis" /> and <ApiLink type="NumericYAxis" />).
-
-### Category X-Axis
-
-The <ApiLink type="CategoryXAxis" /> treats its data as a sequence of categorical data items. It can display almost any type of data including strings and numbers. If you are plotting numbers on this axis, it is important to keep in mind that this axis is a discrete axis and not continuous. This means that each categorical data item will be placed equidistant from the one before it. The items will also be plotted in the order that they appear in the axis' data source.
-
-The <ApiLink type="CategoryXAxis" /> requires you to provide a <ApiLink type="DataSource" /> and a <ApiLink type="NumericYAxis" member="label" label="Label" /> in order to plot data with it. It is generally used with the <ApiLink type="NumericYAxis" /> to plot the following type of series:
-
-| Category Series  | Stacked Series | Financial Series |
-|------------------|----------------|--------------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - <ApiLink type="WaterfallSeries" /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> <br /> <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> <br /> <br /> <br /> |
-
- The following example demonstrates usage of the <ApiLink type="CategoryXAxis" /> type:
-
- <Sample src="/charts/data-chart/stacked-column-chart" height={500} alt="Angular Category X Axis Example" />
-
-### Category Y-Axis
-
-The <ApiLink type="CategoryYAxis" /> works very similarly to the <ApiLink type="CategoryXAxis" /> described above, but it is placed vertically rather than horizontally. Also, this axis requires you to provide a <ApiLink type="DataSource" /> and a <ApiLink type="NumericYAxis" member="label" label="Label" /> in order to plot data with it. The <ApiLink type="CategoryYAxis" /> is generally used with the <ApiLink type="NumericXAxis" /> to plot the following type of series:
-
-- <ApiLink type="BarSeries" />
-- `RangeBarSeries`
-- <ApiLink type="StackedBarSeries" />
-- <ApiLink type="Stacked100BarSeries" />
-
- The following example demonstrates usage of the <ApiLink type="CategoryYAxis" /> type:
-
- <Sample src="/charts/data-chart/bar-chart-multiple-sources" height={500} alt="Angular Category Y Axis Example" />
-
-### Numeric X-Axis
-
-The <ApiLink type="NumericXAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the <ApiLink type="NumericXAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a <ApiLink type="NumericYAxis" />. Alternatively, if combined with the <ApiLink type="CategoryXAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the <ApiLink type="BarSeries" />, `RangeBarSeries`, <ApiLink type="StackedBarSeries" />, and <ApiLink type="Stacked100BarSeries" />.
-
-The <ApiLink type="NumericXAxis" /> is compatible with the following type of series:
-
-- <ApiLink type="BarSeries" />
-- `RangeBarSeries`
-- <ApiLink type="BubbleSeries" />
-- <ApiLink type="HighDensityScatterSeries" />
-- <ApiLink type="ScatterSeries" />
-- <ApiLink type="ScatterLineSeries" />
-- <ApiLink type="ScatterSplineSeries" />
-- <ApiLink type="ScatterAreaSeries" />
-- <ApiLink type="ScatterContourSeries" />
-- <ApiLink type="ScatterPolylineSeries" />
-- <ApiLink type="ScatterPolygonSeries" />
-- <ApiLink type="StackedBarSeries" />
-- <ApiLink type="Stacked100BarSeries" />
-
- The following example demonstrates usage of the <ApiLink type="NumericXAxis" />:
-
- <Sample src="/charts/data-chart/type-scatter-hd-series" height={500} alt="Angular Numeric X Axis Example" />
-
-### Numeric Y-Axis
-
-The <ApiLink type="NumericYAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the <ApiLink type="NumericYAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a <ApiLink type="NumericXAxis" />. Alternatively, if combined with the <ApiLink type="CategoryYAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
-
-The <ApiLink type="NumericYAxis" /> is compatible with the following type of series:
-
-| Category Series  | Stacked Series | Financial Series | Scatter Series |
-|------------------|----------------|------------------|----------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - <ApiLink type="WaterfallSeries" /> <br /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> | - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> |
-
- The following example demonstrates usage of the <ApiLink type="NumericYAxis" />:
-
- <Sample src="/charts/data-chart/scatter-line-chart" height={500} alt="Angular Numeric Y Axis Example" />
-
-### Time X Axis
-
-The <ApiLink type="TimeXAxis" /> treats its data as a sequence of data items, sorted by date. Labels on this axis type are dates and can be formatted and arranged according to date intervals. The date range of this axis is determined by the date values in a data column that is mapped using its <ApiLink type="TimeXAxis" member="dateTimeMemberPath" label="DateTimeMemberPath" />. This, along with a <ApiLink type="DataSource" /> is required to plot data with this axis type.
-
-The <ApiLink type="TimeXAxis" /> is the X-Axis type in the <ApiLink type="FinancialChart" /> component.
-
-#### Breaks in Time X Axis
-
-The <ApiLink type="TimeXAxis" /> has the option to exclude intervals of data by using <ApiLink type="TimeXAxis" member="breaks" label="Breaks" />. As a result, the labels and plotted data will not appear at the excluded interval. For example, working/non-working days, holidays, and/or weekends. An instance of <ApiLink type="TimeAxisBreak" /> can be added to the <ApiLink type="TimeXAxis" member="breaks" label="Breaks" /> collection of the axis and configured by using a unique <ApiLink type="TimeAxisBreak" member="start" label="Start" />, <ApiLink type="TimeAxisBreak" member="end" label="End" /> and <ApiLink type="NumericYAxis" member="interval" label="Interval" />.
-
-#### Formatting in Time X Axis
-
-The <ApiLink type="TimeXAxis" /> has the <ApiLink type="TimeXAxis" member="labelFormats" label="LabelFormats" /> property, which represents a collection of <ApiLink type="TimeAxisLabelFormat" /> objects. Each <ApiLink type="TimeAxisLabelFormat" /> added to the collection is responsible for assigning a unique <ApiLink type="TimeAxisLabelFormat" member="format" label="Format" /> and <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" />. This can be especially useful for drilling down data from years to milliseconds and adjusting the labels depending on the range of time shown by the chart.
-
-The <ApiLink type="TimeAxisLabelFormat" member="format" label="Format" /> property of the <ApiLink type="TimeAxisLabelFormat" /> specifies what format to use for a particular visible range. The <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" /> property of the <ApiLink type="TimeAxisLabelFormat" /> specifies the visible range at which the axis label formats will switch to a different format. For example, if you have two <ApiLink type="TimeAxisLabelFormat" /> elements with a range set to 10 days and another set to 5 hours, then as soon as the visible range of the axis becomes less than 10 days, it will switch to 5-hour format.
-
-#### Intervals in Time X Axis
-
-The <ApiLink type="TimeXAxis" /> replaces the conventional <ApiLink type="NumericYAxis" member="interval" label="Interval" /> property of the category and numeric axes with an <ApiLink type="TimeXAxis" member="intervals" label="Intervals" /> collection of type <ApiLink type="TimeAxisInterval" />. Each <ApiLink type="TimeAxisInterval" /> added to the collection is responsible for assigning a unique <ApiLink type="NumericYAxis" member="interval" label="Interval" />, <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" /> and <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" />. This can be especially useful for drilling down data from years to milliseconds to provide unique spacing between labels depending on the range of time shown by the chart. A description of these properties is below:
-
-- <ApiLink type="NumericYAxis" member="interval" label="Interval" />: This specifies the interval to use. This is tied to the <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" /> property. For example, if the <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" /> is set to `Days`, then the numeric value specified in <ApiLink type="NumericYAxis" member="interval" label="Interval" /> will be in days.
-- <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" />: This specifies the visible range at which the axis interval will switch to a different interval. For example, if you have two TimeAxisInterval with a range set to 10 days and another set to 5 hours, as soon as the visible range in the axis becomes less than 10 days it will switch to the interval whose range is 5 hours.
-- <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" />: This specifies the unit of time for the <ApiLink type="NumericYAxis" member="interval" label="Interval" /> property.
-
-## Polar Axes
-
-The <ApiLink type="DataChart" /> with Polar Axes, allows you to plot data outwards (radius axis) from center of the chart and around (angle axis) of center of the chart.
-
-### Category Angle Axis
-
-The <ApiLink type="CategoryAngleAxis" /> treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
-
-The <ApiLink type="CategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot [Radial Series](../types/radial-chart.md).
-
-The following example demonstrates usage of the <ApiLink type="CategoryAngleAxis" /> type:
-
- <Sample src="/charts/data-chart/radial-area-chart" height={500} alt="Angular Category Angle Axis Example" />
-
-### Proportional Category Angle Axis
-
-The <ApiLink type="ProportionalCategoryAngleAxis" /> treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
-
-The <ApiLink type="ProportionalCategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot a pie chart eg. [Radial Series](../types/radial-chart.md).
-
-The following example demonstrates usage of the <ApiLink type="ProportionalCategoryAngleAxis" /> type:
-
- <Sample src="/charts/data-chart/radial-proportional-category-angle-axis" height={500} alt="Angular Proportional Category Angle Axis Example" />
-
-### Numeric Angle Axis
-
-The <ApiLink type="NumericAngleAxis" /> treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the <ApiLink type="NumericAngleAxis" /> varies according to the value in the data column mapped using the <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> property of the [Polar Series](../types/polar-chart.md) object or the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> property of the [Radial Series](../types/radial-chart.md) object.
-
-The The <ApiLink type="NumericAngleAxis" /> can be used with either the <ApiLink type="CategoryAngleAxis" /> to plot [Radial Series](../types/radial-chart.md) or with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.md) respectively.
-
-The following example demonstrates usage of the <ApiLink type="NumericAngleAxis" /> type:
-
- <Sample src="/charts/data-chart/polar-scatter-chart" height={500} alt="Angular Numeric Angle Axis Example" />
-
-### Numeric Radius Axis
-
-The <ApiLink type="NumericRadiusAxis" /> treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series.
-
-The <ApiLink type="NumericRadiusAxis" /> can be used with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.md).
-
-The following example demonstrates usage of the <ApiLink type="NumericRadiusAxis" /> type:
-
- <Sample src="/charts/data-chart/polar-line-chart" height={500} alt="Angular Numeric Radius Axis Example" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Layouts](chart-axis-layouts.md)
-- [Axis Options](chart-axis-options.md)
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
deleted file mode 100644
index 5662c88f82..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-aggregations.mdx
+++ /dev/null
@@ -1,36 +0,0 @@
----
-title: Angular Data Aggregations | Data Visualization | Infragistics
-description: Infragistics' Angular Data Aggregations
-keywords: Angular Charts, Markers, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In the Ignite UI for Angular CategoryChart control Data Aggregations feature allows you to group data in the chart by unique values on the XAxis and then sort those groups."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Data Aggregations
-
-In the Ignite UI for Angular <ApiLink type="CategoryChart" /> control Data Aggregations feature allows you to group data in the chart by unique values on the <ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> and then sort those groups. You may then apply summaries which will be reflected by the range of the <ApiLink type="CategoryChart" member="yAxisMemberPath" label="YAxis" /> and will be displayed in the tooltip when hovering the series.
-
-## Angular Data Aggregations Example
-
-The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the <ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.
-
-Note, the abbreviated functions found within the dropdowns for <ApiLink type="CategoryChart" member="initialSummaries" label="InitialSummaries" /> and <ApiLink type="CategoryChart" member="groupSorts" label="GroupSorts" /> have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc
-
-<Sample src="/charts/category-chart/data-aggregations" height={500} alt="Angular Data Aggregations Example" />
-
-```html
-<igx-category-chart
-    [dataSource]="salesData"
-    initialGroups="country"
-    initialSummaries="Sum(sales) as Sales"
-    groupSorts="Sales Desc">
-</igx-category-chart>
-```
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx
deleted file mode 100644
index 9d8b84723c..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-annotations.mdx
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: "Angular Chart Data Annotations | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Data Annotations
-keywords: "Angular Charts, Data Annotations, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands)."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Data Annotations <Badge variant="preview" />
-
-In the Angular chart, the data annotation layers allow you to annotate data plotted in Data Chart with sloped lines, vertical/horizontal lines (aka axis slices), vertical/horizontal strips (targeting specific axis), rectangles, and even parallelograms (aka bands). With data-binding supported, you can create as many annotations as you want to customize your charts. Also, you can combine different annotation layers and you can overlay text inside of plot area to annotated important events, patterns, and regions in your data.
-
-<DocsAside type="info">
-These features are designed to support cartesian axes and does not currently support radius or angle axes.
-</DocsAside>
-
-For example, you can annotates stock prices with stock events and patterns.
-
-<Sample src="/charts/data-chart/data-annotation-multiple-with-stocks" height={600} alt="Angular Multiple Data Annotations Example" />
-
-Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a>
-
-## Angular Data Annotation Slice Layer Example
-
-In Angular, the <ApiLink type="DataAnnotationSliceLayer" /> renders multiple vertical or horizontal lines that slice the chart at multiple values of an axis in the <ApiLink type="DataChart" /> component. This data annotation layer is often used to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal slices or setting TargetAxis property to x-axis will render data annotation layer as vertical slices. Similarly to all series, the DataAnnotationSliceLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the <ApiLink type="DataAnnotationSliceLayer" member="annotationValueMemberPath" label="AnnotationValueMemberPath" /> property.
-
-For example, you can use DataAnnotationSliceLayer to annotate stock prices with important events such as stock split and outcome of earning reports.
-
-<Sample src="/charts/data-chart/data-annotation-slice-layer" height={500} alt="Angular Data Annotation Slice Layer Example" />
-
-<div class="divider--half"></div>
-
-## Angular Data Annotation Strip Layer Example
-
-In Angular, the <ApiLink type="DataAnnotationStripLayer" /> renders multiple vertical or horizontal strips between 2 values on an axis in the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the <ApiLink type="DataAnnotationStripLayer" /> also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
-
-For example, you can use <ApiLink type="DataAnnotationStripLayer" /> to annotate chart with stock market crashes and changes in federal interest rates.
-
-<Sample src="/charts/data-chart/data-annotation-strip-layer" height={500} alt="Angular Data Annotation Strip Layer Example" />
-
-<div class="divider--half"></div>
-
-## Angular Data Annotation Line Layer Example
-
-In Angular, <ApiLink type="DataAnnotationLineLayer" /> renders multiple lines between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" />  properties.
-
-For example, you can use DataAnnotationLineLayer to annotate growth and decline patterns in stock prices and 52-week high and low of stock prices on y-axis.
-
-<Sample src="/charts/data-chart/data-annotation-line-layer" height={500} alt="Angular Data Annotation Line Layer Example" />
-
-<div class="divider--half"></div>
-
-## Angular Data Annotation Rect Layer Example
-
-In Angular, the <ApiLink type="DataAnnotationRectLayer" /> renders multiple rectangles defined by starting and ending points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties.
-
-For example, you can use DataAnnotationRectLayer to annotate bearish patterns and gaps in stock prices on y-axis.
-
-<Sample src="/charts/data-chart/data-annotation-rect-layer" height={500} alt="Angular Data Annotation Rect Layer Example" />
-
-<div class="divider--half"></div>
-
-## Angular Data Annotation Band Layer Example
-
-In Angular, the <ApiLink type="DataAnnotationBandLayer" /> renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
-
-For example, you can use DataAnnotationBandLayer to annotate range of growth in stock prices.
-
-<Sample src="/charts/data-chart/data-annotation-band-layer" height={600} alt="Angular Data Annotation Band Layer Example" />
-
-<div class="divider--half"></div>
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-
-- <ApiLink type="DataAnnotationSliceLayer" member="targetAxis" label="TargetAxis" />: This property specifies which axis should have an enabled DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- <ApiLink type="DataSource" />: This property binds data to the annotation layer to provide the precise shape.
-- <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" />: This property is a mapping to the name of the data column with x-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" />: This property is a mapping to the name of data column with y-positions for the start of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" />: This property is a mapping to the data column with x-positions for the end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" />: This property is a mapping to the data column with y-positions for end of the DataAnnotationBandLayer, DataAnnotationLineLayer, DataAnnotationRectLayer.
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelXMemberPath" label="StartLabelXMemberPath" />: This property is a mapping to the data column representing the overlay label for the starting position of the xAxis along the axis.
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelXDisplayMode" label="StartLabelXDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="startLabelYDisplayMode" label="StartLabelYDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="endLabelXDisplayMode" label="EndLabelXDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="endLabelYDisplayMode" label="EndLabelYDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="centerLabelXDisplayMode" label="CenterLabelXDisplayMode" />: These properties specify what should annotation labels display on starting, ending, or center of the annotation shape, e.g. mapped data value, mapped data label, axis value, or hide a given annotation label.
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelYMemberPath" label="StartLabelYMemberPath" />: This property is a mapping to the data column representing the axis label for the starting position of <ApiLink type="DataAnnotationBandLayer" />, <ApiLink type="DataAnnotationLineLayer" />, <ApiLink type="DataAnnotationRectLayer" /> on the y-axis.
-- <ApiLink type="DataAnnotationLineLayer" member="endLabelYMemberPath" label="EndLabelYMemberPath" />: This property is a mapping to the data column representing the axis label for the ending position of <ApiLink type="DataAnnotationBandLayer" />, <ApiLink type="DataAnnotationLineLayer" />, <ApiLink type="DataAnnotationRectLayer" /> on the y-axis.
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx
deleted file mode 100644
index e5a15e5b42..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-filtering.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: "Angular Chart Data Filtering | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Data Filtering
-keywords: "Angular Charts, Filtering, Infragistics"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Data Filtering
-
-Data Filtering allows you to query large data in order to analyze and plot small subset of data entries via filter expressions, all without having to manually modify the datasource bound to the chart.
-
-A complete list of valid expressions and keywords to form a query string can be found here:
-
-[Filter expressions](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris)
-
-> NOTE: Any incorrect filter applied will result with an empty chart.
-
-## Angular Chart Data Filter Example
-
-The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> property, to update the chart visual and thus filtering out the other decades out.
-
-<Sample src="/charts/category-chart/data-filter" height={500} alt="Angular Data Filter Example" />
-
-The <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> property is a string that requires the following syntax in order to filter properly. The value requires sets of parentheses that include both the filter expression definition, column and value associated with the record(s) filtering in.
-
-eg. To show all countries that start with the letter B:
-
-"(startswith(Country, 'B'))"
-
-eg. Concatenating more than one expression:
-
-"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))"
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Tooltips](chart-tooltips.md)
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx
deleted file mode 100644
index 523ed35c62..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-legend.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: "Angular Chart Data Legend | Data Visualization Tools | Infragistics"
-description: Use Infragistics Ignite UI for Angular chart with the data legend!
-keywords: "Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["CategoryChart", "DataLegend", "Series", "DataLegendSummaryType", "DataAbbreviationMode" ]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Ignite UI for Angular, the DataLegend is highly-customizable version of the Legend, that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import layoutMode from '@xplat-images/general/layout_mode.png';
-
-# Angular Data Legend
-
-In Ignite UI for Angular, the <ApiLink type="DataLegend" /> is highly-customizable version of the <ApiLink type="CategoryChart" member="Legend" label="Legend" />, that shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values. This legend updates when moving the mouse inside of the plot area of the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" />. Also, it has a persistent state that remembers the last hovered point when the user's mouse pointer exits the plot area. It displays this content using a set of three type of rows (header, series, summary) and four types of columns (title, label, value, unit).
-
-## Angular Data Legend Rows
-
-The rows of the <ApiLink type="DataLegend" /> include the header row, series row(s), and the summary row. The header row displays the axis label of the point that is hovered, and can be changed using the <ApiLink type="DataLegend" member="headerText" label="HeaderText" /> property.
-
-<Sample src="/charts/category-chart/data-legend" height={450} alt="Angular Category Chart Data Legend Example" />
-
-### Header Row
-
-The header row displays the current label of x-axis when hovering mouse over category series and financial series. You can use <ApiLink type="DataLegend" member="headerFormatDate" label="HeaderFormatDate" /> and <ApiLink type="DataLegend" member="headerFormatTime" label="HeaderFormatTime" /> properties to format date and time in the <ApiLink type="DataLegend" /> if the x-axis shows dates. For other types of series, the <ApiLink type="DataLegend" /> does not render the header row.
-
-### Series Row
-
-The series row represents each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol or unit of measurement, if specified. You can filter series rows by setting <ApiLink type="DataLegend" member="includedSeries" label="IncludedSeries" /> or <ApiLink type="DataLegend" member="excludedSeries" label="ExcludedSeries" /> properties to a collection of series' indexes (1, 2, 3) or series' titles (Tesla, Microsoft).
-
-### Summary Row
-
-Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the <ApiLink type="DataLegend" member="summaryTitleText" label="SummaryTitleText" /> property of the legend. Also, you can use the <ApiLink type="DataLegend" member="summaryType" label="SummaryType" /> property to customize whether you display the <ApiLink type="DataLegendSummaryType" member="Total" label="Total" />, <ApiLink type="DataLegendSummaryType" member="Min" label="Min" />, <ApiLink type="DataLegendSummaryType" member="Max" label="Max" />, or <ApiLink type="DataLegendSummaryType" member="Average" label="Average" /> of series values in the summary row.
-
-## Angular Data Legend Columns
-
-The columns of the <ApiLink type="DataLegend" /> include the series title, label, value of data column, and optional unit associated with the value. Some series in the chart can have multiple columns for label, value, and units. For example, financial price series has **High**, **Low**, **Open**, and **Close** data columns which can be filtered in the <ApiLink type="DataLegend" /> using the <ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> or <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" /> properties.
-
-<Sample src="/charts/financial-chart/data-legend" height={450} alt="Angular Financial Chart Data Legend Example" />
-
-Setting values on the <ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> and <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" /> properties, depends on type of series and how many data columns they support. For example, you can set <ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> property to a collection of **Open** and **Close** strings and the legend will show only open and close values for stock prices when the chart is plotting financial series. The following table lists all column names that can be use to filter columns in data legend.
-
-|  Type of Series  | Column Names |
-| -----------------|-------------- |
-| Category Series  | Value |
-| Radial Series    | Value |
-| Polar Series     | Radius, Angle |
-| Bubble Series    | X, Y, Radius |
-| Scatter Series   | X, Y |
-| Range Series     | High, Low |
-| Financial Series | High, Low, Open, Close, Change, TypicalPrice, Volume |
-
-Where the **TypicalPrice** and percentage **Change** of OHLC prices are automatically calculated by financial series so you do not need to include them in your data sources.
-
-### Title Column
-
-The title column displays legend badges and series titles, which come from the <ApiLink type="CategoryChart" member="chartTitle" label="Title" /> property of the different <ApiLink type="Series" /> plotted in the chart.
-
-### Label Column
-
-The label column displays short name on the left side of value column, e.g. "O" for **Open** stock price. You can toggle visibility of this column using the <ApiLink type="DataLegend" member="labelDisplayMode" label="LabelDisplayMode" /> property.
-
-### Value Column
-
-The value column displays values of series as abbreviated text which can be formatted using the <ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> property to apply the same abbreviation for all numbers by setting this property to <ApiLink type="DataAbbreviationMode" member="Shared" label="Shared" />. Alternatively, a user can select other abbreviations such as <ApiLink type="DataAbbreviationMode" member="Independent" label="Independent" />, <ApiLink type="DataAbbreviationMode" member="Kilo" label="Kilo" />, <ApiLink type="DataAbbreviationMode" member="Million" label="Million" />, etc. Precision of abbreviated values is controlled using the <ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" /> and <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" /> for minimum and maximum digits, respectively.
-
-### Unit Column
-
-The unit column displays an abbreviation symbol on the right side of value column. The unit symbol depends on the <ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> property, e.g. "M" for the <ApiLink type="DataAbbreviationMode" member="Million" label="Million" /> abbreviation.
-
-### Customizing Columns
-
-You can customize text displayed in the **Label** and **Unit** columns using  properties that end with **MemberAsLegendLabel** and **MemberAsLegendUnit** on each series. The following table shows some possible customizations of the **Label** and **Unit** columns.
-
-|  Type of Series | Series Properties |
-| ------|---- |
-| Category Series | ValueMemberAsLegendLabel="$" <br /> ValueMemberAsLegendUnit="M" |
-| Radial Series | ValueMemberAsLegendLabel="Distance:" <br /> ValueMemberAsLegendUnit="KM" |
-| Polar Series | RadiusMemberAsLegendLabel="Radius:" <br /> RadiusMemberAsLegendUnit="KM" <br /> AngleMemberAsLegendLabel="Angle:" <br /> AngleMemberAsLegendUnit="°" |
-| Range Series | HighMemberAsLegendLabel="H:" <br /> HighMemberAsLegendUnit="K" <br /> LowMemberAsLegendLabel="L:" <br /> LowMemberAsLegendUnit="K" |
-| Financial Series | OpenMemberAsLegendLabel="O:" <br /> OpenMemberAsLegendUnit="K" <br /> HighMemberAsLegendLabel="H:" <br /> HighMemberAsLegendUnit="K" <br /> LowMemberAsLegendLabel="L:" <br /> LowMemberAsLegendUnit="K" <br /> CloseMemberAsLegendLabel="C:" <br /> CloseMemberAsLegendUnit="K" <br /> |
-
-Also, you can use the `UnitText` property on the <ApiLink type="DataLegend" /> to change text displayed in all Unit columns.
-
-## Layout Mode
-
-Legend items can be positioned in a vertical or table structure via the <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
-
-eg.
-
-<Image src={layoutMode} alt="Layout Mode" />
-
-## Angular Data Legend Styling
-
-The <ApiLink type="DataLegend" /> provides properties for styling each type of column. Each of these properties begins with **Title**, **Label**, **Value**, or **Units**. You can style the text's color, font, and margin. For example, if you wanted to set the text color of all columns, you would set the <ApiLink type="CategoryChart" member="titleTextColor" label="TitleTextColor" />, <ApiLink type="DataLegend" member="labelTextColor" label="LabelTextColor" />, <ApiLink type="DataLegend" member="valueTextColor" label="ValueTextColor" />, and <ApiLink type="DataLegend" member="unitsTextColor" label="UnitsTextColor" /> properties. The following example demonstrates a utilization of the styling properties mentioned above:
-
-<Sample src="/charts/financial-chart/data-legend-styling-props" height={450} alt="Angular Data Legend Styling Example" />
-
-## Angular Data Legend Value Formatting
-
-The <ApiLink type="DataLegend" /> provides automatic abbreviation of large numbers using its <ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the <ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" /> and <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" />. This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
-The following example demonstrates how to use those properties:
-
-<Sample src="/charts/category-chart/data-legend-formatting-decimals" height={450} alt="Angular Data Legend Formatting Decimals Example" />
-
-## Angular Data Legend Value Mode
-
-You have the ability to change the default decimal display of values within the <ApiLink type="DataLegend" /> to a currency by changing the <ApiLink type="DataLegend" member="valueFormatMode" label="ValueFormatMode" /> property. Also, you can change the culture of the displayed currency symbol by setting the <ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" /> property a culture tag. For example, the following example data legend with the <ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" /> set to "en-GB" to display British Pounds (£) symbol:
-
-<Sample src="/charts/financial-chart/data-legend-formatting-currency" height={450} alt="Angular Formatting Currency Example" />
-
-## Angular Data Legend Grouping
-
-<ApiLink type="Series" member="dataLegendGroup" label="DataLegendGroup" /> can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
-By default, DataLegend will hide names of groups, but you can display group names by setting the <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> property to true.
-
-<Sample src="/charts/data-chart/data-legend-grouping" height={450} alt="Angular Data Legend Grouping" />
-
-## Angular Data Legend Styling & Events
-
-Several properties are exposed including grouping portions of the legend.
-
-- <ApiLink type="DataLegend" member="groupRowMargin" label="GroupRowMargin" />
-- <ApiLink type="DataLegend" member="groupTextMargin" label="GroupTextMargin" />
-- <ApiLink type="DataLegend" member="groupTextColor" label="GroupTextColor" />
-- <ApiLink type="DataLegend" member="groupTextFontSize" label="GroupTextFontSize" />
-- <ApiLink type="DataLegend" member="groupTextFontFamily" label="GroupTextFontFamily" />
-- <ApiLink type="DataLegend" member="groupTextFontStyle" label="GroupTextFontStyle" />
-- <ApiLink type="DataLegend" member="groupTextFontStretch" label="GroupTextFontStretch" />
-- <ApiLink type="DataLegend" member="groupTextFontWeight" label="GroupTextFontWeight" />
-- <ApiLink type="DataLegend" member="headerTextMargin" label="HeaderTextMargin" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="headerTextFontSize" label="HeaderTextFontSize" />
-- <ApiLink type="DataLegend" member="headerTextFontFamily" label="HeaderTextFontFamily" />
-- <ApiLink type="DataLegend" member="headerTextFontStyle" label="HeaderTextFontStyle" />
-- <ApiLink type="DataLegend" member="headerTextFontStretch" label="HeaderTextFontStretch" />
-- <ApiLink type="DataLegend" member="headerTextFontWeight" label="HeaderTextFontWeight" />
-
-The <ApiLink type="DataLegend" /> has several events that fire when rendering their corresponding row, even during mouse interactions where the values are updating. These events are listed below with a description of what they are designed to be used for:
-
-- <ApiLink type="DataLegend" member="styleGroupRow" label="StyleGroupRow" />: This event fires for each group to style text displayed in group rows.
-- <ApiLink type="DataLegend" member="styleHeaderRow" label="StyleHeaderRow" />: This event fires when rendering the header row.
-- <ApiLink type="DataLegend" member="styleSeriesRow" label="StyleSeriesRow" />: This event fires once for each series row, which allows conditional styling of the values of the series.
-- <ApiLink type="DataLegend" member="styleSeriesColumn" label="StyleSeriesColumn" />: This event fires once for each series column, which allows conditional styling of the different columns for the series in the chart.
-- <ApiLink type="DataLegend" member="styleSummaryRow" label="StyleSummaryRow" />: This event fires once when rendering the summary row.
-- <ApiLink type="DataLegend" member="styleSummaryColumn" label="StyleSummaryColumn" />: This event fires once when rendering the summary column.
-
-Some of the events exposes a <ApiLink type="DataLegendStylingRowEventArgs" /> parameter as its arguments, which lets you customize each item's text, text color, and the overall visibility of the row. The event arguments also expose event-specific properties. For example, since the `StyleSeriesRow` event fires for each series, the event arguments will return the series index and series title for the row that represents the series.
-
-`StyleSummaryColumn` and `SeriesStyleColumn` events expose a <ApiLink type="DataLegendStylingColumnEventArgs" /> parameter as its arguments, for customizing each field in the series. The event arguments also expose event-specific properties such as column index and value member related properties about the columns.
-
-<Sample src="/charts/data-chart/data-legend-styling" height={450} alt="Angular Data Legend Styling" />
-
-## API References
-<ApiLink type="DataLegend" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx
deleted file mode 100644
index 96c94961ce..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-selection.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: "Angular Chart Data Selection | Data Visualization Tools | Infragistics"
-description: Use Infragistics Ignite UI for Angular chart with the data selection!
-keywords: "Angular charts, chart data, selection, data selection, Ignite UI for Angular, Infragistics"
-license: commercial
-_language: en
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular selection feature in Angular Data Chart allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Selection
-
-The Ignite UI for Angular selection feature in Angular Data Chart allows users to interactively select, highlight, outline and vice-versa deselect single or multiple series within a chart. This provides many different possibilities with how users interact with the data presented in more meaningful ways.
-
-## Configuring Selection
-
-The default behavior <ApiLink type="DataChart" member="selectionMode" label="SelectionMode" /> turned off and requires opting into one of the following options. There are several selection modes available in the <ApiLink type="DataChart" />:
-
-- **Auto**
-- **None**
-- **Brighten**
-- **FadeOthers**
-- **GrayscaleOthers**
-- **FocusColorThickOutline**
-- **FocusColorOutline**
-- **SelectionColorThickOutline**
-- **SelectionColorOutline**
-- **FocusColorFill**
-- **SelectionColorFill**
-- **ThickOutline**
-
-`Brighten` will fade the selected item while `FadeOthers` will cause the opposite effect occur.
-`GrayscaleOthers` will behave similarly to `FadeOthers` but instead show a gray color to the rest of the series. Note this will override any <ApiLink type="DataChart" member="selectionBrush" label="SelectionBrush" /> setting.
-`SelectionColorOutline` and `SelectionColorThickOutline` will draw a border around the series.
-
-In conjunction, a <ApiLink type="DataChart" member="selectionBehavior" label="SelectionBehavior" /> is available to provide greater control on which items get selected. The default behavior for Auto is `PerSeriesAndDataItemMultiSelect`.
-
-- **Auto**
-- **PerDataItemMultiSelect**
-- **PerDataItemSingleSelect**
-- **PerSeriesAndDataItemMultiSelect**
-- **PerSeriesAndDataItemSingleSelect**
-- **PerSeriesAndDataItemGlobalSingleSelect**
-- **PerSeriesMultiSelect**
-- **PerSeriesSingleSelect**
-
-## Configuring Selection via Color Fill
-
-The following example shows the combination of both `SelectionColorFill` and `Auto` selection behavior aka `PerSeriesAndDataItemMultiSelect`. Color Fills provide a useful visual cue as it changes the entire series item's back color. By clicking each item you'll see the item change from green to purple.
-
-<Sample src="/charts/category-chart/selection-modes" height={450} alt="Angular Category Chart Selection Modes Example" />
-
-## Configuring Multiple Selection
-
-Other selection modes offer various methods of selection. For example using <ApiLink type="DataChart" member="selectionBehavior" label="SelectionBehavior" /> with `PerDataItemMultiSelect` will affect all series in entire category when multiple series are present while allowing selection across categories. Compared to `PerDataItemSingleSelect`, only a single category of items can be selected at a time. This is useful if multiple series are bound to different datasources and provides greater control of selection between categories.
-`PerSeriesAndDataItemGlobalSingleSelect` allows single series selection across all categories at a time.
-
-<Sample src="/charts/category-chart/selection-multiple-modes" height={450} alt="Angular Category Chart Selection Multiple Modes Example" />
-
-## Configuring Outline Selection
-
-When <ApiLink type="DataChart" member="focusBrush" label="FocusBrush" /> is applied, selected series will appear with a border when the <ApiLink type="DataChart" member="selectionMode" label="SelectionMode" /> property is set to one of the focus options.
-
-## Radial Series Selection
-
-This example demonstrates another series type via the <ApiLink type="DataChart" /> where each radial series can be selected with different colors.
-
-<Sample src="/charts/data-chart/radial-column-chart-selection" height={450} alt="Angular Radial Column Chart Selection Multiple Modes Example" />
-
-## Programmatic Selection
-Chart Selection can also be configured in code where selected items in the chart can be seen on startup or runtime. This can be achieved by adding items to the `SelectedSeriesCollection` of the <ApiLink type="CategoryChart" />. The <ApiLink type="ChartSelection" member="matcher" label="Matcher" /> property of the <ApiLink type="ChartSelection" /> object allows for selecting a series based on a "matcher", ideal when you do not have access to the actual series from the chart. If you know the properties that your datasource contains, you can use the `ValueMemberPath` that the series would be.
-
-The matcher is ideal for using in charts, such as the <ApiLink type="CategoryChart" /> when you do not have access to the actual series, like the <ApiLink type="DataChart" />. In this case you if you know the properties that your datasource contained you can surmise the ValueMemberPaths that the series would have. For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to highlight the series bound to Solar values, you can add a ChartSelection object to the <ApiLink type="DataChart" member="selectedSeriesItems" label="SelectedSeriesItems" /> collection using a matcher with the following properties set
-
-For example, if you datasource has numeric properties Nuclear, Coal, Oil, Solar then you know there are series created for each of these properties. If you want to select the series bound to Solar values, you can add a ChartSelection object to the SelectedSeriesItems collection using a matcher with the following properties set.
-
- <Sample src="/charts/category-chart/selection-matcher" height={500} alt="Angular Selection Matcher" />
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-
-| <ApiLink type="CategoryChart" /> Properties                    | <ApiLink type="DataChart" /> Properties |
-| ----------------------------------------------|---------------------------|
-|                                               |                           |
diff --git a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx
deleted file mode 100644
index 5ff3b9a6e0..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-data-tooltip.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
----
-title: Angular Chart Data Tooltip | Data Visualization Tools | Infragistics
-description: Use Infragistics Ignite UI for Angular chart with the data tooltip layer!
-keywords: Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Ignite UI for Angular, the DataToolTip displays values and titles of series as well as legend badges of series in a tooltip."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import layoutMode from '@xplat-images/general/layout_mode.png';
-
-# Angular Chart Data Tooltip
-
-In Ignite UI for Angular, the **DataToolTip** displays values and titles of series as well as legend badges of series in a tooltip. In addition, it provides many configuration properties of the <ApiLink type="DataLegend" /> for filtering series rows and values columns, styling, and formatting values. This tooltip type updates while moving the mouse inside of the plot area of the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" /> components.
-
-## Angular Data Tooltip Properties
-
-All properties of <ApiLink type="DataToolTipLayer" /> are prefixed with **DataToolTip** and exposed on API of <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> components. However, you will need to create an instance of <ApiLink type="DataToolTipLayer" /> and add it to series collection of <ApiLink type="DataChart" /> component if you want to use it with Radial Charts, Polar Charts, Scatter Charts.
-
-## Angular Data Tooltip Elements
-
-The **DataToolTip** displays content using a set of three types of rows and four types of columns.
-
-### Angular Data Tooltip Rows
-
-The rows of the **DataToolTip** include the header row, series row(s), and the summary row.
-
-The header row displays the axis label of the point that is hovered, and can be changed using the <ApiLink type="CategoryChart" member="dataToolTipHeaderText" label="DataToolTipHeaderText" /> property.
-
-The series row can actually be a set of rows corresponding to each series plotted in the chart. These rows will display the legend badge, series title, actual/abbreviated value of the the series, and abbreviation symbol and unit, if specified.
-
-Finally, there is a summary row that displays the total of all series values. The default summary title can be changed using the <ApiLink type="CategoryChart" member="dataToolTipSummaryTitleText" label="DataToolTipSummaryTitleText" /> property of the legend. Also, you can use the <ApiLink type="CategoryChart" member="dataToolTipSummaryType" label="DataToolTipSummaryType" /> property to customize whether you display the Total, Min, Max, or Average of series values in the summary row.
-
-The following example demonstrates the data tooltip with a summary applied:
-
-<Sample src="/charts/category-chart/data-tooltip" height={450} alt="Angular Category Chart Data Tooltip Example" />
-
-### Angular Data Tooltip Columns
-
-The columns of the <ApiLink type="DataToolTipLayer" /> include the title, label, value, and units columns. Each series in the chart can have multiple columns for label, value, and units depending on the <ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> or <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> collections of the chart.
-
-The title column displays legend badges and series titles, which come from the <ApiLink type="DataChart" member="chartTitle" label="Title" /> property of the different <ApiLink type="DataChart" member="Series" label="Series" /> plotted in the chart.
-
-The label column displays the name or abbreviation of the different property paths in the <ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> or <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> collections of the tooltip.
-
-The value column displays series values as abbreviated text which can be formatted using the <ApiLink type="CategoryChart" member="dataToolTipValueFormatAbbreviation" label="DataToolTipValueFormatAbbreviation" /> property to apply the same abbreviation for all numbers by setting this property to `Auto` or `Shared`. Alternatively, a user can select other abbreviations such as `Independent`, `Kilo`, `Million`, etc. Precision of abbreviated values is controlled using the <ApiLink type="CategoryChart" member="dataToolTipValueFormatMinFractions" label="DataToolTipValueFormatMinFractions" /> and <ApiLink type="CategoryChart" member="dataToolTipValueFormatMaxFractions" label="DataToolTipValueFormatMaxFractions" /> for minimum and maximum digits, respectively.
-
-The units column displays an abbreviation symbol and/or unit text, which can be set either on the **DataToolTip** by setting the <ApiLink type="CategoryChart" member="dataToolTipUnitsText" label="DataToolTipUnitsText" /> for all columns or using the following properties on each series in the chart:
-
-- Category Series (e.g. ColumnSeries)
-  - ValueMemberAsLegendUnit="K"
-- Financial Price Series:
-  - OpenMemberAsLegendUnit="K"
-  - LowMemberAsLegendUnit="K"
-  - HighMemberAsLegendUnit="K"
-  - CloseMemberAsLegendUnit="K"
-- Range Series:
-  - LowMemberAsLegendUnit="K"
-  - HighMemberAsLegendUnit="K"
-- Radial Series:
-  - ValueMemberAsLegendUnit="km"
-- Polar Series:
-  - RadiusMemberAsLegendUnit="km"
-  - AngleMemberAsLegendUnit="degrees"
-
-For the above-listed properties, there are corresponding properties ending with **MemberAsLegendLabel** to determine the text in the label columns mentioned previously.
-
-The columns included in the <ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> and <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> collections generally correspond to the value paths of your underlying data items, but the financial series has the option to include some special ones in addition to the `High`, `Low`, `Open`, and `Close` paths that are required for the financial series to plot correctly. You have the ability to show `TypicalPrice`, `Change`, and `Volume` options within the tooltip.
-
-The following example demonstrates a data tooltip with the added columns of Open, High, Low, Close, and Change:
-
-<Sample src="/charts/financial-chart/data-tooltip" height={450} alt="Angular Financial Chart Data Tooltip Example" />
-
-## Angular Data Tooltip Grouping for Data Chart
-
-<ApiLink type="DataToolTipLayer" member="dataLegendGroup" label="DataLegendGroup" /> can be set, on all types of series, to a string that will categorize a group of series in Data Legend. Each group will have its own summary row displayed before another group of series is displayed:
-By default, DataLegend will hide names of groups, but you can display group names by setting the <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> property to true. <ApiLink type="DataToolTipLayer" member="groupingMode" label="GroupingMode" /> should be set to "Grouped" and <ApiLink type="DataLegend" member="labelDisplayMode" label="LabelDisplayMode" /> should be set to "Visible" on the Data Tooltip Layer.
-
-<Sample src="/charts/data-chart/data-tooltip-grouping" height={450} alt="Angular Data Tooltip Grouping" />
-
-## Angular Data Tooltip Grouping & Positioning for Category Chart & Financial Chart
-
-You can set <ApiLink type="CategoryChart" member="dataToolTipGroupingMode" label="DataToolTipGroupingMode" /> property to either `Grouped` or `Individual` to group content for multiple series into single tooltip or separate content for each series in multiple tooltips. In the `Grouped` mode, you can customize where the tooltip is shown by setting the <ApiLink type="CategoryChart" member="dataToolTipGroupedPositionModeX" label="DataToolTipGroupedPositionModeX" /> and <ApiLink type="CategoryChart" member="dataToolTipGroupedPositionModeY" label="DataToolTipGroupedPositionModeY" /> properties. This essentially allows you to customize the horizontal and vertical alignments of the tooltip and whether you want it to track to the closest series points to the mouse position or pin the tooltip to edge of plot area.
-
-The following example demonstrates a data tooltip positioned to the top-right of the chart:
-
-<Sample src="/charts/category-chart/data-tooltip-positioning" height={450} alt="Angular Category Chart Data Tooltip Positioning Example" />
-
-## Angular Data Tooltip Value Formatting
-
-The **DataToolTip** provides automatic abbreviation of large numbers using its <ApiLink type="CategoryChart" member="dataToolTipValueFormatAbbreviation" label="DataToolTipValueFormatAbbreviation" /> property. This adds a multiplier in the units column such as kilo, million, billion, etc. You can customize the number of fractional digits that are displayed by setting the <ApiLink type="CategoryChart" member="dataToolTipValueFormatMinFractions" label="DataToolTipValueFormatMinFractions" /> and <ApiLink type="CategoryChart" member="dataToolTipValueFormatMaxFractions" label="DataToolTipValueFormatMaxFractions" />. This will allow you to determine the minimum and maximum number of digits that appear after the decimal point, respectively.
-
-The following example demonstrates a **DataToolTip** with the minimum and maximum fractions set:
-
-<Sample src="/charts/category-chart/data-tooltip-formatting-decimals" height={450} alt="Angular Category Chart Data Tooltip Formatting Decimals Example" />
-
-## Angular Data Tooltip Value Mode
-
-You can change the default decimal display of values within the **DataToolTip** to be currency by changing the <ApiLink type="CategoryChart" member="dataToolTipValueFormatMode" label="DataToolTipValueFormatMode" /> property of the layer. The **DataToolTip** also exposes the ability to modify the culture of the displayed currency symbol by using its <ApiLink type="CategoryChart" member="dataToolTipValueFormatCulture" label="DataToolTipValueFormatCulture" /> property and setting it to its corresponding culture tag. For example, the following sample demonstrates a chart with the <ApiLink type="CategoryChart" member="dataToolTipValueFormatCulture" label="DataToolTipValueFormatCulture" /> set to "en-GB":
-
-<Sample src="/charts/financial-chart/data-tooltip-formatting-currency" height={450} alt="Angular Financial Chart Data Tooltip Formatting Currency Example" />
-
-## Layout Mode
-
-Legend items can be positioned in a vertical or table structure via the <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property. The default value is `Table`, which retains the same look and feel as seen in previous releases.
-
-eg.
-
-<Image src={layoutMode} alt="Layout Mode" />
-
-## Angular Data Tooltip Styling
-
-The **DataToolTip** provides properties for styling each type of column. Each of these properties begins with Title, Label, Value, or Units, and you can style the text's color, font, and margin. For example, if you wanted to set the text color of each of these, you would set the <ApiLink type="CategoryChart" member="dataToolTipTitleTextColor" label="DataToolTipTitleTextColor" />, <ApiLink type="CategoryChart" member="dataToolTipLabelTextColor" label="DataToolTipLabelTextColor" />, <ApiLink type="CategoryChart" member="dataToolTipValueTextColor" label="DataToolTipValueTextColor" />, and <ApiLink type="CategoryChart" member="dataToolTipUnitsTextColor" label="DataToolTipUnitsTextColor" /> properties.
-
-The following example demonstrates usage of the styling properties mentioned above:
-
-<Sample src="/charts/financial-chart/data-tooltip-styling-props" height={450} alt="Angular Financial Chart Data Tooltip Styling Example" />
-
-Several properties are exposed including grouping portions of the tooltip.
-
-- <ApiLink type="DataLegend" member="groupTextMargin" label="GroupTextMargin" />
-- <ApiLink type="DataLegend" member="groupTextColor" label="GroupTextColor" />
-- <ApiLink type="DataLegend" member="groupTextFontSize" label="GroupTextFontSize" />
-- <ApiLink type="DataLegend" member="groupTextFontFamily" label="GroupTextFontFamily" />
-- <ApiLink type="DataLegend" member="groupTextFontStyle" label="GroupTextFontStyle" />
-- <ApiLink type="DataLegend" member="groupTextFontStretch" label="GroupTextFontStretch" />
-- <ApiLink type="DataLegend" member="groupTextFontWeight" label="GroupTextFontWeight" />
-- <ApiLink type="DataLegend" member="headerTextMargin" label="HeaderTextMargin" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="headerTextFontSize" label="HeaderTextFontSize" />
-- <ApiLink type="DataLegend" member="headerTextFontFamily" label="HeaderTextFontFamily" />
-- <ApiLink type="DataLegend" member="headerTextFontStyle" label="HeaderTextFontStyle" />
-- <ApiLink type="DataLegend" member="headerTextFontStretch" label="HeaderTextFontStretch" />
-- <ApiLink type="DataLegend" member="headerTextFontWeight" label="HeaderTextFontWeight" />
-
-## API References
-<ApiLink type="DataToolTipLayer" />
-<ApiLink type="CategoryChart" />
-<ApiLink type="FinancialChart" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
deleted file mode 100644
index 5983438455..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-highlight-filter.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Angular Chart Highlight Filter | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Highlight Filter
-keywords: "Angular Charts, Highlighting, Filtering, Infragistics"
-license: commercial
-mentionedTypes: ["CategoryChart", "DataChart", "Series", "HighlightedValuesDisplayMode"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Highlight Filter
-
-The Ignite UI for Angular Chart components support a data highlighting overlay that can enhance the visualization of the series plotted in those charts by allowing you to view a subset of the data plotted. When enabled, this will highlight a subset of data while showing the total set with a reduced opacity in the case of column and area series types, and a dashed line in the case of line series types. This can help you to visualize things like target values versus actual values with your data set. This feature is demonstrated in the following example:
-
-<Sample src="/charts/data-chart/chart-highlight-filter-multiple-series" height={500} alt="Angular Highlight Filter Example" />
-
-Note that data highlighting feature is supported by the <ApiLink type="DataChart" /> and <ApiLink type="CategoryChart" />, but it is configured in different ways in those controls due to the nature of how those controls work. One thing remains constant with this feature though, in that you need to set the <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> property to `Overlay` if you want to see the highlight. The following will explain the different configurations for the highlight filter feature.
-
-## Using Highlight Filter with DataChart
-
-In the <ApiLink type="DataChart" />, much of the highlight filter API happens on the series themselves, mainly by setting the <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> property to a collection representing a subset of the data you want to highlight. The count of the items in the <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> needs to match the count of the data bound to the <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> of the series that you are looking to highlight, and in the case of category series, it will use the `ValueMemberPath` that you have defined as the highlight path by default. The sample at the top of this page uses the <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> in the <ApiLink type="DataChart" /> to show the overlay.
-
-In the case that the schema does not match between the <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> and the <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> of the series, you can configure this using the `HighlightedValueMemberPath` property on the series. Additionally, if you would like to use the <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> of the series itself as the highlight source and have a path on your data item that represents the subset, you can do this. This is done by simply setting the `HighlightedValueMemberPath` property to that path and not providing a <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" />.
-
-The reduced opacity of the column and area series types is configurable by setting the <ApiLink type="Series" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" /> property on the series. You can also set the <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> property to `Hidden` if you do not wish to see the overlay at all.
-
-The part of the series shown by the highlight filter will be represented in the legend and tooltip layers of the chart separately. You can configure the title that this is given in the tooltip and legend by setting the <ApiLink type="Series" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" />. This will append the value that you provide to the end of the <ApiLink type="CategoryChart" member="chartTitle" label="Title" /> of the series.
-
-If the <ApiLink type="DataLegend" /> or <ApiLink type="DataToolTipLayer" /> is used then the highlighted series will appear grouped. This can be managed by setting the <ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" /> property on the series to categorize them appropriately.
-
-The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the <ApiLink type="DataChart" /> control using the <ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" />:
-
-<Sample src="/charts/data-chart/data-legend-grouping-and-highlighting" height={500} alt="Angular Data Legend Grouping Highlight Example" />
-
-The following example demonstrates the usage of the data legend grouping and highlighting overlay feature within the <ApiLink type="DataChart" /> control using the <ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" />:
-
-<Sample src="/charts/data-chart/data-tooltip-grouping-and-highlighting" height={500} alt="Angular Data Tooltip Grouping Highlight Example" />
-
-The following example demonstrates the usage of the data highlighting overlay feature within the <ApiLink type="DataChart" /> control using the <ApiLink type="ColumnSeries" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />:
-
-<Sample src="/charts/data-chart/chart-highlight-filter" height={500} alt="Angular Highlight Filter Example" />
-
-## Using Highlight Filter in CategoryChart
-
-The <ApiLink type="CategoryChart" /> highlight filter happens on the chart by setting the <ApiLink type="CategoryChart" member="initialHighlightFilter" label="InitialHighlightFilter" /> property. Since the <ApiLink type="CategoryChart" /> takes all of the properties on your underlying data item into account by default, you will need to define the <ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" /> on the chart as well so that the data can be grouped and aggregated in a way that you can have a subset of the data to filter on. You can set the <ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" /> to a value path in your underlying data item to group by a path that has duplicate values.
-
-{/*Unsure of this part. Need to review */}
-{/* ????? The <ApiLink type="CategoryChart" member="initialHighlightFilter" label="InitialHighlightFilter" /> is done using OData filter query syntax. The syntax for this is an abbreviation of the filter operator. For example, if you wanted to have an InitialHighlightFilter of "Month not equals January" it would be represented as "Month ne 'January'"*/}
-
-Similar to the <ApiLink type="DataChart" />, the <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> property is also exposed on the <ApiLink type="CategoryChart" />. In the case that you do not want to see the overlay, you can set this property to `Hidden`.
-
-The following example demonstrates the usage of the data highlighting overlay feature within the <ApiLink type="CategoryChart" /> control:
-
-<Sample src="/charts/category-chart/chart-highlight-filter" height={500} alt="Angular Highlight Filter Example" />
-
-{/*TODO add new section that talks about how this feature also applies to Range, Financial series and the HighlightedValueMemberPath property corresponds to:
-HighlightedHighMemberPath and HighlightedLowMemberPath in Range Series
-HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath, HighlightedCloseMemberPath in Financial Series*/}
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Data Tooltip](chart-data-tooltip.md)
-- [Chart Data Aggregations](chart-data-aggregations.md)
-
-## API References
-
-The following is a list of API members mentioned in the above sections:
-
-| <ApiLink type="CategoryChart" /> Properties                    | <ApiLink type="DataChart" /> Properties |
-| ----------------------------------------------|---------------------------|
-| <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" />        | <ApiLink type="Series" member="highlightedDataSource" label="HighlightedItemsSource" />  |
-| <ApiLink type="CategoryChart" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" />        | <ApiLink type="Series" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" />  |
-| <ApiLink type="CategoryChart" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />    | <ApiLink type="ColumnSeries" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />     |
-| <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />  | <ApiLink type="Series" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />   |
-| <ApiLink type="CategoryChart" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" />  | <ApiLink type="Series" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" />   |
-| <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />  | <ApiLink type="Series" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />   |
-| <ApiLink type="CategoryChart" member="initialHighlightFilter" label="InitialHighlightFilter" />        |  |
-| <ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" />                 |  |
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx
deleted file mode 100644
index 15e0a85266..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-highlighting.mdx
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: Angular Chart Highlighting | Data Visualization | Infragistics
-description: Infragistics' Angular Chart Highlighting
-keywords: Angular Charts, Highlighting, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "All Angular Charts support a variety of highlighting options."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-## Angular Chart Highlighting Example
-
-The following example demonstrates the different highlighting options that are available on the Angular chart.
-
-<Sample src="/charts/category-chart/annotations-highlighting" height={500} alt="Angular Highlighting Example" />
-
-# Angular Chart Highlighting Modes & Behaviors
-
-All Angular Charts support a variety of highlighting options. <ApiLink type="CategoryChart" member="highlightingMode" label="HighlightingMode" /> can be set to brighten or fade when the mouse is hovering over a series/data item rendered in the plot area. <ApiLink type="CategoryChart" member="highlightingBehavior" label="HighlightingBehavior" /> can be set to directly over or the nearest data item to trigger the highlighting effect. Highlighting modes and behaviors is supported by the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" /> controls and they have the same API for using the highlighting feature.
-
-The following example demonstrates the <ApiLink type="CategoryChart" member="highlightingMode" label="HighlightingMode" /> Angular chart.
-
-<Sample src="/charts/category-chart/highlighting-mode" height={500} alt="Angular Highlighting Mode Example" />
-
-The following example demonstrates the <ApiLink type="CategoryChart" member="highlightingBehavior" label="HighlightingBehavior" /> Angular chart.
-
-<Sample src="/charts/category-chart/highlighting-behavior" height={500} alt="Angular Highlighting Mode Example" />
-
-# Angular Chart Legend Highlighting
-
-All Angular Charts support legend highlighting. <ApiLink type="CategoryChart" member="legendHighlightingMode" label="LegendHighlightingMode" /> can enabled so that when mouse is hovering over a legend marker item then the rendered series will highlight in the plot area. Legend highlighting is supported by the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" /> controls and they have the same API for using the highlighting feature.
-
-The following example demonstrates the legend series highlighting Angular chart.
-
-<Sample src="/charts/category-chart/legend-highlighting" height={500} alt="Angular Highlighting Mode Example" />
-
-## Highlight Layers
-
-The Ignite UI for Angular <ApiLink type="CategoryChart" /> can enable three types of highlighting when hovering over data items.
-
-1. Series Highlighting will highlight the single data point represented by a marker or column when the pointer is positioned over it. This is enabled by setting the <ApiLink type="CategoryChart" member="isSeriesHighlightingEnabled" label="IsSeriesHighlightingEnabled" /> property to true.
-
-2. Item Highlighting highlights items in a series either by drawing a banded shape at their position or by rendering a marker at their position. This is enabled by setting the <ApiLink type="CategoryChart" member="isItemHighlightingEnabled" label="IsItemHighlightingEnabled" /> property to true.
-
-3. Category Highlighting targets all category axes in the chart. They draw a shape that illuminates the area of the axis closest to the pointer position. This is enabled by setting the <ApiLink type="CategoryChart" member="isCategoryHighlightingEnabled" label="IsCategoryHighlightingEnabled" /> property to true.
-
-The following example demonstrates the different highlighting layers that are available on the Angular chart.
-
-<Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="Angular Highlighting Example" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Animations](chart-animations.md)
-- [Chart Annotations](chart-annotations.md)
-- [Chart Tooltips](chart-tooltips.md)
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
-<ApiLink type="FinancialChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx b/docs/angular/src/content/en/components/charts/features/chart-legends.mdx
deleted file mode 100644
index 87c2110ff0..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-legends.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: Angular Chart Legends | Data Visualization Tools | Infragistics
-description: Use Infragistics Ignite UI for Angular chart with legends in horizontal or vertical orientation!
-mentionedTypes: ["XamDataChart", "Legend"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Use Infragistics Ignite UI for Angular chart with legends in horizontal or vertical orientation!"
----
-
-# Angular Chart Legends
-
-## Angular Legend Types
-
-{/*TODO info/example of regular Legend with options to change orientation*/}
-
-{/*TODO info/example of ItemLegend with options to change orientation*/}
-
-{/*TODO info/example of ScaleLegend with BubbleSeries*/}
-
-## Angular Legend Layouts
-
-{/*TODO info/example of multiple Legends*/}
-
-{/*TODO info/example of Legend layouts: outside of plot area, inside of plot area*/}
-
-## Angular Legend Customization
-
-{/*TODO info/example of customizing Legend items*/}
diff --git a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx b/docs/angular/src/content/en/components/charts/features/chart-markers.mdx
deleted file mode 100644
index d2fe045cc5..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-markers.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Angular Chart Markers | Data Visualization | Infragistics
-description: Infragistics' Angular Chart Markers
-keywords: Angular Charts, Markers, Marker Size, Infragistics
-license: commercial
-mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-
-# Angular Chart Markers
-
-In Ignite UI for Angular, markers are visual elements that display the values of data points in the chart's plot area. Markers help your end-users immediately identify a data point's value even if the value falls between major or minor grid lines.
-
-## Angular Chart Marker Example
-
-In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> property to <ApiLink type="MarkerType" member="Circle" label="Circle" /> enum value.
-
-The colors of the markers are also managed by setting the <ApiLink type="CategoryChart" member="markerBrushes" label="MarkerBrushes" /> and <ApiLink type="CategoryChart" member="markerOutlines" label="MarkerOutlines" /> properties in the sample below. The markers and <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> is configurable in this sample by using the drop-downs as well.
-
-<Sample src="/charts/category-chart/marker-options" height={500} alt="Angular Configuration Options Example" />
-
-## Angular Chart Marker Size
-
-You can control the exact device-independent pixel dimensions of data point markers by setting the `MarkerSize` property on any series that supports markers. This gives you precise control over how large markers appear on screen, regardless of the marker template or style being used.
-
-By default, marker sizing is determined by the series marker template. When you set `MarkerSize` to a specific numeric value, all markers in that series render at that exact device-independent pixel width and height. Setting `MarkerSize` back to `NaN` restores the default template-driven sizing.
-
-The `MarkerSize` property is available on all series types that derive from `MarkerSeries`, including `LineSeries`, `SplineSeries`, `AreaSeries`, `ColumnSeries`, `ScatterSeries`, `ScatterLineSeries`, `ScatterSplineSeries`, and polar/radial series types.
-
-The following code examples show how to set `MarkerSize` to 30 device-independent pixels on a `ScatterLineSeries` in the `XamDataChart` control:
-
-To reset markers to their default template-driven size, set `MarkerSize` to `NaN` (or remove the attribute in markup):
-
-The following sample demonstrates `MarkerSize` on scatter series with an interactive editor:
-
-<Sample src="/charts/data-chart/scatter-marker-options" height={500} alt="Angular Chart Marker Size Example" />
-
-<DocsAside type="note">
-For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
-</DocsAside>
-
-<div class="divider--half"></div>
-
-## Angular Chart Checkmark Marker Type
-
-The Ignite UI for Angular charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
-
-You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
-
-The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
-
-<div class="divider--half"></div>
-
-## Angular Chart Marker Templates
-
-In addition to marker properties, you can implement your own marker by setting a function to the  <ApiLink type="CategoryChart" member="markerTemplate" label="MarkerTemplate" /> property of a series rendered in the <ApiLink type="CategoryChart" /> control as it is demonstrated in example below.
-
-<Sample src="/charts/category-chart/marker-templates" height={600} alt="Angular Chart Marker Templates" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx
deleted file mode 100644
index 1d01ad69a9..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-navigation.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: Angular Data Chart | Data Visualization Tools | Navigation | Infragistics
-description: Navigate Infragistics' Angular charts by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular graph navigation capabilities!
-keywords: Angular charts, data chart, navigation, Ignite UI for Angular, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular charts allows for interactive panning and zooming via the mouse, keyboard and touch."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Navigation
-
-The Ignite UI for Angular charts allows for interactive panning and zooming via the mouse, keyboard and touch.
-
-## Angular Chart Navigation Example
-
-The following example shows all of the available panning and zooming options that are available. You can interact with the example by using the buttons, or select your desired options using the dropdowns or checkboxes.
-
-<Sample src="/charts/data-chart/chart-navigation" height={600} alt="Angular Navigation Example" />
-
-Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a>
-
-## Chart Navigation with User Interactions
-
-Whether or not zooming is on by default depends on the chart you are using. If you are using <ApiLink type="CategoryChart" />, it is on by default, but it is not in the <ApiLink type="DataChart" />. In order to enable or disable navigation in the UI, you need to set either the <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> and/or the <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> properties of the chart, depending on the direction that you wish to enable or disable zooming.
-
-It is also possible to zoom or pan simply by clicking the mouse or using touch. The <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> property of the data chart determines what happens on mouse click or touch events. This property defaults to `DragZoom` and when set to this with zooming enabled, clicking and dragging will place a preview rectangle over the plot area that will become the zoomed area of the chart. This <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> property can also be set to either `DragPan` to allow panning or `None` to prevent these operations.
-
-## Chart Navigation with Touch, Mouse and Keyboard
-
-Navigation in the Angular data chart can happen with either touch, the mouse or the keyboard. The following operations can be invoked using touch, mouse or keyboard operations by default:
-
-- **Panning**: Using <kbd>🡐</kbd> <kbd>🡒</kbd> <kbd>🡑</kbd> <kbd>🡓</kbd> arrow keys on the keyboard or holding the <kbd>SHIFT</kbd> key, clicking and dragging with the mouse or pressing and moving your finger via touch.
-- **Zoom In**: Using the <kbd>PAGE UP</kbd> key on the keyboard, rolling the mouse wheel up, or pinching to zoom in via touch.
-- **Zoom Out**: Using the <kbd>PAGE DOWN</kbd> key on the keyboard, rolling the mouse wheel down, or pinching to zoom out via touch.
-- **Fit to Chart Plot Area**: Using the <kbd>HOME</kbd> key on the keyboard. There is no mouse or touch operation for this.
-- **Area Zoom**: Click and drag the mouse within the plot area with the <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> property set to its default - `DragZoom`.
-
-The zoom and pan operations can also be enabled by using modifier keys by setting the <ApiLink type="DataChart" member="dragModifier" label="DragModifier" /> and <ApiLink type="DataChart" member="panModifier" label="PanModifier" /> properties, respectively. These properties can be set to the following modifier keys, and when pressed, the corresponding operation will be executed:
-
-| Modifier Value | Corresponding Key |
-| ---------------|------------------ |
-| `Shift`        | <kbd>SHIFT</kbd> |
-| `Control`      | <kbd>CTRL</kbd> |
-| `Windows`      | <kbd>WIN</kbd> |
-| `Apple`        | <kbd>APPLE</kbd> |
-| `None`         | no keys |
-
-## Chart Navigation with Scrollbars
-
-The chart can be scrolled by enabling the <ApiLink type="DataChart" member="verticalViewScrollbarMode" label="VerticalViewScrollbarMode" /> and <ApiLink type="DataChart" member="horizontalViewScrollbarMode" label="HorizontalViewScrollbarMode" /> properties.
-
-These can be configured to the following options
-
-- `Persistent` - The scrollbars always stay visible, as long as the chart is zoomed in, and fade away when fully zoomed out.
-- `Fading` - The scrollbars disappear after use and reappear when the mouse is near their location.
-- `FadeToLine` - The scrollbars are reduced to a thinner line when zooming is not in use.
-- `None` - Default, no scrollbars are shown.
-
-The following example demonstrates enabling scrollbars.
-
-<Sample src="/charts/financial-chart/scrollbars" height={600} alt="Angular Navigation Example" />
-
-## Chart Navigation through Code
-
-<DocsAside type="info">
-Code navigation of the chart can only be used for the <ApiLink type="DataChart" /> control.
-</DocsAside>
-
-The Angular data chart provides several navigation properties that are updated each time a zoom or pan operation happens in the chart. You can also set each of these properties to zoom or pan the data chart programmatically. The following is a list of these properties:
-
-- <ApiLink type="DataChart" member="windowPositionHorizontal" label="WindowPositionHorizontal" />: A numeric value describing the X portion of the content view rectangle displayed by the data chart.
-- <ApiLink type="DataChart" member="windowPositionVertical" label="WindowPositionVertical" />: A numeric value describing the Y portion of the content view rectangle displayed by the data chart.
-- <ApiLink type="DataChart" member="windowRect" label="WindowRect" />: A <ApiLink type="Rect" /> object representing a rectangle that represents the portion of the chart that is currently in view. For example, a <ApiLink type="DataChart" member="windowRect" label="WindowRect" /> of "0, 0, 1, 1" would be the entirety of the data chart.
-- <ApiLink type="DataChart" member="windowScaleHorizontal" label="WindowScaleHorizontal" />: A numeric value describing the width portion of the content view rectangle displayed by the data chart.
-- <ApiLink type="DataChart" member="windowScaleVertical" label="WindowScaleVertical" />: A numeric value describing the height portion of the content view rectangle displayed by the data chart.
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Tooltips](chart-tooltips.md)
-- [Chart Trendlines](chart-trendlines.md)
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
-<ApiLink type="FinancialChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
deleted file mode 100644
index c57ced1135..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-overlays.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Angular Chart Overlays | Data Visualization Tools | Value Overlay | Infragistics
-description: Use Infragistics Ignite UI for Angular chart control's value overlay feature to place horizontal or vertical lines at a single numeric value. Learn about our Ignite UI for Angular graph types!
-keywords: Angular charts, data chart, value overlay, Ignite UI for Angular, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Angular DataChart allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the ValueOverlay."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Chart Overlays
-
-The Angular <ApiLink type="DataChart" /> allows for placement of horizontal or vertical lines at a single numeric value that you define through usage of the <ApiLink type="ValueOverlay" />. This can help you to visualize data such as the mean or median of a particular series.
-
-## Angular Value Overlay Example
-
-The following example depicts a [Column Chart](../types/column-chart.md) with a few horizontal value overlays plotted.
-
-<Sample src="/charts/data-chart/series-value-overlay" height={600} alt="Angular Value Overlay Example" />
-
-## Angular Value Overlay Properties
-
-Unlike other series types that use a <ApiLink type="ValueOverlay" member="dataSource" label="ItemsSource" /> for data binding, the value overlay uses a <ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> property to bind a single numeric value. In addition, the value overlay requires you to define a single <ApiLink type="ValueOverlay" member="axis" label="Axis" /> to use. If you use an X-axis, the value overlay will be a vertical line, and if you use a Y-axis, it will be a horizontal line.
-
-When using a numeric X or Y axis, the <ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> property should reflect the actual numeric value on the axis where you want the value overlay to be drawn. When using a category X or Y axis, the <ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> should reflect the index of the category at which you want the value overlay to appear.
-
-When using the value overlay with a numeric angle axis, it will appear as a line from the center of the chart and when using a numeric radius axis, it will appear as a circle.
-
-<ApiLink type="ValueOverlay" /> appearance properties are inherited from <ApiLink type="DataChart" member="Series" label="Series" /> and so <ApiLink type="ValueOverlay" member="brush" label="Brush" /> and <ApiLink type="ValueOverlay" member="thickness" label="Thickness" /> for example are available and work the same way they do with other types of series.
-
-It is also possible to show an axis annotation on a <ApiLink type="ValueOverlay" /> to show the value of the overlay on the owning axis. In order to show this, you can set the <ApiLink type="ValueOverlay" member="isAxisAnnotationEnabled" label="IsAxisAnnotationEnabled" /> property to true.
-
-## Angular Value Layer
-
-The Angular charting components also expose the ability to use value lines to call out different focal points of your data, such as minimum, maximum, and average values.
-
-Applying the <ApiLink type="ValueLayer" /> in the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> components is done by setting the <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> property on the chart. This property takes a collection of the <ApiLink type="ValueLayerValueMode" /> enumeration. You can mix and match multiple value layers in the same chart by adding multiple <ApiLink type="ValueLayerValueMode" /> enumerations to the <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> collection of the chart.
-
-In the <ApiLink type="DataChart" />, this is done by adding a <ApiLink type="ValueLayer" /> to the <ApiLink type="DataChart" member="Series" label="Series" /> collection of the chart and then setting the <ApiLink type="ValueLayer" label="ValueMode" /> property to one of the <ApiLink type="ValueLayerValueMode" /> enumerations. Each of these enumerations and what they mean is listed below:
-
-- <ApiLink type="ValueLayerValueMode" member="Auto" label="Auto" />: The default value mode of the <ApiLink type="ValueLayerValueMode" /> enumeration.
-- <ApiLink type="ValueLayerValueMode" member="Average" label="Average" />: Applies potentially multiple value lines to call out the average value of each series plotted in the chart.
-- <ApiLink type="ValueLayerValueMode" member="GlobalAverage" label="GlobalAverage" />: Applies a single value line to call out the average of all of the series values in the chart.
-- <ApiLink type="ValueLayerValueMode" member="GlobalMaximum" label="GlobalMaximum" />: Applies a single value line to call out the absolute maximum value of all of the series values in the chart.
-- <ApiLink type="ValueLayerValueMode" member="GlobalMinimum" label="GlobalMinimum" />: Applies a single value line to call out the absolute minimum value of all of the series values in the chart.
-- <ApiLink type="ValueLayerValueMode" member="Maximum" label="Maximum" />: Applies potentially multiple value lines to call out the maximum value of each series plotted in the chart.
-- <ApiLink type="ValueLayerValueMode" member="Minimum" label="Minimum" />: Applies potentially multiple value lines to call out the minimum value of each series plotted in the chart.
-
-If you want to prevent any particular series from being taken into account when using the <ApiLink type="ValueLayer" /> element, you can set the <ApiLink type="ValueLayer" member="targetSeries" label="TargetSeries" /> property on the layer. This will force the layer to target the series that you define. You can have as many <ApiLink type="ValueLayer" /> elements within a single <ApiLink type="DataChart" /> as you want.
-
-The following sample demonstrates usage of the different <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> in the <ApiLink type="CategoryChart" />:
-
-<Sample src="/charts/category-chart/value-lines" height={600} alt="Angular Value Lines Example" />
-
-## Angular Financial Overlays
-
-You can also plot built-in financial overlays and indicators in Angular [Stock Chart](../types/stock-chart.md).
-
-## Chart Overlay Text <Badge variant="preview" />
-
-The Angular <ApiLink type="ValueOverlay" />, <ApiLink type="ValueLayer" />, and all Data Annotation Layers can render custom overlay text inside plot area of the DataChart component. You can use this overlay text to annotate important events (e.g. company quarter reports) on x-axis or important values on y-axis in relationship to the layers.
-
-For example, you can use <ApiLink type="DataAnnotationSliceLayer" />, <ApiLink type="ValueOverlay" />, and <ApiLink type="ValueLayer" /> to show overlay text.
-
-<Sample src="/charts/data-chart/data-annotation-multiple-with-overlay-text" height={600} alt="Angular Multiple Overlay Text" />
-
-### Styling Overlay Text
-
-This code example shows how to style and customize Overlay Text on
-the <ApiLink type="DataAnnotationSliceLayer" />, <ApiLink type="ValueOverlay" />, and <ApiLink type="ValueLayer" />.
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Column Chart](../types/area-chart.md)
-- [Line Chart](../types/line-chart.md)
-- [Stock Chart](../types/stock-chart.md)
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="ValueOverlay" />
-<ApiLink type="ValueLayer" />
-<ApiLink type="ValueLayerValueMode" />
-<ApiLink type="CategoryChart" />
-<ApiLink type="FinancialChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx b/docs/angular/src/content/en/components/charts/features/chart-performance.mdx
deleted file mode 100644
index bd5e9a1258..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-performance.mdx
+++ /dev/null
@@ -1,366 +0,0 @@
----
-title: "Angular Chart Performance | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Performance
-keywords: "Angular Charts, Performance, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "DataChart", "FinancialChartVolumeType", "FinancialChartZoomSliderType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Performance
-
-Angular charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the chart and they should be considered when optimizing performance in your application. This topic will guide you to make Angular charts work as fast as possible in your application.
-
-## Angular Chart Performance Examples
-
-The following examples demonstrates two high performance scenarios of Angular charts.
-
-## Angular Chart with High-Frequency
-
-In High-Frequency scenario, the Angular Charts can render data items that are updating in real time or at specified milliseconds intervals. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. The following sample demonstrates the <ApiLink type="CategoryChart" /> in High-Frequency scenario.
-
-<Sample src="/charts/category-chart/high-frequency" height={400} alt="Angular Chart with High Frequency" />
-
-## Angular Chart with High-Volume
-
-In High-Volume scenario, the Angular Charts can render 1 million of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. The following sample demonstrates the <ApiLink type="CategoryChart" /> in High-Volume scenario.
-
-<Sample src="/charts/category-chart/high-volume" height={400} alt="Angular Chart with High Volume" />
-
-## General Performance Guidelines
-
-This section lists guidelines and chart features that add to the overhead and processing updates in the Angular charts.
-
-### Data Size
-
-If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using Angular <ApiLink type="DataChart" /> with one of the following type of series which where designed for specially for that purpose.
-
-- [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart)
-- [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#angular-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart)
-- [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#angular-area-chart-example) or [Column Chart](../types/column-chart.md#angular-column-chart-example)
-
-### Data Structure
-
-Although Angular charts support rendering of multiple data sources by binding array of arrays of data points to <ApiLink type="DomainChart" member="DataSource" label="ItemsSource" /> property. It is much faster for charts if multiple data sources are flatten into single data source where each data item contains multiple data columns rather just one data column. For example:
-
-```ts
-this.CategoryChart.dataSource = FlattenDataSource.create();
-this.FinancialChart.dataSource = FlattenDataSource.create();
-
-export class FlattenDataSource {
-    public static create(): any[] {
-        const data: any[] = [];
-        data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
-        data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
-        return data;
-    }
-}
-// instead of this data structure:
-export class MultiDataSources {
-    public static create(): any[] {
-        const dataSource1: any[] = [];
-        dataSource1.push({ "Year": "1996", "Value": 148 });
-        dataSource1.push({ "Year": "2000", "Value": 142 });
-        const dataSource2: any[] = [];
-        dataSource2.push({ "Year": "1996", "Value": 110 });
-        dataSource2.push({ "Year": "2000", "Value": 115 });
-        const multipleSources: any[] = [dataSource1, dataSource2];
-        return multipleSources;
-    }
-}
-```
-
-### Data Filtering
-
-Angular <ApiLink type="CategoryChart" /> and the <ApiLink type="FinancialChart" /> controls have built-in data adapter that analyzes your data and generates chart series for you. However, it works faster if you use <ApiLink type="DomainChart" member="includedProperties" label="IncludedProperties" /> and <ApiLink type="DomainChart" member="excludedProperties" label="ExcludedProperties" /> to filter only those data columns that you actually want to render. For example,
-
-```ts
-this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
-this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
-```
-
-## Chart Performance Guidelines
-
-### Chart Types
-
-Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property of Angular <ApiLink type="CategoryChart" /> or the <ApiLink type="FinancialChart" /> control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in Angular <ApiLink type="DataChart" /> control.
-
-The following table lists chart types in order from the fastest performance to slower performance in each group of charts:
-
-| Chart Group     | Chart Type |
-| ----------------|--------------------------------- |
-| Pie Charts       | - [Pie Chart](../types/pie-chart.md) <br /> - [Donut Chart](../types/donut-chart.md) <br /> - [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) |
-| Line Charts      | - [Category Line Chart](../types/line-chart.md#angular-line-chart-example) <br /> - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br /> - [Step Line Chart](../types/step-chart.md#angular-step-line-chart) <br /> - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart) <br /> - [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*)  <br /> - [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart) <br /> - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart) <br /> |
-| Area Charts      | - [Category Area Chart](../types/area-chart.md#angular-area-chart-example) <br /> - [Step Area Chart](../types/step-chart.md#angular-step-area-chart) <br /> - [Range Area Chart](../types/area-chart.md#angular-range-area-chart) <br /> - [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart) <br /> - [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart) <br /> - [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*) <br /> - [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart) <br /> |
-| Column Charts    | - [Column Chart](../types/column-chart.md#angular-column-chart-example) <br /> - [Bar Chart](../types/bar-chart.md#angular-bar-chart-example) <br /> - [Waterfall Chart](../types/column-chart.md#angular-waterfall-chart) <br /> - [Range Column Chart](../types/column-chart.md#angular-range-column-chart) <br /> - [Range Bar Chart](../types/bar-chart.md#angular-range-bar-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) |
-| Spline Charts    | - [Category Spline Chart](../types/spline-chart.md#angular-spline-chart-example) <br /> - [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart) <br /> - [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart) <br /> |
-| Point Charts     | - [Category Point Chart](../types/point-chart.md) <br /> - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart)  <br /> - [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.md) <br /> - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart) <br /> |
-| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md) <br /> - [Stock Chart in Column Mode](../types/stock-chart.md) <br /> - [Stock Chart in Bar Mode](../types/stock-chart.md) <br /> - [Stock Chart in Candle Mode](../types/stock-chart.md) <br /> - [Stock Chart with Overlays](../types/stock-chart.md) <br /> - [Stock Chart with Zoom Pane](../types/stock-chart.md) <br /> - [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane) <br /> - [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane) <br /> |
-| Scatter Charts   | - [Scatter HD Chart](../types/scatter-chart.md#angular-scatter-high-density-chart) <br /> - [Scatter Marker Chart](../types/scatter-chart.md#angular-scatter-marker-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.md#angular-scatter-line-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.md) <br /> - [Scatter Spline Chart](../types/scatter-chart.md#angular-scatter-spline-chart) <br /> - [Scatter Area Chart](../types/scatter-chart.md#angular-scatter-area-chart) <br /> - [Scatter Contour Chart](../types/scatter-chart.md#angular-scatter-contour-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.md#angular-scatter-polyline-chart) (\*) <br /> - [Scatter Polygon Chart](../types/shape-chart.md#angular-scatter-polygon-chart) (\*) <br /> |
-| Radial Charts    | - [Radial Line Chart](../types/radial-chart.md#angular-radial-line-chart) <br /> - [Radial Area Chart](../types/radial-chart.md#angular-radial-area-chart) <br /> - [Radial Pie Chart](../types/radial-chart.md#angular-radial-pie-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#angular-radial-column-chart) <br /> |
-| Polar Charts     | - [Polar Marker Chart](../types/polar-chart.md#angular-polar-marker-chart) <br /> - [Polar Line Chart](../types/polar-chart.md#angular-polar-line-chart) <br /> - [Polar Area Chart](../types/polar-chart.md#angular-polar-area-chart) <br /> - [Polar Spline Chart](../types/polar-chart.md#angular-polar-spline-chart) <br /> - [Polar Spline Area Chart](../types/polar-chart.md#angular-polar-spline-area-chart) <br /> |
-| Stacked Charts   | - [Stacked Line Chart](../types/stacked-chart.md#angular-stacked-line-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.md#angular-stacked-area-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#angular-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#angular-stacked-bar-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.md#angular-stacked-spline-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.md#angular-stacked-100-line-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.md#angular-stacked-100-area-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#angular-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#angular-stacked-100-bar-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.md#angular-stacked-100-spline-chart) <br /> |
-
-\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
-
-### Chart Animations
-
-Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the Angular charts while they play transition-in animations.
-
-### Chart Annotations
-
-Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the Angular chart.
-
-### Chart Highlighting
-
-Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the Angular chart.
-
-### Chart Legend
-
-Adding a legend to the Angular charts might decrease performance if titles of series or data items mapped to legend are changing often at runtime.
-
-### Chart Markers
-
-In Angular charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
-
-This code snippet shows how to remove markers from the Angular charts.
-
-```ts
-// on CategoryChart or FinancialChart
-this.Chart.markerTypes.clear();
-this.Chart.markerTypes.add(MarkerType.None);
-
-// on LineSeries of DataChart
-this.LineSeries.markerType = MarkerType.None;
-
-```
-
-### Chart Resolution
-
-Setting the <ApiLink type="DomainChart" member="resolution" label="Resolution" /> property to a higher value will improve performance, but it will lower the graphical fidelity of lines of plotted series. As such, it can be increased up until the fidelity is unacceptable.
-
-This code snippet shows how to decrease resolution in the Angular charts.
-
-```ts
-// on CategoryChart or FinancialChart:
-this.Chart.Resolution = 10;
-
-// on LineSeries of DataChart:
-this.LineSeries.Resolution = 10;
-
-```
-
-### Chart Overlays
-
-Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the Angular chart.
-
-### Chart Trendlines
-
-Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the Angular chart.
-
-### Axis Types
-
-Usage of x-axis with DateTime support is not recommended if spaces between data points, based on the amount of time span between them, are not important. Instead, ordinal/category axis should be used because it is more efficient in the way it coalesces data. Also, ordinal/category axis doesn’t perform any sorting on the data like the time-based x-axis does.
-
-<DocsAside type="info">
-The <ApiLink type="CategoryChart" /> already uses ordinal/category axis so there is no need to change its properties.
-</DocsAside>
-
-This code snippet shows how to ordinal/category x-axis in the <ApiLink type="FinancialChart" /> and <ApiLink type="DataChart" /> controls.
-
-```html
-<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis label="Time"></igx-category-x-axis>
-</igx-data-chart>
-```
-
-### Axis Intervals
-
-By default, Angular charts will automatically calculate <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> based on range of your data. Therefore, you should avoid setting axis interval especially to a small value to prevent rendering of too many of axis gridlines and axis labels. Also, you might want to consider increasing <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> property to a larger value than the automatically calculated axis interval if you do not need many axis gridlines or axis labels.
-
-<DocsAside type="info">
-We do not recommend setting axis minor interval as it will decrease chart performance.
-</DocsAside>
-
-This code snippet shows how to set axis major interval in the Angular charts.
-
-```html
-<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
-
-<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### Axis Scale
-
-Setting the <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> property to false is recommended for higher performance, as fewer operations are needed than calculating axis range and values of axis labels in logarithmic scale.
-
-### Axis Labels Visibility
-
-In the same way as Markers, axis labels are also expensive because they use templates and bindings, and may have their data context changed often. If labels are not used, they should be hidden or their interval should be increased to decrease number of axis labels.
-
-This code snippet shows how to hide axis labels in the Angular charts.
-
-```html
-<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
-</igx-category-chart>
-
-<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
-</igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### Axis Labels Abbreviation
-
-Although, the Angular charts support abbreviation of large numbers (e.g. 10,000+) displayed in axis labels when <ApiLink type="CategoryChart" member="yAxisAbbreviateLargeNumbers" label="YAxisAbbreviateLargeNumbers" /> is set to true. We recommend, instead pre-processing large values in your data items by dividing them a common factor and then setting <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> to a string that represents factor used used to abbreviate your data values.
-
-This code snippet shows how to set axis title in the Angular charts.
-
-```html
-<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
-
-<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### Axis Labels Extent
-
-At runtime, the Angular charts adjust extent of labels on y-axis based on a label with longest value. This might decrease chart performance if range of data changes and labels need to be updated often. Therefore, it is recommended to set label extent at design time in order to improve chart performance.
-
-The following code snippet shows how to set a fixed extent for labels on y-axis in the Angular charts.
-
-```html
-<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
-
-<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### Axis Other Visuals
-
-Enabling additional axis visuals (e.g. axis titles) or changing their default values might decrease performance in the Angular charts.
-
-For example, changing these properties on the <ApiLink type="CategoryChart" /> or <ApiLink type="FinancialChart" /> control:
-
-| Axis Visual          | X-Axis Properties | Y-Axis Properties |
-| ---------------------|-------------------|------------------- |
-| All Axis Visual      | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /><br />  <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" /> | <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /><br />  <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" /> |
-| Axis Tickmarks       | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" /> <br />  <ApiLink type="CategoryChart" member="xAxisTickStrokeThickness" label="XAxisTickStrokeThickness" /><br />  <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /><br />  | <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" /> <br />  <ApiLink type="CategoryChart" member="yAxisTickStrokeThickness" label="YAxisTickStrokeThickness" /><br />  <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /><br /> |
-| Axis Major Gridlines | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /><br /> |
-| Axis Minor Gridlines | <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisMinorStroke" label="YAxisMinorStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /><br /> |
-| Axis Main Line       | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" /><br /> |
-| Axis Titles          | <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" /><br />  <ApiLink type="CategoryChart" member="xAxisTitleAngle" label="XAxisTitleAngle" /><br />    | <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /><br />  <ApiLink type="CategoryChart" member="yAxisTitleAngle" label="YAxisTitleAngle" /><br /> |
-| Axis Strips          | <ApiLink type="CategoryChart" member="xAxisStrip" label="XAxisStrip" /><br />   | <ApiLink type="CategoryChart" member="yAxisStrip" label="YAxisStrip" /><br /> |
-
-Or changing properties of an <ApiLink type="Axis" /> in the <ApiLink type="DataChart" /> control:
-
-| Axis Visual          | Axis Properties |
-| ---------------------|------------------- |
-| All Axis Visuals     | `Interval`, `MinorInterval` |
-| Axis Tickmarks       | <ApiLink type="Axis" member="tickStroke" label="TickStroke" /> , <ApiLink type="Axis" member="tickStrokeThickness" label="TickStrokeThickness" />, <ApiLink type="Axis" member="tickLength" label="TickLength" /> |
-| Axis Major Gridlines | <ApiLink type="Axis" member="majorStroke" label="MajorStroke" />, <ApiLink type="Axis" member="majorStrokeThickness" label="MajorStrokeThickness" /> |
-| Axis Minor Gridlines | <ApiLink type="Axis" member="minorStroke" label="MinorStroke" />, <ApiLink type="Axis" member="minorStrokeThickness" label="MinorStrokeThickness" /> |
-| Axis Main Line       | <ApiLink type="Axis" member="stroke" label="Stroke" />, <ApiLink type="Axis" member="strokeThickness" label="StrokeThickness" /> |
-| Axis Titles          | <ApiLink type="DomainChart" member="chartTitle" label="Title" />, `TitleAngle` |
-| Axis Strips          | <ApiLink type="Axis" member="strip" label="Strip" /> |
-
-## Performance in Financial Chart
-
-In addition to above performance guidelines, the Angular <ApiLink type="FinancialChart" /> control has the following unique features that affect performance.
-
-### Y-Axis Mode
-
-Setting the <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> option to `Numeric` is recommended for higher performance, as fewer operations are needed than using <ApiLink type="LineSeries" member="percentChange" label="PercentChange" /> mode.
-
-### Chart Panes
-
-Setting a lot of panes using <ApiLink type="FinancialChart" member="indicatorTypes" label="IndicatorTypes" /> and <ApiLink type="FinancialChart" member="overlayTypes" label="OverlayTypes" /> options, might decrease performance and it is recommended to use a few financial indicators and one financial overlay.
-
-### Zoom Slider
-
-Setting the <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> option to <ApiLink type="FinancialChartVolumeType" member="None" label="None" /> will improve chart performance and enable more vertical space for other indicators and the volume pane.
-
-### Volume Type
-
-Setting the <ApiLink type="FinancialChart" member="volumeType" label="VolumeType" /> property can have the following impact on chart performance:
-
-- <ApiLink type="FinancialChartVolumeType" member="None" label="None" /> - is the least expensive since it does not display the volume pane.
-- <ApiLink type="FinancialChartVolumeType" member="Line" label="Line" /> - is more expensive volume type to render and it is recommended when rendering a lot of data points or when plotting a lot of data sources.
-- <ApiLink type="FinancialChartVolumeType" member="Area" label="Area" /> - is more expensive to render than the <ApiLink type="FinancialChartVolumeType" member="Line" label="Line" /> volume type.
-- <ApiLink type="FinancialChartVolumeType" member="Column" label="Column" /> - is more expensive to render than the <ApiLink type="FinancialChartVolumeType" member="Area" label="Area" /> volume type and it is recommended when rendering volume data of 1-3 stocks.
-
-## Performance in Data Chart
-
-In addition to the general performance guidelines, the Angular <ApiLink type="DataChart" /> control has the following unique features that affect performance.
-
-### Axes Collection
-
-Adding too many axis to the <ApiLink type="DataChart" member="Axes" label="Axes" /> collection of the <ApiLink type="DataChart" /> control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series.
-
-### Series Collection
-
-Also, adding a lot of series to the <ApiLink type="DataChart" member="Series" label="Series" /> collection of the Angular <ApiLink type="DataChart" /> control will add overhead to rendering because each series has its own rendering canvas. This is especially important if you have more than 10 series in the Data Chart. We recommend combining multiple data sources into flatten data source (see [Data Structure](#data-structure) section) and then using conditional styling feature of the following series:
-
-| Slower Performance Scenario | Faster Scenario with Conditional Styling |
-| ----------------------------|---------------------------------------- |
-| 10+ of <ApiLink type="LineSeries" />         | Single <ApiLink type="ScatterLineSeries" /> |
-| 20+ of <ApiLink type="LineSeries" />         | Single <ApiLink type="ScatterPolylineSeries" /> |
-| 10+ of <ApiLink type="ScatterLineSeries" />  | Single <ApiLink type="ScatterPolylineSeries" /> |
-| 10+ of <ApiLink type="PointSeries" />        | Single <ApiLink type="ScatterSeries" /> |
-| 20+ of <ApiLink type="PointSeries" />        | Single <ApiLink type="HighDensityScatterSeries" /> |
-| 20+ of <ApiLink type="ScatterSeries" />      | Single <ApiLink type="HighDensityScatterSeries" /> |
-| 10+ of <ApiLink type="AreaSeries" />         | Single <ApiLink type="ScatterPolygonSeries" /> |
-| 10+ of <ApiLink type="ColumnSeries" />       | Single <ApiLink type="ScatterPolygonSeries" /> |
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](../types/area-chart.md)
-- [Bar Chart](../types/bar-chart.md)
-- [Bubble Chart](../types/bubble-chart.md)
-- [Column Chart](../types/column-chart.md)
-- [Donut Chart](../types/donut-chart.md)
-- [Pie Chart](../types/pie-chart.md)
-- [Point Chart](../types/point-chart.md)
-- [Polar Chart](../types/polar-chart.md)
-- [Radial Chart](../types/radial-chart.md)
-- [Shape Chart](../types/shape-chart.md)
-- [Spline Chart](../types/spline-chart.md)
-- [Scatter Chart](../types/scatter-chart.md)
-- [Stacked Chart](../types/stacked-chart.md)
-- [Step Chart](../types/shape-chart.md)
-- [Stock Chart](../types/stock-chart.md)
-- [Chart Animations](chart-animations.md)
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Markers](chart-markers.md)
-- [Chart Overlays](chart-overlays.md)
-- [Chart Trendlines](chart-trendlines.md)
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="FinancialChart" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx b/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx
deleted file mode 100644
index 0537850207..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-synchronization.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: "Angular Data Chart | Data Visualization Tools | Synchronization | Infragistics"
-description: Synchronize between multiple Infragistics' Angular charts controls including zooming, panning and crosshair events. Learn about our Ignite UI for Angular graph synchronization capabilities!
-keywords: "Angular charts, data chart, synchronization, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular data chart allows for synchronization with respect to the coordination of zooming, panning, and crosshair events between multiple charts."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Synchronization
-
-The Ignite UI for Angular data chart allows for synchronization with respect to the coordination of zooming, panning, and crosshair events between multiple charts. This can help you to visualize the same areas of multiple charts, assuming your data sources are similar or the same with respect to the axes.
-
-## Angular Chart Synchronization Example
-
-This sample shows synchronization of two Angular data charts:
-
-<Sample src="/charts/data-chart/chart-synchronization" height={600} alt="Angular Chart Synchronization Example" />
-
-## Chart Synchronization Properties
-
-There are four options of chart synchronization, in that you can synchronize horizontally only, vertically only, both, or you can choose not to synchronize at all, which is the default.
-
-If you want to synchronize a set of charts, you can assign them the same name to the <ApiLink type="DataChart" member="syncChannel" label="SyncChannel" /> property and then specify whether or not to synchronize the charts horizontally and/or vertically by setting the <ApiLink type="DataChart" member="synchronizeHorizontally" label="SynchronizeHorizontally" /> and <ApiLink type="DataChart" member="synchronizeVertically" label="SynchronizeVertically" /> properties to the corresponding boolean value.
-
-Note that in order to synchronize either vertically and/or horizontally, you will need to set the <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> and/or <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> property to **true**, respectively. A synchronized chart that is dependent on another chart will still zoom regardless of this property setting.
-
-## API References
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx b/docs/angular/src/content/en/components/charts/features/chart-titles.mdx
deleted file mode 100644
index e355901af9..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-titles.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: "Angular Chart Titles | Data Visualization Tools | Infragistics"
-description: Use Infragistics Ignite UI for Angular chart with Titles
-keywords: "Angular charts, chart titles, titles, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The title and subtitle feature of the chart control allows you to add information to the top section of the Angular charts."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Title and Subtitle
-
-The title and subtitle feature of the chart control allows you to add information to the top section of the Angular charts.
-
-## Example
-
-<Sample src="/charts/category-chart/line-chart-with-titles" height={600} alt="Angular Chart Synchronization Example" />
-
-<div class="divider--half"></div>
-
-## API References
-
-When adding a title or subtitle to the chart control, the content of the chart automatically resizes allowing for the title and subtitle information.
-
-| Property Name         | Property Type   |     Description  |
-| ----------------------|------------------|------------|
-| <ApiLink type="ChartTitle" />          | string |  Title's text content.  |
-| <ApiLink type="CategoryChart" member="titleTextColor" label="TitleTextColor" />      | string |  Title's text. color  |
-| <ApiLink type="CategoryChart" member="titleAlignment" label="TitleAlignment" />      | HorizontalAlignment |  Title's horizontal alignment.  |
-| <ApiLink type="CategoryChart" member="titleTextStyle" label="TitleTextStyle" />      | string | Title's font style, e.g. Italic Bold 8pt Times New Roman  |
-| <ApiLink type="CategoryChart" member="titleTopMargin" label="TitleTopMargin" />      | number | Title's top margin.  |
-| <ApiLink type="CategoryChart" member="titleLeftMargin" label="TitleLeftMargin" />     | number | Title's left margin.  |
-| <ApiLink type="CategoryChart" member="titleRightMargin" label="TitleRightMargin" />    | number | Title's right margin.  |
-| <ApiLink type="CategoryChart" member="titleBottomMargin" label="TitleBottomMargin" />   | number | Title's bottom margin.  |
-| <ApiLink type="CategoryChart" member="subtitle" label="Subtitle" />            | string |  Title's text content.  |
-| <ApiLink type="CategoryChart" member="subtitleTextColor" label="SubtitleTextColor" />   | string |  Title's text. color  |
-| <ApiLink type="CategoryChart" member="subtitleAlignment" label="SubtitleAlignment" />   | HorizontalAlignment |  Title's horizontal alignment.  |
-| <ApiLink type="CategoryChart" member="subtitleTextStyle" label="SubtitleTextStyle" />   | string | Title's font style, e.g. Italic Bold 8pt Times New Roman  |
-| <ApiLink type="CategoryChart" member="subtitleTopMargin" label="SubtitleTopMargin" />   | number | Title's top margin.  |
-| <ApiLink type="CategoryChart" member="subtitleLeftMargin" label="SubtitleLeftMargin" />  | number | Title's left margin.  |
-| <ApiLink type="CategoryChart" member="subtitleRightMargin" label="SubtitleRightMargin" /> | number | Title's right margin.  |
-| <ApiLink type="CategoryChart" member="subtitleBottomMargin" label="SubtitleBottomMargin" />| number | Title's bottom margin.  |
diff --git a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx
deleted file mode 100644
index 56df252eaf..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-tooltips.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: "Angular Chart Tooltips | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart Tooltips
-keywords: "Angular Charts, Tooltips, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "ToolTipType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Tooltips
-
-In Angular charts, tooltips provide details about bound data and they are rendered in popups when the end-user hovers over data points. Tooltips are supported by the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" /> controls.
-
-## Angular Chart Tooltip Types
-
-Angular Chart provide three types of tooltips that you can with tooltips enabled by setting the <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips.
-
-<Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="Angular Tooltip Types Example" />
-
-The <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> property is configurable and can be set to one of the following options:
-
-| Property Value     | Description  |
-| -------------------|----------------|
-| <ApiLink type="ToolTipType" member="Default" label="Default" />  Tooltip | Display a tooltip for a single item when the pointer is positioned over it.  |
-| <ApiLink type="ToolTipType" member="Data" label="Data" /> Tooltip | Display the data tooltips for all series in the chart.  |
-| <ApiLink type="ToolTipType" member="Item" label="Item" />  Tooltip    | Display a tooltip for each data item in the category that the pointer is positioned over.  |
-| <ApiLink type="ToolTipType" member="Category" label="Category" /> Tooltip | Display a grouped tooltip for all data points in the category that the pointer is positioned over.  |
-
-## Angular Chart Tooltip Template
-
-If none of built-in types of tooltips are matching your requirements, you can create your own tooltips to display and style series title, data values, and axis values. The following sections demonstrate how to do this in different types of Angular charts.
-
-## Custom Tooltips in Category Chart
-
-This example shows how to create custom tooltips for all series in Angular <ApiLink type="CategoryChart" /> control. Note that you can also apply the same logic to custom tooltips in Angular <ApiLink type="FinancialChart" /> control.
-
-<Sample src="/charts/category-chart/tooltip-template" height={500} alt="Angular Tooltip Template" />
-
-## Custom Tooltips in Data Chart
-
-This example shows how to create custom tooltips for each series in Angular Data Chart control.
-
-<Sample src="/charts/data-chart/tooltip-template" height={500} alt="Angular Tooltip Template" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Markers](chart-markers.md)
-
-## API References
-<ApiLink type="DataToolTipLayer" />
-<ApiLink type="CategoryChart" />
-<ApiLink type="FinancialChart" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx
deleted file mode 100644
index ac1b635662..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-trendlines.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: Angular Chart Trendlines | Data Visualization | Infragistics
-description: Infragistics' Angular Chart Trendlines
-keywords: Angular Charts, Trendlines, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Chart Trendlines
-
-In Ignite UI for Angular charts, trendlines help in identifying a trend or finding patterns in data. Trendlines are always rendered in front of data points bound to the chart and are supported by the <ApiLink type="CategoryChart" />, <ApiLink type="FinancialChart" />, and <ApiLink type="DataChart" /> (except for stacked series, shape series, and range series).
-
-Trendlines are off by default, but you can enable them by setting the <ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> property. Also, you can modify multiple appearance properties of trendlines such as its brush, period, and thickness.
-
-The trendlines also have the ability to have a dash array applied to them once enabled. This is done by setting the <ApiLink type="FinancialPriceSeries" member="trendLineDashArray" label="TrendLineDashArray" /> property to an array of numbers. The numeric array describes the length of the dashes of the trendline.
-
-## Angular Chart Trendlines Example
-
-The following sample depicts a <ApiLink type="FinancialChart" /> showing the stock trend of Microsoft between 2013 and 2017 with a **QuinticFit** trendline initially applied. There is a drop-down that will allow you to change the type of trendline that is applied, and all possible trendline types are listed within that drop-down.
-
-<Sample src="/charts/financial-chart/trendlines" height={500} alt="Angular Trendlines Example" />
-
-## Angular Chart Trendlines Dash Array Example
-
-The following sample depicts a <ApiLink type="DataChart" /> showing a <ApiLink type="FinancialPriceSeries" /> with a **QuarticFit** dashed trendline applied via the <ApiLink type="FinancialPriceSeries" member="trendLineDashArray" label="TrendLineDashArray" /> property:
-
-<Sample src="/charts/data-chart/dash-array-trendline" height={500} alt="Angular Trendlines Example" />
-
-## Angular Chart Trendline Layer
-
-The <ApiLink type="TrendLineLayer" /> is a series type that is designed to display a single trendline type for a target series. The difference between this and the existing trendline features on the existing series types is that since the <ApiLink type="TrendLineLayer" /> is a series type, you can add more than one of them to the <ApiLink type="DataChart" member="Series" label="Series" /> collection of the chart to have multiple trendlines attached to the same series. You can also have the trendline appear in the legend, which was not possible previously.
-
-## Trendline Layer Usage
-
-The <ApiLink type="TrendLineLayer" /> must be provided with a <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> and a <ApiLink type="TrendLineLayer" member="trendLineType" label="TrendLineType" /> in order to work properly. The different trendline types that are available are the same as the trendlines that are available on the series.
-
-If you would like to show the <ApiLink type="TrendLineLayer" /> in the Legend, you can do so by setting the <ApiLink type="TrendLineLayer" member="useLegend" label="UseLegend" /> property to `true`.
-
-## Styling the Trendline Layer
-
-By default, the <ApiLink type="TrendLineLayer" /> renders with the same color as its <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> in a dashed line. This can be configured by using the various styling properties on the <ApiLink type="TrendLineLayer" />.
-
-To change the color of the trendline that is drawn, you can set its <ApiLink type="TrendLineLayer" member="brush" label="Brush" /> property. Alternatively, you can also set the <ApiLink type="TrendLineLayer" member="useIndex" label="UseIndex" /> property to `true`, which will pull from the chart's <ApiLink type="DomainChart" member="brushes" label="Brushes" /> palette based on the index in which the <ApiLink type="TrendLineLayer" /> is placed in the chart's <ApiLink type="DataChart" member="Series" label="Series" /> collection.
-
-You can also modify the way that the <ApiLink type="TrendLineLayer" /> appears by using its <ApiLink type="TrendLineLayer" member="appearanceMode" label="AppearanceMode" /> and <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> properties. The <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> takes a value between -1.0 and 1.0 to determine how much of a "shift" to apply to the options that end in "Shift".
-
-The following are the options for the <ApiLink type="TrendLineLayer" member="appearanceMode" label="AppearanceMode" /> property:
-
-- `Auto`: This will default to the DashPattern enumeration.
-- `BrightnessShift`: The trendline will take the <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> brush and modify its brightness based on the provided <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" />.
-- `DashPattern`: The trendline will appear as a dashed line. The frequency of the dashes can be modified by using the <ApiLink type="TrendLineLayer" member="dashArray" label="DashArray" /> property on the <ApiLink type="TrendLineLayer" />.
-- `OpacityShift`: The trendline will take the <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> brush and modify its opacity based on the provided <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" />.
-- `SaturationShift`: The trendline will take the <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> brush and modify its saturation based on the provided <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" />.
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="FinancialChart" />
-<ApiLink type="DataChart" />
-<ApiLink type="TrendLineLayer" />
diff --git a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx
deleted file mode 100644
index 6c38276e41..0000000000
--- a/docs/angular/src/content/en/components/charts/features/chart-user-annotations.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: "Angular Chart User Annotations | Data Visualization | Infragistics"
-description: Infragistics' Angular Chart User Annotations
-keywords: "Angular Charts, User Annotations, Infragistics"
-mentionedTypes: ["DataChart", "UserAnnotationLayer", "UserStripAnnotation", "UserSliceAnnotation", "UserPointAnnotation", "Toolbar", "UserAnnotationInformation", "SeriesViewer"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "In Ignite UI for Angular, you can annotate the DataChart with slice, strip, and point annotations at runtime using the user annotations feature."
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user-annotation-create.gif';
-import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user-annotation-delete.gif';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Chart User Annotation Layer <Badge variant="preview" />
-
-In Ignite UI for Angular, you can annotate the <ApiLink type="DataChart" /> with slice, strip, and point annotations at runtime using the user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-
-This is directly integrated with the available tools of the <ApiLink type="Toolbar" />. The following topic explains, with examples, how you can utilize the <ApiLink type="Toolbar" /> to add user annotations to the plot area of the chart, as well as how to do add these user annotations programmatically.
-
-<Sample src="/charts/data-chart/user-annotation-layer" height={500} alt="Angular Trendlines Example" />
-
-<DocsAside type="info">
-This feature is designed to support X and Y axes and does not currently support radial or angular axes.
-</DocsAside>
-
-## Using the User Annotations with the Toolbar
-
-The <ApiLink type="Toolbar" /> exposes an Annotations menu item with two tools with the labels of "Annotate Chart" and "Delete Note." In order for this menu item to appear, you first need to set the <ApiLink type="DataChart" member="isUserAnnotationsEnabled" label="IsUserAnnotationsEnabled" /> property on the corresponding chart to `true`.
-
-The "Annotate Chart" option that appears after opening allows you to annotate the plot area of the <ApiLink type="DataChart" />. This can be done by adding slice, strip, or point annotations. You can add a slice annotation by clicking on a label on the X or Y axis. You can add a strip annotation by clicking and dragging in the plot area. Also, you can add a point annotation by clicking on a point in a series plotted in the chart.
-
-<Image src={dataChartUserAnnotationCreate} alt="Angular user-annotation-create" class="responsive-img" />
-
-You can delete the annotations that you have previously added by selecting the "Delete Note" menu item and then clicking on the axis annotation for the slice or strip user annotations, or by clicking the corresponding data point for the point user annotation.
-
-<Image src={dataChartUserAnnotationDelete} alt="Angular user-annotation-delete" class="responsive-img" />
-
-When adding one of these user annotations via the <ApiLink type="Toolbar" />, the <ApiLink type="DataChart" /> will raise an event named `UserAnnotationInformationRequested` where you can provide more information for the user annotations. This event's arguments have a property named `AnnotationInfo` that will return a <ApiLink type="UserAnnotationInformation" /> object that allows the configuration of multiple different aspects of the annotation to be added.
-
-The table below details the different configurable properties on <ApiLink type="UserAnnotationInformation" />:
-
-| Property | Type | Description |
-|------------|---------|-------------|
-|<ApiLink type="UserStripAnnotation" member="annotationData" label="AnnotationData" />|`string`|This property allows additional information for the user annotation. This property is designed to be utilized with the `UserAnnotationToolTipContentUpdating` event to show additional information in the annotation's tooltip.|
-|<ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" />|`string`|This read-only property returns the unique string ID of the user annotation.|
-|<ApiLink type="UserAnnotationInformation" member="badgeColor" label="BadgeColor" />|`string`|This property gets or sets the color to use for the badge in the user annotation.|
-|<ApiLink type="UserAnnotationInformation" member="badgeImageUri" label="BadgeImageUri" />|`string`|This property gets or sets a path to an image to use for the badge in the user annotation.|
-|<ApiLink type="UserAnnotationInformation" member="dialogSuggestedXLocation" label="DialogSuggestedXLocation" />|`double`|This property gets a recommended X location to show a dialog based on the location that the user annotation was added.|
-|<ApiLink type="UserAnnotationInformation" member="dialogSuggestedYLocation" label="DialogSuggestedYLocation" />|`double`|This property gets a recommended Y location to show a dialog based on the location that the user annotation was added.|
-|<ApiLink type="UserStripAnnotation" member="label" label="Label" />|`string`|This property gets or sets the label to be shown in the user annotation.|
-|<ApiLink type="UserAnnotationInformation" member="mainColor" label="MainColor" />|`string`|This property gets or sets the color to be used to fill the background of the user annotation.|
-
-After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the <ApiLink type="DataChart" member="finishAnnotationFlow" label="FinishAnnotationFlow" /> method on the <ApiLink type="DataChart" /> to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling <ApiLink type="DataChart" member="cancelAnnotationFlow" label="CancelAnnotationFlow" /> and passing the <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
-
-## Using the User Annotations Programmatically
-
-When using the <ApiLink type="UserAnnotationLayer" /> programmatically, you can invoke two different methods on the <ApiLink type="DataChart" /> to put the chart into a mode where you can add or remove a user annotation. These methods are named <ApiLink type="DataChart" member="startCreatingAnnotation" label="StartCreatingAnnotation" /> and <ApiLink type="DataChart" member="startDeletingAnnotation" label="StartDeletingAnnotation" />, respectively.
-
-After invoking <ApiLink type="DataChart" member="startCreatingAnnotation" label="StartCreatingAnnotation" />, you can add a slice annotation by clicking on a label on the X or Y axis, add a strip annotation by clicking and dragging in the plot area and releasing the mouse button, or add a point annotation by clicking on a data point on a series plotted in the chart.
-
-Adding one of these user annotations will raise an event named `UserAnnotationInformationRequested`, where you can provide more information for the user annotation. This event's arguments have a property named `AnnotationInfo` that will return a <ApiLink type="UserAnnotationInformation" /> object that allows the configuration of multiple different aspects of the annotation to be added.
-
-After you have made the changes to the annotation through the `UserAnnotationInformationRequested` event, you should invoke the <ApiLink type="DataChart" member="finishAnnotationFlow" label="FinishAnnotationFlow" /> method on the <ApiLink type="DataChart" /> to finish creating the annotation and commit the changes to it. Alternatively, you can also cancel the annotation's creation by calling <ApiLink type="DataChart" member="cancelAnnotationFlow" label="CancelAnnotationFlow" /> and passing the <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> of the annotation, which can be obtained from the `AnnotationInfo` parameter of the `UserAnnotationInformationRequested` event's arguments, as mentioned above. This will remove the annotation from the plot area.
-
-Once the user annotation has been added to the chart, it will appear in the <ApiLink type="DataChart" member="Series" label="Series" /> collection as a <ApiLink type="UserAnnotationLayer" />. The <ApiLink type="UserAnnotationLayer" /> has an <ApiLink type="UserAnnotationLayer" member="annotations" label="Annotations" /> collection that can store <ApiLink type="UserSliceAnnotation" />, <ApiLink type="UserStripAnnotation" /> and <ApiLink type="UserPointAnnotation" /> elements depending on the type of annotations added to the plot area.
-
-## User Annotation ToolTip
-
-Each of the user annotations can show a tooltip on mouse hover to add even more detail to the annotations.
-
-The chart exposes a `UserAnnotationToolTipContentUpdating` event that you can handle to update the content of the tooltip for the user annotation as the tooltip is shown. The event arguments of this event exposes two properties: `Content` and `AnnotationInfo`.
-
-The tooltip is designed to work in tandem with the `UserAnnotationInformationRequested` event so that you can provide more detail to the user annotation via that event's `AnnotationInfo.AnnotationData` property. The `AnnotationInfo` property on the event arguments of the `UserAnnotationToolTipContentUpdating` event will be the same instance as the `AnnotationInfo` property in the `UserAnnotationInformationRequested` that you can modify in that event. This allows you to utilize the information provided to the user annotation on its creation and provide even more information within the tooltip.
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="UserAnnotationLayer" />
-<ApiLink type="UserAnnotationInformation" />
-<ApiLink type="UserSliceAnnotation" />
-<ApiLink type="UserStripAnnotation" />
-<ApiLink type="UserPointAnnotation" />
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Annotations](chart-annotations.md)
-- [Chart Data Annotations](chart-data-annotations.md)
diff --git a/docs/angular/src/content/en/components/charts/types/area-chart.mdx b/docs/angular/src/content/en/components/charts/types/area-chart.mdx
deleted file mode 100644
index 0e93c46710..0000000000
--- a/docs/angular/src/content/en/components/charts/types/area-chart.mdx
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: "Angular Area Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Area Chart
-keywords: "Angular Charts, Area Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Area Chart
-
-The Ignite UI for Angular Area Chart renders as a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). This chart emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Therefore, they are often chronological, showing a change of quantity e.g. accumulation of a commodity over time.
-
-## Angular Area Chart Example
-
-You can create Angular Category Area Chart in the <ApiLink type="CategoryChart" /> control by binding your data to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to **Area** enum, as shown in the example below.
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="Angular Area Chart Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Area Chart Recommendations
-
-### Area Chart Use Cases
-
-There are several common use cases for choosing an Area Chart:
-
-- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down.
-- Need to compare the trends of your data over time.
-- Want to show the difference between 2 or more data series.
-- Want to show cumulative part-to-whole comparisons of distinct categories.
-- Need to show data trends for one or more categories for comparative analysis.
-- Need to visualize details time-series data.
-
-### Area Chart Best Practices
-
-- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
-- Order time-series data from left to right.
-- Use transparent colors to ensure that data that is plotted behind another series is not blocked.
-
-### When Not to Use Area Charts
-
-- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable.
-- Time-series data has similar values (data over the same period). This makes overlapped shaded areas impossible to differentiate.
-
-### Area Chart Data Structure
-
-- The data source must be an array or a list of data items (for single series).
-- The data source must be an array of arrays or a list of lists (for multiple series).
-- The data source should contain two or more data items in order to render a line between them.
-- All data items must contain at least one data column (string or date time).
-- All data items must contain at least one numeric data column.
-
-## Angular Area Chart with Single Series
-
-Angular Area Chart is often used to show the change of value over time such as the amount of renewable electricity produced. You can create this type of chart in <ApiLink type="CategoryChart" /> control by binding your data and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="Area" label="Area" /> value, as shown in the example below.
-
-<Sample src="/charts/category-chart/area-chart-single-source" height={600} alt="Angular Area Chart with Single Series" />
-
-<div class="divider--half"></div>
-
-## Angular Area Chart with Multiple Series
-
-Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property of the <ApiLink type="CategoryChart" /> control.
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="Angular Area Chart with Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Angular Area Chart Styling
-
-Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly.
-
-<Sample src="/charts/category-chart/area-chart-styling" height={600} alt="Angular Area Chart Styling" />
-
-<div class="divider--half"></div>
-
-## Advanced Types of Area Charts
-
-The following sections explain more advanced types of Angular Area Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
-
-## Angular Step Area Chart
-
-The Angular Step Area Chart belongs to a group of category charts and it is rendered using a collection of points connected by continuous vertical and horizontal lines with the area below lines filled in. Values are represented on the y-axis and categories are displayed on the x-axis. The step area chart emphasizes the amount of change over a period of time or compares multiple items. You can create this type of chart in <ApiLink type="CategoryChart" /> control by binding your data and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" /> value, as shown in the example below.
-
-<Sample src="/charts/category-chart/step-area-multiple-sources" height={600} alt="Angular Step Area Chart" />
-
-<div class="divider--half"></div>
-
-The following sections explain more advanced types of Angular Area Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
-
-## Angular Range Area Chart
-
-The Angular Range Area Chart allows you show the area as a range between two values over time. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RangeAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/range-area-chart" height={600} alt="Angular Range Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked Area Chart
-
-The Angular Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="StackedAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-area-chart" height={600} alt="Angular Stacked Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked 100% Area Chart
-
-The Angular Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="Stacked100AreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-area-chart" height={600} alt="Angular Stacked 100% Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked Spline Area Chart
-
-The Angular Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="StackedSplineAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-spline-area-chart" height={600} alt="Angular Stacked Spline Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked 100% Spline Area Chart
-
-The Angular Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="Stacked100SplineAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-spline-area-chart" height={600} alt="Angular Stacked 100% Spline Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Area Chart
-
-The Angular Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/radial-area-chart" height={600} alt="Angular Radial Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Polar Area Chart
-
-The Angular Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/polar-area-chart" height={600} alt="Angular Polar Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Polar Spline Area Chart
-
-The Angular Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarSplineAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="Angular Polar Spline Area Chart" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-
-The following table lists API members mentioned in above sections:
-
-| Chart Type               | Control Name    | API Members  |
-| -------------------------|-----------------|-----------------------|
-| Area                     | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="Area" label="Area" />  |
-| Step Area                | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" />  |
-| Range Area               | <ApiLink type="DataChart" />  | <ApiLink type="RangeAreaSeries" />  |
-| Radial Area              | <ApiLink type="DataChart" />  | <ApiLink type="RadialAreaSeries" />  |
-| Polar Area               | <ApiLink type="DataChart" />  | <ApiLink type="PolarAreaSeries" />  |
-| Polar Spline Area        | <ApiLink type="DataChart" />  | <ApiLink type="PolarSplineAreaSeries" />  |
-| Stacked Area             | <ApiLink type="DataChart" />  | <ApiLink type="StackedAreaSeries" />  |
-| Stacked Spline Area      | <ApiLink type="DataChart" />  | <ApiLink type="StackedSplineAreaSeries" />  |
-| Stacked 100% Area        | <ApiLink type="DataChart" />  | <ApiLink type="Stacked100AreaSeries" />  |
-| Stacked 100% Spline Area | <ApiLink type="DataChart" />  | <ApiLink type="Stacked100SplineAreaSeries" />  |
-
-## API References
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="RangeAreaSeries" /><br />
-<ApiLink type="RadialAreaSeries" /><br />
-<ApiLink type="PolarAreaSeries" /><br />
-<ApiLink type="PolarSplineAreaSeries" /><br />
-<ApiLink type="StackedAreaSeries" /><br />
-<ApiLink type="StackedSplineAreaSeries" /><br />
-<ApiLink type="Stacked100AreaSeries" /><br />
-<ApiLink type="Stacked100SplineAreaSeries" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx b/docs/angular/src/content/en/components/charts/types/bar-chart.mdx
deleted file mode 100644
index 4c27e9e614..0000000000
--- a/docs/angular/src/content/en/components/charts/types/bar-chart.mdx
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: "Angular Bar Chart and Graph | Ignite UI for Angular"
-description: "Angular Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories. Try for FREE."
-keywords: "Angular Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "RangeBarSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Bar Chart
-The Ignite UI for Angular Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down)
-
-## Angular Bar Chart Example
-You can create Angular Bar Chart in the <ApiLink type="DataChart" /> control by binding your data sources to multiple <ApiLink type="BarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="Angular Bar Chart Multiple Sources" />
-
-## Bar Chart Recommendations
-
-### Are Angular Bar Charts right for your project?
-Angular Bar Chart includes several variants based on your data or how you want to tell the correct story with your data. These include:
-
-- Grouped Bar Chart
-- Stacked Bar Chart
-- Polar Bar Chart
-- Stacked 100 Bar Chart
-
-### Bar Chart Use Cases
-There are several common use cases for choosing a Bar Chart:
-
-- You need to show trends over time or a numeric value change in a category of data.
-- You need to compare data values of 1 or more data series.
-- You want to show a part-to-whole comparison.
-- You want to show top or bottom percentage of categories.
-- Analyzing multiple data points grouped in sub-categories (Stacked Bar).
-
-These use cases are commonly used for the following scenarios:
-
-- Sales Management.
-- Inventory Management.
-- Stock Charts.
-- Any String Value Comparing a Numeric Value or Time-Series Value.
-
-### Bar Chart Best Practices
-- Start you numeric Axis at 0.
-- Use a single color for the bars.
-- Be sure the space separating each bar is 1/2 the width of the bar itself.
-- Be sure ranking or comparing ordered categories (items) are sorted in increasing or decreasing order.
-- Right-align category values on the Y-Axis (left side labels of chart) for readability.
-
-### When Not to Use Bar Chart
-- You have too much data so the Y-Axis can't fit in the space or is not legible.
-- You need a detailed Time-Series analysis  - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data.
-
-### Bar Chart Data Structure
-- The data source must be an array or a list of data items.
-- The data source must contain at least one data item.
-- The list must contain at least one data column (string or date time).
-- The list must contain at least one numeric data column.
-
-## Angular Bar Chart with Single Series
-Bar Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the left to right of the chart towards the values of data points. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="BarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/bar-chart-single-source" height={600} alt="Angular Bar Chart with Single Source" />
-
-## Angular Bar Chart with Multiple Series
-
-The Bar Chart is able to render multiple bars per category for comparison purposes. In this example, the Bar Chart is comparing box office revenue amongst popular movie franchises. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to multiple <ApiLink type="BarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="Angular Bar Chart with Multiple Sources" />
-
-## Angular Bar Chart Styling
-
-The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="BarSeries" /> and adding a <ApiLink type="CalloutLayer" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/bar-chart-styling" height={600} alt="Angular Bar Chart Styling" />
-
-## Angular Stacked Bar Chart
-
-A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value.
-
-The Stacked Bar Chart differs from the Bar Chart in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedBarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-bar-chart" height={600} alt="Angular Stacked Bar Chart" />
-
-## Angular Stacked 100% Bar Chart
-
-The Angular Stacked 100% Bar Chart is identical to the Angular Stacked Bar Chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100 bar chart presents the data in terms of percent of the sum of all values in a data point.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100BarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-100-bar-chart" height={600} alt="Angular Stacked 100 Bar Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Range Bar Chart
-
-The Angular Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.md#angular-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items.
-
-Range values are represented on the X-Axis and categories are displayed on the Y-Axis. Because each bar visualizes both a low value and a high value, this chart is useful for scenarios such as showing daily temperature ranges, minimum and maximum prices, or any bounded measurements where a single value is not sufficient.
-
-The Range Bar Chart is identical to the [Range Column Chart](column-chart.md#angular-range-column-chart) in all aspects except that the ranges are represented as a set of horizontal bars rather than vertical columns.
-
-You can create this type of chart in the <ApiLink pkg="charts" type="DataChart" /> control by binding your data to a <ApiLink pkg="charts" type="RangeBarSeries" />. The series reads low and high values from `LowMemberPath` and `HighMemberPath`, and it typically uses a `NumericXAxis` with a `CategoryYAxis`, as shown in the example below:
-
-<Sample src="/charts/data-chart/range-bar-chart" height={600} alt="Angular Range Bar Chart" />
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="BarSeries" />
-<ApiLink type="CalloutLayer" />
-<ApiLink type="StackedBarSeries" />
-<ApiLink type="Stacked100BarSeries" />
-<ApiLink type="RangeBarSeries" />
-<ApiLink type="BarSeries" member="dataSource" label="DataSource" />
diff --git a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx b/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx
deleted file mode 100644
index 84737eb93a..0000000000
--- a/docs/angular/src/content/en/components/charts/types/bubble-chart.mdx
+++ /dev/null
@@ -1,45 +0,0 @@
----
-title: Angular Bubble Chart | Data Visualization | Infragistics
-description: Infragistics' Angular Bubble Chart
-keywords: Angular Charts, Bubble Chart, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Bubble Chart is a type of Scatter Chart that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Bubble Chart
-The Ignite UI for Angular Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) but with the option to have various radius scale sizes.
-
-## Angular Bubble Chart Example
-You can create Ignite UI for Angular Bubble Chart in <ApiLink type="DataChart" /> control using the <ApiLink type="BubbleSeries" /> and two numeric axes, as shown in the example below.
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="Angular Bubble Chart Example" />
-
-## Angular Bubble Chart with Single Series
-You can bind your data to <ApiLink type="BubbleSeries" member="dataSource" label="DataSource" /> property of <ApiLink type="BubbleSeries" /> and map data columns using its <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" />, <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" />, <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> properties, as shown in the example below:
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-single-source" height={600} alt="Angular Bubble Chart with Single Series" />
-
-## Angular Bubble Chart with Multiple Series
-In Angular Bubble Chart, binding multiple data sources works by setting each new data source to <ApiLink type="BubbleSeries" member="dataSource" label="DataSource" /> property of a additional <ApiLink type="BubbleSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="Angular Bubble Chart with Multiple Series" />
-
-## Angular Bubble Chart Styling
-In Angular Bubble Chart, you can customize shape of bubble markers using <ApiLink type="BubbleSeries" member="markerType" label="MarkerType" /> property, their size with <ApiLink type="BubbleSeries" member="radiusScale" label="RadiusScale" /> property, and their appearance using <ApiLink type="BubbleSeries" member="markerBrush" label="MarkerBrush" />, <ApiLink type="BubbleSeries" member="markerOutline" label="MarkerOutline" />, <ApiLink type="BubbleSeries" member="markerThickness" label="MarkerThickness" /> properties. In addition, you can also color bubble markers based on a data column using <ApiLink type="BubbleSeries" member="fillMemberPath" label="FillMemberPath" /> and <ApiLink type="BubbleSeries" member="fillScale" label="FillScale" /> properties. In this example, usage of above properties is demonstrated.
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-styling" height={600} alt="Angular Bubble Chart Styling" />
-
-## Additional Resources
-
-- [Scatter Chart](scatter-chart.md)
-- [Shape Chart](shape-chart.md)
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="BubbleSeries" />
-<ApiLink type="ScatterSeries" />
diff --git a/docs/angular/src/content/en/components/charts/types/column-chart.mdx b/docs/angular/src/content/en/components/charts/types/column-chart.mdx
deleted file mode 100644
index e2f7adde03..0000000000
--- a/docs/angular/src/content/en/components/charts/types/column-chart.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: "Angular Column Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Column Chart
-keywords: "Angular Charts, Column Chart, Column Graph, Vertical Bar Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "ColumnSeries", "WaterfallSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "RangeColumnSeries", "RadialColumnSeries", "CategoryChartType", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Column Chart
-
-The Ignite UI for Angular Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to [Bar Chart](bar-chart.md) except that Column Chart renders in vertical orientation (up and down) while [Bar Chart](bar-chart.md) has horizontal orientation (left to right) or 90 degrees clockwise rotation.
-
-## Angular Column Chart Example
-
-You can create Angular Column Chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> to **Column** enum, as shown in the example below:
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="Angular Column Chart Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Column Charts Recommendations
-
-### Column Charts Use Cases
-
-There are several uses cases for Column Charts. When you:
-
-- Need to compare data values of related categories.
-- Need to compare data over a time period.
-- Need to display negative values as well as positive values in the same data set.
-- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming, and Drill-down.
-
-### Column Charts Best Practices
-
-- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
-- Order time-series data from left to right.
-
-### When Not to Use Column Charts
-
-- You have many (more than 10 or 12) series of data. Your goal is to ensure the chart is readable.
-
-### Column Charts Data Structure
-
-- The data model must contain at least one numeric property.
-- The data model may contain an options string or date-time property for labels.
-- The data source should contain at least one data item.
-
-## Angular Column Chart with Single Series
-
-Column Chart belongs to a group of Category Series and it is rendered using a collection of rectangles that extend from the bottom to top of the chart towards the values of data points.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to **Column** value, as shown in the example below:
-
-<Sample src="/charts/category-chart/column-chart-single-source" height={600} alt="Angular Column Chart with Single Source" />
-
-<div class="divider--half"></div>
-
-## Angular Column Chart with Multiple Series
-
-The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to **Column** value, as shown in the example below:
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="Angular Column Chart with Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Angular Column Chart Styling
-
-The Angular Column Chart has many options for styling and modification of the visual appearance.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data, as shown in the example below:
-
-<Sample src="/charts/category-chart/column-chart-styling" height={600} alt="Angular Column Chart Styling" />
-
-<div class="divider--half"></div>
-
-## Advanced Types of Column Charts
-
-The following sections explain more advanced types of Angular Column Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
-
-## Angular Waterfall Chart
-
-The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#angular-range-column-chart), but it requires only one numeric data column rather than two columns for each data point.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="WaterfallSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/waterfall-chart" height={600} alt="Angular Waterfall Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked Column Chart
-
-The Stacked Column Chart is similar to the [Category Column Chart](column-chart.md#angular-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.md#angular-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedBarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-column-chart" height={600} alt="Angular Stacked Column Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked 100% Column Chart
-
-The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.md#angular-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100BarSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-100-column-chart" height={600} alt="Angular Stacked 100 Column Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Range Column Chart
-
-The Angular Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.md#angular-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis.
-
-The Range Column Chart is identical to the [Range Area Chart](area-chart.md)(area-chart.md#angular-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RangeColumnSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/range-column-chart" height={600} alt="Angular Range Column Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Column Chart
-
-The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.md), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.md#angular-column-chart-example), but wraps data points around a circle rather than stretching them horizontally.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/radial-column-chart" height={600} alt="Angular Radial Column Chart" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Bar Chart](bar-chart.md)
-- [Composite Chart](Composite-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-The following table lists API members mentioned in the above sections:
-
-| Chart Type          | Control Name       | API Members  |
-| --------------------|--------------------|------------------------|
-| Column              | <ApiLink type="CategoryChart" />    | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = **Column** |
-| Radial Column       | <ApiLink type="DataChart" />     | <ApiLink type="RadialColumnSeries" /> |
-| Range Column        | <ApiLink type="DataChart" />     | <ApiLink type="RangeColumnSeries" /> |
-| Stacked Column      | <ApiLink type="DataChart" />     | <ApiLink type="StackedColumnSeries" /> |
-| Stacked 100% Column | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100ColumnSeries" /> |
-| Waterfall           | <ApiLink type="DataChart" />     | <ApiLink type="WaterfallSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="WaterfallSeries" /><br />
-<ApiLink type="StackedBarSeries" /><br />
-<ApiLink type="Stacked100BarSeries" /><br />
-<ApiLink type="RangeColumnSeries" /><br />
-<ApiLink type="RadialColumnSeries" /><br />
-<ApiLink type="StackedColumnSeries" /><br />
-<ApiLink type="Stacked100ColumnSeries" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx b/docs/angular/src/content/en/components/charts/types/composite-chart.mdx
deleted file mode 100644
index 0fbc505053..0000000000
--- a/docs/angular/src/content/en/components/charts/types/composite-chart.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: "Angular Composite Chart | Combo Chart| Data Visualization | Infragistics"
-description: Infragistics' Angular Composite Chart
-keywords: "Angular Charts, Composite Chart, Combo Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Composite / Combo Chart
-
-The Ignite UI for Angular Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis.
-
-## Angular Composite / Combo Example
-
-The following example demonstrates how to create Composite Chart using <ApiLink type="ColumnSeries" /> and <ApiLink type="LineSeries" /> in the <ApiLink type="DataChart" /> control.
-
-<Sample src="/charts/data-chart/composite-chart" height={600} alt="Angular Composite Chart Example" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="ColumnSeries" /><br />
-<ApiLink type="LineSeries" /><br />
-<ApiLink type="CategoryXAxis" /><br />
-<ApiLink type="NumericYAxis" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx
deleted file mode 100644
index b6dd2de359..0000000000
--- a/docs/angular/src/content/en/components/charts/types/data-pie-chart.mdx
+++ /dev/null
@@ -1,168 +0,0 @@
----
-title: Angular Pie Charts and Graphs | Ignite UI for Angular
-description: The Ignite UI for Angular data pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections.  Try for FREE.
-keywords: Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Data Pie Chart
-The Ignite UI for Angular Data Pie Chart is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.
-
-## Angular Data Pie Chart Example
-You can create the Angular Pie Chart in the <ApiLink type="DataPieChart" /> by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization.
-
-<Sample src="/charts/data-pie-chart/overview" height={600} alt="Angular Data Pie Chart Overview" />
-
-## Angular Data Pie Chart Recommendations
-Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization such as Doughnut (Ring) Chart, Funnel Chart, Stacked Area Chart, Stacked Bar Chart, and Treemap.
-
-The Angular Data Pie Chart includes interactive features that give the viewer tools to analyze data, like:
-
-- Legends
-- Slice Selection
-- Slice Highlighting
-- Chart Animations
-
-Best Practices for a Pie Chart:
-
-- Comparing slices or segments as percentage values in proportion to a total value or whole.
-- Showing how a group of categories is broken into smaller segments.
-- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data).
-- Ensuring data segments add up to 100%.
-- Arranging the order of data from largest (highest) to smallest (least).
-- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise.
-- Ensuring the color palette is distinguishable for segments/slices of the parts.
-- Considering data labels in segments vs. legends for ease of reading.
-- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension.
-- Avoiding positioning multiple pie charts next to each other for comparative analysis.
-
-Do Not Use Pie Chart When:
-
-- Comparing change over time —use a Bar, Line or Area chart.
-- Requiring precise data comparison —use a Bar, Line or Area chart.
-- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story.
-- It would be easier for the viewer to perceive the value difference in a Bar chart.
-
-## Angular Data Pie Chart Legend
-Legends are used to show information about each point, to know about its contribution towards the total sum.
-
-In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the <ApiLink type="DataPieChart" member="legend" label="Legend" /> property. The ItemLegend will display its items in vertical orientation as a default, but this can be changed by setting its <ApiLink type="DataPieChart" member="orientation" label="Orientation" /> property.
-
-The labels shown on the legend will display the same content as the label that is shown for each slice in the <ApiLink type="DataPieChart" /> by default, but this can be modified by utilizing the <ApiLink type="DataPieChart" member="legendSliceLabelContentMode" label="LegendSliceLabelContentMode" /> property on the chart. This exposes an enumeration that allows you to show the label, value, percentage, or any combination of those as the legend's content for each slice in the chart.
-
-You can also modify the ItemLegend badge. By default, it appears as a filled circle corresponding to the color of the associated chart slice. You can configure this by using the <ApiLink type="DataPieChart" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> property on the chart, and you can set this to be a circle, line, bar, column, and more.
-
-Below is an example that demonstrates usage of the ItemLegend with the <ApiLink type="DataPieChart" />.
-
-<Sample src="/charts/data-pie-chart/legend" height={600} alt="Angular Data Pie Chart Legend" />
-
-## Angular Pie Chart Others Category
-Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice.
-
-The Others category in the <ApiLink type="DataPieChart" /> has three main, configurable properties - <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />, <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />, and <ApiLink type="DataPieChart" member="othersCategoryText" label="OthersCategoryText" /> that allow you to configure how the Others slice in the chart is shown. These are each described below:
-
-The <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" /> property works in tandem with the <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> property of the <ApiLink type="DataPieChart" />. For the <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />, you can define whether you want the <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> to be evaluated as a number or a percentage. For example, if you decide on number and set the <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> to 5, any slices that have a value less than 5 will become part of the Others category. Using the same value of 5 with a percent type, any values that are less than 5 percent of the total values of the <ApiLink type="DataPieChart" /> will become part of the Others category.
-
-To get the underlying data items that are contained within the Others slice in the chart, you can utilize the <ApiLink type="DataPieChart" member="getOthersContext" label="GetOthersContext" /> method on the chart. This return type of this method is an <ApiLink type="OthersCategoryContext" /> which exposes an <ApiLink type="OthersCategoryContext" member="items" label="Items" /> property. The <ApiLink type="OthersCategoryContext" member="items" label="Items" /> property returns an array that will contain the items in the Others slice. Additionally, when clicking the Others slice, the `Item` property of the event arguments for the `SeriesClick` event will be will also return this <ApiLink type="OthersCategoryContext" />.
-
-By default, the Others slice will be represented by a label of "Others." You can change this by modifying the <ApiLink type="DataPieChart" member="othersCategoryText" label="OthersCategoryText" /> property of the chart.
-
-### Angular Styling the Others Slice
-You can style the aggregated Others slice separately from other slices by using these properties:
-
-- <ApiLink type="DataPieChart" member="othersCategoryBrush" label="OthersCategoryBrush" />
-  Sets the fill (brush) used for the Others slice.
-
-- <ApiLink type="DataPieChart" member="othersCategoryOutline" label="OthersCategoryOutline" />
-  Sets the outline (stroke) used for the Others slice.
-
-These properties only affect the Others slice (when it exists). All other slices continue to use the normal palette and item-wise coloring behavior.
-
-<DocsAside type="info">
-The Others slice is only rendered when the chart is configured to create it (for example, with <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> greater than `0` and an appropriate <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />). If the Others slice is not present, <ApiLink type="DataPieChart" member="othersCategoryBrush" label="OthersCategoryBrush" /> and <ApiLink type="DataPieChart" member="othersCategoryOutline" label="OthersCategoryOutline" /> have no visible effect.
-</DocsAside>
-
-If you want to ensure that the Others category does not show up in the <ApiLink type="DataPieChart" />, you can set the <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> to 0.
-
-The following sample demonstrates usage of the Others slice in the <ApiLink type="DataPieChart" />:
-
-<Sample src="/charts/data-pie-chart/others" height={600} alt="Angular Data Pie Chart Others" />
-
-## Angular Data Pie Chart Selection
-The <ApiLink type="DataPieChart" /> supports slice selection by mouse click on the slices plotted in the chart. This can be configured by utilizing the <ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" /> and <ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" /> properties of the chart, described below:
-
-The main two options of the <ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" /> are <ApiLink type="SeriesSelectionBehavior" member="PerDataItemSingleSelect" label="PerDataItemSingleSelect" /> and <ApiLink type="SeriesSelectionBehavior" member="PerDataItemMultiSelect" label="PerDataItemMultiSelect" />, which will enable single and multiple selection, respectively.
-
-The <ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" /> property exposes an enumeration that determines how the pie chart slices respond to being selected. The following are the options of that enumeration and what they do:
-
-- <ApiLink type="SeriesSelectionMode" member="Brighten" label="Brighten" />: The selected slices will be highlighted.
-- <ApiLink type="SeriesSelectionMode" member="FadeOthers" label="FadeOthers" />: The selected slices will remain their same color and others will fade.
-- <ApiLink type="SeriesSelectionMode" member="FocusColorFill" label="FocusColorFill" />: The selected slices will change their background to the FocusBrush of the chart.
-- <ApiLink type="SeriesSelectionMode" member="FocusColorOutline" label="FocusColorOutline" />: The selected slices will have an outline with the color defined by the FocusBrush of the chart.
-- <ApiLink type="SeriesSelectionMode" member="FocusColorThickOutline" label="FocusColorThickOutline" />: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
-- <ApiLink type="SeriesSelectionMode" member="GrayscaleOthers" label="GrayscaleOthers" />: The unselected slices will have a gray color filter applied to them.
-- <ApiLink type="SeriesSelectionMode" member="None" label="None" />: There is no effect on the selected slices.
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorFill" label="SelectionColorFill" />: The selected slices will change their background to the SelectionBrush of the chart.
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorOutline" label="SelectionColorOutline" />: The selected slices will have an outline with the color defined by the SelectionBrush of the chart.
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorThickOutline" label="SelectionColorThickOutline" />: The selected slices will have an outline with the color defined by the FocusBrush of the chart. The thickness of this outline can be configured via the Thickness property of the control as well.
-- <ApiLink type="SeriesSelectionMode" member="ThickOutline" label="ThickOutline" />: The selected slices will apply an outline with the thickness dependent on the Thickness property of the chart.
-
-When a slice is selected, its underlying data item will be added to the SelectedSeriesItems collection of the chart. As such, the DataPieChart exposes the SelectedSeriesItemsChanged event to detect when a slice has been selected and this collection is changed.
-
-The following sample demonstrates the selection feature of the <ApiLink type="DataPieChart" /> control:
-
-<Sample src="/charts/data-pie-chart/selection" height={600} alt="Angular Data Pie Chart Selection" />
-
-## Angular Data Pie Chart Highlighting
-The <ApiLink type="DataPieChart" /> supports mouse over highlighting, as well as a highlighting overlay that can be configured by providing a separate data source.
-
-First, the <ApiLink type="DataPieChart" member="highlightingBehavior" label="HighlightingBehavior" /> enumerated property determines how a slice will be highlighted. The following are the options of that property and what they do:
-
-- <ApiLink type="SeriesHighlightingBehavior" member="DirectlyOver" label="DirectlyOver" />: The slices are only highlighted when the mouse is directly over them.
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItems" label="NearestItems" />: The nearest slice to the mouse position will be highlighted.
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItemsAndSeries" label="NearestItemsAndSeries" />: The nearest slice and series to the mouse position will be highlighted.
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItemsRetainMainShapes" label="NearestItemsRetainMainShapes" />: The nearest items to the mouse position will be highlighted and the main shapes of the series will not be de-emphasized.
-
-The <ApiLink type="DataPieChart" member="highlightingMode" label="HighlightingMode" /> enumerated property determines how the data pie chart slices respond to being highlighted. The following are the options of that property and what they do:
-
-- <ApiLink type="SeriesSelectionMode" member="Brighten" label="Brighten" />: The series will have its color brightened when the mouse position is over or near it.
-- <ApiLink type="SeriesSelectionMode" member="FadeOthers" label="FadeOthers" />: The series will retain its color when the mouse position is over or near it, while the others will appear faded.
-- <ApiLink type="SeriesSelectionMode" member="None" label="None" />: The series and slices will not be highlighted.
-
-The following example demonstrates the mouse highlighting behaviors of the <ApiLink type="DataPieChart" /> component:
-
-<Sample src="/charts/data-pie-chart/highlighting" height={600} alt="Angular Data Pie Chart Highlighting" />
-
-In addition to the mouse highlighting, the <ApiLink type="DataPieChart" /> exposes a highlight filter capability that can display a subset of your data. This is applied by specifying a <ApiLink type="DataPieChart" member="highlightedDataSource" label="HighlightedDataSource" /> for the control and by setting the <ApiLink type="DataPieChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> property to `Overlay`. The <ApiLink type="DataPieChart" member="highlightedDataSource" label="HighlightedDataSource" /> expects a subset of the data assigned to the <ApiLink type="DataPieChart" member="dataSource" label="DataSource" /> property of the <ApiLink type="DataPieChart" />.
-
-When these conditions are met, the values of the subset will be highlighted, while the remainder of the full set of data will be faded - effectively creating a highlight for the subset and allowing easier visualization of a subset of your data within the same control.
-
-The following example demonstrates highlight filtering.
-
-<Sample src="/charts/data-pie-chart/highlight-filter" height={600} alt="Angular Data Pie Chart Highlight Filtering" />
-
-## Angular Data Pie Chart Animation
-The <ApiLink type="DataPieChart" /> supports animating its slices into view, as well as when a value changes.
-
-You can set the <ApiLink type="DataPieChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to **true** to have the pie chart animate into view. The type of animation performed can be configured by setting the <ApiLink type="DataPieChart" member="transitionInMode" label="TransitionInMode" /> enumerated property to the type of animation you would like to see. Additionally, you can also set the <ApiLink type="DataPieChart" member="transitionInSpeedType" label="TransitionInSpeedType" /> property to scale with index, value, normal, or randomized. The duration of this animation can be controlled by the <ApiLink type="DataPieChart" member="transitionInDuration" label="TransitionInDuration" /> property, which takes a `TimeSpan`.
-
-If you would like to animate data changes, this can also be done by setting the <ApiLink type="DataPieChart" member="animateSeriesWhenAxisRangeChanges" label="AnimateSeriesWhenAxisRangeChanges" /> property to **true**. The duration of this change can be configured by setting the <ApiLink type="DataPieChart" member="transitionDuration" label="TransitionDuration" /> property as well.
-
-The following sample demonstrates the usage of animation in the <ApiLink type="DataPieChart" />:
-
-<Sample src="/charts/data-pie-chart/animation-replay" height={600} alt="Angular Data Pie Chart Animation" />
-
-## Additional Resources
-- [Donut Chart](donut-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-
-## API References
-<ApiLink type="DataPieChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx b/docs/angular/src/content/en/components/charts/types/donut-chart.mdx
deleted file mode 100644
index 8d6c112930..0000000000
--- a/docs/angular/src/content/en/components/charts/types/donut-chart.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: "Angular Donut Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Donut Chart
-keywords: "Angular Charts, Donut Chart, Donut Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DoughnutChart", "DoughnutChart"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Donut Chart is similar to the Pie Chart, proportionally illustrating the occurrences of a variable."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Donut Chart
-The Ignite UI for Angular Donut Chart is similar to the [Pie Chart](pie-chart.md), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.
-
-## Angular Donut Chart Example
-You can create Donut Chart using the <ApiLink type="DoughnutChart" /> control by binding your data as shown in the example below.
-
-<Sample src="/charts/doughnut-chart/legend" height={600} alt="Angular Doughnut Legend" />
-
-## Angular Donut Chart Recommendations
-
-### Are Angular Donut Charts right for your project?
-Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include:
-
-- [Pie](pie-chart.md)
-- [Stacked Area](area-chart.md)
-- [Stacked 100% Area (Stacked Percentage Area)](area-chart.md)
-- [Stacked Bar](bar-chart.md)
-- [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.md)
-- [Treemap](treemap-chart.md)
-- [Waterfall](column-chart.md)
-
-The Angular Donut Chart includes interactive features that give the viewer tools to analyze data, like:
-
-- Legends
-- Slice Explosion
-- Slice Selection
-- Chart Animations
-
-### Best Practices for Donut Charts
-- Using multiple data sets to display your data in a ring display.
-- Placing the information such as values or labels, within the hole of the donut for quick explanation of data.
-- Comparing slices or segments as percentage values in proportion to a total value or whole.
-- Showing how a group of categories is broken into smaller segments.
-- Ensuring data segments add up to 100%.
-- Ensuring the color palette is distinguishable for segments/slices of the parts.
-
-### When not to use a Donut Chart
-- Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart.
-- Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart.
-- You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story.
-- It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.md) chart.
-- You have negative data, as this can not be represented in a donut chart.
-
-## Angular Donut Chart - Slice Selection
-The Angular Donut Chart has the ability to select slices on click. Optionally, you may apply a single custom visual style to the selected slices. The <ApiLink type="DoughnutChart" member="sliceClick" label="SliceClick" /> event is raised when the user clicks on a slice. Enabling slice selection allows you to modify the slice's selection upon click. The following sample demonstrates how to enable slice selection and set the selected slice color to gray.
-
-<Sample src="/charts/doughnut-chart/selection" height={600} alt="Angular Donut Slice Selection" />
-
-## Angular Donut Chart - Multiple Rings
-It is possible to have a multiple ring display in the Angular Donut Chart, with each of the rings capable of being bound to a different data item, or they can share a common data source. This can be helpful if you need to display your data as tiers that have an underlying common category, such as the season to month data display below:
-
-<Sample src="/charts/doughnut-chart/rings" height={600} alt="Angular Doughnut Multiple Rings" />
-
-## Additional Resources
-You can find more information about related chart types in these topics:
-
-- [Pie Chart](pie-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-
-## API References
-<ApiLink type="DoughnutChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/line-chart.mdx b/docs/angular/src/content/en/components/charts/types/line-chart.mdx
deleted file mode 100644
index bd476886bc..0000000000
--- a/docs/angular/src/content/en/components/charts/types/line-chart.mdx
+++ /dev/null
@@ -1,190 +0,0 @@
----
-title: "Angular Line Chart and Graph | Ignite UI for Angular"
-description: The Angular Line chart is capable of handling high volumes of data, ranging into millions of data points, and updating them every few milliseconds. Try for FREE.
-keywords: "Angular Charts, Line Chart, Line Graph, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "Legend", "PolarLineSeries", "RadialLineSeries", "StackedLineSeries", "Stacked100LineSeries", "Series", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Line Chart or Line Graph is a type of category charts that show the continuous data values represented by points connected by straight line segments of one or more quantities over a period of time."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Line Chart
-
-The Ignite UI for Angular Line Chart or Line Graph is a type of category charts that show the continuous data values represented by points connected by straight line segments of one or more quantities over a period of time. It's often used to show trends and perform comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) show a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart.
-
-## Angular Line Chart Example
-
-You can create the Angular Line Chart in the <ApiLink type="CategoryChart" /> control by binding your data to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="PolarLineSeries" member="line" label="Line" /> enum, as shown in the example below.
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="Angular Line Chart Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Line Chart Recommendations
-
-### Are Angular Line Charts right for your project?
-
-- Different than an [area chart](area-chart.md), the line chart does not fill the area between the X-Axis (bottom axis) and the line.
-- The Angular line chart is identical to the Angular [spline chart](spline-chart.md) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data.
-
-A Line Chart includes several variants based on your data or how you want to tell the correct story with your data. These include:
-
-- Layered Line Chart
-- Stacked Line Chart
-- Stepped Line Chart
-- Polar Line Chart
-- Stacked 100 Line Chart
-
-### Line Chart Use Cases
-
-There are several common use cases for choosing a Line Chart:
-
-- Have a large, high-volume data set that fits well with the chart interactions like Panning, Zooming and Drill-down.
-- Need to compare the trends over time.
-- Want to show the difference between 2 or more data series.
-- Want to show cumulative part-to-whole comparisons of distinct categories.
-- Need to show data trends for one or more categories for comparative analysis.
-- Need to visualize detailed time-series data.
-
-### Line Chart Best Practices
-
-- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
-- Order time-series data  from left to right.
-- Use visual attributes like solid lines to show a series of data.
-
-### When Not to Use Line Chart
-
-- You have many (more than 7 or 10) series of data. Your goal is to ensure the chart is readable.
-- Time-series data has similar values (data over the same period), it makes overlapped lines impossible to differentiate.
-
-### Line Chart Data Structure
-
-- The data source must be an array or a list of data items (for single series).
-- The data source must be an array of arrays or a list of lists (for multiple series).
-- The data source must contain at least one data item.
-- All data items must contain at least one data column (string or date time).
-- All data items must contain at least one numeric data column.
-
-## Angular Line Chart with Single Series
-
-The Angular Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period, as we have shown in the example below.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="PolarLineSeries" member="line" label="Line" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/line-chart-single-source" height={600} alt="Angular Line Chart with Single Source" />
-
-<div class="divider--half"></div>
-
-## Angular Line Chart with Multiple Series
-
-Since the Angular Line Chart allows you to combine multiple series and compare or see how they change over time, let's see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the line chart will automatically update to fit the additional data.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="PolarLineSeries" member="line" label="Line" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="Angular Line Chart with Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Angular Line Chart with Live Data
-
-The Angular Line chart is capable of handling high volumes of data, ranging into millions of data points, and updating them every few milliseconds as demonstrated in the following demo.
-
-In this example, we are streaming live data into the Angular Line Chart at an interval of your choosing. You can set the data points from 5,000 to 1 million and update the chart to optimize the scale based on the device you are rendering the chart on.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="PolarLineSeries" member="line" label="Line" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/high-frequency" height={600} alt="Angular Line Chart Live Data Example" />
-
-<div class="divider--half"></div>
-
-## Angular Styling Line Chart
-
-Once our chart is set up, we may want to make some further styling customizations such as change the line colors, change the legend font family, and/or increase the size of the axis labels to make it easier to read.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="PolarLineSeries" member="line" label="Line" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/line-chart-styling" height={600} alt="Angular Line Chart Styling" />
-
-You can also create a dashed line within the <ApiLink type="LineSeries" /> by using the <ApiLink type="DataChart" /> and setting the <ApiLink type="LineSeries" member="dashArray" label="DashArray" /> property on the series. This property takes an array of numbers that will describe the length of the resulting dashes in the line.
-
-The following example demonstrates usage of the <ApiLink type="LineSeries" member="dashArray" label="DashArray" /> in a <ApiLink type="LineSeries" /> in <ApiLink type="DataChart" />:
-
-<Sample src="/charts/data-chart/dash-array-series" height={600} alt="Angular Line Chart Dash Array" />
-
-<div class="divider--half"></div>
-
-## Advanced Types of Line Charts
-
-The following sections explain more advanced types of Angular Line Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
-
-## Angular Stacked Line Chart
-
-The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-line-chart" height={600} alt="Angular Stacked Line Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked 100% Line Chart
-
-The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100LineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-100-line-chart" height={600} alt="Angular Stacked 100 Line Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Line Chart
-
-The Radial Line Chart belongs to a group of radial charts and has a shape of an unfilled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Line Chart, but wraps the data points around a circular axis rather than stretching them horizontally.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/radial-line-chart" height={600} alt="Angular Radial Line Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Polar Line Chart
-
-The Polar Line Chart belongs to a group of polar charts and is rendered using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. Polar Line Charts use the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular Polar Line Chart" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-
-The following table lists API members mentioned in the above sections:
-
-| Chart Type        | Control Name       | API Members |
-| ------------------|--------------------|----------------------- |
-| Line              | <ApiLink type="CategoryChart" />    | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="PolarLineSeries" member="line" label="Line" /> |
-| Polar Line        | <ApiLink type="DataChart" />     | <ApiLink type="PolarLineSeries" /> |
-| Radial Line       | <ApiLink type="DataChart" />     | <ApiLink type="RadialLineSeries" /> |
-| Stacked Line      | <ApiLink type="DataChart" />     | <ApiLink type="StackedLineSeries" /> |
-| Stacked 100% Line | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100LineSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="LineSeries" /><br />
-<ApiLink type="PolarLineSeries" /><br />
-<ApiLink type="RadialLineSeries" /><br />
-<ApiLink type="StackedLineSeries" /><br />
-<ApiLink type="Stacked100LineSeries" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx b/docs/angular/src/content/en/components/charts/types/pie-chart.mdx
deleted file mode 100644
index dccf3fc514..0000000000
--- a/docs/angular/src/content/en/components/charts/types/pie-chart.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: "Angular Pie Charts and Graphs | Ignite UI for Angular"
-description: The Ignite UI for Angular pie chart is a specialized UI control that renders a pie chart, consisting of a circular area divided into sections.  Try for FREE.
-keywords: "Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, slice explosion, animation"
-license: commercial
-mentionedTypes: ["PieChart", "DataChart"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Pie Chart
-The Ignite UI for Angular Pie Chart, or Pie Graph, is a part-to-whole chart that shows how categories (parts) of a data set add up to a total (whole) value. Categories are rendered as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed, as parts of 100 or 100%.
-
-## Angular Pie Chart Example
-You can create the Angular Pie Chart in the <ApiLink type="PieChart" /> by binding your data items with a string and a numeric data value. These data values will add up to a value of 100% of visualization. In this case, the example shows the overall breakdown of budget spend by department.
-
-<Sample src="/charts/pie-chart/overview" height={600} alt="Angular Pie Chart Overview" />
-
-## Angular Pie Chart Recommendations
-Pie Charts are appropriate for small data sets and are easy to read at a glance. Pie charts are just one type of part-to-whole visualization. Others include:
-
-- Pie
-- Doughnut (Ring)
-- Funnel
-- Stacked Area
-- Stacked 100% Area (Stacked Percentage Area)
-- Stacked Bar
-- Stacked 100% Bar (Stacked Percentage Bar)
-- Treemap
-- Waterfall
-
-The Angular Pie Chart includes interactive features that give the viewer tools to analyze data, like:
-
-- Legends
-- Slice Explosion
-- Slice Selection
-- Chart Animations
-
-Best Practices for a Pie Chart:
-
-- Comparing slices or segments as percentage values in proportion to a total value or whole.
-- Showing how a group of categories is broken into smaller segments.
-- Presenting small, non-hierarchical data sets (less than 6 to 8 segments of data).
-- Ensuring data segments add up to 100%.
-- Arranging the order of data from largest (highest) to smallest (least).
-- Using standard presentation techniques such as starting in the 12 o'clock position and continuing clockwise.
-- Ensuring the color palette is distinguishable for segments/slices of the parts.
-- Considering data labels in segments vs. legends for ease of reading.
-- Choosing an alternative chart to Pie such as Bar or Ring based on ease of comprehension.
-- Avoiding positioning multiple pie charts next to each other for comparative analysis.
-
-Do Not Use Pie Chart When:
-
-- Comparing change over time —use a Bar, Line or Area chart.
-- Requiring precise data comparison —use a Bar, Line or Area chart.
-- You have more than 6 or 8 segments (high data volume) — consider a Bar, Line or Area chart if it works for your data story.
-- It would be easier for the viewer to perceive the value difference in a Bar chart.
-
-## Angular Pie Chart Legend
-Legends are used to show information about each point, to know about its contribution towards the total sum. You can collapse the point using legend click.
-
-In order to display a legend next to the pie chart an ItemLegend needs to be created and assigned to the <ApiLink type="PieChart" member="legend" label="Legend" /> property. The <ApiLink type="PieChart" member="legendLabelMemberPath" label="LegendLabelMemberPath" /> can then be used to specify which property on your data model it will use to display inside the legend for each pie slice.
-
-Additionally you can use the <ApiLink type="PieChart" member="legendItemTemplate" label="LegendItemTemplate" /> and <ApiLink type="PieChart" member="legendItemBadgeTemplate" label="LegendItemBadgeTemplate" /> properties and the various font properties on ItemLegend to further customize the look of the legend items.
-
-<Sample src="/charts/pie-chart/legend" height={600} alt="Angular Pie Chart Legend" />
-
-## Angular Pie Chart Others Category
-Sometimes, the underlying data for the pie chart will contain many items with small values. In this case, the Others category will permit automatic aggregation of several data values into a single slice
-
-In the sample below, the <ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> is set to 2, and <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> is set to Number. Therefore, items with value less than or equal to 2 will be assigned to the "Others" category.
-
-If you set <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> to Percent, then <ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> will be interpreted as a percentage rather than as a value, i.e. items whose values are less than 2% of the sum of all item values would be assigned to the Others category. You can use whichever <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> is most appropriate for your application.
-
-<Sample src="/charts/pie-chart/others" height={600} alt="Angular Pie Chart Others" />
-
-## Angular Pie Chart Explosion
-The pie chart supports explosion of individual pie slices as well as a `SliceClick` event that allows you to modify selection states and implement custom logic
-
-<Sample src="/charts/pie-chart/explosion" height={600} alt="Angular Pie Chart Explosion" />
-
-## Angular Pie Chart Selection
-The pie chart supports slice selection by mouse click as the default behavior. You can determine the selected slices by using the <ApiLink type="PieChart" member="selectedItems" label="SelectedItems" /> property. The selected slices are then highlighted.
-
-There is a property called <ApiLink type="PieChart" member="selectionMode" label="SelectionMode" /> which is how you set what mode you want the pie chart to use. The default value is `Single`. In order to disable selection, set the property to `Manual`.
-
-The pie chart supports three different selection modes.
-
-- Single - When the mode is set to single, only one slice can be selected at a time. When you select a new slice the previously selected slice will be deselected and the new one will become selected.
-- Multiple - When the mode is set to Multiple, many slices can be selected at once. If you click on a slice, it will become selected and clicking on a different slice will also select that slice leaving the previous slice selected.
-- Manual - When the mode is set to Manual, selection is disabled.
-
-The pie chart has 4 events associated with selection:
-- SelectedItemChanging
-- SelectedItemChanged
-- SelectedItemsChanging
-- SelectedItemsChanged
-
-The events that end in "Changing" are cancelable events which means you can stop the selection of a slice by setting the event argument property `Cancel` to true. When set to true the associated property will not update and the slice will not become selected. This is useful for scenarios where you want to keep users from being able to select certain slices based on the data inside it.
-
-For scenarios where you click on the Others slice, the pie chart will return an object called <ApiLink type="PieSliceOthersContext" />. This object contains a list of the data items contained within the Others slice.
-
-<Sample src="/charts/pie-chart/selection" height={600} alt="Angular Pie Chart Selection" />
-
-## Angular Pie Chart Animation
-You can animate the pie chart smoothly by setting the `radiusFactor` property, which will scale the chart's radius. Also set the `startAngle` property to angle the chart such that it keep increasing the chart angle while rotating.
-
-In the code below, the radiusFactor is increasing the chart by 0.25% of the size, and startAngle is rotating the chart by 1 degree. When radiusFactor and startAngle reached to its maximum limit the animation is stopped by reset the animation flag and clear the interval.
-
-<Sample src="/charts/pie-chart/animation" height={600} alt="Angular Pie Chart Animation" />
-
-## Angular Pie Chart Styling
-Once our pie chart is created, we may want to make some further styling customizations such as a change of the colors for the slices of the chart, as demonstrated below:
-
-<Sample src="/charts/pie-chart/styling" height={600} alt="Angular Pie Chart Styling" />
-
-## Angular Radial Pie Chart
-The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a group of radial charts and uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line.
-
-<Sample src="/charts/data-chart/radial-pie-chart" height={600} alt="Angular Radial Pie Chart" />
-
-## Additional Resources
-
-- [Donut Chart](donut-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-
-## API References
-<ApiLink type="PieChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/point-chart.mdx b/docs/angular/src/content/en/components/charts/types/point-chart.mdx
deleted file mode 100644
index 26e1c5c785..0000000000
--- a/docs/angular/src/content/en/components/charts/types/point-chart.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: "Angular Point Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Point Chart
-keywords: "Angular Charts, Point Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Legend", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Point Chart renders a collection of points."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Point Chart
-The Ignite UI for Angular Point Chart renders a collection of points. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). These charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values.
-
-## Angular Point Chart Example
-You can create the Angular Point Chart in the <ApiLink type="CategoryChart" /> control by binding your data to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to **Point** enum, as shown in the example below.
-
-<Sample src="/charts/category-chart/point-chart-multiple-sources" height={600} alt="Angular Point Chart Example" />
-
-## Angular Point Chart with Single Series
-In the following example, the Angular Point Chart plots a single data source by automatically selecting numeric data column for y-axis and non-numeric data column for x-axis.
-
-<Sample src="/charts/category-chart/point-chart-single-source" height={600} alt="Angular Point Chart with Single Series" />
-
-## Angular Point Chart with Multiple Series
-Since the Angular Point Chart allows you to combine multiple series and compare or see how they change over time, let's see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the point chart will automatically update to fit the additional data.
-
-<Sample src="/charts/category-chart/point-chart-multiple-sources" height={600} alt="Angular Point Chart with Multiple Series" />
-
-## Angular Point Chart Styling
-Once the Angular Point Chart is set up, we may want to make some further styling customizations such as change the markers and its outlines, brushes and thickness.
-
-<Sample src="/charts/category-chart/point-chart-styling" height={600} alt="Angular Point Chart Styling" />
-
-## Advanced Types of Point Charts
-You can create more advanced types of Angular Point Charts using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control by following these topics:
-
-- [Scatter Bubble Chart](bubble-chart.md)
-- [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart)
-- [Scatter HD Chart](scatter-chart.md#angular-scatter-high-density-chart)
-- [Polar Marker Chart](polar-chart.md#angular-polar-marker-chart)
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Performance](../features/chart-performance.md)
-- [Chart Markers](../features/chart-markers.md)
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx b/docs/angular/src/content/en/components/charts/types/polar-chart.mdx
deleted file mode 100644
index 155f88f268..0000000000
--- a/docs/angular/src/content/en/components/charts/types/polar-chart.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
----
-title: "Angular Polar Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Polar Chart
-keywords: "Angular Charts, Polar Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "PolarAreaSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Polar Chart
-The Ignite UI for Angular Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.md) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.
-
-## Angular Polar Area Chart
-The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#angular-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-area-chart" height={600} alt="Angular Polar Area Chart" />
-
-## Angular Polar Spline Area Chart
-The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#angular-polar-area-chart) does. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="Angular Polar Area Chart" />
-
-## Angular Polar Marker Chart
-The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#angular-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarScatterSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-scatter-chart" height={600} alt="Angular Polar Marker Chart" />
-
-## Angular Polar Line Chart
-The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#angular-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular Polar Line Chart" />
-
-## Angular Polar Spline Chart
-The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#angular-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarSplineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-spline-chart" height={600} alt="Angular Polar Spline Chart" />
-
-## Angular Polar Chart Styling
-Once our polar chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/polar-area-chart-styling" height={600} alt="Angular Polar Area Chart Styling" />
-
-## Additional Resources
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Donut Chart](Donut-chart.md)
-- [Line Chart](line-chart.md)
-- [Pie Chart](Pie-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Scatter Chart](scatter-chart.md)
-- [Spline Chart](spline-chart.md)
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="PolarAreaSeries" />
-<ApiLink type="PolarLineSeries" />
-<ApiLink type="PolarSplineSeries" />
-<ApiLink type="PolarSplineAreaSeries" />
-<ApiLink type="PolarScatterSeries" />
-<ApiLink type="NumericAngleAxis" />
-<ApiLink type="NumericRadiusAxis" />
diff --git a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx b/docs/angular/src/content/en/components/charts/types/radial-chart.mdx
deleted file mode 100644
index 5e99244336..0000000000
--- a/docs/angular/src/content/en/components/charts/types/radial-chart.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: "Angular Radial Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Radial Chart
-keywords: "Angular Charts, Radial Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "RadialLineSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line)."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Radial Chart
-
-The Ignite UI for Angular Radial Chart takes data and render it as collection of data points wrapped around a circle (rather than stretching along a horizontal line). Radial Chart is also mapping a list of categories from the minimum to the maximum of the extent of the chart, and support the category grouping mechanisms.
-
-## Angular Radial Area Chart
-
-The Angular Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/radial-area-chart" height={600} alt="Angular Radial Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Column Chart
-
-The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.md), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/radial-column-chart" height={600} alt="Angular Radial Column Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Line Chart
-
-The Angular Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/radial-line-chart" height={600} alt="Angular Radial Line Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Pie Chart
-
-The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialPieSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/radial-pie-chart" height={600} alt="Angular Radial Pie Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Chart Styling
-
-Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in <ApiLink type="DataChart" /> control.
-
-<Sample src="/charts/data-chart/radial-area-chart-styling" height={600} alt="Angular Radial Area Chart Styling" />
-
-<div class="divider--half"></div>
-
-## Angular Radial Chart Settings
-
-In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the <ApiLink type="CategoryAngleAxis" member="labelMode" label="LabelMode" /> property for the <ApiLink type="CategoryAngleAxis" />.
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Donut Chart](donut-chart.md)
-- [Line Chart](line-chart.md)
-- [Pie Chart](pie-chart.md)
-
-## API References
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="RadialAreaSeries" /><br />
-<ApiLink type="RadialColumnSeries" /><br />
-<ApiLink type="RadialLineSeries" /><br />
-<ApiLink type="RadialPieSeries" /><br />
-<ApiLink type="CategoryAngleAxis" /><br />
-<ApiLink type="NumericRadiusAxis" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx b/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx
deleted file mode 100644
index e9f7844ab6..0000000000
--- a/docs/angular/src/content/en/components/charts/types/scatter-chart.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: "Angular Scatter Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Scatter Chart
-keywords: "Angular Charts, Scatter Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "ScatterSeries", "ScatterLineSeries", "ScatterSplineSeries", "HighDensityScatterSeries", "ScatterAreaSeries", "ScatterContourSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Scatter Charts
-
-The Ignite UI for Angular Scatter Chart belongs to a group of charts that show the relationship among items in distinct series of data or to plot data items using numeric x and y coordinates. These charts draw attention to uneven intervals or clusters of data. They are often used to plot scientific data, and can highlight the deviation of collected data from predicted results. Also, you can use them to organize data chronologically (even if the data is not in chronological order).
-
-## Angular Scatter Marker Chart
-
-Angular Scatter Marker Chart renders as a collection of markers, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="Angular Scatter Marker Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Scatter Line Chart
-
-Angular Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/scatter-line-chart" height={600} alt="Angular Scatter Line Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Scatter Spline Chart
-
-Angular Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterSplineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/scatter-spline-chart" height={600} alt="Angular Scatter Spline Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Scatter High Density Chart
-
-Use the Angular Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="HighDensityScatterSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/type-scatter-hd-series" height={600} alt="Angular Scatter HD Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Scatter Area Chart
-
-Angular Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterAreaSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/type-scatter-area-series" height={600} alt="Angular Scatter Area Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Scatter Contour Chart
-
-Angular Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterContourSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/type-scatter-contour-series" height={600} alt="Angular Scatter Contour Chart" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Bubble Chart](bubble-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Shape Chart](shape-chart.md)
-
-## API References
-The following table lists API members mentioned in the above sections:
-
- |Chart Type                  | Control Name   | API Members |
- |----------------------------|----------------|------------------------ |
- |Scatter Marker              | <ApiLink type="DataChart" /> | <ApiLink type="ScatterSeries" /> |
- |Scatter Line                | <ApiLink type="DataChart" /> | <ApiLink type="ScatterLineSeries" /> |
- |Scatter Spline              | <ApiLink type="DataChart" /> | <ApiLink type="ScatterSplineSeries" /> |
- |High Density Scatter        | <ApiLink type="DataChart" /> | <ApiLink type="HighDensityScatterSeries" /> |
- |Scatter Area                | <ApiLink type="DataChart" /> | <ApiLink type="ScatterAreaSeries" /> |
- |Scatter Contour             | <ApiLink type="DataChart" /> | <ApiLink type="ScatterContourSeries" /> |
diff --git a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx b/docs/angular/src/content/en/components/charts/types/shape-chart.mdx
deleted file mode 100644
index 1f30d2dd52..0000000000
--- a/docs/angular/src/content/en/components/charts/types/shape-chart.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: Angular Shape Chart | Data Visualization | Infragistics
-description: Infragistics' Angular Shape Chart
-keywords: Angular Charts, Shape Chart, Infragistics
-license: commercial
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Shape Charts are a group of charts that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Shape Charts
-
-The Ignite UI for Angular Shape Charts are a group of charts that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings.
-
-## Angular Scatter Polygon Chart
-
-The Angular Scatter Polygon Chart renders an array or array of arrays of polygons in the Cartesian (x, y) coordinate system using <ApiLink type="ScatterPolygonSeries" /> in the <ApiLink type="DataChart" /> control. This chart can be used to filled shapes of plot diagrams, blueprints, or even the floor plan of buildings.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterPolygonSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="Angular Scatter Polygon Chart" />
-
-## Angular Scatter Polyline Chart
-
-The Angular Scatter Polyline Chart renders an array or array of arrays of polylines in the Cartesian (x, y) coordinate system using <ApiLink type="ScatterPolylineSeries" /> in the <ApiLink type="DataChart" /> control. This chart can be used to outlines of plot diagrams, blueprints, or even the floor plan of buildings. Also, it can visualizes complex relationships between a large amount of elements.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterPolylineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/type-scatter-polyline-series" height={600} alt="Angular Scatter Polyline Chart" />
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Line Chart](line-chart.md)
-- [Scatter Chart](scatter-chart.md)
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="ScatterPolygonSeries" />
-<ApiLink type="ScatterPolylineSeries" />
-<ApiLink type="NumericXAxis" />
-<ApiLink type="NumericYAxis" />
diff --git a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx
deleted file mode 100644
index 50fbf282f8..0000000000
--- a/docs/angular/src/content/en/components/charts/types/sparkline-chart.mdx
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: "Angular Sparkline | Data Visualization Tools | Infragistics"
-description: Use Infragistics' Angular sparkline chart control to render in a small scale layout such as a grid cell or stand alone. Learn about the Ignite UI for Angular sparkline chart configurable elements!
-keywords: Sparkline, Ignite UI for Angular, Infragistics, WinLoss, Area, Column
-license: commercial
-mentionedTypes: ["Sparkline", "SparklineDisplayType", "TrendLineType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Sparkline is a lightweight charting control."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Sparkline
-
-The Ignite UI for Angular Sparkline is a lightweight charting control. It is intended for rendering within a small-scale layout such as within a grid cell but can also be rendered alone. The <ApiLink type="Sparkline" /> has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips.
-
-## Angular Sparkline Example
-
-The following example shows all the different types of <ApiLink type="Sparkline" /> available. The type is defined by setting the <ApiLink type="Sparkline" member="displayType" label="DisplayType" /> property. If the <ApiLink type="Sparkline" member="displayType" label="DisplayType" /> property is not specified, then by default, the <ApiLink type="SparklineDisplayType" member="Line" label="Line" /> type is displayed.
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular Sparkline Example" />
-
-Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">Download it for free.</a>
-
-## Sparkline Recommendations
-
-### Is the Sparkline chart right for your project?
-The primary benefit of the Sparkline control compared to other charting controls is that it can render in a limited space such as a grid cell with all its visual elements shown.
-
-The Angular Sparkline has the ability to mark the data points with elliptical icons to indicate the highest, lowest, first, last, and negative values. The markers can be customized with a desired shape, color, or image.
-
-### Sparkline Use Cases
-- You have a compact space to display a chart in.
-- You want to show trends in a series of values, such as weekly revenue.
-
-### Sparkline Best Practices
-- Always start the Y-Axis (left or right axis) at 0 so data comparison is accurate.
-- Order time-series data from left to right.
-- Use visual attributes like solid lines to show a series of data.
-
-### When Not to Use Sparkline
-- You need to analyze the data in detail.
-- You need to display every label of the data points. It only allows showing high and low values on the Y-Axis, and first and last values on the X-Axis.
-
-### Sparkline Data Structure
-- It requires one-dimensional data.
-- The data set must contain at least two numeric fields.
-- The text in the data source fields can be used to display the first and last label on the X-Axis.
-
-## Sparkline Types
-The Angular Sparkline supports the following types of sparklines by setting the <ApiLink type="Sparkline" member="displayType" label="DisplayType" /> property accordingly:
-
-- <ApiLink type="SparklineDisplayType" member="Line" label="Line" />:  Displays the line chart type of Sparkline with numeric data, connecting the data points with line segments. At least two data points must be supplied to visualize the data in Sparkline.
-- <ApiLink type="SparklineDisplayType" member="Area" label="Area" />: Displays the Area chart type of Sparkline with numeric data. This is like line type with additional steps of closing the area after each line is drawn. At least two data points must be supplied to visualize the data in Sparkline.
-- <ApiLink type="SparklineDisplayType" member="Column" label="Column" />: Displays the Column chart type of Sparkline with numeric data. Some may refer to it as vertical bars. This type can render a single data point, but it would require specifying the minimum value range property (minimum) in Sparkline so the supplied single data point can be visible, otherwise the value will be treated as the minimum value and will not be visible.
-- <ApiLink type="SparklineDisplayType" member="WinLoss" label="WinLoss" />: This type is similar in its visual appearance to Column chart type, in which the value of each column is equal to either the positive maximum (for positive values) or the negative minimum (for negative value) of the data set. The idea is to indicate a win or loss scenario. For the Win/Loss chart to display properly, the data set must have both positive and negative values. If the WinLoss sparkline is bound to the same data as the other types such as the Line type, which can be bound to a collection of numeric values, then the Angular Sparkline will select two values from the collection - the highest and the lowest - and will render the sparkline based upon those values.
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular Sparkline Example" />
-
-## Markers
-
-The Angular Sparkline allows you to show markers as circular-colored icons on your series to indicate the individual data points based on X/Y coordinates. Markers can be set on sparklines of display types of <ApiLink type="SparklineDisplayType" member="Line" label="Line" />, <ApiLink type="SparklineDisplayType" member="Area" label="Area" />, and <ApiLink type="SparklineDisplayType" member="Column" label="Column" />. The <ApiLink type="SparklineDisplayType" member="WinLoss" label="WinLoss" /> type of sparkline does not currently accept markers. By default, markers are not displayed, but they can be enabled by setting the corresponding marker visibility property.
-
-Markers in the sparkline can be placed in any combination of the following locations:
-
-- `All`: Display markers for all data points in the sparkline.
-- `Low`: Display markers on the data point of the lowest value. If there are multiple points at the lowest value, it will show on each point with that value.
-- `High`: Display markers on the data point of the highest value. If there are multiple points at the highest value, it will show on each point with that value.
-- `First`: Display a marker on the first data point in the sparkline.
-- `Last`: Display a marker on the last data point in the sparkline.
-- `Negative`: Display markers on the negative data points plotted in the sparkline.
-
-All of the markers mentioned above can be customized using the related marker type's property in aspects of color, visibility, and size. For example, the `Low` markers above will have properties <ApiLink type="Sparkline" member="lowMarkerBrush" label="LowMarkerBrush" />, <ApiLink type="Sparkline" member="lowMarkerVisibility" label="LowMarkerVisibility" />, and <ApiLink type="Sparkline" member="lowMarkerSize" label="LowMarkerSize" />.
-
-<Sample src="/charts/sparkline/markers" height={300} alt="Angular sparkline markers" />
-
-## Normal Range
-
-The normal range feature of the Angular Sparkline is a horizontal stripe representing some pre-defined meaningful range when the data is being visualized. The normal range can be set as a shaded area outlined with the desired color.
-
-The normal range can be wider than the maximum data point or beyond, and it can also be as thin as the sparkline's <ApiLink type="SparklineDisplayType" member="Line" label="Line" /> display type, to serve as a threshold indicator, for instance. The width of the normal range is determined by the following three properties, which serve as the minimum settings required for displaying the normal range:
-
-- `NormalRangeVisibility`: Whether the normal range is visible.
-- `NormalRangeMaximum`: The bottom border of the range.
-- `NormalRangeMinimum`: The top border of the range.
-
-By default, the normal range is not displayed. When enabled, the normal range shows up with a light gray color appearance, which can also be configured using the <ApiLink type="Sparkline" member="normalRangeFill" label="NormalRangeFill" /> property.
-
-You can also configure whether to show the normal range in front of or behind the plotted series in your Angular Sparkline by setting the <ApiLink type="Sparkline" member="displayNormalRangeInFront" label="DisplayNormalRangeInFront" /> property.
-
-<Sample src="/charts/sparkline/normal-range" height={300} alt="Angular sparkline normal range" />
-
-## Trendlines
-
-The Angular Sparkline has support for a range of trendlines that display as another layer on top of the actual sparkline layer. To display a sparkline, you can use the <ApiLink type="TrendLineType" /> property.
-
-The trendlines are calculated according to the algorithm specified by the <ApiLink type="TrendLineType" /> property using the values of the data the the chart is bound to.
-
-Trendlines can only be displayed one at a time and by default, the trendline is not displayed.
-
-The sample below shows all the available trendlines via the dropdown:
-
-<Sample src="/charts/sparkline/trendlines" height={300} alt="Angular sparkline trendlines" />
-
-## Unknown Value Interpolation
-
-The Angular Sparkline can detect unknown values and render the space for unknown values through a specified interpolation algorithm. If your data contains null values and you do not use this feature, meaning no interpolation is specified, the unknown value will not be plotted.
-
-To plot the unknown values, you can set the <ApiLink type="Sparkline" member="unknownValuePlotting" label="UnknownValuePlotting" /> property of the Angular Sparkline. The sample below shows the differences between the values of the <ApiLink type="Sparkline" member="unknownValuePlotting" label="UnknownValuePlotting" /> property, allowing you to toggle it on or off using a checkbox:
-
-<Sample src="/charts/sparkline/unknown-values" height={300} alt="Angular sparkline unknown values" />
-
-## Sparkline in Data Grid
-
-You can embed the Angular Sparkline in a template column of data grid or other UI controls that support templates. The following code example shows how to do this:
-
-<Sample src="/charts/sparkline/grid" height={600} alt="Angular sparkline grid" />
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-
-## API References
-<ApiLink type="Sparkline" />
diff --git a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx b/docs/angular/src/content/en/components/charts/types/spline-chart.mdx
deleted file mode 100644
index 79f2829382..0000000000
--- a/docs/angular/src/content/en/components/charts/types/spline-chart.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: "Angular Spline Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Spline Chart
-keywords: "Angular Charts, Spline Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "SplineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "Series", "CategoryChartType"]
-llms:
-  description: "The Ignite UI for Angular Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spline Chart
-
-The Ignite UI for Angular Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. Values are represented on the y-axis and categories are displayed on the x-axis. Spline Chart emphasizes the amount of change over a period of time or compares multiple items as well as the relationship of parts to a whole by displaying the total of the plotted values. Spline Chart is identical to [Line Chart](line-chart.md) in all aspects except that line connecting data points has spline interpolation and smoothing for improved presentation of data.
-
-## Angular Spline Chart Example
-
-The following example shows how to create Angular Spline Chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> enum.
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="Angular Spline Chart Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Angular Spline Chart with Single Series
-
-The Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period for Europe, as shown in the example below.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="Spline" label="Spline" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/spline-single-source" height={600} alt="Angular Spline Chart with Single Source" />
-
-<div class="divider--half"></div>
-
-## Angular Spline Chart with Multiple Series
-
-Since the Spline Chart allows you to combine multiple series and compare or see how they change over time. All we need to do is bind to a data source containing the data for China and the USA, and the chart will automatically update to fit the additional data.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="Spline" label="Spline" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="Angular Spline Chart with Multiple Sources" />
-
-<div class="divider--half"></div>
-
-## Angular Spline Chart Styling
-
-If you need a Spline Chart with more features such as composite other series, you can configure the markers, marker brushes, marker outlines, series brushes and series outlines as demonstrated below.
-
-You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="Spline" label="Spline" />, as shown in the example below:
-
-<Sample src="/charts/category-chart/spline-styling" height={600} alt="Angular Spline Chart Styling" />
-
-<div class="divider--half"></div>
-
-## Advanced Types of Spline Charts
-
-The following sections explain more advanced types of Angular Spline Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
-
-## Angular Stacked Spline Chart
-
-The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions, as we have shown in the example below.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedSplineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-spline-chart" height={600} alt="Angular Stacked Spline Chart" />
-
-<div class="divider--half"></div>
-
-## Angular Stacked 100% Spline Chart
-
-The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100SplineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-100-spline-chart" height={600} alt="Angular Stacked 100 Spline Chart" />
-
-<div class="divider--half"></div>
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Line Chart](spline-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Stacked Chart](stacked-chart.md)
-
-## API References
-
-The following table lists API members mentioned in the above sections:
-
-| Chart Type          | Control Name       | API Members |
-| --------------------|--------------------|-------------------------- |
-| Spline              | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> |
-| Stacked Spline      | <ApiLink type="DataChart" />     | <ApiLink type="StackedSplineSeries" /> |
-| Stacked 100% Spline | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100SplineSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="StackedSplineSeries" /><br />
-<ApiLink type="Stacked100SplineSeries" /><br />
diff --git a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx b/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx
deleted file mode 100644
index 3beca2f72c..0000000000
--- a/docs/angular/src/content/en/components/charts/types/stacked-chart.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
----
-title: "Angular Stacked Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Stacked Chart
-keywords: "Angular Charts, Stacked Chart, Stacked 100% Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DataChart", "StackedAreaSeries", "Stacked100AreaSeries", "StackedBarSeries", "Stacked100BarSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "StackedLineSeries", "Stacked100LineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "StackedSplineAreaSeries", "Stacked100SplineAreaSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Stacked Chart
-
-The Ignite UI for Angular Stacked Chart belongs to a special group of charts that render multiple values of data items as stacked area/polygons, bars, columns, lines, or splines. Standard Stacked Charts render actual values of data items while Stacked 100% Charts render values as percentage of total values.
-
-## Angular Stacked Chart Types
-
-The following example, you can use the drop-down to switch between all of the different types stacked charts available in the Angular <ApiLink type="DataChart" /> control.
-
-<Sample src="/charts/data-chart/stacked-chart-types" height={600} alt="Angular Stacked Chart Types" />
-
-The following sections demonstrate individual types of Ignite UI for Angular Stacked Charts.
-
-## Angular Stacked Area Chart
-
-Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as [Area Chart](area-chart.md), with the only difference being that visually, the shaded areas are stacked on top of each other.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-area-chart" height={600} alt="Angular Stacked Area Chart" />
-
-## Angular Stacked 100 Area Chart
-Sometimes the series represent part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100AreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-area-chart" height={600} alt="Angular Stacked 100 Area Chart" />
-
-## Angular Stacked Bar Chart
-
-A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value.
-
-The Stacked Bar Chart differs from the [Bar Chart](bar-chart.md) in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
-
-In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedBarSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-bar-chart" height={600} alt="Angular Stacked Bar Chart" />
-
-## Angular Stacked 100% Bar Chart
-
-The Angular Stacked 100% Bar Chart is identical to the Angular stacked bar chart in all aspects except in their treatment of the values on X-Axis (bottom labels of the chart). Instead of presenting a direct representation of the data, the stacked 100% bar chart presents the data in terms of percent of the sum of all values in a data point.
-
-In this example of a Stacked 100% Bar Chart, the Energy Product values are shown as a 100% value of all of the data in the fragments of the horizontal bars. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100BarSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-bar-chart" height={600} alt="Angular Stacked 100 Bar Chart" />
-
-## Angular Stacked Column Chart
-
-The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedColumnSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-column-chart" height={600} alt="Angular Stacked Column Chart" />
-
-## Angular Stacked 100% Column Chart
-
-The Stacked 100% Column Chart is identical to the Stacked Column Chart in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100% Column Chart presents the data in terms of percent of the sum of all values in a data point.
-
-The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100ColumnSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-column-chart" height={600} alt="Angular Stacked 100 Column Chart" />
-
-## Angular Stacked Line Chart
-
-The Stacked Line Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedLineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-line-chart" height={600} alt="Angular Stacked Line Chart" />
-
-## Angular Stacked 100% Line Chart
-
-The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100LineSeries" />, as shown in the example below:
-
-<Sample src="/charts/data-chart/stacked-100-line-chart" height={600} alt="Angular Stacked 100 Line Chart" />
-
-## Angular Stacked Spline Area Chart
-
-Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedSplineAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-spline-area-chart" height={600} alt="Angular Stacked Spline Area Chart" />
-
-## Angular Stacked 100% Spline Area Chart
-
-The Stacked 100% Spline Area Chart is identical to the Stacked Spline Area Chart in all aspects except for the treatment of the values on the y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Area Chart presents the data in terms of a percent of the sum of all values in a particular data point. Sometimes the chart represents part of a whole being changed over time. For example, a country's energy consumption related to the sources from which it is produced. In such cases, representing all stacked elements equally may be a better idea.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100SplineAreaSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-100-spline-area-chart" height={600} alt="Angular Stacked 100 Spline Area Chart" />
-
-## Angular Stacked Spline Chart
-
-The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedSplineSeries" />, as shown in the example below.
-
-<Sample src="/charts/data-chart/stacked-spline-chart" height={600} alt="Angular Stacked Spline Chart" />
-
-## Angular Stacked 100% Spline Chart
-
-The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
-
-You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100SplineSeries" />.
-
-<Sample src="/charts/data-chart/stacked-100-spline-chart" height={600} alt="Angular Stacked 100 Spline Chart" />
-
-## Additional Resources
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
-
-## API References
-The following table lists API members mentioned in the above sections:
-
-| Chart Type               | Control Name   | API Members |
-| -------------------------|----------------|-------------------------------- |
-| Stacked Area             | <ApiLink type="DataChart" /> | <ApiLink type="StackedAreaSeries" /> |
-| Stacked Bar              | <ApiLink type="DataChart" /> | <ApiLink type="StackedBarSeries" /> |
-| Stacked Column           | <ApiLink type="DataChart" /> | <ApiLink type="StackedColumnSeries" /> |
-| Stacked Line             | <ApiLink type="DataChart" /> | <ApiLink type="StackedLineSeries" /> |
-| Stacked Spline           | <ApiLink type="DataChart" /> | <ApiLink type="StackedSplineSeries" /> |
-| Stacked Spline Area      | <ApiLink type="DataChart" /> | <ApiLink type="StackedSplineAreaSeries" /> |
-| Stacked 100% Area        | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100AreaSeries" /> |
-| Stacked 100% Bar         | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100BarSeries" /> |
-| Stacked 100% Column      | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100ColumnSeries" /> |
-| Stacked 100% Line        | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100LineSeries" /> |
-| Stacked 100% Spline      | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100SplineSeries" /> |
-| Stacked 100% Spline Area | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100SplineAreaSeries" /> |
diff --git a/docs/angular/src/content/en/components/charts/types/step-chart.mdx b/docs/angular/src/content/en/components/charts/types/step-chart.mdx
deleted file mode 100644
index d32ea9e5ce..0000000000
--- a/docs/angular/src/content/en/components/charts/types/step-chart.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: "Angular Step Chart | Data Visualization | Infragistics"
-description: Infragistics' Angular Step Chart
-keywords: "Angular Charts, Step Chart, Step Area Chart, Step Line Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Series", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Step Chart
-
-The Ignite UI for Angular Step Chart belongs to a group of category charts that render as a collection of points connected by continuous vertical and horizontal lines. Values are represented on the y-axis and categories are displayed on the x-axis. Step Chart emphasizes the amount of change over a period of time or compares multiple items.
-
-## Angular Step Area Chart
-
-You can create Angular Step Area Chart in the <ApiLink type="CategoryChart" /> control by setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" /> enum, as shown in the example below.
-
-<Sample src="/charts/category-chart/step-area-multiple-sources" height={600} alt="Angular Step Area Chart Multiple Sources" />
-
-## Angular Step Line Chart
-
-The Angular Step Line Chart is very similar to Step Area Chart, except that the area below lines are filled in.
-
-You can create Step Line Chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to <ApiLink type="CategoryChartType" member="StepLine" label="StepLine" /> value, as shown in the example below.
-
-<Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="Angular Step Line Chart Multiple Sources" />
-
-## Angular Step Chart Styling
-
-If you need Step Charts with more features such as composite other series, you can configure the <ApiLink type="DomainChart" member="markerTypes" label="MarkerTypes" />, <ApiLink type="DomainChart" member="markerBrushes" label="MarkerBrushes" />, <ApiLink type="DomainChart" member="markerOutlines" label="MarkerOutlines" />, lines' <ApiLink type="DomainChart" member="brushes" label="Brushes" />, and lines' <ApiLink type="DomainChart" member="outlines" label="Outlines" /> properties on the <ApiLink type="CategoryChart" /> control as demonstrated below.
-
-<Sample src="/charts/category-chart/step-line-styling" height={600} alt="Angular Styling Step Line Chart" />
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Line Chart](line-chart.md)
-- [Chart Markers](../features/chart-markers.md)
-
-## API References
-<ApiLink type="CategoryChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx b/docs/angular/src/content/en/components/charts/types/stock-chart.mdx
deleted file mode 100644
index 860595225f..0000000000
--- a/docs/angular/src/content/en/components/charts/types/stock-chart.mdx
+++ /dev/null
@@ -1,134 +0,0 @@
----
-title: "Angular Stock/Financial Charts | Ignite UI for Angular"
-description: The Ignite UI for Angular Stock Chart is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Try for FREE.
-keywords: "Angular Charts, Stock Chart, Financial Chart, Candlestick Chart, OHLC Chart, Infragistics"
-license: commercial
-mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Stock Chart, sometimes referred to as Angular Financial Chart or Candlestick Chart, is a composite visualization that renders stock ticker data, or price data in an interactive time-series display."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Stock Chart
-
-The Ignite UI for Angular Stock Chart, sometimes referred to as Angular Financial Chart or Candlestick Chart, is a composite visualization that renders stock ticker data, or price data in an interactive time-series display. Stock Chart shows stock prices for a ticker over time in a Time Series X-Axis. Also, this chart shows information for a company’s ticker data like Open Price, High Price, Low Price and Close Price (OHLC) for configurable period of time. The Stock Chart offers multiple ways in which the data can be visualized and interpreted, including display modes for price and volume and a host of Stock indicators.
-
-## Angular Stock Chart Example
-
-You can create Stock Chart using the <ApiLink type="FinancialChart" /> control by binding your data and optionally setting <ApiLink type="FinancialChart" member="chartType" label="ChartType" /> property to <ApiLink type="FinancialChartType" member="Line" label="Line" /> value, as shown in the example below.
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular Stock Chart Example" />
-
-## Stock Chart Recommendations
-
-### Are Angular Stock Charts right for your project?
-
-The typical stock chart is represented with ticker data in a candlestick chart which is used for the technical analysis of the price ranges. A candlestick chart compares the high and low prices of a day to the open and close of the ticker symbol.
-
-- The body of the candlestick chart shows the open and close trade values (O/C).
-- The wicks of the candlestick chart show the high and low trade prices (H/L).
-- The distance between the top and bottom of the ticker value is the day range of the ticker price.
-- The candlestick chart ticker value is hollow when the asset closed higher than it opened.
-- The candlestick chart ticker value is filled when the asset closed lower than it opened.
-- A black or red candle represents a price with a lower closing price than the prior candle's close.
-- A white or green candle represents a higher closing price than the prior candle's close.
-
-The Stock Chart can be set to display one of the following:
-
-- Candlestick Chart
-- Bar Chart
-- Column Chart
-- Line Chart
-
-As a Stock Chart is meant to allow the user to perform data analysis functions, it includes interactive elements such as:
-
-- Time-based Filters
-- Prices View
-- Volume View
-- Indicators View
-- Trend Lines
-- Navigation / Zoombar View
-
-### Stock Chart Data Structure
-
-- The data source must be an array or a list of data items.
-- The data source must contain at least one data item.
-- All data items must contain at least one date-time (or string) column that represents the date of the ticker data.
-- All data items must contain 1 numeric column for Bar, Line, and Column chart.
-- All data items must contain 4 numeric columns for Open, High, Low, Close (OHLC) for a Candlestick chart.
-- All data items must contain 5 numeric columns for Open, High, Low, Close and Volume for a Candlestick chart.
-
-## Angular Stock Chart with Multiple Series
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular Stock Index Chart" />
-
-## Angular Stock Chart
-
-In this example the Stock Chart is representing the S&P 500 over the course of a year; useful for investors and conducting technical analysis and forecasting future pricing/reports.
-
-<Sample src="/charts/financial-chart/stock-index-chart" height={600} alt="Angular Stock Index Chart" />
-
-## Angular Stock Chart Styling
-
-If you need a Stock Chart with more features such as composite other series, you can configure the thickness, outlines, brushes, negative outlines, negative brushes as demonstrated below. In this example, the stock chart is comparing revenue between Amazon, Microsoft and Tesla.
-
-<Sample src="/charts/financial-chart/styling" height={600} alt="Angular Stock Index Chart" />
-
-## Angular Chart Annotations
-
-The Crosshair Annotation Layer provides crossing lines that meet at the actual value of every targeted series. Crosshair types include: Horizontal, Vertical, and Both. The Crosshairs can also be configured to snap to data points by setting the <ApiLink type="DomainChart" member="crosshairsSnapToData" label="CrosshairsSnapToData" /> property to true, otherwise the crosshairs will be interpolated between data points. Annotations can also be enabled to display the crosshair's value along the axis.
-
-The Final Value Layer provides a quick view along the axis of the ending value displayed in a series.
-
-The Callout Layer displays a callout at X/Y positions.
-
-Note: When using the ordinal X axis mode, the CalloutsXMemberPath should point to the numeric index of the item, otherwise CalloutsXMemberPath should point to the time value.
-
-<Sample src="/charts/financial-chart/annotations" height={600} alt="Angular Chart Annotations" />
-
-## Angular Chart Panes
-
-The following panes are available:
-
-- Price Pane - Renders prices using Line, Candlestick, Bar (OHLC), trendlines and financial overlays.
-- Indicator Pane - Renders all the financial indicators in a separate chart while the BollingerBands and PriceChannel overlays are rendered in the Price Pane because they share the same values range on Y-Axis.
-- Volume Pane - Renders stocks volumes using Column, Line, and Area chart types below all above panes.
-- Zoom Pane - Controls the zoom of all the panes and it is always rendered at bottom of the chart.
-
-### Indicator Pane
-Financial Indicators are often used by traders to measure changes and to show trends in stock prices. These indicators are usually displayed below the price pane because they do not share the same Y-Axis scale.
-
-By default the indicator panes are not displayed. The toolbar allows the end user to select which indicator to display at run time.
-In order to display an indicator pane initially, the <ApiLink type="FinancialChart" member="indicatorTypes" label="IndicatorTypes" /> property must be set to a least one type of indicator, as demonstrated in the following code:
-
-### Volume Pane
-The volume pane represents the number of shares traded during a given period. Low volume would indicate little interest, while high volume would indicate high interest with a lot of trades.  This can be displayed using column, line or area chart types. The toolbar allows the end user to display the volume pane by selecting a chart type to render the data at runtime. In order the display the pane, a volume type must be set, as demonstrated in the following code:
-
-### Price Pane
-This pane displays stock prices and shows the stock's high, low, open and close prices over time. In addition it can display trend lines and overlays. Your end user can choose different chart types from the toolbar. By default, the chart type is set to <ApiLink type="FinancialChartType" member="Auto" label="Auto" />. You can override the default setting, as demonstrated in the following code:
-
-Note that is recommended to use line chart type if plotting multiple data sources or if plotting data source with a lot of data points.
-
-### Zoom Pane
-This pane controls the zoom of all the displayed panes. This pane is displayed by default. It can be turned off by setting the <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> to `none` as demonstrated in the following code:
-
-Note that you should set the <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> option to the same value as the <ApiLink type="FinancialChart" member="chartType" label="ChartType" /> option is set to. This way, the zoom slider will show correct preview of the price pane. The following code demonstrates how to do this:
-
-In this example, the stock chart is plotting revenue for United States.
-
-<Sample src="/charts/financial-chart/panes" height={600} alt="Angular Chart Panes" />
-
-## Additional Resources
-
-You can find more information about related chart features in these topics:
-
-- [Chart Animations](../features/chart-Animations.md)
-- [Chart Annotations](../features/chart-annotations.md)
-- [Chart Navigation](../features/chart-navigation.md)
-- [Chart Trendlines](../features/chart-trendlines.md)
-- [Chart Performance](../features/chart-performance.md)
-
-## API References
-<ApiLink type="FinancialChart" />
diff --git a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx
deleted file mode 100644
index 7984b950bf..0000000000
--- a/docs/angular/src/content/en/components/charts/types/treemap-chart.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: "Angular Treemap | Data Visualization Tools | Orientation | Layout | Data Binding | Infragistics"
-description: Use Infragistics' Angular Treemap control show relative weighting of data points at more than one level supporting strip, squarified, and slice-and-dice algorithms. Learn about Ignite UI for Angular treemap!
-keywords: "Angular Tree Map, Treemap, layout, orientation, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["Treemap", "TreemapOrientation", "TreemapLayoutType", "TreemapHighlightingMode", "TreemapHighlightedValueDisplayMode"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "The Ignite UI for Angular Treemap chart displays hierarchical (tree-structured) data as a set of nested nodes."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Treemap
-
-The Ignite UI for Angular Treemap chart displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node’s rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data.
-
-## Angular Treemap Example
-
-In the following example, the <ApiLink type="Treemap" /> demonstrates the 30 largest countries in the world by total area.
-
-<Sample src="/charts/tree-map/overview" height={600} alt="Angular Treemap Example" />
-
-## Treemap Recommendations
-
-### Are Angular Treemaps right for your project?
-
-When the color and size dimensions are correlated in some way with the tree structure, one can often easily see patterns that would be difficult to spot in other ways. A second advantage of treemaps is that, by construction, they make efficient use of space. As a result, they can legibly display thousands of items on the screen simultaneously.
-
-- Treemaps are more effective than pie charts and other forms of area charts that often do a poor job of classifying data points and communicating the relative differences of their values.
-- Treemaps are designed for drill down scenarios. You can continuously drill down into the data set that is represented by smaller rectangles for more efficient data analysis.
-- Treemaps are not designed to convey numerical quantities; the intent is to show relative rankings.
-
-Like any other data visualization, a Treemap chart visualization should be used in specific scenarios. It does not solve the same problem that a visualization like a Bar Chart or a Line Chart would. It is really meant for a more complex, richer data display.
-
-### Treemap Use Cases
-
-There are several common use cases for choosing a Treemap. When you:
-
-- Have drill-down hierarchical data (data organized as a tree, with branches and sub-branches).
-- Want to illustrate hierarchies of relative weight and comparative values between categories (branches) and subcategories (sub-branches).
-- Want to display large data sets that need a compact, space-efficient visualization.
-- Want to deliver at-a-glance, quick data analysis without precise values. The relative size of the rectangles help identify patterns and/or outliers very quickly.
-- Want to make efficient use of space. Treemaps can legibly display thousands of items on the screen simultaneously.
-
-### When not to Use a Treemap
-
-- You are telling a data story that requires precise values
-- You have negative data values
-- You have flat, non-hierarchical data
-- Your data is similar in size
-
-### Treemap Data Structure
-
-- The data source must be an array or a list of data items
-- The data source must contain at least one data item otherwise the map will not render any nodes.
-- All data items must contain at least one data column (e.g. string) which should be mapped to the <ApiLink type="Treemap" member="labelMemberPath" label="LabelMemberPath" /> property.
-- All data items must contain at least one numeric data column which should be mapped using the <ApiLink type="Treemap" member="valueMemberPath" label="ValueMemberPath" /> property.
-- To categorize data into organized tiles you can optionally use <ApiLink type="Treemap" member="parentIdMemberPath" label="ParentIdMemberPath" /> and <ApiLink type="Treemap" member="idMemberPath" label="IdMemberPath" />.
-
-## Angular Treemap Configuration
-
-In the following example, the treemap demonstrates the ability of changing it's algorithmic structure by modifying the <ApiLink type="Treemap" member="layoutType" label="LayoutType" /> and <ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> properties.
-
-<Sample src="/charts/tree-map/layout" height={600} alt="Angular Treemap Layout Configuration" />
-
-### Layout Types
-
-The Treemap chart displays the relative weight of data. It uses a variety of algorithms to help it determine how the layout of its data items should occur:
-
-- `SliceAndDiced` - layout algorithm aims to preserve the initial order at the expense of the aspect ratio.
-- `Squarified` - layout tiling algorithm has a better aspect ratio than the `SliceAndDice` and keeps a better order than Squarified.
-- `Stripped` - layout type algorithm obtains the best aspect ratio but the objects are arranged by size.
-
-The Treemap allows you to choose the algorithm that is best for your requirements, defaulting to use the Squarified method. It also includes the ability to allow you to colorize nodes using two mechanisms:
-
-- A group-based mechanism that colors items with like values
-- A scale-based mechanism similar to a map choropleth, which maps node colors based on their value.
-
-### Layout Orientation
-
-<ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> property enables the user to set the direction in which the nodes of the hierarchy will be expanded.
-
-Note that the <ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> property works with the layout types SliceAndDice and Strip.
-
-- `Horizontal` – the child nodes are going to be stacked horizontally(SliceAndDice).
-- `Vertical` – the child nodes are going to be stacked vertically (SliceAndDice).
-
-## Angular Treemap Styling
-
-In the following example, the treemap demonstrates the ability of changing the look and feel of the nodes achieved by styling through the `NodeStylingScript` event.
-
-<Sample src="/charts/tree-map/styling" height={600} alt="Angular Treemap Styling" />
-
-### Angular Treemap Highlighting
-
-In the following example, the treemap demonstrates the ability of node highlighting. There are two options for this feature. Each node can individually brighten, by decreasing its opacity, or cause all other nodes to trigger the same effect. To enable this feature, set <ApiLink type="Treemap" member="highlightingMode" label="HighlightingMode" />to Brighten or FadeOthers.
-
-<Sample src="/charts/tree-map/highlighting" height={600} alt="Angular Treemap Highlighting" />
-
-## Angular Treemap Percent based highlighting
-
-- <ApiLink type="Treemap" member="highlightedDataSource" label="HighlightedItemsSource" />: Specifies the datasource to read highlighted values from. If null, then highlighted values are read from the ItemsSource property.
-- <ApiLink type="Treemap" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />: Specifies the name of the property in the datasource where the highlighted values are read.
-- <ApiLink type="Treemap" member="highlightedValueOpacity" label="HighlightedValueOpacity" />: Controls the opacity of the normal value behind the highlighted value.
-- <ApiLink type="Treemap" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />: Enables or disables highlighted values.
-  - Auto: The treemap decides what mode to use.
-  - Overlay: The treemap displays highlighted values over top the normal value with a slight opacity applied to the normal value.
-  - Hidden: The treemap does not show highlighted values.
-
-<Sample src="/charts/tree-map/highlighting-percent-based" height={600} alt="Angular Treemap Percent based Highlighting" />
-
-## Additional Resources
-
-You can find more information about related chart types in these topics:
-
-- [Area Chart](area-chart.md)
-- [Shape Chart](shape-chart.md)
-
-## API References
-<ApiLink type="Treemap" />
diff --git a/docs/angular/src/content/en/components/dashboard-tile.mdx b/docs/angular/src/content/en/components/dashboard-tile.mdx
deleted file mode 100644
index e850627a1f..0000000000
--- a/docs/angular/src/content/en/components/dashboard-tile.mdx
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: "Angular Dashboard Tile Component | Ignite UI for Angular"
-description: See how you can easily get started with Angular Dashboard Tile Component.
-keywords: "Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Dashboard components, Angular Dashboard Tile controls"
-license: commercial
-mentionedTypes: ["Toolbar", "CategoryChart", "DataChart", "RadialGauge", "LinearGauge", "GeographicMap"]
-llms:
-  description: "The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import dashboardTileToolbar from '@xplat-images/dashboard-tile-toolbar.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Dashboard Tile <Badge variant="preview" />
-
-The Angular Dashboard Tile is a automatic data visualization component which determines via analysis of a DataSource collection/array or single data point what would be the most appropriate visualization to display. It then also provides a further suite of tools in its embedded <ApiLink type="Toolbar" /> that let you alter the visualization that is presented in a variety of ways.
-
-A wide variety of visualizations may be selected for display depending on the shape of the provided data including, but not limited to: Category Charts, Radial and Polar Charts, Scatter Charts, Geographic Maps, Radial and Linear Gauges, Financial Charts and Stacked Charts.
-
-Interacting with the chart type menu in the toolbar will allow for selecting a different visualization among the list of likely candidates.
-
-## Angular Dashboard Tile Example
-
-<Sample src="/charts/dashboard-tile/local-data-source-dashboard" height={600} alt="Angular Dashboard Tile Example" />
-
-## Dependencies
-
-Install the following packages in the Ignite UI for Angular toolset:
-
-```cmd
-npm install igniteui-angular-charts
-npm install igniteui-angular-core
-npm install igniteui-angular-dashboards
-npm install igniteui-angular-gauges
-npm install igniteui-angular-data-grids
-npm install igniteui-angular-inputs
-npm install igniteui-angular-layouts
-npm install igniteui-angular-maps
-```
-
-The following modules are suggested when using the Dashboard Tile component:
-
-```ts
-import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule,
-         IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule,
-         IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards";
-
-@NgModule({
-    imports: [
-        IgxDataChartDashboardTileModule,
-        IgxRadialGaugeDashboardTileModule,
-        IgxLinearGaugeDashboardTileModule,
-        IgxGeographicMapDashboardTileModule,
-        IgxPieChartDashboardTileModule,
-        IgxDashboardTileModule
-    ]
-})
-export class AppModule {}
-```
-
-## Usage
-
-Depending on what you bind the Dashboard Tile's <ApiLink type="DataSource" /> property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the Ignite UI for Angular toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:
-
-- [IgxCategoryChart](charts/chart-overview.md)
-- [IgxDataChart](charts/chart-overview.md)
-- [IgxDataPieChart](charts/types/data-pie-chart.md)
-- [IgxGeographicMap](geo-map.md)
-- [IgxLinear Gauge](linear-gauge.md)
-- [IgxRadialGauge](radial-gauge.md)
-
-The data visualization that is chosen by default is mainly dependent on the schema and the count of the <ApiLink type="DataSource" /> that you have bound. For example, if you bind a single numeric value, you will get a <ApiLink type="RadialGauge" />, but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a <ApiLink type="DataPieChart" />. If you bind an <ApiLink type="DataSource" /> that has more value paths, you will receive a <ApiLink type="DataChart" /> with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a <ApiLink type="ShapeDataSource" /> or data the appears to contain geographic points to receive a <ApiLink type="GeographicMap" />.
-
-You are not locked into a single visualization when you bind the <ApiLink type="DataSource" />, and you can tell the control that you want to see a particular visualization by setting its `VisualizationType` property. For example, if you specifically wanted to see a line chart, you could define the Dashboard Tile like so:
-
-{/*TODO SAMPLE*/}
-
-<Sample src="/charts/dashboard-tile/gauge-dashboard" height={600} alt="Angular Dashboard Tile Gauge Example" />
-
-The visualization or properties of the visualization are also configurable using the <ApiLink type="Toolbar" /> at the top of the control. This <ApiLink type="Toolbar" /> has the default tools for the current visualization with the addition of four Dashboard Tile specific ones, highlighted below:
-
-<Image src={dashboardTileToolbar} alt="Dashboard Tile Toolbar" />
-
-From left to right:
-
-- The first tool will show a data grid with the <ApiLink type="DataSource" /> provided to the control. This is a toggle tool, so if you click it again after showing the grid, it will revert to the visualization.
-- The second tool allows you to configure the settings of the current data visualization.
-- The third tool allows you to change the current visualization, allowing you to plot a different series type or show a different type of visualization altogether. This can be set on the control by setting the `VisualizationType` property, mentioned above.
-- The last tool allows you to configure which properties on your underlying data item are included for the control. You can configure this by setting the <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> or <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> collection on the control.
-
-This demo demonstrates dashboard tile integration with the Angular Pie Chart. The toolbar options at the top right provides access to styling and changing the data visualization.
-
-<Sample src="/charts/dashboard-tile/pie-dashboard" height={600} alt="Angular Dashboard Tile Pie Example" />
-
-This demo demonstrates dashboard tile integration with the Angular Geographic Map. The toolbar options at the top right provides access to styling and changing the data visualization.
-
-<Sample src="/charts/dashboard-tile/map-dashboard" height={600} alt="Angular Dashboard Tile Map Example" />
-
-## API References
-
-<ApiLink type="Toolbar" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="DataPieChart" /><br />
-<ApiLink type="GeographicMap" /><br />
-<ApiLink type="LinearGauge" /><br />
-<ApiLink type="RadialGauge" /><br />
-
-## Additional Resources
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/components/excel-library-using-cells.mdx b/docs/angular/src/content/en/components/excel-library-using-cells.mdx
deleted file mode 100644
index 7dfe2d555f..0000000000
--- a/docs/angular/src/content/en/components/excel-library-using-cells.mdx
+++ /dev/null
@@ -1,346 +0,0 @@
----
-title: "Angular Excel Library| Using Cells | Infragistics"
-description: Learn how to perform operations on Infragistics' Angular excel library's cells such as accessing them, adding formulas and comments, merging cells and formatting cells. View Ignite UI for Angular excel demos!
-keywords: Excel library,  cell operations, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "WorkbookStyleCollection", "IWorksheetCellFormat", "WorkbookColorInfo", "DisplayOptions"]
-llms:
-  description: "The WorksheetCell objects in an Excel worksheet is the object that holds your actual data values for the worksheet."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Using Cells
-
-The <ApiLink type="WorksheetCell" /> objects in an Excel worksheet is the object that holds your actual data values for the worksheet. This topic goes over the many operations that you can perform on these cells, such as accessing them and their regions by name, adding formulas and comments to the cells, and merging and formatting them.
-
-## Angular Using Cells Example
-
-<Sample src="/excel/excel-library/working-with-cells" height={200} alt="Angular Using Cells Example" />
-
-## References
-
-The following code shows the imports needed to use the code-snippets below:
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { Worksheet } from "igniteui-angular-excel";
-import { WorksheetTable } from "igniteui-angular-excel";
-import { NamedReference } from "igniteui-angular-excel";
-import { WorksheetCellComment } from "igniteui-angular-excel";
-import { FormattedString } from "igniteui-angular-excel";
-```
-
-## Referencing Cells and Regions
-
-You can access a <ApiLink type="WorksheetCell" /> object or a <ApiLink type="WorksheetRegion" /> object by calling the <ApiLink type="Worksheet" /> object’s <ApiLink type="Worksheet" member="getCell" label="GetCell" /> or <ApiLink type="Worksheet" member="getRegion" label="GetRegion" /> methods, respectively. Both methods accept a string parameter that references a cell. Getting a reference to a cell is useful when applying formats or working with formulas and cell contents.
-
-The following example code demonstrates how to reference cells and regions:
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-//Accessing a single cell
-var cell = worksheet.getCell("E2");
-//Accessing a range of cells
-var region = worksheet.getRegion("G1:G10");
-```
-
-## Accessing Cells and Regions by Name
-
-In Microsoft Excel, individual cells, as well as cell regions can have names assigned to them. The name of a cell or region can be used to reference that cell or region instead of their address.
-
-The Infragistics Angular Excel Library supports the referencing of cells and regions by name through the <ApiLink type="Worksheet" member="getCell" label="GetCell" /> and <ApiLink type="Worksheet" member="getRegion" label="GetRegion" /> methods of the <ApiLink type="Worksheet" /> object. You refer to the cell or region using the <ApiLink type="NamedReference" /> instance that refers to that cell or region.
-
-You can use the following code snippet as an example for naming a cell or region:
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1");
-var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2");
-```
-
-The following code can be used to the get the cell and region referenced by the "myCell" and "myRegion" named references above:
-
-```ts
-var cell = worksheet.getCell("myCell");
-var region = worksheet.getRegion("myRegion");
-```
-
-## Adding a Comment to a Cell
-
-A comment allows you to display hints or notes for a cell when the end user’s mouse hovers over a cell. The comments display as a tooltip-like callout that contains text. The Infragistics Angular Excel Library allows you to add comments to a cell by setting a <ApiLink type="WorksheetCell" /> object’s <ApiLink type="WorksheetCell" member="comment" label="Comment" /> property.
-
-The following example code demonstrates how to add a comment to a cell:
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cellComment = new WorksheetCellComment();
-var commentText = new FormattedString("This cell has a comment.");
-cellComment.text = commentText;
-
-worksheet.rows(0).cells(0).comment = cellComment;
-```
-
-## Adding a Formula to a Cell
-
-The Infragistics Angular Excel Library allows you to add Microsoft Excel formulas to a cell or group of cells in a worksheet. You can do this using the <ApiLink type="WorksheetCell" /> object’s <ApiLink type="WorksheetCell" member="applyFormula" label="ApplyFormula" /> method or by instantiating a <ApiLink type="Formula" /> object and applying it to a cell. Regardless of the manner in which you apply a formula to a cell, you can access the <ApiLink type="Formula" /> object using the <ApiLink type="WorksheetCell" /> object’s <ApiLink type="WorksheetCell" member="formula" label="Formula" /> property. If you need the value, use the cell’s <ApiLink type="WorksheetCell" member="value" label="Value" /> property.
-
-The following code shows you how to add a formula to a cell.
-
-```ts
- var workbook = new Workbook();
- var worksheet = workbook.worksheets().add("Sheet1");
- worksheet.rows(5).cells(0).applyFormula("=SUM(A1:A5)");
-
- //Using a Formula object to apply a formula
- var sumFormula = Formula.parse("=SUM(A1:A5)", CellReferenceMode.A1);
- sumFormula.applyTo(worksheet.rows(5).cells(0));
-```
-
-## Copying a Cell’s Format
-Cells can have different formatting, including background color, format string, and font style. If you need a cell to have the same format as a previously formatted cell, instead of individually setting each option exposed by the <ApiLink type="WorksheetCell" /> object’s <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property, you can call the <ApiLink type="IWorksheetCellFormat" /> object’s <ApiLink type="IWorksheetCellFormat" member="setFormatting" label="SetFormatting" /> method and pass it a <ApiLink type="IWorksheetCellFormat" /> object to copy. This will copy every format setting from the first cell to the second cell. You can also do this for a row, merged cell region, or column.
-
-The following code shows you how to copy the format of the 2nd column to the 4th column:
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-//Format 2nd column
-worksheet.columns(1).cellFormat.fill = CellFill.createSolidFill("Blue");
-worksheet.columns(1).cellFormat.font.bold = true;
-
-//Copy format of 2nd column to 4th column
-worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat);
-```
-
-## Formatting a Cell
-
-The Infragistics Angular Excel Library allows you to customize the look and behavior of a cell. You can customize a cell by setting properties exposed by the <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property of the <ApiLink type="WorksheetCell" />, <ApiLink type="WorksheetRow" />, <ApiLink type="WorksheetColumn" />, or <ApiLink type="WorksheetMergedCellsRegion" /> objects.
-
-You can customize every aspect of a cell’s appearance. You can set a cell’s font, background, and borders, as well as text alignment and rotation. You can even apply a different format on a character-by-character basis for a cell’s text.
-
-You can also format cell values by assigning a format string. An acceptable format string follows the traditional format standards and formatting codes.
-
-The following code shows you how to format a cell to display numbers as currency:
-
-```ts
-var workbook = new Workbook(format);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00";
-```
-
-## Excel 2007 Color Model
-
-The color palette is analogous to the color dialog in Microsoft Excel 2007 UI. You can open this color dialog by navigating to Excel Options => Save => Colors.
-
-You can create all possible fill types using static properties and methods on the <ApiLink type="CellFill" /> class. They are as follows:
-
-- `NoColor` - A property that represents a fill with no color, which allows a background image of the worksheet, if any, to show through.
-
-- `CreateSolidFill` - Returns a <ApiLink type="CellFillPattern" /> instance which has a pattern style of `Solid` and a background color set to the <ApiLink type="WorkbookColorInfo" member="color" label="Color" /> or <ApiLink type="WorkbookColorInfo" /> specified in the method.
-
-- `CreatePatternFill` - Returns a <ApiLink type="CellFillPattern" /> instance which has the specified pattern style and the <ApiLink type="WorkbookColorInfo" member="color" label="Color" /> or <ApiLink type="WorkbookColorInfo" /> values, specified for the background and pattern colors.
-
-- `CreateLinearGradientFill` - Returns a <ApiLink type="CellFillLinearGradient" /> instance with the specified angle and gradient stops.
-
-- `CreateRectangularGradientFill` - Returns a <ApiLink type="CellFillRectangularGradient" /> instance with the specified left, top, right, and bottom of the inner rectangle and gradient stops. If the inner rectangle values are not specified, the center of the cell is used as the inner rectangle.
-
-The derived types, representing the various fills which can be created, are as follows:
-
-- <ApiLink type="CellFillPattern" /> - A pattern that represents a cell fill of no color, a solid color, or a pattern fill for a cell. It has background color info and a pattern color info which correspond directly to the color sections in the Fill tab of the Format Cells dialog of Excel.
-
-- <ApiLink type="CellFillLinearGradient" /> - Represents a linear gradient fill. It has an angle, which is degrees clockwise of the left to right linear gradient, and a gradients stops collection which describes two or more color transitions along the length of the gradient.
-
-- <ApiLink type="CellFillRectangularGradient" /> - Represents a rectangular gradient fill. It has top, left, right, and bottom values, which describe, in relative coordinates, the inner rectangle from which the gradient starts and goes out to the cell edges. It also has a gradient stops collection which describes two or more color transitions along the path from the inner rectangle to the cell edges.
-
-The following code snippet demonstrates how to create a solid fill in a <ApiLink type="WorksheetCell" />:
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cellFill = CellFill.createSolidFill("Blue");
-worksheet.rows(0).cells(0).cellFormat.fill = cellFill;
-```
-
-You can specify a color (the color of Excel cells background, border, etc) using linear and rectangular gradients in cells. When workbooks with these gradients are saved in .xls file format and opened in Microsoft Excel 2007/2010, the gradients will be visible, but when these files are opened in Microsoft Excel 2003, the cell will be filled with the solid color from the first gradient stop.
-
-These are the ways a color can be defined, as follows:
-
-- The automatic color (which is the WindowText system color)
-
-- Any user defined RGB color
-
-- A theme color
-
-If an RGB or a theme color is used, an optional tint can be applied to lighten or darken the color. This tint cannot be set directly in Microsoft Excel 2007 UI, but various colors in the color palette displayed to the user are actually theme colors with tints applied.
-
-Each workbook has 12 associated theme colors. They are the following:
-
-- Light 1
-
-- Light 2
-
-- Dark 1
-
-- Dark 2
-
-- Accent1
-
-- Accent2
-
-- Accent3
-
-- Accent4
-
-- Accent5
-
-- Accent6
-
-- Hyperlink
-
-- Followed Hyperlink
-
-- There are default values when a workbook is created, which can be customized via Excel.
-
-Colors are defined by the <ApiLink type="WorkbookColorInfo" /> class, which is a sealed immutable class. The class has a static `Automatic` property, which returns the automatic color, and there are various constructors which allow you to create a <ApiLink type="WorkbookColorInfo" /> instance with a color or a theme value and an optional tint.
-
-The <ApiLink type="WorkbookColorInfo" member="getResolvedColor" label="GetResolvedColor" /> method on <ApiLink type="WorkbookColorInfo" /> allows you to determine what color will actually be seen by the user when they open the file in Excel.
-
-If the <ApiLink type="WorkbookColorInfo" /> represents a theme color, you must pass in a Workbook instance to the method so it can get the theme color’s RGB value from the workbook.
-
-When saving out in the newer file formats such as .xlsx, the newer color information is saved directly into the file. When saving out in an older file format such as .xls, the index to the closest color in the palette will be saved out. In addition, the older formats have future feature records that can be saved out to indicate the newer color information.
-
-When the older formats are opened in Microsoft Excel 2003 and earlier versions, these future features records are ignored, but when the older file formats are opened in Excel 2007 and later, their records are read and the color information from them overwrites the indexed color that was previously loaded from the normal format records.
-
-## Excel Format Support
-
-You can set a host of different formats on a <ApiLink type="WorksheetCell" /> by using the <ApiLink type="IWorksheetCellFormat" /> object returned by the <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property of that cell. This <ApiLink type="IWorksheetCellFormat" /> object enables you to style many different aspects of the cell such as borders, font, fill, alignments, and whether or not the cell should shrink to fit or be locked.
-
-You can also access the built-in styles to Microsoft Excel 2007 using the <ApiLink type="Workbook" member="styles" label="Styles" /> collection of the <ApiLink type="Workbook" /> object. The full list of styles in Excel can be found in the Cell Styles gallery of the Home tab of Microsoft Excel 2007.
-
-There is a special type of style on the workbook’s <ApiLink type="Workbook" member="styles" label="Styles" /> collection known as the "normal" style, which can be accessed using that collection’s <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> property, or by indexing into the collection with the name "Normal".
-
-The <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing the properties on the <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> will change all of the default cell format properties on the workbook. This is useful, for example, if you want to change the default font for your workbook.
-
-You can clear the <ApiLink type="Workbook" member="styles" label="Styles" /> collection or reset it to its predefined state by using the <ApiLink type="WorkbookStyleCollection" member="clear" label="Clear" /> and <ApiLink type="WorkbookStyleCollection" member="reset" label="Reset" /> methods, respectively. Both of these will remove all user-defined styles, but <ApiLink type="WorkbookStyleCollection" member="clear" label="Clear" /> will clear the <ApiLink type="Workbook" member="styles" label="Styles" /> collection entirely.
-
-With this feature, a <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> property has been added to the <ApiLink type="IWorksheetCellFormat" /> object. This is a reference to a <ApiLink type="WorkbookStyle" /> instance, representing the parent style of the format. For formats of a style, this property will always be null, because styles cannot have a parent style. For row, column, and cell formats, the <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> property always returns the <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> by default.
-
-If the <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> property is set to null, it will revert back to the <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" />. If it is set to another style in the styles collection, that style will now hold the defaults for all unset properties on the cell format.
-
-When the <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> property is set on a cell format, the format options included on the <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> are removed from the cell format. All other properties are left intact. For example, if a cell style including border formatting was created and that style was set as the cell’s <ApiLink type="IWorksheetCellFormat" member="style" label="Style" />, the border format option on the cell format would be removed and the cell format only includes fill formatting.
-
-When a format option flag is removed from a format, all associated properties are reset to their unset values, so the cell format’s border properties are implicitly reset to default/unset values.
-
-You can determine what would really be seen in cells by using the <ApiLink type="WorksheetCell" member="getResolvedCellFormat" label="GetResolvedCellFormat" /> method on classes which represent a row, column, cell, and merged cell.
-
-This method returns a <ApiLink type="IWorksheetCellFormat" /> instance which refers back to the associated <ApiLink type="IWorksheetCellFormat" /> on which it is based. So subsequent changes to the <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property will be reflected in the instance returned from a <ApiLink type="WorksheetCell" member="getResolvedCellFormat" label="GetResolvedCellFormat" /> call.
-
-## Merging Cells
-
-Aside from setting the value or format of cells, you can also merge cells to make two or more cells appear as one. If you merge cells, they must be in a rectangular region.
-
-When you merge cells, each cell in the region will have the same value and cell format. The merged cells will also be associated with the same <ApiLink type="WorksheetMergedCellsRegion" /> object, accessible from their <ApiLink type="WorksheetCell" member="associatedMergedCellsRegion" label="AssociatedMergedCellsRegion" /> property. The resultant <ApiLink type="WorksheetMergedCellsRegion" /> object will also have the same value and cell format as the cells.
-
-Setting the value (or cell format) of the region or any cell in the region will change the value of all cells and the region. If you un-merge cells, all of the previously merged cells will retain the shared cell format they had before they were unmerged. However, only the top-left cell of the region will retain the shared value.
-
-In order to create a merged cell region, you must add a range of cells to the <ApiLink type="Worksheet" /> object’s <ApiLink type="Worksheet" member="mergedCellsRegions" label="MergedCellsRegions" /> collection. This collection exposes an `Add` method that takes four integer parameters. The four parameters determine the index of the starting row and column (top-left most cell) and the index of the ending row and column (bottom-right most cell).
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-// Make some column headers
-worksheet.rows(1).cells(1).value = "Morning";
-worksheet.rows(1).cells(2).value = "Afternoon";
-worksheet.rows(1).cells(3).value = "Evening";
-
-// Create a merged region from column 1 to column 3
-var mergedRegion1 =  ws.mergedCellsRegions().add(0, 1, 0, 3);
-
-// Set the value of the merged region
-mergedRegion1.value = "Day 1";
-
-// Set the cell alignment of the middle cell in the merged region.
-// Since a cell and its merged region shared a cell format, this will ultimately set the format of the merged region
-worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center;
-```
-
-## Retrieving the Cell Text as Displayed in Excel
-
-The text displayed in a cell depends on several factors other than the actual cell value, such as the format string and the width of the column that the cell is contained in.
-
-The format string determines how the value of cell is converted to text and what literal character should be displayed with the formatted value. You can find more detailed information about format codes here.
-
-The amount of horizontal space available in a cell plays a big part in how the value is displayed to the user.
-
-Displayed text can be different depending on varying column widths.
-
-When displaying numbers and using format string containing **"General"** or **"@"**, there are various formats which are tried to find a formatting which fits the cell width. A list of example formats are shown below:
-
-- **Normal Value** - Number is displayed as it would be if there is unlimited amount of space.
-
-- **Remove decimal digits** - Decimal digits will be removed one at a time until a format is found which fits. For example, a value of 12345.6789 will be reduced to the following formats until one fits: 12345.679, 12345.68, 12345.7, and 12346. This will stop when the first significant digit is the only one left, so for example value like 0.0001234567890 can only be reduced to 0.0001.
-
-- **Scientific, 5 decimal digits** - Number is displayed in the form of 0.00000E+00, such as 1.23457E+09, or 1.23457E-04
-
-- **Scientific, 4 decimal digits** - Number is displayed in the form of 0.0000E+00, such as 1.2346E+09, or 1.23456E-04
-
-- **Scientific, 3 decimal digits** - Number is displayed in the form of 0.000E+00, such as 1.235E+09, or 1.235E-0
-
-- **Scientific, 2 decimal digits** - Number is displayed in the form of 0.00E+00, such as 1.23E+09, or 1.23E-04
-
-- **Scientific, 1 decimal digits** - Number is displayed in the form of 0.0E+00, such as 1.2E+09, or 1.2E-04
-
-- **Scientific, 0 decimal digits** - Number is displayed in the form of 0E+00, such as 1E+09, or 1E-04
-
-- **Rounded value** - If the first significant digit is in the decimal potion of the number, the value will be rounded to the nearest integer value. For example, for a value 0.0001234567890, it will be rounded to 0, and the displayed text in cell will be 0.
-
-- **Hash marks** - If no condensed version of the number can be displayed, hashes (#) will be repeated through the width of the cell.
-
-- **Empty string** - If no hash marks can fit in the cell, an empty string will be returned as displayed cell text.
-
-If the format string for numeric value does not contain General or @, there are only the following stages of resizing: Normal value, Hash marks, Empty string
-
-If a text is used in the cell, the cell displayed text will always be full value, regardless of whether it is cut off or not in the cell.
-
-The only time when this is not the case is when padding characters are used in format string. Then the value will be displayed as all hash marks when there is not enough room for the text.
-
-You can set the worksheet's <ApiLink type="Worksheet" member="displayOptions" label="DisplayOptions" />' <ApiLink type="DisplayOptions" member="showFormulasInCells" label="ShowFormulasInCells" /> property to have formulas be displayed in cells instead of their results, and format strings and cell widths are ignored. Text values display as if their format string were @ , non-integral numeric values display as if their format string were 0.0 and integral numeric values display as if their format string were 0 .
-
-Additionally, if the value cannot fit, it will not display as all hashes. Display text will still return its full text as the cell text, even though it may not be fully seen.
-
-The following code snippet demonstrates the usage of the <ApiLink type="WorksheetCell" member="getText" label="GetText" /> method to get the text as it would be displayed in Excel:
-
-```ts
-var workbook = new Workbook();
-var worksheet = this.workbook.worksheets().add("Sheet1");
-
-var cellText = worksheet.rows(0).cells(0).getText();
-```
-
-## API References
-<ApiLink type="CellFillLinearGradient" />
-<ApiLink type="CellFillPattern" />
-<ApiLink type="CellFillRectangularGradient" />
-<ApiLink type="CellFill" />
-<ApiLink type="IWorksheetCellFormat" />
-<ApiLink type="Formula" />
-<ApiLink type="WorkbookColorInfo" />
-<ApiLink type="WorkbookStyle" />
-<ApiLink type="Workbook" />
-<ApiLink type="WorksheetCell" />
-<ApiLink type="WorksheetColumn" />
-<ApiLink type="WorksheetRegion" />
-<ApiLink type="WorksheetRow" />
-<ApiLink type="Worksheet" />
diff --git a/docs/angular/src/content/en/components/excel-library-using-tables.mdx b/docs/angular/src/content/en/components/excel-library-using-tables.mdx
deleted file mode 100644
index e3b6cfa6a4..0000000000
--- a/docs/angular/src/content/en/components/excel-library-using-tables.mdx
+++ /dev/null
@@ -1,117 +0,0 @@
----
-title: "Angular Excel Library| Using Tables | Infragistics"
-description: Use Infragistics' Angular excel library's table functionality to format your data in rows and columns. View Ignite UI for Angular excel tutorials for more information!
-keywords: Excel library, tables, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook", "WorksheetTable", "Worksheet", "SortSettings"]
-llms:
-  description: "The Infragistics Angular Excel Engine's WorksheetTable functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a Worksheet."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Using Tables
-
-The Infragistics Angular Excel Engine's <ApiLink type="WorksheetTable" /> functionality allows you to format your data in rows and columns The data in a worksheet table can be managed independently from the data in the other rows and columns in a <ApiLink type="Worksheet" />.
-{/*## Angular Using Tables Example
-
-<Sample src="/excel/excel-library/working-with-tables" height={500} alt="Angular Using Tables Example" />
-
-*/}
-
-## Adding a Table to a Worksheet
-Worksheet tables in the Infragistics Angular Excel Engine are represented by the <ApiLink type="WorksheetTable" /> object and are added in the worksheet's <ApiLink type="Worksheet" member="tables" label="Tables" /> collection. In order to add a table, you need to invoke the `Add` method on this collection. In this method, you can specify the region in which you would like to add a table, whether or not the table should contain headers, and optionally, specify the table's style as a <ApiLink type="WorksheetTableStyle" /> object.
-
-The following code demonstrates how you can add a table with headers to a <ApiLink type="Worksheet" /> spanning a region of A1 to G10, where A1 to G1 will be the column headers:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = this.workbook.worksheets().add("Sheet1");
-
-worksheet.tables().add("A1:G10", true);
-```
-
-Once you have added a table, you can modify it by adding or deleting rows and columns by calling the <ApiLink type="WorksheetTable" member="insertColumns" label="InsertColumns" />, <ApiLink type="WorksheetTable" member="insertDataRows" label="InsertDataRows" />, <ApiLink type="WorksheetTable" member="deleteColumns" label="DeleteColumns" />, or <ApiLink type="WorksheetTable" member="deleteDataRows" label="DeleteDataRows" /> methods on the <ApiLink type="WorksheetTable" />. You can also set a new table range by using the <ApiLink type="WorksheetTable" member="resize" label="Resize" /> method of the table.
-
-The following code snippet shows the usage of these methods:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-//Will add 5 columns at index 1.
-table.insertColumns(1, 5);
-
-//Will add 5 rows at index 0.
-table.insertDataRows(0, 5);
-
-//Will delete 5 columns starting at index 1.
-table.deleteColumns(1, 5);
-
-//Will delete 5 rows starting at index 0.
-table.deleteDataRows(0, 5);
-
-//Will resize the table to be in the region of A1:G15.
-table.resize("A1:G15");
-```
-
-## Filtering Tables
-Filtering is done by applying a filter on a column in the <ApiLink type="WorksheetTable" />. When the filter is applied on a column, all filters in the table will be reevaluated to determine which rows meet the criteria of all filters applied.
-
-If the data in the table is subsequently changed or you change the `Hidden` property of the rows, the filter conditions will not automatically reevaluate. The filter conditions in a table are only reapplied when table column filters are added, removed, modified, or when the <ApiLink type="WorksheetTable" member="reapplyFilters" label="ReapplyFilters" /> method is called on the table.
-
-The following are the filter types available to the columns of your <ApiLink type="WorksheetTable" />:
-
-- <ApiLink type="AverageFilter" /> - Cells can be filtered based on whether they are above or below the average value of all cells in the column.
-- <ApiLink type="CustomFilter" /> - Cells can be filtered based on one or more custom conditions.
-- <ApiLink type="DatePeriodFilter" /> - Only cells with dates in a specific month or quarter of any year will be displayed.
-- <ApiLink type="FillFilter" /> - Only cells with a specific fill will be displayed.
-- <ApiLink type="FixedValuesFilter" /> - Cells which only match specific display values or which fall within a specific group of dates/times will be displayed.
-- <ApiLink type="FontColorFilter" /> - Only cells with a specific font color will be displayed.
-- <ApiLink type="RelativeDateRangeFilter" /> - Cells with date values can be filtered based on whether they occur within a relative time range of the date when the filter was applied, such as the next day or previous quarter.
-- <ApiLink type="TopOrBottomFilter" /> - This filter allows for filtering the top or bottom N values. It also allows filtering the top or bottom N% values.
-- <ApiLink type="YearToDateFilter" /> - Cells with date values can be filtered if they occur between the start of the year and the date on which the filter was applied.
-
-The following code snippet demonstrates how to apply an "above average" filter to a <ApiLink type="WorksheetTable" />'s first column:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-table.columns(0).applyAverageFilter(AverageFilterType.AboveAverage);
-```
-
-## Sorting Tables
-Sorting is done by setting a sorting condition on a table column. When a sorting condition is set on a column, all sorting conditions in the table will be reevaluated to determine the order of the cells in the table. When cells need to be moved to meet their sort criteria, the entire row of cells in the table is moved as a unit.
-
-If the data in the table is subsequently changed, the sort conditions do not automatically reevaluate. The sort conditions in a table are only reapplied when sort conditions are added, removed, modified, or when the <ApiLink type="WorksheetTable" member="reapplySortConditions" label="ReapplySortConditions" /> method is called on the table. When sorting conditions are reevaluated, only the visible cells are sorted. All cells in hidden rows are kept in place.
-
-In addition to accessing sort conditions from the table columns, they are also exposed off the <ApiLink type="WorksheetTable" />'s SortSettings property's <ApiLink type="SortSettings" member="sortConditions" label="SortConditions" /> collection. This is an ordered collection of columns/sort condition pairs. The order of this collection is the precedence of the sorting.
-
-The following sort condition types are available to set on columns:
-
-- <ApiLink type="OrderedSortCondition" /> - Sort cells in an ascending or descending order based on their value.
-- <ApiLink type="CustomListSortCondition" /> - Sort cells in a defined order based on their text or display value. For example, this might be useful for sorting days as they appear on a calendar, rather than alphabetically.
-- <ApiLink type="FillSortCondition" /> - Sort cells based on whether their fill is a specific pattern or gradient.
-- <ApiLink type="FontColorSortCondition" /> - Sort cells based on whether their font is a specific color.
-
-There is also a <ApiLink type="SortSettings" member="caseSensitive" label="CaseSensitive" /> property on the SortSettings of the <ApiLink type="WorksheetTable" /> to determine whether strings should be sorted case sensitively or not.
-
-The following code snippet demonstrates how to apply an <ApiLink type="OrderedSortCondition" /> to a <ApiLink type="WorksheetTable" />:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = this.workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-table.columns(0).sortCondition = new OrderedSortCondition(SortDirection.Ascending);
-
-//Alternative:
-table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCondition(SortDirection.Ascending));
-```
-
-## API References
-<ApiLink type="WorksheetTableStyle" />
-<ApiLink type="WorksheetTable" />
diff --git a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx
deleted file mode 100644
index 7a8afab925..0000000000
--- a/docs/angular/src/content/en/components/excel-library-using-workbooks.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
----
-title: "Angular Excel Library| Using Workbooks| Infragistics"
-description: Use Infragistics' Angular excel library to create workbooks and worksheets, input data and export the date to Microsoft® Excel. View Ignite UI for Angular excel tutorials for more information!
-keywords: Excel library, workbooks, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook"]
-llms:
-  description: "The Infragistics Angular Excel Engine enables you to save data to and load data from Microsoft® Excel®."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Using Workbooks
-
-The Infragistics Angular Excel Engine enables you to save data to and load data from Microsoft® Excel®. You can create workbooks and worksheets, input data, and export the data to Excel using the library’s various classes. The Infragistics Angular Excel Engine makes it easy to export the data in your application as an Excel spreadsheet as well as import data from Excel into your application.
-
-## Angular Using Workbooks Example
-
-<Sample src="/excel/excel-library/operations-on-workbooks" height={500} alt="Angular Using Workbooks Example" />
-
-## Change Default Font
-
-First create a new instance of <ApiLink type="IWorkbookFont" />. Next, add the new font to the <ApiLink type="Workbook" member="styles" label="Styles" /> collection of the <ApiLink type="Workbook" />. This style contains the default properties for all cells in the workbook, unless otherwise specified on a row, column, or cell. Changing properties of the style will change the default cell format properties in the workbook.
-
-```ts
-var workbook = new Workbook();
-var font: IWorkbookFont;
-font = workbook.styles().normalStyle.styleFormat.font;
-font.name = "Times New Roman";
-font.height = 16 * 20;
-```
-
-## Setting Workbook Properties
-
-Microsoft Excel® document properties provide information to help organize and keep track of your documents. You can use the Infragistics Angular Excel Library to set these properties using the <ApiLink type="Workbook" /> object’s <ApiLink type="Workbook" member="documentProperties" label="DocumentProperties" /> property. The available properties are:
-
-- <ApiLink type="DocumentProperties" member="author" label="Author" />
-
-- <ApiLink type="DocumentProperties" member="title" label="Title" />
-
-- <ApiLink type="DocumentProperties" member="subject" label="Subject" />
-
-- <ApiLink type="DocumentProperties" member="keywords" label="Keywords" />
-
-- <ApiLink type="DocumentProperties" member="category" label="Category" />
-
-- <ApiLink type="DocumentProperties" member="status" label="Status" />
-
-- <ApiLink type="DocumentProperties" member="comments" label="Comments" />
-
-- <ApiLink type="DocumentProperties" member="company" label="Company" />
-
-- <ApiLink type="DocumentProperties" member="manager" label="Manager" />
-
-The following code demonstrates how to create a workbook and set its `title` and `status` document properties.
-
-```ts
-var workbook = new Workbook();
-workbook.documentProperties.title = "Expense Report";
-workbook.documentProperties.status = "Complete";
-```
-
-## Workbook Protection
-
-The workbook protection feature allows you to protect the structure of the workbook. That is, the ability for a user to add, rename, delete, hide, and reorder the worksheets in that workbook.
-
-The protection is not enforced via the Infragistics Excel Engine's object model. It is a responsibility of the UI visualizing this object model to honor these protection settings and allow or restrict the user from performing the corresponding operations.
-
-Protection is applied to a workbook by invoking its `protect` method.
-
-When a <ApiLink type="Workbook" /> is protected without a password, the end user may unprotect the <ApiLink type="Workbook" /> in Excel without having to supply a password. To programmatically unprotect a <ApiLink type="Workbook" />, one may use the `unprotect` method.
-
-When a <ApiLink type="Workbook" /> is protected, the values of the properties of the <ApiLink type="WorkbookProtection" /> instance from this <ApiLink type="Workbook" />'s `protection` property indicate the disabled operations.
-
-If <ApiLink type="Workbook" member="isProtected" label="IsProtected" /> is already true, the `protect` method will be ignored.
-
-```ts
-var workbook = new Workbook();
-workbook.protect(false, false);
-```
-
-Check if a workbook has protection. This read-only property returns true if the workbook has any protection set using the overloads of the Protect method.
-
-```ts
-var workbook = new Workbook();
-var protect = workbook.isProtected;
-```
-
-This read-only property returns an object of type WorkbookProtection which contains properties for obtaining each protection setting individually.
-
-```ts
-var workbook = new Workbook();
-var protection = workbook.protection;
-```
-
-## API References
-<ApiLink type="DocumentProperties" />
-<ApiLink type="WorkbookProtection" />
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
deleted file mode 100644
index 7a04563887..0000000000
--- a/docs/angular/src/content/en/components/excel-library-using-worksheets.mdx
+++ /dev/null
@@ -1,236 +0,0 @@
----
-title: "Angular Excel Library| Using Worksheets | Infragistics"
-description: Use Infragistics' Angular excel library to input data by working with the worksheet's row and cells and setting their corresponding values. Easily transfer data from Ignite UI for Angular excel to your application!
-keywords: Excel library, worksheet, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "DisplayOptions", "WorksheetFilterSettings", "IWorksheetCellFormat"]
-llms:
-  description: "The Infragistics Angular Excel Engine's Worksheet is where your data is kept."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Using Worksheets
-
-The Infragistics Angular Excel Engine's <ApiLink type="Worksheet" /> is where your data is kept. You can input data by working with the Worksheet's rows and cells and setting their corresponding values. The <ApiLink type="Worksheet" /> allows you to filter, sort, and customize the formats of the cells, as shown below.
-
-## Angular Using Worksheets Example
-
-<Sample src="/excel/excel-library/operations-on-worksheets" height={200} alt="Angular Using Worksheets Example" />
-
-The following code shows the imports needed to use the code-snippets below:
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { Worksheet } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { Color } from "igniteui-angular-core";
-
-import { CustomFilterCondition } from "igniteui-angular-excel";
-import { ExcelComparisonOperator } from "igniteui-angular-excel";
-import { FormatConditionTextOperator } from "igniteui-angular-excel";
-import { OrderedSortCondition } from "igniteui-angular-excel";
-import { RelativeIndex } from "igniteui-angular-excel";
-import { SortDirection } from "igniteui-angular-excel";
-import { WorkbookColorInfo } from "igniteui-angular-excel";
-```
-
-## Configuring the Gridlines
-The gridlines are used to visually separate the cells in the worksheet. You may show or hide the gridlines and also change their color.
-
-You can show or hide the gridlines using the <ApiLink type="DisplayOptions" member="showGridlines" label="ShowGridlines" /> property of the <ApiLink type="DisplayOptions" /> of the worksheet. The following code demonstrates how you can hide the gridlines in your worksheet:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.showGridlines = false;
-```
-
-You can configure the gridlines' color using the <ApiLink type="DisplayOptions" member="gridlineColor" label="GridlineColor" /> property of the <ApiLink type="DisplayOptions" /> of the worksheet. The following code demonstrates how you can change the gridlines in your worksheet to be red:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.gridlineColor = "Red";
-```
-
-## Configuring the Headers
-The column and row headers are used to visually identify columns and rows. They are also used to visually highlight the currently selected cell or cell region.
-
-You can show or hide the column and row headers using the <ApiLink type="DisplayOptions" member="showRowAndColumnHeaders" label="ShowRowAndColumnHeaders" /> property of the <ApiLink type="DisplayOptions" /> of the worksheet. The following code demonstrates how you can hide the row and column headers:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.showRowAndColumnHeaders = false;
-```
-
-## Configuring Editing of the Worksheet
-By default, the <ApiLink type="Worksheet" /> objects that you save will be editable. You can disable editing of a worksheet by protecting it using the <ApiLink type="Worksheet" /> object's <ApiLink type="Workbook" member="protect" label="Protect" /> method. This method has a lot of nullable `bool` arguments that determine which pieces are protected, and one of these options is to allow editing of objects, which if set to **false** will prevent editing of the worksheet.
-
-The following code demonstrates how to disable editing in your worksheet:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-```
-
-You can also use the <ApiLink type="Worksheet" /> object's <ApiLink type="Workbook" member="protect" label="Protect" /> method to protect a worksheet against structural changes.
-
-When protection is set, you can set the <ApiLink type="IWorksheetCellFormat" /> object's <ApiLink type="IWorksheetCellFormat" member="locked" label="Locked" /> property on individual cells, rows, merged cell regions, or columns to override the worksheet object's protection on those objects. For example, if you need all cells of a worksheet to be read-only except for the cells of one column, you can protect the worksheet and then set the <ApiLink type="IWorksheetCellFormat" /> object's <ApiLink type="IWorksheetCellFormat" member="locked" label="Locked" /> property to **false** on a specific <ApiLink type="WorksheetColumn" /> object. This will allow your users to edit cells within the column while disabling editing of the other cells in the worksheet.
-
-The following code demonstrates how you can do this:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-worksheet.columns(0).cellFormat.locked = false;
-```
-
-## Filtering Worksheet Regions
-Filtering is done by setting a filter condition on a worksheet's <ApiLink type="WorksheetFilterSettings" /> which can be retrieved from the <ApiLink type="Worksheet" /> object's <ApiLink type="Worksheet" member="filterSettings" label="FilterSettings" /> property. Filter conditions are only reapplied when they're added, removed, modified, or when the <ApiLink type="WorksheetFilterSettings" member="reapplyFilters" label="ReapplyFilters" /> method is called on the worksheet. They are not constantly evaluated as data within the region changes.
-
-You can specify the region to apply the filter by using the <ApiLink type="WorksheetFilterSettings" member="setRegion" label="SetRegion" /> method on the <ApiLink type="WorksheetFilterSettings" /> object.
-
-Below is a list of methods and their descriptions that you can use to add a filter to a worksheet:
-
-| Method        | Description |
-| --------------|-------------|
-|<ApiLink type="WorksheetFilterSettings" member="applyAverageFilter" label="ApplyAverageFilter" />|Represents a filter which can filter data based on whether the data is below or above the average of the entire data range.|
-|<ApiLink type="WorksheetFilterSettings" member="applyDatePeriodFilter" label="ApplyDatePeriodFilter" />|Represents a filter which can filter dates in a Month, or quarter of any year.|
-|<ApiLink type="WorksheetFilterSettings" member="applyFillFilter" label="ApplyFillFilter" />|Represents a filter which will filter cells based on their background fills. This filter specifies a single CellFill. Cells of with this fill will be visible in the data range. All other cells will be hidden.|
-|`ApplyFixedValuesFilter`|Represents a filter which can filter cells based on specific, fixed values, which are allowed to display.|
-|<ApiLink type="WorksheetFilterSettings" member="applyFontColorFilter" label="ApplyFontColorFilter" />|Represents a filter which will filter cells based on their font colors. This filter specifies a single color. Cells with this color font will be visible in the data range. All other cells will be hidden.|
-|<ApiLink type="WorksheetFilterSettings" member="applyIconFilter" label="ApplyIconFilter" />|Represents a filter which can filter cells based on their conditional formatting icon.|
-|<ApiLink type="WorksheetFilterSettings" member="applyRelativeDateRangeFilter" label="ApplyRelativeDateRangeFilter" />|Represents a filter which can filter date cells based on dates relative to the when the filter was applied.|
-|<ApiLink type="WorksheetFilterSettings" member="applyTopOrBottomFilter" label="ApplyTopOrBottomFilter" />|Represents a filter which can filter in cells in the upper or lower portion of the sorted values.|
-|<ApiLink type="WorksheetFilterSettings" member="applyYearToDateFilter" label="ApplyYearToDateFilter" />|Represents a filter which can filter in date cells if the dates occur between the start of the current year and the time when the filter is evaluated.|
-|<ApiLink type="WorksheetFilterSettings" member="applyCustomFilter" label="ApplyCustomFilter" />|Represents a filter which can filter data based on one or two custom conditions. These two filter conditions can be combined with a logical "and" or a logical "or" operation.|
-
-You can use the following code snippet as an example to add a filter to a worksheet region:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.filterSettings.setRegion("Sheet1!A1:A10");
-worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage);
-```
-
-## Freezing and Splitting Panes
-You can freeze rows at the top of your worksheet or columns at the left using the freezing panes features. Frozen rows and columns remain visible at all times while the user is scrolling. The frozen rows and columns are separated from the rest of the worksheet by a single, solid line, which cannot be removed.
-
-In order to enable pane freezing, you need to set the <ApiLink type="DisplayOptions" member="panesAreFrozen" label="PanesAreFrozen" /> property of the <ApiLink type="Worksheet" /> object's <ApiLink type="DisplayOptions" /> to **true**. You can then specify the rows or columns to freeze by using the `FrozenRows` and `FrozenColumns` properties of the display options <ApiLink type="DisplayOptions" member="frozenPaneSettings" label="FrozenPaneSettings" />, respectively.
-
-You can also specify the first row in the bottom pane or first column in the right pane using the `FirstRowInBottomPane` and `FirstColumnInRightPane` properties, respectively.
-
-The following code snippet demonstrates how to use the freezing panes features in a worksheet:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.panesAreFrozen = true;
-
-worksheet.displayOptions.frozenPaneSettings.frozenRows = 3;
-worksheet.displayOptions.frozenPaneSettings.frozenColumns = 1;
-
-worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2;
-worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6;
-```
-
-## Setting the Worksheet Zoom Level
-You can change the zoom level for each worksheet independently using the <ApiLink type="WorksheetDisplayOptions" member="magnificationInNormalView" label="MagnificationInNormalView" /> property on the <ApiLink type="Worksheet" /> object's <ApiLink type="DisplayOptions" />. This property takes a value between 10 and 400 and represents the percentage of zoom that you wish to apply.
-
-The following code demonstrates how you can do this:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.magnificationInNormalView = 300;
-```
-
-## Worksheet Level Sorting
-
-Sorting is done by setting a sorting condition on a worksheet level object on either columns or rows. You can sort columns or rows in ascending or descending order.
-
-This is done by specifying a region and sort type to the <ApiLink type="Worksheet" /> object's <ApiLink type="WorksheetSortSettings" /> that can be retrieved using the <ApiLink type="Worksheet" member="sortSettings" label="SortSettings" /> property of the sheet.
-
-The sort conditions in a sheet are only reapplied when sort conditions are added, removed, modified, or when the <ApiLink type="WorksheetFilterSettings" member="reapplySortConditions" label="ReapplySortConditions" /> method is called on the worksheet. Columns or rows will be sorted within the region. "Rows" is the default sort type.
-
-The following code snippet demonstrates how to apply a sort to a region of cells in a worksheet:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending));
-```
-
-## Worksheet Protection
-You can protect a worksheet by calling the <ApiLink type="Workbook" member="protect" label="Protect" /> method on the <ApiLink type="Worksheet" /> object. This method exposes many nullable `bool` parameters that allow you to restrict or allow the following user operations:
-
-- Editing of cells.
-- Editing of objects such as shapes, comments, charts, or other controls.
-- Editing of scenarios.
-- Filtering of data.
-- Formatting of cells.
-- Inserting, deleting, and formatting of columns.
-- Inserting, deleting, and formatting of rows.
-- Inserting of hyperlinks.
-- Sorting of data.
-- Usage of pivot tables.
-
-You can remove worksheet protection by calling the <ApiLink type="Workbook" member="unprotect" label="Unprotect" /> method on the <ApiLink type="Worksheet" /> object.
-
-The following code snippet shows how to enable protection of all of the above-listed user operations:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-```
-
-## Worksheet Conditional Formatting
-
-You can configure the conditional formatting of a <ApiLink type="Worksheet" /> object by using the many "Add" methods exposed on the <ApiLink type="Worksheet" member="conditionalFormats" label="ConditionalFormats" /> collection of that worksheet. The first parameter of these "Add" methods is the `string` region of the worksheet that you would like to apply the conditional format to.
-
-Many of the conditional formats that you can add to your worksheet have a <ApiLink type="IWorksheetCellFormat" /> property that determines the way that the <ApiLink type="WorksheetCell" /> elements should look when the condition in that conditional format holds true. For example, you can use the properties attached to this <ApiLink type="IWorksheetCellFormat" /> property such as <ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" /> and <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> to determine the background and font settings of your cells under a particular conditional format, respectively.
-
-There are a few conditional formats that do not have a <ApiLink type="IWorksheetCellFormat" /> property, as their visualization on the worksheet cell behaves differently. These conditional formats are the <ApiLink type="DataBarConditionalFormat" />, <ApiLink type="ColorScaleConditionalFormat" />, and <ApiLink type="IconSetConditionalFormat" />.
-
-When loading a pre-existing <ApiLink type="Workbook" /> from Excel, the formats will be preserved when that <ApiLink type="Workbook" /> is loaded. The same is true for when you save the <ApiLink type="Workbook" /> out to an Excel file.
-
-The following code example demonstrates usage of conditional formats on a worksheet:
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var color = new Color();
-color.colorString = "Red";
-
-var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
-format.cellFormat.font.colorInfo = new WorkbookColorInfo(color);
-```
-
-## API References
-<ApiLink type="IWorksheetCellFormat" />
-<ApiLink type="ColorScaleConditionalFormat" />
-<ApiLink type="DataBarConditionalFormat" />
-<ApiLink type="DisplayOptions" />
-<ApiLink type="Workbook" />
-<ApiLink type="WorksheetCell" />
-<ApiLink type="WorksheetColumn" />
-<ApiLink type="WorksheetFilterSettings" />
-<ApiLink type="WorksheetSortSettings" />
-<ApiLink type="Worksheet" />
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx
deleted file mode 100644
index 40c9f447b8..0000000000
--- a/docs/angular/src/content/en/components/excel-library-working-with-charts.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: Angular Excel Library| Working with Charts | Infragistics
-description: Use the Infragistics' Angular excel library's chart feature to add visual charting representations of data trends across regions of cells in a worksheet. Visualize Ignite UI for Angular excel data in over 70 chart types!
-keywords: Excel library, charts,  Ignite UI for Angular, Infragistics
-license: commercial
-
-llms:
-  description: "The Infragistics Angular Excel Engine's WorksheetChart functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Working with Charts
-
-The Infragistics Angular Excel Engine's <ApiLink type="WorksheetChart" /> functionality allows you to add visual charting representations of data trends across regions of cells in a worksheet. For example, if you want to see your Excel data in a region of cells visualized as a column, line, or over 70 other chart types, this feature can help you to achieve that.
-
-## Angular Working with Charts Example
-
-<Sample src="/excel/excel-library/working-with-charts" height={500} alt="Angular Working with Charts Example" />
-
-<DocsAside type="info">
-The XLSX format is required. Other formats are not supported at this time.
-</DocsAside>
-
-## Usage
-In order to add a chart to a worksheet, you must use the <ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> method of the worksheet's shapes collection. In this method, you can specify the chart type that you wish to use, the top-left cell, the bottom-right cell, and the percentages of those cells that you wish for the chart to take up.
-
-The <ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> method returns the worksheet chart element to be added to the worksheet. Once you have this, you can use the <ApiLink type="WorksheetChart" member="setSourceData" label="SetSourceData" /> method on the chart to set a cell address of the region of worksheet cells that you wish to use as a data source, as well as whether or not you want to switch the mapping of columns and rows to the X and Y axis.
-
-There are over 70 supported chart types, including `Line`, `Area`, <ApiLink type="Column" />, and `Pie`.
-
-The following code demonstrates how to use the Excel charting feature. The below snippet will add a column chart to between the first cell and the 13th cell in the first row of the worksheet. The source data is then set for the data in the region of A2:M6, switching the mapping of columns and rows for the X and Y axis of the column chart:
-
-```ts
-var chart = ws.shapes().addChart(ChartType.ColumnClustered,
-      ws.rows(0).cells(0), { x: 0, y: 0 },
-      ws.rows(0).cells(12), { x: 100, y: 100 });
-
-chart.setSourceData("A2:M6", true);
-```
-
-## API References
-<ApiLink type="WorksheetChart" />
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx
deleted file mode 100644
index 94380946e2..0000000000
--- a/docs/angular/src/content/en/components/excel-library-working-with-grids.mdx
+++ /dev/null
@@ -1,30 +0,0 @@
----
-title: "Angular Excel Library| Data Spreadsheet | Infragistics"
-description: Use the Excel Library to work with spreadsheet data using Microsoft Excel features. Easily transfer data from excel to your application.
-keywords: Excel library, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook"]
-llms:
-  description: "Explains how to transfer worksheet data into a Angular grid and export grid data to an Excel workbook using the Ignite UI for Angular Excel Library."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Working with Grids
-
-TODO
-
-## Angular Working with Grids Example
-
-<Sample src="/excel/excel-library/working-with-grids" height={500} alt="Angular Working with Grids Example" />
-
-## Usage
-
-The following code demonstrates how to use ... TODO
-
-```ts
-TODO
-```
-
-## API References
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx
deleted file mode 100644
index 4b05bddb99..0000000000
--- a/docs/angular/src/content/en/components/excel-library-working-with-sparklines.mdx
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: "Angular Excel Library| Working with Sparklines | Infragistics"
-description: Use sparkline charts in Infragistics' Angular excel library to visual data trends across a region of cells in your worksheet. View Ignite UI for Angular excel engine tutorials!
-keywords: Excel library, sparkline chart, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Workbook"]
-llms:
-  description: "The Infragistics Angular Excel Library has support for adding sparklines to an Excel Worksheet."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Working with Sparklines
-
-The Infragistics Angular Excel Library has support for adding sparklines to an Excel Worksheet. These can be used to show simple visual representations of data trends across a region of cells of data in your worksheet. For example, if you wanted to see your Excel data across a particular cell region visualized as a simple column or line sparkline chart, this feature can help you to achieve that.
-
-## Angular Working with Sparklines Example
-
-<Sample src="/excel/excel-library/working-with-sparklines" height={500} alt="Angular Working with Sparklines Example" />
-
-## Supported Sparklines
-The following is a list of the supported predefined sparkline types.
-
-- Line
-- Column
-- Stacked (Win/Loss)
-
-The following code demonstrates how to programmatically add Sparklines to a Worksheet via the sparklineGroups collection:
-
-```ts
-var workbook: Workbook;
-var sheet1 = workbook.worksheets().add("Sparklines");
-var sheet2 = workbook.worksheets().add("Data");
-sheet1.sparklineGroups().add(SparklineType.Line, "Sparklines!A1:A1", "Data!A2:A11");
-sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A11");
-workbook.save(workbook, "Sparklines.xlsx");
-```
-
-## API References
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/en/components/excel-library.mdx b/docs/angular/src/content/en/components/excel-library.mdx
deleted file mode 100644
index 0da9c4cef3..0000000000
--- a/docs/angular/src/content/en/components/excel-library.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: "Angular Excel Library| Data Spreadsheet and Table | Infragistics"
-description: Use Infragistics' Angular excel library to work with spreadsheet data using Microsoft Excel features.  Learn how easily you can transfer data from excel to your application using Ignite UI for Angular excel library!
-keywords: Excel library, Ignite UI for Angular, Infragistics, workbook
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "Cell", "Formula"]
-llms:
-  description: "The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like Workbook, Worksheet, Cell, Formula and many more."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Excel Library Overview
-
-The Infragistics Angular Excel Library allows you to work with spreadsheet data using familiar Microsoft® Excel® spreadsheet objects like <ApiLink type="Workbook" />, <ApiLink type="Worksheet" />, <ApiLink type="WorksheetCell" label="Cell" />, <ApiLink type="Formula" /> and many more. The Infragistics Angular Excel Library makes it easy for you to represent the data of your application in an Excel spreadsheet as well as transfer data from Excel into your application.
-
-## Angular Excel Library Example
-
-<Sample src="/excel/excel-library/overview" height={100} alt="Angular Excel Library Example" />
-
-## Dependencies
-When installing the excel package, the core package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-excel
-```
-
-## Component Modules
-
-The Angular excel library requires the following modules:
-
-```ts
-// app.module.ts
-import { IgxExcelModule } from 'igniteui-angular-excel';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxExcelModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Modules Implementation
-
-The Excel Library contains 5 modules that you can use to limit bundle size of your app:
-
-- **IgxExcelCoreModule** – This contains the object model and much of the excel infrastructure
-- **IgxExcelFunctionsModule** – This contains the majority of the functions for formula evaluations, such as Sum, Average, Min, Max, etc. The absence of this module won’t cause any issues with formula parsing if the formula is to be calculated. For example, if you apply a formula like “=SUM(A1:A5)” and ask for the Value of the cell, then you would get a #NAME! error returned. This is not an exception throw – it’s an object that represents a particular error since formulas can result in errors.
-- **IgxExcelXlsModule** – This contains the load and save logic for xls (and related) type files – namely the Excel97to2003 related WorkbookFormats.
-- **IgxExcelXlsxModule** – This contains the load and save logic for xlsx (and related) type files – namely the Excel2007 related and StrictOpenXml WorkbookFormats.
-- **IgxExcelModule** – This references the other 4 modules and so basically ensures that all the functionality is loaded/available.
-
-## Supported Versions of Microsoft Excel
-The following is a list of the supported versions of Excel.**
-
-- Microsoft Excel 97
-
-- Microsoft Excel 2000
-
-- Microsoft Excel 2002
-
-- Microsoft Excel 2003
-
-- Microsoft Excel 2007
-
-- Microsoft Excel 2010
-
-- Microsoft Excel 2013
-
-- Microsoft Excel 2016
-
-<DocsAside type="info">
-The Excel Library does not support the Excel Binary Workbook (.xlsb) format at this time.
-</DocsAside>
-
-## Load and Save Workbooks
-Now that the Excel Library module is imported, next step is to load a workbook.
-
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Workbook" />.
-
-In order to load and save <ApiLink type="Workbook" /> objects, you can utilize the save method of the actual <ApiLink type="Workbook" /> object, as well as its static `Load` method.
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { WorkbookSaveOptions } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { ExcelUtility } from "ExcelUtility";
-
-var workbook = ExcelUtility.load(file);
-ExcelUtility.save(workbook, "fileName");
-```
-
-## Managing Heap
-
-Due to the size of the Excel Library, it's recommended to disable the source map generation.
-
-Modify `angular.json` by setting the `vendorSourceMap` option under architect => build => options and under serve => options:
-
-```ts
-    "architect": {
-        "build": {
-          "builder": "...",
-          "options": {
-            "vendorSourceMap": false,
-            "outputPath": "dist",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-                  // ...
-          },
-              // ...
-        },
-        "serve": {
-          "builder": "...",
-          "options": {
-            "vendorSourceMap": false,
-            "browserTarget": "my-app:build"
-          },
-              // ...
-        },
-        // ...
-      }
-```
-
-## API References
-<ApiLink type="Worksheet" />
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/en/components/excel-utility.mdx b/docs/angular/src/content/en/components/excel-utility.mdx
deleted file mode 100644
index 4ddbc09512..0000000000
--- a/docs/angular/src/content/en/components/excel-utility.mdx
+++ /dev/null
@@ -1,121 +0,0 @@
----
-title: "Angular Excel Library | Excel Utility | Infragistics"
-description: Use Infragistics' Angular excel library to work with spreadsheet data using Microsoft Excel features.  Learn how easily you can transfer data from excel to your application using Ignite UI for Angular excel library!
-keywords: excel library, Ignite UI for Angular, Infragistics, saving files, loading files, WorkbookFormat
-license: commercial
-mentionedTypes: ["Workbook", "WorkbookFormat", "WorkbookSaveOptions"]
-llms:
-  description: "Describes the ExcelUtility helper used to load, save, and convert workbook data with the Ignite UI for Angular Excel Library."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Excel Utility
-
-This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](excel-library.md)
-
-```ts
-import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8"
-import { Workbook } from 'igniteui-angular-excel';
-import { WorkbookFormat } from 'igniteui-angular-excel';
-import { WorkbookSaveOptions } from 'igniteui-angular-excel';
-
-export class ExcelUtility {
-    public static getExtension(format: WorkbookFormat) {
-        switch (format) {
-            case WorkbookFormat.StrictOpenXml:
-            case WorkbookFormat.Excel2007:
-                return ".xlsx";
-            case WorkbookFormat.Excel2007MacroEnabled:
-                return ".xlsm";
-            case WorkbookFormat.Excel2007MacroEnabledTemplate:
-                return ".xltm";
-            case WorkbookFormat.Excel2007Template:
-                return ".xltx";
-            case WorkbookFormat.Excel97To2003:
-                return ".xls";
-            case WorkbookFormat.Excel97To2003Template:
-                return ".xlt";
-        }
-    }
-
-    public static load(file: File): Promise<Workbook> {
-        return new Promise<Workbook>((resolve, reject) => {
-            ExcelUtility.readFileAsUint8Array(file).then((a) => {
-                Workbook.load(a, null, (w) => {
-                    resolve(w);
-                }, (e) => {
-                    reject(e);
-                });
-            }, (e) => {
-                reject(e);
-            });
-        });
-    }
-
-    public static loadFromUrl(url: string): Promise<Workbook> {
-        return new Promise<Workbook>((resolve, reject) => {
-            const req = new XMLHttpRequest();
-            req.open("GET", url, true);
-            req.responseType = "arraybuffer";
-            req.onload = (d) => {
-                const data = new Uint8Array(req.response);
-                Workbook.load(data, null, (w) => {
-                    resolve(w);
-                }, (e) => {
-                    reject(e);
-                });
-            };
-            req.send();
-        });
-    }
-
-    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
-        return new Promise<string>((resolve, reject) => {
-            const opt = new WorkbookSaveOptions();
-            opt.type = "blob";
-
-            workbook.save(opt, (d) => {
-                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
-                const fileName = fileNameWithoutExtension + fileExt;
-                saveAs(d as Blob, fileName);
-                resolve(fileName);
-            }, (e) => {
-                reject(e);
-            });
-        });
-    }
-
-    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
-        return new Promise<Uint8Array>((resolve, reject) => {
-            const fr = new FileReader();
-            fr.onerror = (e) => {
-                reject(fr.error);
-            };
-
-            if (fr.readAsBinaryString) {
-                fr.onload = (e) => {
-                    const rs = (fr as any).resultString;
-                    const str: string = rs != null ? rs : fr.result;
-                    const result = new Uint8Array(str.length);
-                    for (let i = 0; i < str.length; i++) {
-                        result[i] = str.charCodeAt(i);
-                    }
-                    resolve(result);
-                };
-                fr.readAsBinaryString(file);
-            } else {
-                fr.onload = (e) => {
-                    resolve(new Uint8Array(fr.result as ArrayBuffer));
-                };
-                fr.readAsArrayBuffer(file);
-            }
-        });
-    }
-}
-
-```
-
-## API References
-<ApiLink type="WorkbookFormat" />
-<ApiLink type="WorkbookSaveOptions" />
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/en/components/general-changelog-dv.mdx b/docs/angular/src/content/en/components/general-changelog-dv.mdx
deleted file mode 100644
index cbb68a5ee1..0000000000
--- a/docs/angular/src/content/en/components/general-changelog-dv.mdx
+++ /dev/null
@@ -1,616 +0,0 @@
----
-title: "Angular What's New | Ignite UI for Angular | Infragistics"
-description: Learn about new features in the Ignite UI for Angular.
-keywords: Changelog, What's New,  Ignite UI for Angular, Infragistics
-mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "DataChart", "Toolbar", "GeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "RadialGauge", "RadialChart", "Toolbar"]
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Release history for Ignite UI for Angular data visualization components, covering new features, fixes, and breaking changes."
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import { Image } from 'astro:assets';
-import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user-annotation-create.gif';
-import chartdefaults1 from '@xplat-images/chartDefaults1.png';
-import chartdefaults2 from '@xplat-images/chartDefaults2.png';
-import chartdefaults3 from '@xplat-images/chartDefaults3.png';
-import chartdefaults4 from '@xplat-images/chartDefaults4.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Ignite UI for Angular Changelog
-
-All notable changes for each version of Ignite UI for Angular are documented on this page.
-
-<DocsAside type="info">
-This topic discusses changes only for components that are not included in the igniteui-angular package.
-For changes specific to igniteui-angular components, please see CHANGELOG.MD.
-</DocsAside>
-
-- [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master)
-
-## **21.0.1 (March 2026)**
-
-### Enhancements
-
-#### igniteui-angular-charts
-
-- Added `Checkmark` option to the `MarkerType` enum. Use `MarkerType.Checkmark` on a series to display a V-shaped checkmark icon inside a circle. The new `MarkerAutomaticBehavior.Checkmark` enum value allows applying the checkmark shape to all series in the chart, and the `SeriesViewer.CheckmarkMarkerTemplate` property can be used to customize its template.
-- Added `MarkerSize` support on marker-enabled chart series to control marker dimensions in device-independent pixels and reset to template-based sizing with `NaN`.
-
-### Bug Fixes
-
-| Bug Number | Control | Description |
-|------------|---------|-------------|
-| 2189 | IgxDataChart | DataChart skips rendering axis when there are no labels |
-| 3055 | IgxDataPieChart | added missing styling properties for the Others Slice |
-| 38668 | IgxDataTooltipLayer | TitleTextColor is overridden when chart's TitleTextColor is used |
-| 40238 | Excel | fixed Excel Formula parser - Workbook.Load() throwing a Excel.FormulaParseException|
-| 41167 | Excel | Object's Formulas are not round-tripped - Added Excel support for round tripping the camera tool |
-| 41419 | Excel | Saving a VBA Signed Excel file does not keep a signature/certificate. |
-| 41594 | IgxDataChart | AssigningCategoryStyle args.GetItems is null or not working to update items in the fragment series. |
-
-### Enhancements
-
-### igniteui-angular-charts
-
-- Added `RangeBarSeries` support for horizontal range rendering in `IgxDataChart`.
-
-## **21.0.0 (January 2026)**
-
-### Enhancements
-
-### igniteui-angular-charts
-
-Added OthersCategoryBrush and OthersCategoryOutline to DataPieChart and ProportionalCategoryAngleAxis
-
-### General
-
-- Angular 21 support.
-
-## **20.2.1 (December 2025)**
-
-### Bug Fixes
-
-| Bug Number | Control | Description |
-|------------|---------|-------------|
-|33808|IgxDataChart|The scale set for IntervalType Ticks in TimeAxisInterval is not displayed|
-|34255|IgxDataChart|0.00001 scale tick marks are displayed overlapping each other|
-|38510|IgxDataChart|AssigningCategoryStyle event support for Stacked Series|
-
-### Enhancements
-
-#### Charts
-
-- Added LabelFormatOverride event to TimeXAxisLabelFormat so you can now override the formatting with an event at all time-formatting levels on the TimeXAxis.
-
-- Adjusted the schema generation to account for more items to make it more likely to find valid values for properties.
-
-## **20.2.0 (November 2025)**
-
-### igniteui-angular-charts (Charts)
-
-#### <Badge variant="preview" /> User Annotations
-
-In Ignite UI for Angular, you can now annotate the <ApiLink type="DataChart" /> with slice, strip, and point annotations at runtime using the new user annotations feature. This allows the end user to add more details to the plot such as calling out single important events such as company quarter reports by using the slice annotation or events that have a duration by using the strip annotation. You can also call out individual points on the plotted series by using the point annotation or any combination of these three.
-
-This is directly integrated with the available tools of the <ApiLink type="Toolbar" />.
-
-<Image src={dataChartUserAnnotationCreate} alt="Angular user-annotation-create" class="responsive-img" />
-
-#### <Badge variant="preview" /> Collision Detection for Axis Annotations
-
-Ability for axis annotations to automatically detect collisions and truncate to fit better. To enable this feature you must set the following properties:
-
-- <ApiLink type="CategoryAngleAxis" member="shouldAvoidAnnotationCollisions" label="ShouldAvoidAnnotationCollisions" />
-- <ApiLink type="CategoryAngleAxis" member="shouldAutoTruncateAnnotations" label="ShouldAutoTruncateAnnotations" />
-
-### igniteui-angular-maps (Geographic Map)
-
-- Azure Map Imagery is now RTM.
-
-### Bug Fixes
-
-| Bug Number | Control | Description |
-|------------|---------|-------------|
-|40136|Excel Library|FormulaParseException exception when loading an Excel workbook|
-|40262|IgxSpreadsheet|#Circularity! is displayed when there are warnings. Request to match Excel - display a value eg. 0 instead|
-|40458|IgxSpreadsheet|When using Arial font, the igx-spreadsheet cuts off text in the cells|
-|40490|IgxDatePicker|Inputs by Autofill won't give any effects for a date picker|
-
-## **20.1.0 (September 2025)**
-
-### igniteui-angular-maps (Geographic Map)
-
-#### <Badge variant="preview" /> Azure Map Imagery Support
-
-The <ApiLink type="IgxGeographicMap" /> now supports Azure-based map imagery, allowing developers to display detailed, dynamic maps across multiple application types. You can combine multiple map layers, visualize geographic data, and create interactive mapping experiences with ease.
-
-Note: Support for Bing Maps imagery is being phased out. Existing enterprise keys can still be used to access Bing Maps, ensuring your current applications continue to function while you transition to Azure maps.
-
-Explore some of the publicly available [Azure maps here](https://azure.microsoft.com/en-us/products/azure-maps).
-
-### igniteui-angular-charts (Charts)
-
-#### <Badge variant="preview" /> New Axis Label Events
-
-The following events have been added to the <ApiLink type="IgxDataChart" /> to allow you to detect different operations on the axis labels:
-
-- `LabelMouseDown`
-- `LabelMouseUp`
-- `LabelMouseEnter`
-- `LabelMouseLeave`
-- `LabelMouseMove`
-- `LabelMouseClick`
-
-#### <Badge variant="preview" /> Companion Axis
-
-Added `CompanionAxis` properties to the X and Y axis that allow you to quickly create a clone of an existing axis. When enabled using the <ApiLink type="CategoryAngleAxis" member="companionAxisEnabled" label="CompanionAxisEnabled" /> property, this will default the cloned axis to the opposite position of the chart and you can then configure that axes' properties.
-
-#### <Badge variant="preview" /> RadialPieSeries Inset Outlines
-
-There is a new property called <ApiLink type="DataPieChart" member="useInsetOutlines" label="UseInsetOutlines" /> to control how outlines on the <ApiLink type="RadialPieSeries" /> are rendered. Setting this value to **true** will inset the outlines within the slice shape, whereas a **false** (default) value will place the outlines half-in half-out along the edge of the slice shape.
-
-**Breaking Changes**
-
-- A fix was made due to an issue where the <ApiLink type="ChartMouseEventArgs" member="plotAreaPosition" label="PlotAreaPosition" /> and <ApiLink type="ChartMouseEventArgs" member="chartPosition" label="ChartPosition" /> properties on <ApiLink type="ChartMouseEventArgs" /> class were reversed. This will change the values that <ApiLink type="ChartMouseEventArgs" member="plotAreaPosition" label="PlotAreaPosition" /> and <ApiLink type="ChartMouseEventArgs" member="chartPosition" label="ChartPosition" /> return.
-
-### Enhancements
-
-#### IgxBulletGraph
-
-- <Badge variant="preview" /> Added new <ApiLink type="LinearGauge" member="labelsVisible" label="LabelsVisible" /> property
-
-#### Charts
-
-- New properties added to the DataToolTipLayer, ItemToolTipLayer, and CategoryToolTipLayer to aid in styling: `ToolTipBackground`, `ToolTipBorderBrush`, and `ToolTipBorderThickness`
-
-- New properties added to the DataLegend to aid in styling: <ApiLink type="DataLegend" member="contentBackground" label="ContentBackground" />, <ApiLink type="DataLegend" member="contentBorderBrush" label="ContentBorderBrush" />, and <ApiLink type="DataLegend" member="contentBorderThickness" label="ContentBorderThickness" />. The <ApiLink type="DataLegend" member="contentBorderBrush" label="ContentBorderBrush" /> and <ApiLink type="DataLegend" member="contentBorderThickness" label="ContentBorderThickness" /> default to transparent and 0 respectively, so in order to see these borders, you will need to set these properties.
-
-- Added a new property to <ApiLink type="ChartMouseEventArgs" /> called <ApiLink type="ChartMouseEventArgs" member="worldPosition" label="WorldPosition" /> that provides the world relative position of the mouse. This position will be a value between 0 and 1 for both the X and Y axis within the axis space.
-
-- Added <ApiLink type="SeriesViewer" member="highlightingFadeOpacity" label="HighlightingFadeOpacity" /> to <ApiLink type="SeriesViewer" /> and <ApiLink type="DomainChart" />. This allows you to configure the opacity applied to highlighted series.
-
-- Expose `CalloutLabelUpdating` event for domain charts.
-
-#### IgxLinearGauge
-
-- <Badge variant="preview" /> Added new <ApiLink type="LinearGauge" member="labelsVisible" label="LabelsVisible" /> property
-
-### Bug Fixes
-
-| Bug Number | Control | Description |
-|------------|---------|-------------|
-|31624 | <ApiLink type="IgxCategoryChart" /> | Resizing the containing window of the <ApiLink type="IgxCategoryChart" /> causes the chart to fail to render the series|
-|27304 | <ApiLink type="IgxDataChart" /> | Zoom rectangle is not positioned the same as the background rectangle|
-|37930 | <ApiLink type="IgxDataChart" /> | Data Annotation Overlay Text Color not working|
-|30600 | <ApiLink type="IgxDoughnutChart" /> | No textStyle property for either the chart or series (pie chart has this)|
-|38231 | `IgxGrid` | Unpinned column does not return to the original position if hidden columns exist|
-|33861 | Excel Library | Adding line chart corrupts excel File for German culture|
-
-## **20.0.1 (August 2025)**
-
-### Bug Fixes
-
-| Bug Number | Control | Description      |
-|------------|---------|------------------|
-|36448 | <ApiLink type="IgxRadialGauge" /> | Radial label format properties do not work. (eg. Title, SubTitles)|
-
-### igniteui-angular-charts (Charts)
-
-- Added <Badge variant="new" /> `MaximumExtent` and `MaximumExtentPercentage` properties for use with axis labels.
-
-## **20.0.0 (June 2025)**
-
-- Angular 20 support.
-
-## **19.1.0 (April 2025)**
-
-### igniteui-angular-maps (Geographic Map)
-
-<DocsAside type="info">
-As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028.
-For more details please visit:
-</DocsAside>
-
-[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-### igniteui-angular-charts (Charts)
-
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
-  - Data Annotation Band Layer
-  - Data Annotation Line Layer
-  - Data Annotation Rect Layer
-  - Data Annotation Slice Layer
-  - Data Annotation Strip Layer
-
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
-
-- <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
-
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
-
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
-
-### igniteui-angular-dashboards (Dashboards)
-
-- The <ApiLink type="IgxDashboardTile" /> now supports propagating the aggregations from its DataGrid view to the chart visualization such as sorting, grouping, filtering and selection. This is currently supported by binding the <ApiLink type="DataSource" /> of the <ApiLink type="IgxDashboardTile" /> to an instance of `IgxLocalDataSource`.
-
-### igniteui-angular
-
-**Breaking Changes**
-
-- The 'igniteui-angular-grids' package has been renamed to 'igniteui-angular-data-grids'.
-
-### Enhancements
-
-#### Toolbar
-- Value layers added from the toolbar now appear on the legend.
-- The zoom reset tool has been moved to the zoom drop-down.
-
-#### Data Pie Chart
-- The chart now exposes a `GetOthersContext()` method. This will return the contents of the "others" slice.
-
-### Bug Fixes
-
-| Bug Number | Control | Description      |
-|------------|---------|------------------|
-|37023 | <ApiLink type="IgxDataChart" /> | Tooltips are cut-off/offscreen if overflow hidden is set.|
-|37685 | <ApiLink type="IgxSpreadsheet" /> | Poor rendering of numbers formatted with Arial font.|
-|37244 | Excel Library | Custom Data Validation is not working.|
-
-## **19.0.1 (February 2025)**
-
-### Enhancements
-
-#### Toolbar
-
-- Added new `GroupHeaderTextStyle` property to <ApiLink type="Toolbar" /> and <ApiLink type="ToolPanel" />. If set, it will apply to all <ApiLink type="ToolActionGroupHeader" /> actions.
-- Added new property on <ApiLink type="ToolAction" /> called <ApiLink type="SeriesViewer" member="titleHorizontalAlignment" label="TitleHorizontalAlignment" /> which controls the horizontal alignment of the title text.
-- Added new property on <ApiLink type="ToolActionSubPanel" /> called <ApiLink type="ToolPanel" member="itemSpacing" label="ItemSpacing" /> which controls the spacing between items inside the panel.
-
-### Bug Fixes
-
-The following table lists the bug fixes made for the Ignite UI for Angular toolset for this release:
-
-| Bug Number | Control | Description      |
-|------------|---------|------------------|
-|30286 | <ApiLink type="IgxDataChart" /> | Bubble Series tooltip content is switched to that of nearby bubble data in clicking a bubble|
-|32906 | <ApiLink type="IgxDataChart" /> | <ApiLink type="IgxDataChart" /> is showing two xAxis on the top|
-|33605 | <ApiLink type="IgxDataChart" /> | ScatterLineSeries is not showing the color of the line correctly in the legend|
-|35498 | <ApiLink type="IgxDataChart" /> | Tooltips for the series specified in IncludedSeries are not displayed|
-|34776 | <ApiLink type="IgxDataChart" /> | Repeatedly showing and hiding the <ApiLink type="IgxDataChart" /> causes memory leakage in JS Heap|
-|34053 | <ApiLink type="IgxRadialGauge" /> | The position of the scale label is shifted|
-|35496 | <ApiLink type="IgxSpreadsheet" /> | Error when setting styles in Excel with images|
-|36176 | Excel Library | Exception occurs when loading an Excel workbook that has a LET function|
-|36379 | Excel Library | Colors with any alpha channel in an excel workbook fail to load|
-|26218 | Excel Library | Chart's plot area right margin becomes narrower and fill pattern and fill foreground are gone just by loading an Excel file|
-|35495 | Excel Library | Pictures in cells are lost when a template file is loaded|
-|34083 | Excel Library | TextOperatorConditionalFormat's is not loaded/saved properly if the text contains = in a template Excel file|
-
-## **19.0.0 (January 2025)**
-
-- Angular 19 support.
-
-## **18.2.0 (December 2024)**
-
-### igniteui-angular-charts (Charts)
-
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
-
-### igniteui-angular-charts (Inputs)
-
-- <Badge variant="preview" /> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime.
-
-## **18.1.0 (September 2024)**
-
-- [Data Pie Chart](charts/types/data-pie-chart.md) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
-
-- <Badge variant="new" /> [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
-
-- <ApiLink type="Toolbar" />
-
-  - New ToolActionCheckboxList
-        A new CheckboxList ToolAction that displays a collection of items with checkboxes for selecting. A grid inside ToolAction CheckboxList grows in height up to 5 items, then a scrollbar is displayed.
-        Requires IgxCheckboxListModule to be registered.
-
-  - New Filtering Support
-
-  - Axis Field Changes
-        New default IconMenu in Toolbar when targeting CategoryChart.
-        Label fields are mapped to the X-axis and Value fields are mapped to the Y-axis.
-        Target chart reacts in realtime to changes made. IconMenu is hidden when chart has no ItemsSource set.
-
-## **18.0.0 (June 2024)**
-
-- Angular 18 support.
-
-### igniteui-angular-charts (Charts)
-
-- [Data Legend Grouping](charts/features/chart-data-legend.md#angular-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#angular-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
-
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
-
-- [Treemap Highlighting](charts/types/treemap-chart.md#angular-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
-
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#angular-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
-
-- <ApiLink type="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
-
-### igniteui-angular-gauges (Gauges)
-
-- <ApiLink type="RadialGauge" />
-  - New label for the highlight needle. <ApiLink type="RadialGauge" member="highlightLabelText" label="HighlightLabelText" /> and <ApiLink type="RadialGauge" member="highlightLabelSnapsToNeedlePivot" label="HighlightLabelSnapsToNeedlePivot" /> and many other styling related properties for the HighlightLabel were added.
-
-## **17.3.0 (March 2024)**
-
-### igniteui-angular-charts
-
-- New Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="InitialFilter" /> property. Apply filter expressions to filter the chart data to a subset of records. Can be used for drill down large data.
-
-- `RadialChart`
-  - New Label Mode
-        The <ApiLink type="CategoryAngleAxis" /> for the now exposes a <ApiLink type="CategoryAngleAxis" member="labelMode" label="LabelMode" /> property that allows you to further configure the location of the labels. This allows you to toggle between the default mode by selecting the `Center` enum, or use the new mode, `ClosestPoint`, which will bring the labels closer to the circular plot area.
-
-### igniteui-angular-gauges
-
-- <ApiLink type="RadialGauge" />
-  - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
-  - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
-- <ApiLink type="LinearGauge" />
-  - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
-- <ApiLink type="BulletGraph" />
-  - The Performance bar will now reflect a difference between the value and new <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> when the <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> is applied to the 'Overlay' setting. The highlight value will show a filtered/subset completed measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
-
-## **17.2.0 (January 2024)**
-
-### igniteui-angular-charts (Charts)
-
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
-
-## **17.0.0 (November 2023)**
-
-### igniteui-angular - Toolbar - <Badge variant="preview" />
-
-- Save tool action has been added to save the chart to an image via the clipboard.
-- Vertical orientation has been added via the toolbar's <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
-- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
-
-## **16.1.0 (June 2023)**
-
-### New Components
-
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
-
-### igniteui-angular-charts (Charts)
-
-- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
-
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart.
-
-## **16.0.0 (May 2023)**
-- Angular 16 support.
-
-## **15.0.0 (December 2022)**
-- Angular 15 support.
-
-## **14.2.0 (November 2022)**
-
-Added significant improvements to default behaviors, and refined the Category Chart API to make it easier to use. These new chart improvements include:
-
-- Responsive layouts for horizontal label rotation based on browser / screen size.
-- Enhanced rendering for rounded labels on all platforms.
-- Added marker properties to StackedFragmentSeries.
-- Added <ApiLink type="SeriesViewer" member="shouldPanOnMaximumZoom" label="ShouldPanOnMaximumZoom" /> property.
-- New Category Axis Properties:
-  - ZoomMaximumCategoryRange
-  - ZoomMaximumItemSpan
-  - ZoomToCategoryRange
-  - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
-  - InitialSortDescriptions
-  - InitialSorts
-  - SortDescriptions
-  - InitialGroups
-  - InitialGroupDescriptions
-  - GroupDescriptions
-  - InitialSummaries
-  - InitialSummaryDescriptions
-  - SummaryDescriptions
-  - InitialGroupSortDescriptions
-  - GroupSorts
-  - GroupSortDescriptions
-
-The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
-
-## **13.2.0 (June 2022)**
-### igniteui-angular-charts (Charts)
-
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
-- Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="DataPieChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="DataPieChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="DataPieChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
-- Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
-- New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
-- New corner radius properties added for Annotation Layers; used to round-out the corners of each of the callouts. Note, a corner radius has now been added by default.
-  - <ApiLink type="CalloutLayer" member="calloutCornerRadius" label="CalloutCornerRadius" /> for CalloutLayer
-  - <ApiLink type="FinalValueLayer" member="axisAnnotationBackgroundCornerRadius" label="AxisAnnotationBackgroundCornerRadius" /> for FinalValueLayer
-  - <ApiLink type="CrosshairLayer" member="xAxisAnnotationBackgroundCornerRadius" label="XAxisAnnotationBackgroundCornerRadius" /> and <ApiLink type="CrosshairLayer" member="yAxisAnnotationBackgroundCornerRadius" label="YAxisAnnotationBackgroundCornerRadius" /> for CrosshairLayer
-- New <ApiLink type="SeriesViewer" member="horizontalViewScrollbarMode" label="HorizontalViewScrollbarMode" /> and <ApiLink type="SeriesViewer" member="verticalViewScrollbarMode" label="VerticalViewScrollbarMode" /> enumeration to enable scrollbars in various ways. When paired with <ApiLink type="XYChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> or <ApiLink type="XYChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" />, you'll be able to persist or fade-in and out the scrollbars along the axes to navigate the chart.
-- New <ApiLink type="NumericXAxis" member="favorLabellingScaleEnd" label="FavorLabellingScaleEnd" />, determines whether the axis should favor emitting a label at the end of the scale. Only compatible with numeric axes (e.g. <ApiLink type="NumericXAxis" />, <ApiLink type="NumericYAxis" />, `PercentChangeAxis`).
-- New <ApiLink type="CategoryChart" member="isSplineShapePartOfRange" label="IsSplineShapePartOfRange" /> determines whether to include the spline shape in the axis range requested of the axis.
-- New <ApiLink type="CategoryChart" member="xAxisMaximumGap" label="XAxisMaximumGap" />, determines the maximum allowed value for the plotted series when using <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" />. The gap determines the amount of space between columns or bars of plotted series.
-- New <ApiLink type="CategoryChart" member="xAxisMinimumGapSize" label="XAxisMinimumGapSize" />, determines the minimum allowed pixel-based value for the plotted series when using <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> to ensure there is always some spacing between each category.
-
-## **13.1.0 (November 2021)**
-
-<DocsAside type="info">
-Please ensure package "lit-html": "^2.0.0" or newer is added to your project for optimal compatibility.
-</DocsAside>
-
-### igniteui-angular-charts (Charts)
-
-This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
-
-- Changed <ApiLink type="XYChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> property's type to **YAxisLabelLocation** from **AxisLabelLocation** in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Changed <ApiLink type="XYChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property's type to **XAxisLabelLocation** from **AxisLabelLocation** in <ApiLink type="FinancialChart" />
-- Added <ApiLink type="XYChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property to <ApiLink type="CategoryChart" />
-- Added support for representing geographic series of <ApiLink type="GeographicMap" /> in a legend
-- Added crosshair lines by default in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Added crosshair annotations by default in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Added final value annotation by default in <ApiLink type="FinancialChart" />
-- Added new properties in Category Chart and Financial Chart:
-  - <ApiLink type="XYChart" member="crosshairsLineThickness" label="CrosshairsLineThickness" /> and other properties for customizing crosshairs lines
-  - <ApiLink type="XYChart" member="crosshairsAnnotationXAxisBackground" label="CrosshairsAnnotationXAxisBackground" /> and other properties for customizing crosshairs annotations
-  - <ApiLink type="XYChart" member="finalValueAnnotationsBackground" label="FinalValueAnnotationsBackground" /> and other properties for customizing final value annotations
-  - <ApiLink type="XYChart" member="areaFillOpacity" label="AreaFillOpacity" /> that allow changing opacity of series fill (e.g. Area chart)
-  - <ApiLink type="XYChart" member="markerThickness" label="MarkerThickness" /> that allows changing thickness of markers
-- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
-  - <ApiLink type="SeriesViewer" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> that allows which marker type is assigned to multiple series in the same chart
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> for setting badge shape of all series represented in a legend
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> for setting badge complexity on all series in a legend
-- Added new properties in Series in Data Chart and Geographic Map:
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> for setting badge shape on specific series represented in a legend
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> for setting badge complexity on specific series in a legend
-- Changed default vertical crosshair line stroke from <span style="color:#000000">#000000</span> to <span style="color:#BBBBBB">#BBBBBB</span> in category chart and series
-- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's <ApiLink type="SeriesViewer" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> property to `SmartIndexed` enum value
-- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> property to `MatchSeries` enum value
-- Changed color palette of series and markers displayed in all charts to improve accessibility
-
-| Old brushes/outlines | New outline/brushes |
-| -------------------- | ------------------- |
-| <span style="color:#8BDC5C">#8BDC5C</span> <br /><span style="color:#8B5BB1">#8B5BB1</span> <br /><span style="color:#6DB1FF">#6DB1FF</span> <br /><span style="color:#F8A15F">#F8A15F</span> <br /><span style="color:#EE5879">#EE5879</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#F7D262">#F7D262</span> <br /><span style="color:#8CE7D9">#8CE7D9</span> <br /><span style="color:#E051A9">#E051A9</span> <br /><span style="color:#A8A8B7">#A8A8B7</span> | <span style="color:#8BDC5C">#8BDC5C</span> <br /><span style="color:#8961A9">#8961A9</span> <br /><span style="color:#6DB1FF">#6DB1FF</span> <br /><span style="color:#82E9D9">#82E9D9</span> <br /><span style="color:#EA3C63">#EA3C63</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#F8CE4F">#F8CE4F</span> <br /><span style="color:#A8A8B7">#A8A8B7</span> <br /><span style="color:#E051A9">#E051A9</span> <br /><span style="color:#FF903B">#FF903B</span> <br /> |
-
-## **11.2.0 (April 2021)**
-### igniteui-angular-charts (Charts)
-
-This release introduces several new and improved visual design and configuration options for all of the chart components, e.g. <ApiLink type="DataChart" />, <ApiLink type="CategoryChart" />, and <ApiLink type="FinancialChart" />.
-
-- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
-- Changed Scatter High Density series’ colors for heat min property from <span style="color:#8a5bb1">#8a5bb1</span> to <span style="color:#000000">#000000</span>
-- Changed Scatter High Density series’ colors for heat max property from <span style="color:#ee5879">#ee5879</span> to <span style="color:#ee5879">#ee5879</span>
-- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from <span style="color:#C62828">#C62828</span> to <span style="color:#ee5879">#ee5879</span>
-- Changed marker's thickness to 2px from 1px
-- Changed marker's fill to match the marker's outline for <ApiLink type="PointSeries" />, <ApiLink type="BubbleSeries" />, <ApiLink type="ScatterSeries" />, <ApiLink type="PolarScatterSeries" />. You can use set <ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> property to Normal to undo this change
-- Compressed labelling for the <ApiLink type="TimeXAxis" /> and <ApiLink type="OrdinalTimeXAxis" />
-- New Marker Properties:
-  - series.<ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> - Can be set to `MatchMarkerOutline` so the marker depends on the outline
-  - series.<ApiLink type="XYChart" member="markerFillOpacity" label="MarkerFillOpacity" /> - Can be set to a value 0 to 1
-  - series.<ApiLink type="XYChart" member="markerOutlineMode" label="MarkerOutlineMode" /> - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
-- New Series Property:
-  - series.<ApiLink type="XYChart" member="outlineMode" label="OutlineMode" /> - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
-- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the <ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" />, listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginLeft" label="PlotAreaMarginLeft" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginTop" label="PlotAreaMarginTop" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginRight" label="PlotAreaMarginRight" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginBottom" label="PlotAreaMarginBottom" />
-  - chart.<ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" />
-- New Highlighting Properties
-  - chart.<ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> - Sets whether hovered or non-hovered series to fade, brighten
-  - chart.<ApiLink type="SeriesViewer" member="highlightingBehavior" label="HighlightingBehavior" /> - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
-  - Note, in previous releases the highlighting was limited to fade on hover.
-- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
-- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
-- Added support for overriding the data source of individual stack fragments within a stacked series
-- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series
-- Added support to automatically sync the vertical zoom to the series content
-- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed
-- Redesigned color palette of series and markers:
-
-| Old brushes/outlines | New outline/brushes |
-| -------------------- | ------------------- |
-| <span style="color:#7446B9">#7446B9</span> <br /><span style="color:#9FB328">#9FB328</span> <br /><span style="color:#F96232">#F96232</span> <br /><span style="color:#2E9CA6">#2E9CA6</span> <br /><span style="color:#DC3F76">#DC3F76</span> <br /><span style="color:#FF9800">#FF9800</span> <br /><span style="color:#3F51B5">#3F51B5</span> <br /><span style="color:#439C47">#439C47</span> <br /><span style="color:#795548">#795548</span> <br /><span style="color:#9A9A9A">#9A9A9A</span> | <span style="color:#8bdc5c">#8bdc5c</span> <br /><span style="color:#8b5bb1">#8b5bb1</span> <br /><span style="color:#6db1ff">#6db1ff</span> <br /><span style="color:#f8a15f">#f8a15f</span> <br /><span style="color:#ee5879">#ee5879</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#f7d262">#f7d262</span> <br /><span style="color:#8ce7d9">#8ce7d9</span> <br /><span style="color:#e051a9">#e051a9</span> <br /><span style="color:#a8a8b7">#a8a8b7</span> <br /> |
-
-for example:
-
-|   |   |
-|---|---|
-| <Image src={chartdefaults1} alt="chartDefaults1" class="responsive-img" /> | <Image src={chartdefaults2} alt="chartDefaults2" class="responsive-img" /> |
-| <Image src={chartdefaults3} alt="chartDefaults3" class="responsive-img" /> | <Image src={chartdefaults4} alt="chartDefaults4" class="responsive-img" /> |
-
-#### Chart Legend
-
-- Added horizontal <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property to ItemLegend that can be used with Bubble, Donut, and Pie Chart
-- Added <ApiLink type="SeriesViewer" member="legendHighlightingMode" label="LegendHighlightingMode" /> property - Enables series highlighting when hovering over legend items
-
-### igniteui-angular-maps (GeoMap)
-
-<DocsAside type="info">
-These features are CTP
-</DocsAside>
-
-- Added support for wrap around display of the map (scroll infinitely horizontally)
-- Added support for shifting display of some map series while wrapping around the coordinate origin
-- Added support for highlighting of the shape series
-- Added support for some annotation layers for the shape series
-
-## **8.2.12**
-
-- Changed Import Statements
-
-Import statements have been simplified to use just package names instead of full paths to API classes and enums.
-
-<DocsAside type="info">
-These breaking changes were introduce in these packages and components only:
-</DocsAside>
-
-| Affected Packages | Affected Components |
-| ------------------|---------------------|
-| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a> | [Excel Library](excel-library.md)  |
-| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
-| <a href="https://www.npmjs.com/package/igniteui-angular-core/v/8.2.12" target="_blank">igniteui-angular-core</a> | all classes and enums  |
-
-- Code After Changes
-
-Now, you need to use just package names instead of full paths to API classes and enums.
-
-Please also note that the name of the Data Grid component and its corresponding modules have also changed.
-
-```ts
-// gauges:
-import { IgxLinearGauge } from "igniteui-angular-gauges";
-import { IgxLinearGaugeModule } from "igniteui-angular-gauges";
-import { IgxLinearGraphRange } from "igniteui-angular-gauges";
-import { IgxRadialGauge } from 'igniteui-angular-gauges}';
-import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
-import { IgxRadialGaugeRange } from 'igniteui-angular-gauges';
-import { SweepDirection } from 'igniteui-angular-core';
-// charts:
-import { IgxFinancialChartComponent } from "igniteui-angular-charts";
-import { IgxFinancialChartModule } from "igniteui-angular-charts";
-import { IgxDataChartComponent } from "igniteui-angular-charts";
-import { IgxDataChartCoreModule } from "igniteui-angular-charts";
-// maps:
-import { IgxGeographicMapComponent } from "igniteui-angular-maps";
-import { IgxGeographicMapModule } from "igniteui-angular-maps";
-```
-
-- Code Before Changes
-
-Before, you had to import using full paths to API classes and enums:
-
-```ts
-// gauges:
-import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component';
-import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module';
-import { IgxLinearGraphRange } from 'igniteui-angular-gauges/ES5/igx-linear-graph-range';
-
-import { IgxRadialGaugeComponent } from "igniteui-angular-gauges/ES5/igx-radial-gauge-component";
-import { IgxRadialGaugeModule } from "igniteui-angular-gauges/ES5/igx-radial-gauge-module";
-import { IgxRadialGaugeRange } from "igniteui-angular-gauges/ES5/igx-radial-gauge-range";
-import { SweepDirection } from "igniteui-angular-core/ES5/SweepDirection";
-
-// charts:
-import { IgxFinancialChartComponent } from "igniteui-angular-charts/ES5/igx-financial-chart-component";
-import { IgxFinancialChartModule } from "igniteui-angular-charts/ES5/igx-financial-chart-module";
-import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component";
-import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
-
-// maps:
-import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component";
-import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module";
-```
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
deleted file mode 100644
index 05e8c16bc1..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-data-csv.mdx
+++ /dev/null
@@ -1,127 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding CSV Data | Infragistics"
-description: Learn how to use Infragistics' Angular map to display data that contains geographic locations from view models or geographic locations loaded from CSV files. View Ignite UI for Angular map demos!
-keywords: "Angular map, plot data, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicHighDensityScatterSeries"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "With the Ignite UI for Angular map component, you can plot geographic data loaded from various file types."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding CSV Files with Geographic Locations
-
-With the Ignite UI for Angular map component, you can plot geographic data loaded from various file types. For example, you can load geographic locations from a comma separated values (CSV) file.
-
-## Angular Binding CSV Files with Geographic Locations Example
-
-<Sample src="/maps/geo-map/binding-data-csv" height={500} alt="Angular Binding CSV Files with Geographic Locations Example" />
-
-## Data Example
-Here is an example of data from CSV file:
-
-```csv
-City,Lat,Lon,State,Code,County,Density,Population
-New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
-Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
-```
-
-## Code Snippet
-The following code loads and binds <ApiLink type="GeographicHighDensityScatterSeries" /> in the map component to an array of objects created from loaded CSV file with geographic locations.
-
-```html
-<div class="sampleRoot" >
-<igx-geographic-map #map
-    width="700px"
-    height="500px"
-    zoomable="true" >
-</igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            County: {{item.county}}
-        </span>
-    <br/>
-        <span>
-            Population: {{item.density}} K
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-geographic-csv_files",
-  styleUrls: ["./map-binding-geographic-csv_files.component.scss"],
-  templateUrl: "./map-binding-geographic-csv_files.component.html"
-})
-
-export class MapBindingDataCsvComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.componentDidMount();
-    }
-
-    public componentDidMount() {
-        // fetching JSON data with geographic locations from public folder
-        fetch("assets/Data/UsaCities.csv")
-            .then((response) => response.text())
-            .then((data) => this.onDataLoaded(data));
-    }
-
-    public onDataLoaded(csvData: string) {
-        const csvLines = csvData.split("\n");
-
-        // parsing CSV data and creating geographic locations
-        const geoLocations: any[] = [];
-        for (let i = 1; i < csvLines.length; i++) {
-            const columns = csvLines[i].split(",");
-            const location = {
-                code: columns[4],
-                county: columns[5],
-                density: Number(columns[6]),
-                latitude:  Number(columns[1]),
-                longitude: Number(columns[2]),
-                name:  columns[0],
-                population: Number(columns[7]),
-                state: columns[3]
-            };
-            geoLocations.push(location);
-        }
-
-        // creating HD series with loaded data
-        const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
-        geoSeries.dataSource = geoLocations;
-        geoSeries.latitudeMemberPath  = "latitude";
-        geoSeries.longitudeMemberPath = "longitude";
-        geoSeries.heatMaximumColor = "Red";
-        geoSeries.heatMinimumColor = "Black";
-        geoSeries.heatMinimum = 0;
-        geoSeries.heatMaximum = 5;
-        geoSeries.pointExtent = 1;
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.mouseOverEnabled = true;
-
-        // adding symbol series to the geographic amp
-        this.map.series.add(geoSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicHighDensityScatterSeries" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
deleted file mode 100644
index 0db4228eea..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-data-json-points.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding JSON Files | Infragistics"
-description: Learn how to use Infragistics' Angular map to display data that contains geographic locations from view models or geographic locations loaded from JSON files. View Ignite UI for Angular map demos!
-keywords: "Angular map, JSON files, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "With the Ignite UI for Angular map, you can plot geographic data loaded from various file types."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding JSON Files with Geographic Locations
-
-With the Ignite UI for Angular map, you can plot geographic data loaded from various file types. For example, you can load geographic locations from JavaScript Object Notation (JSON) file.
-
-## Angular Binding JSON Files with Geographic Locations Example
-
-<Sample src="/maps/geo-map/binding-data-json-points" height={500} alt="Angular Binding JSON Files with Geographic Locations Example" />
-
-## Data Example
-Here is an example of data from JSON file:
-
-```json
-[
-   { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
-   { "name": "Sydney Creek",  "lat": -16.3,     "lon": 128.95 },
-   { "name": "Mount Sydney",  "lat": -21.39864, "lon": 121.193 },
- // ...
-]
-```
-
-## Code Snippet
-The following code loads and binds <ApiLink type="GeographicHighDensityScatterSeries" /> in the map component to an array of objects created from loaded JSON file with geographic locations:
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-        <div>
-            <span>{{item.city}}</span>
-        </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-geographic-json-files",
-  styleUrls: ["./map-binding-geographic-json-files.component.scss"],
-  templateUrl: "./map-binding-geographic-json-files.component.html"
-})
-
-export class MapBindingDataJsonPointsComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.componentDidMount();
-    }
-
-    public componentDidMount() {
-        // fetching JSON data with geographic locations from public folder
-        fetch("assets/Data/WorldCities.json")
-            .then((response) => response.json())
-            .then((data) => this.onDataLoaded(data));
-    }
-
-    public onDataLoaded(jsonData: any[]) {
-        const geoLocations: any[] = [];
-        // parsing JSON data and using only cities that are capitals
-        for (const jsonItem of jsonData) {
-            if (jsonItem.cap) {
-                const location = {
-                    city: jsonItem.name,
-                    country: jsonItem.country,
-                    latitude: jsonItem.lat,
-                    longitude: jsonItem.lon,
-                    population: jsonItem.pop
-                };
-                geoLocations.push(location);
-            }
-        }
-
-        // creating symbol series with loaded data
-        const geoSeries = new IgxGeographicSymbolSeriesComponent();
-        geoSeries.dataSource = geoLocations;
-        geoSeries.markerType = MarkerType.Circle;
-        geoSeries.latitudeMemberPath  = "latitude";
-        geoSeries.longitudeMemberPath = "longitude";
-        geoSeries.markerBrush = "LightGray";
-        geoSeries.markerOutline = "Black";
-        geoSeries.tooltipTemplate = this.tooltip;
-
-        // adding symbol series to the geographic amp
-        this.map.series.add(geoSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicHighDensityScatterSeries" />
-<ApiLink type="GeographicSymbolSeries" />
-<ApiLink type="GeographicMap" />
-<ApiLink type="GeographicMap" member="dataSource" label="DataSource" />
-<ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-<ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
deleted file mode 100644
index b6286047f2..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-data-model.mdx
+++ /dev/null
@@ -1,170 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding Geographic Data Models | Infragistics"
-description: Use Infragistics' Angular JavaScript map to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. View Ignite UI for Angular map demos!
-keywords: "Angular map, binding data models, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicScatterAreaSeries", "GeographicHighDensityScatterSeries", "GeographicProportionalSymbolSeries", "GeographicScatterAreaSeries", "GeographicContourLineSeries", "GeographicShapeSeries", "GeographicPolylineSeries", "Series", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding Geographic Data Models
-
-The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property of geographic series is used for the purpose of binding to data models. This property can be bound an array of custom objects.
-
-## Angular Binding Geographic Data Models Example
-
-<Sample src="/maps/geo-map/binding-data-model" height={500} alt="Angular Binding Geographic Data Models Example" />
-
-The following table summarized data structures required for each type of geographic series:
-
-| Geographic Series  | Properties   | Description   |
-|--------------|---------------| ---------------|
-| <ApiLink type="GeographicSymbolSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />   | Specifies names of 2 numeric longitude and latitude coordinates |
-| <ApiLink type="GeographicHighDensityScatterSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />   | Specifies names of 2 numeric longitude and latitude coordinates |
-| <ApiLink type="GeographicProportionalSymbolSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />, <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />   | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for size/radius of symbols |
-| <ApiLink type="GeographicScatterAreaSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />   | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values |
-| <ApiLink type="GeographicContourLineSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />, <ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />   | Specifies names of 2 numeric longitude and latitude coordinates and 1 numeric column for triangulation of values |
-|<ApiLink type="GeographicShapeSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|Specifies the name of data column of <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> items that contains the geographic points of shapes. This property must be mapped to an array of arrays of objects with x and y properties. |
-|<ApiLink type="GeographicPolylineSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|Specifies the name of data column of <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. |
-
-## Code Snippet
-The following code shows how to bind the <ApiLink type="GeographicSymbolSeries" /> to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the <ApiLink type="GeographicPolylineSeries" /> to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md)
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #pointSeriesTemplate>
-        <div>
-            <span [style.color]="series.brush">
-                {{item.country}}
-            </span>
-        </div>
-</ng-template>
-
-<ng-template let-series="series" let-item="item" #polylineSeriesTooltipTemplate>
-    <div>
-        <span [style.color]="series.brush">
-            Departure: {{item.origin.country}}
-        </span>
-        <br/>
-        <span [style.color]="series.brush">
-            Arrival: {{item.dest.country}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { WorldUtils } from "../../utilities/WorldUtils";
-
-@Component({
-  selector: "app-map-binding-geographic-data-models",
-  styleUrls: ["./map-binding-geographic-data-models.component.scss"],
-  templateUrl: "./map-binding-geographic-data-models.component.html"
-})
-
-export class MapBindingDataModelComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("pointSeriesTemplate")
-    public pointSeriesTemplate: TemplateRef<object>;
-    @ViewChild("polylineSeriesTooltipTemplate")
-    public polylineSeriesTooltipTemplate: TemplateRef<object>;
-    public flights: any[];
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
-        const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" };
-        const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" };
-        const cityQTR = { lat: 25.285, lon:  51.531,  country: "Qatar", name: "Doha" };
-        const cityPAN = { lat:  8.949, lon: -79.400,  country: "Panama", name: "Panama" };
-        const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" };
-        const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" };
-        const cityALT = { lat: 33.795,  lon: -84.349, country: "US", name: "Atlanta" };
-        const cityJOH = { lat: -26.178, lon: 28.004,  country: "South Africa", name: "Johannesburg" };
-        const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" };
-        const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name: "Singapore" };
-        const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow" };
-        const cityROM = { lat:  41.880, lon: 12.520,  country: "Italy", name: "Roma" };
-        const cityLAX = { lat: 34.000, lon: -118.25,  country: "US", name: "Los Angeles" };
-
-        this.flights = [
-            { origin: cityDAL, dest: citySNG, color: "Green" },
-            { origin: cityMOS, dest: cityNZL, color: "Red" },
-            { origin: cityCHL, dest: cityJAP, color: "Blue" },
-            { origin: cityPAN, dest: cityROM, color: "Orange" },
-            { origin: cityALT, dest: cityJOH, color: "Black" },
-            { origin: cityNYC, dest: cityQTR, color: "Purple" },
-            { origin: cityLAX, dest: citySYD, color: "Gray" }
-        ];
-
-        for (const flight of this.flights) {
-            this.createPolylineSeries(flight);
-            this.createSymbolSeries(flight);
-        }
-    }
-
-    public createSymbolSeries(flight: any) {
-        const geoLocations = [flight.origin, flight.dest ];
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = geoLocations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush  = "White";
-        symbolSeries.markerOutline = flight.color;
-        symbolSeries.thickness = 1;
-        symbolSeries.tooltipTemplate = this.pointSeriesTemplate;
-
-        this.map.series.add(symbolSeries);
-    }
-
-    public createPolylineSeries(flight: any) {
-        const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
-        const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
-        const geoRoutes = [
-            {
-              dest: flight.dest,
-              distance: geoDistance,
-              origin: flight.origin,
-              points: geoPath,
-              time: geoDistance / 850
-        }];
-
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = geoRoutes;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeStrokeThickness = 9;
-        lineSeries.shapeOpacity = 0.5;
-        lineSeries.shapeStroke = flight.color;
-        lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate;
-        this.map.series.add(lineSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicContourLineSeries" />
-<ApiLink type="GeographicHighDensityScatterSeries" />
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicProportionalSymbolSeries" />
-<ApiLink type="GeographicScatterAreaSeries" />
-<ApiLink type="GeographicSymbolSeries" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
deleted file mode 100644
index 3d33ccfe95..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
+++ /dev/null
@@ -1,27 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Data Binding | Infragistics"
-description: Use Infragistics'  Angular map to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. View Ignite UI for Angular map demos!
-keywords: "Angular map, geo-spatial data, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Data Binding
-
-The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property of geographic series is used for the purpose of binding to data models.
-
-## Types of Data Sources
-The following section list some of data source that you can bind in the geographic map component
-
-- [Binding Shape Files](geo-map-binding-shp-file.md)
-- [Binding JSON Files](geo-map-binding-data-json-points.md)
-- [Binding CSV Files](geo-map-binding-data-csv.md)
-- [Binding Data Models](geo-map-binding-data-model.md)
-- [Binding Multiple Sources](geo-map-binding-multiple-sources.md)
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
deleted file mode 100644
index d93fd7f09f..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-multiple-shapes.mdx
+++ /dev/null
@@ -1,522 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding Multiple Data Shapes | Infragistics"
-description: Use Infragistics' Angular to add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding and Overlaying Multiple Shape Files
-
-In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay a few shapefiles with geo-spacial data. For example, <ApiLink type="GeographicSymbolSeries" /> for plotting geographic locations of ports, the <ApiLink type="GeographicPolylineSeries" /> for plotting routes between ports, and the <ApiLink type="GeographicShapeSeries" /> for plotting shapes of countries.
-
-## Angular Binding and Overlaying Multiple Shape Files Example
-
-<Sample src="/maps/geo-map/binding-multiple-shapes" height={500} alt="Angular Binding and Overlaying Multiple Shape Files Example" />
-
-This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the <ApiLink type="ShapefileRecord" /> class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about <ApiLink type="ShapefileRecord" /> object.
-
-- <ApiLink type="GeographicSymbolSeries" /> – displays locations of major cities
-- <ApiLink type="GeographicPolylineSeries" /> – displays routes between major ports
-- <ApiLink type="GeographicShapeSeries" /> – displays shapes of countries of the world
-
-You can use geographic series in above or other combinations to plot desired data.
-
-## Importing Components
-
-First, let's import required components and modules:
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-```
-
-## Creating Series
-
-Next, we need to create a map with a few Geographic Series that will later load different type of shapefile.
-
-```html
-<div class="sampleRoot">
-    <div class="map" >
-        <igx-geographic-map
-            #map
-            width="700px"
-            height="500px"
-            zoomable="true" >
-            <igx-geographic-shape-series #shapeSeries
-                name="polygonSeries"
-                shapeMemberPath="points"
-                shapeFill="rgb(150, 150, 150)"
-                shapeStroke="Black"
-                shapeStrokeThickness={1.0} >
-            </igx-geographic-shape-series>
-            <igx-geographic-polyline-series  #polylineSeries
-            [tooltipTemplate]="polylineTooltipTemplate"
-                  name="polylineSeries"
-                 shapeMemberPath="points"
-                 shapeStroke="rgba(147, 15, 180, 0.5)"
-                 thickness={3.0} >
-            </igx-geographic-polyline-series>
-            <igx-geographic-symbol-series  #symbolSeries
-                name="symbolSeries"
-                longitudeMemberPath="longitude"
-                latitudeMemberPath="latitude"
-                markerType="Circle"
-                markerOutline="rgb(2, 102, 196)"
-                markerBrush="White" >
-            </igx-geographic-symbol-series>
-        </igx-geographic-map>
-    </div>
-</div>
-
-<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
-        <div>
-            <span>{{item.capacity}}</span><br />
-            <span>Distance: {{item.distance}}</span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #shapeTooltipTemplate>
-        <div>
-            <span>{{item.name}}</span><br />
-            <span>Population: {{item.population}}</span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
-        <div>
-            <span [style.color]="series.brush">City: {{item.city}}</span>
-        </div>
-    </ng-template>
-```
-
-## Loading Shapefiles
-
-Next, in constructor of your page, add a <ApiLink type="ShapefileRecord" /> for each shapefile that you want to display in the geographic map component.
-
-```ts
-const sdsPolygons = new IgxShapeDataSource();
-sdsPolygons.importCompleted = this.onPolygonsLoaded;
-sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
-sdsPolygons.databaseSource  = url + "/shapes/WorldCountries.dbf";
-sdsPolygons.dataBind();
-const sdsPolylines = new IgxShapeDataSource();
-sdsPolylines.importCompleted = this.onPolylinesLoaded;
-sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
-sdsPolylines.databaseSource  = url + "/shapes/WorldConnections.dbf";
-sdsPolylines.dataBind();
-const sdsLocations = new IgxShapeDataSource();
-sdsLocations.importCompleted = this.onPointsLoaded;
-sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
-sdsLocations.databaseSource  = url + "/Shapes/WorldCities.dbf";
-sdsLocations.dataBind();
-```
-
-## Processing Polygons
-
-Process shapes data loaded in <ApiLink type="ShapefileRecord" /> with of countries of the world and assign it to <ApiLink type="GeographicShapeSeries" /> object.
-
-```ts
-import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
-import { IgrShapeDataSource } from 'igniteui-react-core';
-// ...
-public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-
-    const shapeSeries = this.geoMap.series[0] as IgrGeographicShapeSeries;
-    shapeSeries.dataSource = geoPolygons;
-}
-```
-
-```ts
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-
-    const shapeSeries = this.geoMap.series[0] as IgxGeographicShapeSeries;
-    shapeSeries.dataSource = geoPolygons;
-}
-```
-
-```ts
-import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-    let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
-    polygonSeries.dataSource = geoPolygons;
-    polygonSeries.renderSeries(false);
-}
-```
-
-## Processing Polyline
-
-Process shapes data loaded in <ApiLink type="ShapefileRecord" /> with communication routes between major cities and assign it to <ApiLink type="GeographicPolylineSeries" /> object.
-
-```ts
-import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
-import { IgrShapeDataSource } from 'igniteui-react-core';
-// ...
-public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-    const lineSeries = this.geoMap.series[1] as IgrGeographicPolylineSeries;
-    lineSeries.dataSource = geoPolylines;
-}
-```
-
-```ts
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-    const lineSeries = this.geoMap.series[1] as IgxGeographicPolylineSeries;
-    lineSeries.dataSource = geoPolylines;
-}
-```
-
-```ts
-import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-
-    let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
-    lineSeries.dataSource = geoPolylines;
-    lineSeries.renderSeries(false);
-}
-```
-
-## Processing Points
-
-Process shapes data loaded in <ApiLink type="ShapefileRecord" /> with locations of major cities and assign it to <ApiLink type="GeographicSymbolSeries" /> object.
-
-```ts
-import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
-import { MarkerType } from 'igniteui-react-charts';
-// ...
-public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    const symbolSeries = this.geoMap.series[2] as IgrGeographicSymbolSeries;
-    symbolSeries.dataSource = geoLocations;
-}
-```
-
-```ts
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    const symbolSeries = this.geoMap.series[2] as IgxGeographicSymbolSeries;
-    symbolSeries.dataSource = geoLocations;
-}
-```
-
-```ts
-import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
-    symbolSeries.dataSource = geoLocations;
-    symbolSeries.renderSeries(false);
-}
-```
-
-## Map Background
-
-Also, you might want to hide geographic imagery from the map background content if your shape files provided sufficient geographic context (e.g. shape of countries) for your application.
-
-```ts
-public geoMap: IgxGeographicMapComponent;
-// ...
-
-this.geoMap.backgroundContent = {};
-```
-
-## Summary
-
-For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-multiple-shapes-files",
-  styleUrls: ["./map-binding-multiple-shapes-files.component.scss"],
-  templateUrl: "./map-binding-multiple-shapes-files.component.html"
-})
-
-export class MapBindingMultipleShapesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild ("shapeSeries")
-    public shapeSeries: IgxGeographicShapeSeriesComponent;
-
-    @ViewChild ("polylineSeries")
-    public polylineSeries: IgxGeographicPolylineSeriesComponent;
-
-    @ViewChild ("symbolSeries")
-    public symbolSeries: IgxGeographicSymbolSeriesComponent;
-
-    @ViewChild("polylineTooltipTemplate")
-    public polylineTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("shapeTooltipTemplate")
-    public shapeTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("pointTooltipTemplate")
-    public pointTooltipTemplate: TemplateRef<object>;
-
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-
-        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
-
-        // loading a shapefile with geographic polygons
-        const sdsPolygons = new IgxShapeDataSource();
-        sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, ""));
-        sdsPolygons.shapefileSource = "assets/Shapes/WorldCountries.shp";
-        sdsPolygons.databaseSource  = "assets/Shapes/WorldCountries.dbf";
-        sdsPolygons.dataBind();
-        // loading a shapefile with geographic polylines at runtime.
-        const sdsPolylines = new IgxShapeDataSource();
-        sdsPolylines.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
-        sdsPolylines.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
-        sdsPolylines.dataBind();
-        sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, ""));
-
-        // loading a shapefile with geographic points
-        const sdsPoints = new IgxShapeDataSource();
-        sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, ""));
-        sdsPoints.shapefileSource = "assets/Shapes/WorldCities.shp";
-        sdsPoints.databaseSource  = "assets/Shapes/WorldCities.dbf";
-        sdsPoints.dataBind();
-    }
-
-    public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoLocations: any[] = [];
-        // parsing shapefile data and creating geo-locations
-        for (const record of sds.getPointData()) {
-            const pop = record.fieldValues["POPULATION"];
-            if (pop > 0) {
-                // each shapefile record has just one point
-                const location = {
-                    city: record.fieldValues["NAME"],
-                    latitude: record.points[0][0].y,
-                    longitude: record.points[0][0].x,
-                    population: pop
-                };
-                geoLocations.push(location);
-            }
-        }
-        this.symbolSeries.dataSource = geoLocations;
-        this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
-    }
-
-    public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoPolylines: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        for (const record of sds.getPointData()) {
-            // using field/column names from .DBF file
-            const route = {
-                capacity: record.fieldValues["CapacityG"],
-                distance: record.fieldValues["DistanceKM"],
-                isActive: record.fieldValues["NotLive"] !== 0,
-                isOverLand: record.fieldValues["OverLand"] === 0,
-                name: record.fieldValues["Name"],
-                points: record.points,
-                service: record.fieldValues["InService"]
-            };
-            geoPolylines.push(route);
-        }
-        this.polylineSeries.dataSource = geoPolylines;
-        this.polylineSeries.shapeMemberPath = "points";
-        this.polylineSeries.shapeFilterResolution = 2.0;
-        this.polylineSeries.shapeStrokeThickness = 2;
-        this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)";
-        this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate;
-    }
-
-    public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoPolygons: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        sds.getPointData().forEach((record) => {
-            // using field/column names from .DBF file
-            const country = {
-                gdp: record.fieldValues["GDP"],
-                name: record.fieldValues["NAME"],
-                points: record.points,
-                population: record.fieldValues["POPULATION"]
-            };
-            geoPolygons.push(country);
-        });
-        this.shapeSeries.dataSource = geoPolygons;
-        this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate;
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="GeographicSymbolSeries" />
-<ApiLink type="ShapefileRecord" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
deleted file mode 100644
index e74c161566..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-multiple-sources.mdx
+++ /dev/null
@@ -1,204 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding Multiple Data Source | Infragistics"
-description: Use Infragistics' Angular JavaScript map to add multiple geographic series objects to overlay custom data sources with geo-spacial data. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, geographic series, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "SeriesViewer", "Series", "GeographicShapeSeriesBase"]
-llms:
-  description: "In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding Multiple Data Sources
-
-In the Ignite UI for Angular map, you can add multiple geographic series objects to overlay custom data sources with geo-spacial data. For example, <ApiLink type="GeographicSymbolSeries" /> for plotting geographic locations of airports, the <ApiLink type="GeographicPolylineSeries" /> for plotting flights between airports, and 2nd <ApiLink type="GeographicPolylineSeries" /> for plotting gridlines of major geographic coordinates.
-
-## Angular Binding Multiple Data Sources Example
-
-<Sample src="/maps/geo-map/binding-multiple-sources" height={500} alt="Angular Binding Multiple Data Sources Example" />
-
-This topic takes you step-by-step towards displaying multiple geographic series that will plot following geo-spatial data:
-
-- <ApiLink type="GeographicSymbolSeries" /> – displays locations of major airports
-- <ApiLink type="GeographicPolylineSeries" /> – displays flights between airports
-- <ApiLink type="GeographicPolylineSeries" /> – displays gridlines of major coordinates
-
-You can use geographic series in this or other combinations to plot desired data.
-
-## Creating Data Sources
-
-Create data sources for all geographic series that you want to display in the Ignite UI for Angular map. For example, you can the use [WorldConnections](geo-map-resources-world-connections.md) script.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
-        <div>
-            <span>
-            Arrival: {{item.origin.country}}
-            </span>
-            <br/>
-            <span>
-            Destination: {{item.dest.country}}
-            </span>
-            <br/>
-            <span>
-            Distance: {{item.distance}} miles
-            </span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
-            <div>
-                <span>
-                {{item?.country}}
-                </span>
-                <br />
-                <span>
-                {{item?.name}}
-                </span>
-                <br />
-                <span>
-                Population: {{item.pop}} M
-                </span>
-                <br/>
-                <span>
-                Flights: {{item.flights}}
-                </span>
-            </div>
-        </ng-template>
-```
-
-## Overlaying Flights
-
-Create first <ApiLink type="GeographicPolylineSeries" /> object with flight connections between major airports and add it to the Series collection of the Ignite UI for Angular map.
-
-```html
-<igx-geographic-polyline-series  #polylineSeries
-        [tooltipTemplate]="polylineTooltipTemplate"
-                name="polylineSeries"
-                shapeMemberPath="points"
-                shapeStroke="rgba(147, 15, 180, 0.5)"
-                thickness={3.0} >
-</igx-geographic-polyline-series>
-```
-
-## Overlaying Gridlines
-
-Create second <ApiLink type="GeographicPolylineSeries" /> object with geographic gridlines and add it to the Series collection of the Ignite UI for Angular map.
-
-```html
-  <igx-geographic-polyline-series  #polylineSeries
-            [tooltipTemplate]="polylineTooltipTemplate"
-                 datasource = worldFlights
-                 name="polylineSeries"
-                 shapeMemberPath="points"
-                 shapeStroke="rgba(196, 14, 14,0.05)"
-                 thickness={3.0} >
-    </igx-geographic-polyline-series>
-```
-
-## Overlaying Airports
-
-Create <ApiLink type="GeographicSymbolSeries" /> object with airport points and add it to the Series collection of the geographic Ignite UI for Angular map.
-
-```html
-<igx-geographic-symbol-series  #symbolSeries
-    name="symbolSeries"
-    longitudeMemberPath="longitude"
-    latitudeMemberPath="latitude"
-    markerType="Circle"
-    markerOutline="rgb(73, 73, 73)"
-    markerBrush="White" >
-</igx-geographic-symbol-series>
-```
-
-## Summary
-
-For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project.
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
-import { WorldConnections } from "../../utilities/WorldConnections";
-
-@Component({
-  selector: "app-map-binding-multiple-data-sources",
-  styleUrls: ["./map-binding-multiple-data-sources.component.scss"],
-  templateUrl: "./map-binding-multiple--data-sources.component.html"
-})
-
-export class MapBindingMultipleSourcesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("polylineTooltipTemplate")
-    public polylineTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("pointTooltipTemplate")
-    public pointTooltipTemplate: TemplateRef<object>;
-
-    public data: any;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      this.map.windowRect = { left: 0.195, top: 0.1, width: 0.5, height: 0.5 };
-
-      const worldFlights = WorldConnections.getFlights();
-      const worldAirports = WorldConnections.getAirports();
-      const worldGridlines = WorldConnections.getGridlines();
-
-      this.addPolylineSeriesWith(worldFlights);
-      this.addGridlineSeriesWith(worldGridlines);
-      this.addSymbolSeriesWith(worldAirports);
-    }
-
-    public addGridlineSeriesWith(data: any[]) {
-        const gridSeries = new IgxGeographicPolylineSeriesComponent();
-        gridSeries.dataSource = data;
-        gridSeries.shapeMemberPath = "points";
-        gridSeries.shapeStroke = "Gray";
-        gridSeries.shapeStrokeThickness = 1;
-        this.map.series.add(gridSeries);
-    }
-
-    public addPolylineSeriesWith(data: any[]) {
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = data;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
-        lineSeries.shapeStrokeThickness = 4;
-        lineSeries.tooltipTemplate = this.polylineTooltipTemplate;
-        this.map.series.add(lineSeries);
-    }
-
-    public addSymbolSeriesWith(data: any[]) {
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = data;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush = "#aad3df";
-        symbolSeries.markerOutline = "rgb(73, 73, 73)";
-        symbolSeries.thickness = 1;
-        symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicSymbolSeries" />
diff --git a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
deleted file mode 100644
index 00c38dc712..0000000000
--- a/docs/angular/src/content/en/components/geo-map-binding-shp-file.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Binding Geographic Shape Files | Infragistics"
-description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos!
-keywords: "Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"]
-llms:
-  description: "The Ignite UI for Angular map component, the ShapefileRecord class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of IgxShapefileRecord objects."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Binding Shape Files with Geo-spatial Data
-
-The Ignite UI for Angular map component, the <ApiLink type="ShapefileRecord" /> class loads geo-spatial data (points/locations, polylines, polygons) from shape files and converts it to a collection of `IgxShapefileRecord` objects.
-
-## Angular Binding Shape Files with Geo-spatial Data Example
-
-<Sample src="/maps/geo-map/binding-shp-polylines" height={500} alt="Angular Binding Shape Files with Geo spatial Data Example" />
-
-The following table explains properties of the <ApiLink type="ShapefileRecord" /> class for loading shape files.
-
-| Property | Type | Description   |
-|----------|------|---------------|
-| `ShapefileSource` | string |Specifies the Uri to a shape file (.shp) that contains geo-spatial data items.|
-|`DatabaseSource` | string |Specifies the Uri to a shape database file (.dbf) that contains a data table for geo-spatial data items.|
-
-{/*TODO add for WPF only: */}
-{/* Both of the source properties for shape files are of Uri type. This means that shape files can be embedded resources in the application assembly and on the internet (via http). Refer to the previous section for more information on this process. The rules for resolving Uri objects are equivalent to any standard Uri property, for example the BitmapImage.UriSource property.*/}
-
-When both source properties are set to non-null values, then the <ApiLink type="ShapefileRecord" /> object’s ImportAsync method is invoked which in return performs fetching and reading the shape files and finally doing the conversion. After this operation is complete, the <ApiLink type="ShapefileRecord" /> is populated with `IgxShapefileRecord` objects and the `ImportCompleted` event is raised in order to notify about completed process of loading and converting geo-spatial data from shape files.
-
-## Loading Shapefiles
-The following code creates an instance of the <ApiLink type="ShapefileRecord" /> object for loading a shape file that contains locations of major cities in the world. It also demonstrates how to handle the `ImportCompleted` event as a prerequisite for binding data to the map component.
-
-## Binding Shapefiles
-In the map component, Geographic Series are used for displaying geo-spatial data that is loaded from shape files. All types of Geographic Series have an <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. The <ApiLink type="ShapefileRecord" /> is an example such array because it contains a list of `IgxShapefileRecord` objects.
-
-The `ShapefileRecord` class provides properties for storing geo-spatial data, listed in the following table.
-
-| Property     | Description   |
-|--------------|---------------|
-|`Points`|Contains all the points in one geo-spatial shape loaded from a shape file (.shp). For example, the country of Japan in shape file would be represented as a list of a list of points object, where:<ul><li>The first list of points describes shape of Hokkaido island</li><li>The second list of points describes shape of Honshu island</li><li>The third list of points describes shape of Kyushu island</li><li>The fourth list of points describes shape of Shikoku island</li></ul>|
-| `Fields` |Contains a row of data from the shape database file (.dbf) keyed by a column name. For example, a data about county of Japan which includes population, area, name of a capital, etc.|
-
-This data structure is suitable for use in most Geographic Series as long as appropriate data columns are mapped to them.
-
-## Code Snippet
-This code example assumes that shape files were loaded using the <ApiLink type="ShapefileRecord" />.
-The following code binds <ApiLink type="GeographicPolylineSeries" /> in the map component to the <ApiLink type="ShapefileRecord" /> and maps the `Points` property of all `IgxShapefileRecord` objects.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-            <div>
-                <span>
-                Airline: {{item.name}}
-                </span>
-                <br />
-                <span>
-                Length: {{item.distance}} miles
-                </span>
-            </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-shape-files",
-  styleUrls: ["./map-binding-shape-files.component.scss"],
-  templateUrl: "./map-binding-shape-files.component.html"
-})
-export class MapBindingShapefilePolylinesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() { }
-
-    public ngAfterViewInit() {
-    // loading a shapefile with geographic polygons
-    const sds = new IgxShapeDataSource();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
-    sds.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
-    sds.dataBind();
-    }
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-        const geoPolylines: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        for (const record of shapeRecords) {
-            // using field/column names from .DBF file
-            const route = {
-                capacity: record.fieldValues["CapacityG"],
-                distance: record.fieldValues["DistanceKM"],
-                isActive: record.fieldValues["NotLive"] !== 0,
-                isOverLand: record.fieldValues["OverLand"] === 0,
-                name: record.fieldValues["Name"],
-                points: record.points,
-                service: record.fieldValues["InService"]
-            };
-            geoPolylines.push(route);
-        }
-
-        const geoSeries = new IgxGeographicPolylineSeriesComponent();
-        geoSeries.dataSource = geoPolylines;
-        geoSeries.shapeMemberPath = "points";
-        geoSeries.shapeFilterResolution = 0.0;
-        geoSeries.shapeStrokeThickness = 3;
-        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
-        geoSeries.tooltipTemplate = this.tooltipTemplate;
-
-        this.map.series.add(geoSeries);
-        }
-}
-```
-
-## API References
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="ShapefileRecord" />
-<ApiLink type="ShapefileRecord" member="fields" label="Fields" />
-<ApiLink type="ShapefileRecord" member="importCompleted" label="ImportCompleted" />
-<ApiLink type="GeographicMap" member="dataSource" label="DataSource" />
-<ApiLink type="ShapefileRecord" member="points" label="Points" />
diff --git a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
deleted file mode 100644
index c02d553971..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-azure-imagery.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Displaying Azure Imagery | Infragistics"
-description: Use Infragistics' Angular to display imagery from Microsoft Azure Maps. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, azure maps, Ignite UI for Angular, Infragistics, imagery tile source, map background"
-license: commercial
-mentionedTypes: ["GeographicMap", "AzureMapsImagery", "GeographicTileSeries"]
-llms:
-  description: "The Angular AzureMapsImagery is geographic imagery mapping service provided by Microsoft®."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import azuremapsimagery from '@xplat-images/general/AzureMapsImagery.png';
-import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Traffic_Tile_Series_With_Background.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Imagery from Azure Maps <Badge variant="preview" />
-
-The Angular <ApiLink type="AzureMapsImagery" /> is geographic imagery mapping service provided by Microsoft®. It provides several styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the <a href="https://azure.microsoft.com/en-us/products/azure-maps" target="_blank">www.azure.microsoft.com</a> web site. The Ignite UI for Angular map component can display geographic imagery from Azure Maps in the map’s background content using the <ApiLink type="AzureMapsImagery" /> class.
-
-## Angular Displaying Imagery from Azure Maps - Overview
-
-<Image src={azuremapsimagery} alt="AzureMapsImagery" />
-
-<Sample src="/maps/geo-map/display-azure-imagery" height={600} alt="Angular Displaying Imagery from Azure Maps Example" />
-
-## Angular Displaying Imagery from Azure Maps - Code Example
-The following code snippet shows how to display geographic imagery tiles from Azure Maps in Angular <ApiLink type="GeographicMap" /> using <ApiLink type="AzureMapsImagery" /> class.
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
-// ...
-const tileSource = new IgxAzureMapsImagery();
-tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
-tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
-tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or
-tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc.
-
-this.map.backgroundContent = tileSource;
-```
-
-## Angular Overlaying Imagery from Azure Maps - Overview
-
-When working with the <ApiLink type="GeographicTileSeries" />, you can combine **overlays** (traffic, weather, labels) on top of a **base map style** such as eg. **Satellite**, **Road**, or **DarkGrey**. Using **TerraOverlay** with eg. **Satellite** to visualize terrain.
-
-- **Base Styles**: Satellite, Road, Terra, and DarkGrey provide the core background tiles.
-- **Overlay Styles**: Traffic and Weather imagery (e.g., `TrafficRelativeOverlay`, `WeatherRadarOverlay`) are designed to be layered on top of a base style by assigning them to a tile series.
-- **Hybrid Styles**: Variants like `HybridRoadOverlay` and `HybridDarkGreyOverlay` already combine a base style with overlays (labels, roads, etc.), so you don’t need to manage multiple layers manually.
-
-This design allows you to build richer maps, for example:
-- Displaying **Satellite imagery** with a **TrafficOverlay** to highlight congestion on real-world images.
-- Using **Terra** with **WeatherRadarOverlay** to visualize terrain with precipitation.
-- Applying **DarkGrey** with **LabelsRoadOverlay** for a dashboard-friendly, contrast-heavy view.
-
-<Image src={azureTrafficTileSeriesWithBackground} alt="Azure Traffic Tile Series With Background" />
-
-## Angular Overlaying Imagery from Azure Maps - Code Example
-The following code snippet shows how to display geographic imagery tiles on top of a background imagery joining eg. traffic with a dark grey map for the Angular <ApiLink type="GeographicMap" /> using <ApiLink type="AzureMapsImagery" /> and <ApiLink type="GeographicTileSeries" /> classes.
-
-```html
-<igx-geographic-map #map height="100%" width="100%" zoomable="true">
-  <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
-</igx-geographic-map>
-```
-
-```ts
-export class AppComponent implements AfterViewInit {
-  @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
-  @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent;
-
-  public azureImagery!: IgxAzureMapsImagery;
-  public azureKey: string = "<YOUR_KEY_HERE>";
-
-  ngAfterViewInit(): void {
-    // Update TileSeries
-    const overlay = new IgxAzureMapsImagery();
-    overlay.apiKey = this.azureKey;
-    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
-    this.tileSeries.tileImagery = overlay;
-
-    // Update Map Background
-    this.azureImagery = new IgxAzureMapsImagery();
-    this.azureImagery.apiKey = this.azureKey;
-    this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey;
-    this.map.backgroundContent = this.azureImagery;
-  }
-}
-```
-
-## Properties
-The following table summarizes properties of the <ApiLink type="AzureMapsImagery" /> class:
-
-| Property Name  | Property Type   | Description   |
-|----------------|-----------------|---------------|
-|<ApiLink type="AzureMapsImagery" member="apiKey" label="ApiKey" />|string|Represents the property for setting an API key required for the Azure Maps imagery service. You must obtain this key from the <a href="https://azure.microsoft.com/en-us/products/azure-maps" target="_blank">azure.microsoft.com</a> website.|
-|<ApiLink type="AzureMapsImagery" member="imageryStyle" label="ImageryStyle" />|`IgxAzureMapsImageryStyle`|Represents the property for setting the Azure Maps imagery tiles map style. This property can be set to the following `IgxAzureMapsImageryStyle` enumeration values:<ul><li>Satellite - Specifies the Satellite map style without road or labels overlay</li><li>Road - Specifies the Aerial map style with road and labels overlay</li><li>DarkGrey - Specifies a dark grey basemap style for contrast and highlighting overlays</li><li>TerraOverlay - Specifies a terrain map style with shaded relief to highlight elevation and landscape features</li><li>LabelsRoadOverlay - One of several overlays of city labels without an aerial overlay</li><li>HybridRoadOverlay - Satellite background combined with road and label overlays</li><li>HybridDarkGreyOverlay - Satellite background combined with dark grey label overlays</li><li>LabelsDarkGreyOverlay - One of several overlays of city labels over a dark grey basemap</li><li>TrafficDelayOverlay - Displays traffic delays and congestion areas in real time</li><li>TrafficAbsoluteOverlay - Displays current traffic speeds as absolute values</li><li>TrafficReducedOverlay - Displays reduced traffic flow with light-based visualization</li><li>TrafficRelativeOverlay - Displays traffic speeds relative to normal conditions</li><li>TrafficRelativeDarkOverlay - Displays traffic speeds relative to normal conditions over a dark basemap for enhanced contrast</li><li>WeatherRadarOverlay - Displays near real-time radar imagery of precipitation</li><li>WeatherInfraredOverlay - Displays infrared satellite imagery of cloud cover</li></ul> |
-
-## API References
-<ApiLink type="AzureMapsImagery" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
deleted file mode 100644
index 7bfbaa6da2..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-bing-imagery.mdx
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Displaying Bing Imagery | Infragistics"
-description: Use Infragistics' Angular to display imagery from Microsoft Bing Maps. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, bing maps, Ignite UI for Angular, Infragistics, imagery tile source, map background"
-license: commercial
-mentionedTypes: ["GeographicMap", "BingMapsMapImagery"]
-llms:
-  description: "NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired."
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png';
-
-# Angular Displaying Imagery from Bing Maps
-
-NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028.
-
-For more details:
-
-[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-The Angular <ApiLink type="BingMapsMapImagery" /> is geographic imagery mapping service provided by Microsoft® company. It provides 3 styles of geographic imagery tiles of the world. This geographic imagery service is accessible directly on the <a href="http://www.bing.com/maps" target="_blank">www.bing.com/maps</a> web site. The Ignite UI for Angular map component can display geographic imagery from Bing Maps in the map’s background content using the <ApiLink type="BingMapsMapImagery" /> class.
-
-## Angular Displaying Imagery from Bing Maps Example
-
-{/*<Sample src="/maps/geo-map/display-bing-imagery" height="500" alt="Angular Displaying Imagery from Bing Maps Example" />*/}
-<Image src={bingmapsimagery} alt="Angular Bing Maps Imagery" />
-
-## Code Snippet
-The following code snippet shows how to display geographic imagery tiles from Bing Maps in Angular <ApiLink type="GeographicMap" /> using <ApiLink type="BingMapsMapImagery" /> class.
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
-// ...
-const tileSource = new IgxBingMapsMapImagery();
-tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
-tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
-tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
-tileSource.imageryStyle = BingMapsImageryStyle.Road;
-
-// resolving BingMaps uri based on HTTP protocol of hosting website
-let tileUri = tileSource.actualBingImageryRestUri;
-const isHttpSecured = window.location.toString().startsWith("https:");
-if (isHttpSecured) {
-    tileUri = tileUri.replace("http:", "https:");
-} else {
-    tileUri = tileUri.replace("https:", "http:");
-}
-tileSource.bingImageryRestUri = tileUri;
-
-this.map.backgroundContent = tileSource;
-```
-
-## Properties
-The following table summarized properties of the <ApiLink type="BingMapsMapImagery" /> class:
-
-| Property Name  | Property Type   | Description   |
-|----------------|-----------------|---------------|
-|<ApiLink type="BingMapsMapImagery" member="apiKey" label="ApiKey" />|string|Represents the property for setting an API key required for the Bing Maps imagery service. You must obtain this key from the <a href="http://www.bingmapsportal.coms" target="_blank">www.bingmapsportal.com</a> website.|
-|<ApiLink type="BingMapsMapImagery" member="imageryStyle" label="ImageryStyle" />|<ApiLink type="BingMapsImageryStyle" />|Represents the property for setting the Bing Maps imagery tiles map style. This property can be set to the following <ApiLink type="BingMapsImageryStyle" /> enumeration values: <ul><li> Aerial - Specifies the Aerial map style without road or labels overlay</li> <li> AerialWithLabels - Specifies the Aerial map style with road and labels overlay</li><li> Road - Specifies the Roads map style without Aerial overlay</li></ul>|
-|<ApiLink type="BingMapsMapImagery" member="bingImageryRestUri" label="BingImageryRestUri" />|string|Represents the property for setting the Bing Imagery REST URI specifying where the TilePath and SubDomains will come from. This is an optional property, and if not specified it will use the default REST URI.|
-|<ApiLink type="BingMapsMapImagery" member="cultureName" label="CultureName" />|string|Represents a property for setting the culture name for the tile source.|
-|<ApiLink type="BingMapsMapImagery" member="isDeferredLoad" label="IsDeferredLoad" />|boolean|Represents the property that specifies whether or not the Bing Maps service should auto-initialized upon the assignment of valid property values.|
-|<ApiLink type="BingMapsMapImagery" member="isInitialized" label="IsInitialized" />|boolean|Represents the property that is set to True occurs when geographic imagery tiles from Bing Maps service have been initialized and they are ready for rendering in the map component.|
-|<ApiLink type="BingMapsMapImagery" member="subDomains" label="SubDomains" />|<ApiLink type="SubDomainsCollection" />|Represents an image collection of URI sub domains|
-|<ApiLink type="BingMapsMapImagery" member="tilePath" label="TilePath" />|string|Represents a property that sets the map tile image URI, this is the actual location of the Bing Maps|
-
-## API References
-<ApiLink type="BingMapsImageryStyle" />
-<ApiLink type="BingMapsMapImagery" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
deleted file mode 100644
index a0be86f795..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-esri-imagery.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Displaying ESRI Imagery |  Infragistics"
-description: Use Infragistics' Angular to display imagery from ESRI maps. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, ESRI, Ignite UI for Angular, Infragistics, imagery tile source, map background"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The ArcGISOnlineMapImagery is a free geographic imagery mapping service created by Esri company."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Displaying Imagery from Esri Maps
-
-The <ApiLink type="ArcGISOnlineMapImagery" /> is a free geographic imagery mapping service created by <a href="https://www.esri.com/" target="_blank">Esri</a> company. It provides over 40 styles of geographic imagery tiles of the world and some thematic tiles for the USA. This geographic imagery service can be accessed directly on <a href="https://services.arcgisonline.com/ArcGIS/rest/services" target="_blank">www.arcgisonline.com</a> web site.
-
-## Angular Displaying Imagery from Esri Maps Example
-
-<Sample src="/maps/geo-map/display-esri-imagery" height={500} alt="Angular Displaying Imagery from Esri Maps Example" />
-
-## Code Snippet
-The following code snippet shows how to display Angular geographic imagery tiles from Esri imagery servers in <ApiLink type="GeographicMap" /> using <ApiLink type="ArcGISOnlineMapImagery" /> class.
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
-// ...
-public geoMap: IgxGeographicMapComponent;
-
-const tileSource = new IgxArcGISOnlineMapImagery();
-tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
-
-this.geoMap.backgroundContent = tileSource;
-```
-
-## Esri Utility
-Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers.
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
-import { EsriUtility, EsriStyle } from './EsriUtility';
-// ...
-public geoMap: IgxGeographicMapComponent;
-
-const tileSource = new IgxArcGISOnlineMapImagery();
-tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
-
-this.geoMap.backgroundContent = tileSource;
-```
-
-## API References
-<ApiLink type="ArcGISOnlineMapImagery" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
deleted file mode 100644
index 421c09c472..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-heat-imagery.mdx
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Infragistics"
-description: Use Infragistics' Angular JavaScript map to display heat map imagery. Check out Ignite UI for Angular map demos!
-keywords: "Angular map, heat map imagery, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "HeatTileGenerator", "GeographicTileSeries"]
-llms:
-  description: "The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the ShapefileRecord that are generated by a ShapefileRecord by loading geo-spatial data by loading shape files to a tile series."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Displaying Heat Imagery
-
-The Ignite UI for Angular map control has the ability to show heat-map imagery through the use of the <ApiLink type="ShapefileRecord" /> that are generated by a <ApiLink type="ShapefileRecord" /> by loading geo-spatial data by loading shape files to a tile series.
-
-It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic.
-
-## Angular Displaying Heat Imagery Example
-
-<Sample src="/maps/geo-map/display-heat-imagery" height={500} alt="Angular Displaying Heat Imagery Example" />
-
-When a <ApiLink type="ShapefileRecord" /> loads its shape files, it converts that data into <ApiLink type="ShapefileRecord" /> objects. These objects can be retrieved from the `GetPointData()` method of the <ApiLink type="ShapefileRecord" /> and can then be used to create a heat-map through usage of a <ApiLink type="TileGeneratorMapImagery" /> object with a <ApiLink type="HeatTileGenerator" /> assigned to its <ApiLink type="TileGenerator" /> property. This <ApiLink type="TileGeneratorMapImagery" /> can then be used in a <ApiLink type="GeographicTileSeries" /> as its <ApiLink type="GeographicTileSeries" member="tileImagery" label="TileImagery" /> source.
-
-The <ApiLink type="HeatTileGenerator" /> object works such that it has three value paths, <ApiLink type="XValues" />, <ApiLink type="HeatTileGenerator" member="yValues" label="YValues" /> and <ApiLink type="HeatTileGenerator" member="Values" label="Values" />. As an example of how these could be used, in the case of a shape file that has information about population, you could consider the <ApiLink type="XValues" /> to be longitude, <ApiLink type="HeatTileGenerator" member="yValues" label="YValues" /> to be latitude, and <ApiLink type="HeatTileGenerator" member="Values" label="Values" /> to be the population data. Each of these properties takes a `number[]`.
-
-The display of the geographic tile series when using the heat-map functionality can be customized by setting the <ApiLink type="HeatTileGenerator" member="minimumColor" label="MinimumColor" /> and <ApiLink type="HeatTileGenerator" member="maximumColor" label="MaximumColor" /> properties to "rgba" strings that describe colors that you wish to correspond to the minimum and maximum values of the collection that you assign to the <ApiLink type="HeatTileGenerator" member="Values" label="Values" /> property of the <ApiLink type="HeatTileGenerator" />. You can further customize this by setting the <ApiLink type="HeatTileGenerator" member="scaleColors" label="ScaleColors" /> property of the generator to contain a collection of strings that describe colors, as this will tell the <ApiLink type="HeatTileGenerator" /> what colors to use for the displayed values in the map. It is also possible to customize how colors in your <ApiLink type="HeatTileGenerator" member="scaleColors" label="ScaleColors" /> collection blur together by using the <ApiLink type="HeatTileGenerator" member="blurRadius" label="BlurRadius" />, <ApiLink type="HeatTileGenerator" member="maxBlurRadius" label="MaxBlurRadius" />, and <ApiLink type="HeatTileGenerator" member="useBlurRadiusAdjustedForZoom" label="UseBlurRadiusAdjustedForZoom" /> properties.
-
-The <ApiLink type="HeatTileGenerator" /> can also use a logarithmic scale. If you want to use this, you can set the <ApiLink type="HeatTileGenerator" member="useLogarithmicScale" label="UseLogarithmicScale" /> property to **true**.
-
-## Web Worker
-
-The <ApiLink type="HeatTileGenerator" /> also has support for web workers to do the heavy lifting of the loading of the tile imagery from your shape file on a separate thread. This can greatly improve the performance of your geographic map when using the heat-map functionality. In order to use a web worker with the generator, you can set the <ApiLink type="HeatTileGenerator" member="useWebWorkers" label="UseWebWorkers" /> property to **true** and then set the <ApiLink type="HeatTileGenerator" member="webWorkerInstance" label="WebWorkerInstance" /> property to an instance of your web worker.
-
-```ts
-// heatworker.worker.ts
-import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core';
-
-const worker: Worker = self as any;
-worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
-HeatTileGeneratorWebWorker.postmessage = heatWorkerPostMessage;
-function heatWorkerPostMessage() {
-  (self as any).postMessage.apply(self, Array.prototype.slice.call(arguments));
-}
-HeatTileGeneratorWebWorker.start();
-export default {} as typeof Worker & (new () => Worker);
-
-```
-
-```ts
-import { IgxHeatTileGenerator } from 'igniteui-angular-core';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
-```
-
-## Creating Heatmap
-
-The following code snippet shows how to display a population based heat-map in the Ignite UI for Angular map component:
-
-```html
-<igx-geographic-map #map width="100%" height="calc(100% - 60px)">
-    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
-</igx-geographic-map>
-```
-
-```ts
-@ViewChild("map", { static: true })
-public map: IgxGeographicMapComponent;
-public data: any[];
-public tileImagery: IgxTileGeneratorMapImagery;
-// ...
-constructor() {
-    this.data = this.initData();
-
-    this.tileImagery = new IgxTileGeneratorMapImagery();
-
-    const con: IgxShapeDataSource = new IgxShapeDataSource();
-    con.importCompleted.subscribe((s, e) => {
-        const data = con.getPointData();
-        const lat: number[] = [];
-        const lon: number[] = [];
-        const val: number[] = [];
-        for (let i = 0; i < data.length; i++) {
-            const item = data[i];
-            for (let j = 0; j < item.points.length; j++) {
-                const pointsList = item.points[j];
-                for (let k = 0; k < pointsList.length; k++) {
-                    lat.push(pointsList[k].y);
-                    lon.push(pointsList[k].x);
-                }
-            }
-            const value = item.fieldValues["POP_2010"];
-            if (value >= 0) {
-                val.push(value);
-            } else {
-                val.push(0);
-            }
-        }
-
-        const gen = new IgxHeatTileGenerator();
-        gen.xValues = lon;
-        gen.yValues = lat;
-        gen.values = val;
-        gen.blurRadius = 6;
-        gen.maxBlurRadius = 20;
-        gen.useBlurRadiusAdjustedForZoom = true;
-        gen.minimumColor = "rgba(100,255, 0, 0.3922)";
-        gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
-        gen.useGlobalMinMax = true;
-        gen.useGlobalMinMaxAdjustedForZoom = true;
-        gen.useLogarithmicScale = true;
-        gen.useWebWorkers = true;
-        gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
-        gen.scaleColors = [
-            "rgba(0, 0, 255, 64)",
-            "rgba(0, 255, 255, 96)",
-            "rgba(0, 255, 0, 160)",
-            "rgba(255, 255, 0, 180)",
-            "rgba(255, 0, 0, 200)"
-        ];
-
-        this.tileImagery.tileGenerator = gen;
-    });
-    con.shapefileSource = "assets/Shapes/AmericanCities.shp";
-    con.databaseSource  = "assets/Shapes/AmericanCities.dbf";
-    con.dataBind();
-}
-```
-
-## API References
-<ApiLink type="GeographicTileSeries" />
-<ApiLink type="HeatTileGenerator" />
-<ApiLink type="ShapefileRecord" />
-<ApiLink type="ShapefileRecord" />
-<ApiLink type="TileGeneratorMapImagery" />
diff --git a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
deleted file mode 100644
index 9fc042994b..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-imagery-types.mdx
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Geographic Imagery | Infragistics"
-description: The Map allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps.View the demo, dependencies, usage and toolbar for more information.
-keywords: "Angular map, Geographic Imagery, tiles, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "Angular Geographic imagery is a detailed representation of the world from a top view perspective."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Imagery
-
-Angular Geographic imagery is a detailed representation of the world from a top view perspective. It can consist of an aerial-satellite map or road maps in a multi-scale imagery tiles structure. The geographic map component can display geographic imagery in order to provide end-users with rich and interactive world maps and geographic context for geo-spatial data.
-
-## Types of geographic imagery
-The map component can display geographic imagery tiles from three supported mapping services or from other mapping services that can be easily implemented in an application.
-
-The following table summarizes supported and custom geographic imagery sources for the map component.
-
-| Imagery                    | Description   |
-|----------------------------| --------------|
-| Open Street Maps | Provides geographic imagery from Open Street Maps service with an option to display a road map style only in one coloring theme. |
-| Bing Maps |Provides geographic imagery from Bing Maps service with configurable options to display the following map styles:<ul><li> Satellite Map Style</li><li> Satellite Map with Labels Style</li><li> Road Map Style</li></ul>|
-
-{/*| Map Quest |Provides custom geographic imagery from Map Quest service with configurable options to display the following map styles:<ul><li>Satellite Map Style</li><li>Road Map Style</li></ul>*/}
-
-## Map Background Content
-The map component's <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> property is used to display all supported types of geographic imagery sources. For each imagery source, there is an imagery class used for rendering corresponding geographic imagery tiles.
-
-The following table summarizes imagery classes provided by the map component.
-
-| Imagery Class | Description   |
-|---------------|---------------|
-|<ApiLink type="GeographicMapImagery" />|Represents the base control for all imagery classes that display all types of supported geographic imagery tiles. This class can be extended for the purpose of implementing support for geographic imagery tiles from other geographic imagery sources such as Map Quest mapping service.|
-|<ApiLink type="OpenStreetMapImagery" />|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Open Street Maps service.|
-
-{/*|<ApiLink type="BingMapsMapImagery" />|Represents the multi-scale imagery control for displaying geographic imagery tiles from the Bing Maps service.|*/}
-
-By default, the <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> property is set to <ApiLink type="OpenStreetMapImagery" /> object and the map component displays geographic imagery tiles from the Open Street Maps service. In order to display different types of geographic imagery tiles, the map component must be re-configured.
-
-In addition, the <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> property can be set to any object that inherits the class. However, only objects that inherit the <ApiLink type="GeographicMapImagery" /> class will allow panning and zooming of the map background content.
-
-In the map component, map background content is always rendered behind all geographic series. In other words, geographic imagery tiles are always rendered first and any geographic series in the map component's Series property is rendered on top of the geographic imagery tiles. This is especially important when displaying multiple geographic series in the same plot area of the map component because geographic imagery tiles can quickly get buried in the map view.
-
-## Code Snippet
-
-This code example explicitly sets <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> of the map component to the <ApiLink type="OpenStreetMapImagery" /> object which provides geographic imagery tile from the Open Street Maps.
-
-```html
- TODO - ADD CODE SNIPPET
-```
-
-## API References
-
-<ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /><br />
-<ApiLink type="GeographicMapImagery" /><br />
-<ApiLink type="OpenStreetMapImagery" /><br />
diff --git a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
deleted file mode 100644
index 700691b8e1..0000000000
--- a/docs/angular/src/content/en/components/geo-map-display-osm-imagery.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Displaying Open Street Maps Imagery | Infragistics"
-description: Use Infragistics' Angular to display imagery from OSM maps. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, OSM, Ignite UI for Angular, Infragistics, imagery tile source, map background"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The Angular OpenStreetMapImagery is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Displaying Imagery from Open Street Maps
-
-The Angular <ApiLink type="OpenStreetMapImagery" /> is a free geographic imagery mapping service created collaboratively by OpenStreetMap© contributors from around the world. It provides geographic imagery tiles of the world only in road map style without any configuration options. This geographic imagery service can be accessed directly on <a href="http://www.openstreetmap.org" target="_blank">www.OpenStreetMap.org</a> web site.
-By the default, the Ignite UI for Angular map component already displays geographic imagery from the Open Street Maps. Therefore, there is no need to configure the control to display geographic imagery from the Open Street Maps.
-
-## Angular Displaying Imagery from Open Street Maps Example
-
-<Sample src="/maps/geo-map/display-osm-imagery" height={500} alt="Angular Displaying Imagery from Open Street Maps Example" />
-
-## Code Snippet
-This code example explicitly sets <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> of the map component to the <ApiLink type="OpenStreetMapImagery" /> object which provides geographic imagery from  OpenStreetMap© contributors.
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps';
-// ...
-public map: IgxGeographicMapComponent;
-
-const tileSource = new IgxOpenStreetMapImagery();
-this.map.backgroundContent = tileSource;
-```
-
-## API References
-<ApiLink type="OpenStreetMapImagery" />
diff --git a/docs/angular/src/content/en/components/geo-map-navigation.mdx b/docs/angular/src/content/en/components/geo-map-navigation.mdx
deleted file mode 100644
index b94aab0922..0000000000
--- a/docs/angular/src/content/en/components/geo-map-navigation.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Angular Map | Data Visualization Tools | Map Navigation | Infragistics
-description: Navigate Infragistics' Angular map by panning right and left and zooming horizontally and vertically using mouse or touch. Learn about Ignite UI for Angular map's navigation capabilities!
-keywords: Angular map, navigation, Ignite UI for Angular, Infragistics
-license: commercial
-
-llms:
-  description: "Navigation in the GeographicMap control is enabled by default and it allows zooming and panning of the map content."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Navigating Map Content
-
-Navigation in the <ApiLink type="GeographicMap" /> control is enabled by default and it allows zooming and panning of the map content. However, this behavior can be changed using the <ApiLink type="GeographicMap" member="Zoomable" label="Zoomable" /> property. It is important to know that the map allows only synchronized zooming - scaling the map content with preserved aspect ratio. As result, it is not possible to scale the map content vertically without scaling it also horizontally and vice versa.
-
-## Angular Navigating Map Content Example
-
-<Sample src="/maps/geo-map/navigation" height={500} alt="Angular Navigating Map Content Example" />
-
-## Geographic Coordinates
-
-You navigate map content within geographic region bound by these coordinates:
-- horizontally from 180°E (negative) to 180°W (positive) longitudes
-- vertically from 85°S (negative) to 85°N (positive) latitudes
-
-This code snippet shows how navigate the map using geographic coordinates:
-
-## Window Coordinates
-
-Also, you can navigate map content within window rectangle bound by these relative coordinates:
-- horizontally from 0.0 to 1.0 values
-- vertically from 0.0 to 1.0 values
-
-This code snippet shows how navigate the map using relative window coordinates:
-
-## Properties
-The following table summarizes properties that can be used in navigation of the <ApiLink type="GeographicMap" /> control:
-
-| Property Name  | Property Type   | Description   |
-|----------------|-----------------|---------------|
-|<ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" />| Rect | Sets new position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values will zoom out the entire map content in the navigation window. |
-|<ApiLink type="GeographicMap" member="windowScale" label="WindowScale" />| number | Sets new size of the navigation window in of the map control. It is equivalent smallest value of Width or Height stored in the <ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> property |
-|<ApiLink type="SeriesViewer" member="windowPositionHorizontal" label="WindowPositionHorizontal" />| number | Sets new horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the <ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> property. |
-|<ApiLink type="SeriesViewer" member="windowPositionVertical" label="WindowPositionVertical" />| number | Sets new vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the <ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> property. |
-|<ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" />| Rect | Indicates current position and size of the navigation window in viewable area of the map content. Rect with 0, 0, 1, 1 values displays the entire map content in the navigation window.  |
-|<ApiLink type="GeographicMap" member="actualWindowScale" label="ActualWindowScale" />| number | Indicates current size of the navigation window in of the map control. It is equivalent to smallest value of Width or Height stored in the <ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> property |
-|<ApiLink type="SeriesViewer" member="actualWindowPositionHorizontal" label="ActualWindowPositionHorizontal" />| number | Indicates current horizontal position of the navigation window’s anchor point from the left edge of the map control. It is equivalent to value stored in the Left of the <ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> property. |
-|<ApiLink type="SeriesViewer" member="actualWindowPositionVertical" label="ActualWindowPositionVertical" />| number | Indicates vertical position of the navigation window’s anchor point from the top edge of the map control. It is equivalent to value stored in the Top of the <ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> property. |
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx b/docs/angular/src/content/en/components/geo-map-resources-esri.mdx
deleted file mode 100644
index 8560d434ef..0000000000
--- a/docs/angular/src/content/en/components/geo-map-resources-esri.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | ESRI Map Resources | Infragistics"
-description: Use Infragistics' Angular to display imagery from ESRI maps. View Ignite UI for Angular map tutorials!
-keywords: "Angular map, ESRI, Ignite UI for Angular, Infragistics, imagery tile source, map background"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The resource topic provides implementation of an utility that helps with using ArcGISOnlineMapImagery provided by Esri Maps in GeographicMap."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Esri Utility
-
-The resource topic provides implementation of an utility that helps with using <ApiLink type="ArcGISOnlineMapImagery" /> provided by Esri Maps in <ApiLink type="GeographicMap" />.
-
-## Code Snippet
-
-```ts
-
-export class EsriUtility {
-
-    public static getUri(style: EsriStyle): string {
-        let isHttpSecured = window.location.toString().startsWith("https:");
-        // resolving Esri Server uri based on hosting website
-        let uri: string = style;
-        if (!isHttpSecured) {
-            uri = uri.replace("https:", "http:");
-        }
-        return uri;
-    }
-}
-
-/**
- * Describes available links to imagery tile sources on public ArcGIS/Esri servers.
- * You can find up-to-date list on https://services.arcgisonline.com/arcgis/rest/services
- */
-export enum EsriStyle {
-
-    // these Esri maps show geographic tiles for the whole of world
-    WorldStreetMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-    WorldTopographicMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-    WorldImageryMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
-    WorldOceansMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer",
-    WorldNationalGeoMap = "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
-    WorldTerrainMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",
-    WorldDeLormesMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
-    WorldLightGrayMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer",
-    WorldShadedReliefMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer",
-    WorldPhysicalMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer",
-
-    // these Esri maps show geographic tiles for the whole of world without contours of continents
-    // therefore the Map should also load a shapefile of continents when using them
-    WorldAdminOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
-    WorldTransportationOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
-    WorldBoundariesDarkOverlay ="https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer",
-    WorldBoundariesLightOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer",
-    WorldLabelsLightGrayOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer",
-
-    // these Esri maps show only geographic tiles for the USA
-    // therefore the Map should be zoomed in to geographic bounds of USA when using them
-    UsaOwnerOccupiedHousing = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Owner_Occupied_Housing/MapServer",
-    UsaSoilSurvey = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
-    UsaPopulationOlderThanAge64 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Over_64/MapServer",
-    UsaPopulationYoungerThan18 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Under_18/MapServer",
-    UsaPopulationGrowth2015 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Projected_Population_Change/MapServer",
-    UsaUnemploymentRate = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer",
-    UsaSocialVulnerability = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer",
-    UsaRetailSpendingPotential = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Retail_Spending_Potential/MapServer",
-    UsaPopulationChange2010 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Recent_Population_Change/MapServer",
-    UsaPopulationChange2000 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_1990-2000_Population_Change/MapServer",
-    UsaPopulationDensity = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_Density/MapServer",
-    UsaPopulationByGender = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_by_Sex/MapServer",
-    UsaMedianHouseholdIncome = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer",
-    UsaMedianNetWorth = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer",
-    UsaMedianHomeValue = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Home_Value/MapServer",
-    UsaMedianAge = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Age/MapServer",
-    UsaLaborForceParticipation = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Labor_Force_Participation_Rate/MapServer",
-    UsaAverageHouseholdSize = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer",
-    UsaDiversityIndex = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Diversity_Index/MapServer",
-    UsaRailNetwork = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
-
-}
-```
-
-## API References
-<ApiLink type="ArcGISOnlineMapImagery" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
deleted file mode 100644
index 5c630aba3f..0000000000
--- a/docs/angular/src/content/en/components/geo-map-resources-shape-styling-utility.mdx
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: "Angular Map | Shape Map Resources | Infragistics"
-description: Use Infragistics' Angular JavaScript map to load geo-spatial data from shape files. View Ignite UI for Angular map demos!
-keywords: "Angular map, shape styling, conditional formatting, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The resource topic provides implementation of an utility that helps with styling UI elements of GeographicShapeSeries in Angular GeographicMap component."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Shape Styling Utility
-
-The resource topic provides implementation of an utility that helps with styling UI elements of <ApiLink type="GeographicShapeSeries" /> in Angular <ApiLink type="GeographicMap" /> component.
-
-## Required Imports
-
-```ts
-import { IgxGeographicShapeSeries } from 'igniteui-angular-maps';
-import { Style } from 'igniteui-angular-core';
-```
-
-## Utility Implementation
-
-```ts
-export abstract class ShapeStyling {
-  public defaultStroke = 'black';
-  public defaultFill = 'gray';
-  public defaultThickness = 0.5;
-  public defaultOpacity = 1.0;
-  public defaultStyle = new Style();
-
-  constructor() {
-    this.defaultStyle = new Style();
-    this.defaultStyle.stroke = this.defaultStroke;
-    this.defaultStyle.fill = this.defaultFill;
-    this.defaultStyle.opacity = this.defaultOpacity;
-    this.defaultStyle.strokeThickness = this.defaultThickness;
-  }
-
-  public abstract generate(record: any): Style;
-
-  public getValue(itemMemberPath: string, item: any): any {
-    let itemValue = null;
-
-    if (item.fieldValues !== undefined) { // .hasOwnProperty("fieldValues")) {
-      if (item.fieldsNames.indexOf(itemMemberPath) >= 0) {
-        itemValue = item.fieldValues[itemMemberPath];
-      } else {
-        console.log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property');
-      }
-    } else if (item.hasOwnProperty(itemMemberPath)) {
-      itemValue = item[itemMemberPath];
-    } else {
-      console.log('WARNING: Shape data item does not have ' + itemMemberPath + ' property');
-    }
-    return itemValue;
-  }
-}
-
-export class ShapeRandomStyling extends ShapeStyling {
-
-  public shapeThickness = 0.5;
-  public shapeOpacity = 1.0;
-  public shapeStrokeColors = ['black'];
-  public shapeFillColors   = ['red', 'orange', 'yellow'];
-
-  public styleMappings = new Map<string, Style>();
-
-  public generate(record: any): Style {
-    const id = record.fieldValues.Name || this.getRandomValue(0, 1000);
-
-    if (this.styleMappings.has(id)) {
-      return this.styleMappings.get(id);
-    } else {
-      const randStroke = this.getRandomItem(this.shapeStrokeColors);
-      const randFill = this.getRandomItem(this.shapeFillColors);
-      const shapeStyle = new Style();
-      shapeStyle.stroke = this.shapeStrokeColors[randStroke];
-      shapeStyle.fill = this.shapeFillColors[randFill];
-      shapeStyle.opacity = this.shapeOpacity;
-      shapeStyle.strokeThickness = this.shapeThickness;
-      this.styleMappings.set(id, shapeStyle);
-      return shapeStyle;
-    }
-  }
-
-  public getRandomValue(min: number, max: number): number {
-      return Math.round(min + (Math.random() * (max - min)));
-  }
-  public getRandomItem(array: any[]): any {
-    return this.getRandomValue(0, array.length - 1);
-  }
-}
-
-export class ShapeRangeStyling extends ShapeStyling {
-
-  public itemMemberPath = '';
-  public ranges: ShapeRange[] = [];
-
-  constructor() {
-    super();
-    this.ranges.push({ minimum: 0, maximum: 50, fill: 'yellow'} );
-    this.ranges.push({ minimum: 0, maximum: 100, fill: 'red'} );
-  }
-
-  public generate(record: any): Style {
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null) {
-      return this.defaultStyle;
-    }
-
-    for (const range of this.ranges) {
-      if (range.minimum <= itemValue && itemValue < range.maximum) {
-        const shapeStyle = new Style();
-        shapeStyle.opacity = range.opacity || this.defaultOpacity;
-        shapeStyle.fill    = range.fill || this.defaultFill;
-        shapeStyle.stroke  = range.stroke || this.defaultStroke;
-        shapeStyle.strokeThickness = range.strokeThickness || this.defaultThickness;
-        return shapeStyle;
-      }
-    }
-    return this.defaultStyle;
-  }
-}
-
-export class ShapeRange {
-
-  public minimum: number;
-  public maximum: number;
-
-  public opacity?: number;
-  public fill: string;
-  public stroke?: string;
-  public strokeThickness?: number;
-}
-
-export class ShapeScaleStyling extends ShapeStyling {
-
-  public shapeThickness = 0.5;
-  public shapeOpacity = 1.0;
-  public shapeStrokeColors = ['black'];
-  public shapeFillColors   = ['red', 'orange', 'yellow'];
-
-  public itemMemberPath = '';
-  public itemMinimumValue = 0;
-  public itemMaximumValue = 1000;
-
-  public isLogarithmic = true;
-
-  public generate(record: any): Style {
-
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null) {
-      return this.defaultStyle;
-    }
-
-    let fillColor = this.defaultFill;
-    let strokeColor = this.defaultStroke;
-    let scaleValue = this.getScaledValue(itemValue);
-
-    if (!Number.isNaN(scaleValue)) {
-      let fillIndex = Math.round(scaleValue * (this.shapeFillColors.length - 1));
-      let strokeIndex = Math.round(scaleValue * (this.shapeStrokeColors.length - 1));
-      fillColor = this.shapeFillColors[fillIndex];
-      strokeColor = this.shapeStrokeColors[strokeIndex];
-    }
-
-    const shapeStyle = new Style();
-    shapeStyle.fill = fillColor;
-    shapeStyle.stroke  = strokeColor;
-    shapeStyle.strokeThickness = this.shapeThickness;
-    shapeStyle.opacity = this.shapeOpacity;
-    return shapeStyle;
-  }
-
-  public getScaledValue(value: number): number {
-
-      if (!Number.isFinite(value) || Number.isNaN(value)) { return Number.NaN; }
-
-      let min = !Number.isFinite(this.itemMinimumValue) || Number.isNaN(this.itemMinimumValue) ? 0 : this.itemMinimumValue;
-      let max = !Number.isFinite(this.itemMaximumValue) || Number.isNaN(this.itemMaximumValue) ? 1000 : this.itemMaximumValue;
-
-      if (value < min || value > max) { return Number.NaN; }
-
-      if (this.isLogarithmic) {
-        return this.getLogarithmicValue(min, max, value);
-      } else {
-        return this.getLinearValue(min, max, value);
-      }
-  }
-
-  public getLogarithmicValue(min: number, max: number, value: number) {
-      if (!Number.isFinite(value)) { return Number.NaN; }
-
-      let newMin = Math.log10(min);
-      let newMax = Math.log10(max);
-      let newVal = Math.log10(value);
-
-      if (!Number.isFinite(newMin)) { newMin = 0.0; }
-      if (!Number.isFinite(newMax)) { newMax = 1000; }
-
-      if (newVal < 0) { newVal = 0.0; }
-
-      return this.getLinearValue(newMin, newMax, newVal);
-  }
-
-  public getLinearValue(min: number, max: number, value: number) {
-
-      if (!Number.isFinite(value)) { return Number.NaN; }
-
-      // if the value is outside the range
-      if (value < min || value > max) { return Number.NaN; }
-
-      let scaledValue = (value - min) / (max - min);
-      return scaledValue;
-  }
-}
-
-export class ShapeComparisonStyling extends ShapeStyling {
-
-  public itemMemberPath = '';
-  public itemMappings: ShapeComparison[] = [];
-
-  public generate(record: any): Style {
-
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null || itemValue === "") {
-      return this.defaultStyle;
-    }
-
-    for (const mapping of this.itemMappings) {
-      if (mapping.itemValue === itemValue) {
-        const shapeStyle = new Style();
-        shapeStyle.opacity = mapping.opacity || this.defaultOpacity;
-        shapeStyle.fill    = mapping.fill || this.defaultFill;
-        shapeStyle.stroke  = mapping.stroke || this.defaultStroke;
-        shapeStyle.strokeThickness = mapping.strokeThickness || this.defaultThickness;
-        return shapeStyle;
-      }
-    }
-
-    return this.defaultStyle;
-  }
-}
-
-export class ShapeComparison {
-  public itemValue: string;
-
-  public opacity?: number;
-  public fill: string;
-  public stroke?: string;
-  public strokeThickness?: number;
-}
-```
-
-## API References
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx
deleted file mode 100644
index de987398d0..0000000000
--- a/docs/angular/src/content/en/components/geo-map-resources-world-connections.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
----
-title: "Angular Map | World Connections | Data Source | Infragistics"
-description: Use Infragistics' Angular JavaScript map data utility to generate locations of airports, flight paths and geographic gridlines. View Ignite UI for Angular map demos!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular World Connections
-
-The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines. You can use these data sources as reference point for creating your own geographic data. Note that this utility depends on [WorldUtil](geo-map-resources-world-util.md) and [WorldLocations](geo-map-resources-world-locations.md) scripts.
-
-## Code Snippet
-
-```ts
-import WorldLocations from "./WorldLocations";
-import WorldUtils from "./WorldUtils"
-
-export default class WorldConnections {
-
-    private static airports: any[] = [];
-    private static airportsLookup = new Map<string, any>();
-
-    private static flights: any[] = [];
-    private static flightsLookup: string[] = [];
-
-    public static getFlights(): any[] {
-        if (this.flights.length == 0) this.init();
-        return this.flights;
-    }
-
-    public static getAirports(): any[] {
-        if (this.airports.length == 0) this.init();
-        return this.airports;
-    }
-
-    public static comparePopulation(a: any, b: any): number {
-        if (a.pop < b.pop) {
-            return 1;
-        }
-        if (a.pop > b.pop) {
-            return -1;
-        }
-        return 0;
-    }
-
-    public static init() {
-
-        const cities: any[] = WorldLocations.getAll();
-        cities.sort(this.comparePopulation);
-        let count = cities.length;
-        let minDistance = 200;
-        let maxDistance = 9000;
-        let flightsLimit = 1500;
-        let flightsCount  = 0;
-
-        for (let i = 0; i < count; i++) {
-            let origin = cities[i];
-            let connectionsCount = 0;
-            let connectionsMax = Math.min(20, Math.round(origin.pop * 4));
-
-            for (let ii = 0; ii < count; ii++)
-            {
-                let dest = cities[ii];
-                if (origin.name != dest.name)
-                {
-                    let route = [origin.name, dest.name].sort().join('-');
-                    let routeIsValid = this.flightsLookup.indexOf(route) == -1;
-                    let distance = Math.round(WorldUtils.calcDistance(origin, dest));
-                    let distanceIsValid = distance > minDistance && distance < maxDistance;
-                    let pass = Math.round((Math.random() * 200)) + 150;
-                    let time = distance / 800;
-                    let trafficIsValid = origin.pop > 3 && dest.pop > 1.0;
-
-                    if (routeIsValid && distanceIsValid && trafficIsValid) {
-                         this.flightsLookup.push(route);
-
-                        let paths = WorldUtils.calcPaths(origin, dest);
-                        flightsCount++;
-                        connectionsCount++;
-                        let id = origin.name.substring(0,3).toUpperCase() + "-" + flightsCount;
-                        let flight = { id: id, origin: origin, dest: dest, time: time, passengers: pass, distance: distance, points: paths };
-                        this.flights.push(flight);
-                    }
-                    if (connectionsCount > connectionsMax) {
-                        break;
-                    }
-                }
-            }
-            if (flightsCount > flightsLimit)  {
-                break;
-            }
-        }
-
-        for (const flight of this.flights) {
-            this.addAirport(flight.origin);
-            this.addAirport(flight.dest);
-        }
-
-        this.airports = Array.from(this.airportsLookup.values());
-    }
-
-    private static addAirport(city: any) {
-        if (this.airportsLookup.has(city.name)) {
-            this.airportsLookup.get(city.name).flights += 1;
-        } else {
-            let airport = Object.assign({flights: 1}, city );
-            this.airportsLookup.set(city.name, airport);
-        }
-    }
-
-    public static getGridlines(): any[] {
-        let gridlines = [];
-        // longitude lines
-        for (let lon = -180; lon <= 180; lon += 30) {
-
-            let line: any[] = [{x: lon, y: -90}, {x: lon, y: 90}];
-            let points: any[] = [line];
-
-            let coordinateLine = {points: points,
-                degree: lon,
-                direction: lon > 0 ? "E" : "W"
-              };
-              gridlines.push(coordinateLine);
-        }
-        // latitude lines
-        for (let lat = -90; lat <= 90; lat += 30) {
-
-            let line: any[] = [{x: -180, y: lat}, {x: 180, y: lat}];
-            let points: any[] = [line];
-            let coordinateLine = {points: points,
-                degree: lat,
-                direction: lat > 0 ? "N" : "S"
-              };
-              gridlines.push(coordinateLine);
-        }
-        return gridlines;
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx
deleted file mode 100644
index 2957669ae3..0000000000
--- a/docs/angular/src/content/en/components/geo-map-resources-world-locations.mdx
+++ /dev/null
@@ -1,662 +0,0 @@
----
-title: "Angular Map | World Locations | Data Source | Infragistics"
-description: Use Infragistics' Angular JavaScript map data utility to generate geographic locations of cities and capitals of countries. View Ignite UI for Angular map demos!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The resource topic provides implementation of data utility for generating geographic locations of cities and capitals of countries."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular World Locations
-
-The resource topic provides implementation of data utility for generating geographic locations of cities and capitals of countries.
-
-## Code Snippet
-
-```ts
-export default class WorldLocations {
-
-    private static locations: any[] = [];
-    private static capitals: any[] = [];
-    private static cities: any[] = [];
-
-    // get location of cities and capitals
-    public static getAll(): any[] {
-        if (this.locations.length == 0) this.init();
-        return this.locations;
-    }
-
-    // get location of cities
-    public static getCities(): any[] {
-        if (this.cities.length == 0) this.init();
-        return this.cities;
-    }
-
-    // get location of capitals
-    public static getCapitals(): any[] {
-        if (this.capitals.length == 0) this.init();
-        return this.capitals;
-    }
-
-    public static init() {
-        // console.log("WorldLocations init");
-        this.locations = [
-            { cap: false, pop:  0.468, lat: 68.9635467529297, lon: 33.0860404968262, country: "Russia", name: "Murmansk" },
-            { cap: false, pop:  0.416, lat: 64.5206680297852, lon: 40.6461601257324, country: "Russia", name: "Arkhangelsk" },
-            { cap: false, pop:  5.825, lat: 59.9518890380859, lon: 30.4533271789551, country: "Russia", name: "Saint Petersburg" },
-            { cap: false, pop:  0.152, lat: 59.5709991455078, lon: 150.780014038086, country: "Russia", name: "Magadan" },
-            { cap: false, pop:  1.160, lat: 58.0002365112305, lon: 56.2324638366699, country: "Russia", name: "Perm'" },
-            { cap: false, pop:  1.620, lat: 56.8465423583984, lon: 60.6101303100586, country: "Russia", name: "Yekaterinburg" },
-            { cap: false, pop:  2.025, lat: 56.2896766662598, lon: 43.9406700134277, country: "Russia", name: "Nizhniy Novgorod" },
-            { cap: false, pop:  1.800, lat: 55.8628082275391, lon: -4.26994752883911, country: "UK", name: "Glasgow" },
-            { cap: false, pop:  1.140, lat: 55.7330055236816, lon: 49.1454658508301, country: "Russia", name: "Kazan'" },
-            { cap: false, pop:  1.325, lat: 55.1450004577637, lon: 61.3926124572754, country: "Russia", name: "Chelyabinsk" },
-            { cap: false, pop:  1.175, lat: 55.063304901123, lon: 73.2502899169922, country: "Russia", name: "Omsk" },
-            { cap: false, pop:  1.600, lat: 55.0321006774902, lon: 82.9428482055664, country: "Russia", name: "Novosibirsk" },
-            { cap: false, pop:  1.100, lat: 54.8217353820801, lon: 56.0961265563965, country: "Russia", name: "Ufa" },
-            { cap: true,  pop:  0.582, lat: 54.6885681152344, lon: 25.2759666442871, country: "Lithuania", name: "Vilnius" },
-            { cap: false, pop:  0.685, lat: 54.5869255065918, lon: -5.90966033935547, country: "UK", name: "Belfast" },
-            { cap: false, pop:  0.909, lat: 54.3662033081055, lon: 18.624942779541, country: "Poland", name: "Gdansk" },
-            { cap: true,  pop:  1.650, lat: 53.8999366760254, lon: 27.5755672454834, country: "Byelarus", name: "Minsk" },
-            { cap: false, pop:  1.540, lat: 53.8087120056152, lon: -1.49752748012543, country: "UK", name: "Leeds" },
-            { cap: false, pop:  2.225, lat: 53.5711212158203, lon: 10.027606010437, country: "Germany", name: "Hamburg" },
-            { cap: false, pop:  2.775, lat: 53.479663848877, lon: -2.26177859306335, country: "UK", name: "Manchester" },
-            { cap: false, pop:  0.710, lat: 53.3740425109863, lon: -1.46298921108246, country: "UK", name: "Sheffield" },
-            { cap: true,  pop:  1.140, lat: 53.3415603637695, lon: -6.25734663009644, country: "Ireland", name: "Dublin" },
-            { cap: false, pop:  1.505, lat: 53.1385955810547, lon: 50.0961799621582, country: "Russia", name: "Samara" },
-            { cap: false, pop:  0.800, lat: 53.0801048278809, lon: 8.85762596130371, country: "Germany", name: "Bremen" },
-            { cap: true,  pop:  5.061, lat: 52.5162734985352, lon: 13.3275728225708, country: "Germany", name: "Berlin" },
-            { cap: false, pop:  2.675, lat: 52.4927520751953, lon: -1.86334776878357, country: "UK", name: "Birmingham" },
-            { cap: true,  pop:  1.860, lat: 52.3730430603027, lon: 4.89483308792114, country: "Netherlands", name: "Amsterdam" },
-            { cap: false, pop:  0.626, lat: 52.3174324035645, lon: 104.247833251953, country: "Russia", name: "Irkutsk" },
-            { cap: true,  pop:  2.323, lat: 52.244945526123, lon: 21.0118789672852, country: "Poland", name: "Warsaw" },
-            { cap: false, pop:  1.110, lat: 51.925594329834, lon: 4.48515224456787, country: "Netherlands", name: "Rotterdam" },
-            { cap: false, pop:  1.061, lat: 51.7779083251953, lon: 19.4764404296875, country: "Poland", name: "Lodz" },
-            { cap: false, pop:  0.568, lat: 51.5138130187988, lon: 7.46641826629639, country: "Germany", name: "Dortmund" },
-            { cap: false, pop:  0.515, lat: 51.4893379211426, lon: 6.77530431747437, country: "Germany", name: "Duisburg" },
-            { cap: true,  pop: 11.100, lat: 51.4879112243652, lon: -0.177998125553131, country: "UK", name: "london" },
-            { cap: false, pop:  3.867, lat: 51.3540420532227, lon: 7.12243509292603, country: "Germany", name: "Essen" },
-            { cap: false, pop:  0.700, lat: 51.3493309020996, lon: 12.3980741500854, country: "Germany", name: "Leipzig" },
-            { cap: false, pop:  1.100, lat: 51.207347869873, lon: 4.42605447769165, country: "Belgium", name: "Antwerpen" },
-            { cap: false, pop:  0.640, lat: 51.1218185424805, lon: 17.0381278991699, country: "Poland", name: "Wroclaw" },
-            { cap: false, pop:  0.465, lat: 51.0475540161133, lon: 3.73629117012024, country: "Belgium", name: "Gent" },
-            { cap: false, pop:  0.670, lat: 51.0456809997559, lon: 13.7053575515747, country: "Germany", name: "Dresden" },
-            { cap: false, pop:  0.671, lat: 51.0299987792969, lon: -114.050003051758, country: "Canada", name: "Calgary" },
-            { cap: false, pop:  1.760, lat: 50.9423446655273, lon: 6.93487167358398, country: "Germany", name: "Koln" },
-            { cap: true,  pop:  2.385, lat: 50.8370475769043, lon: 4.36761236190796, country: "Belgium", name: "Bruxelles" },
-            { cap: false, pop:  0.570, lat: 50.7345581054688, lon: 7.09981870651245, country: "Germany", name: "Bonn" },
-            { cap: false, pop:  1.020, lat: 50.6320838928223, lon: 3.06290125846863, country: "France", name: "Lille" },
-            { cap: false, pop:  0.750, lat: 50.6225280761719, lon: 5.56943559646606, country: "Belgium", name: "Liege" },
-            { cap: true,  pop:  2.900, lat: 50.4481582641602, lon: 30.5021114349365, country: "Ukraine", name: "Kiev" },
-            { cap: false, pop:  1.855, lat: 50.129997253418, lon: 8.66816711425781, country: "Germany", name: "Frankfurt am Main" },
-            { cap: true,  pop:  1.325, lat: 50.1058959960938, lon: 14.4565200805664, country: "Czech Repub", name: "Prague" },
-            { cap: false, pop:  0.828, lat: 50.0622406005859, lon: 19.9450569152832, country: "Poland", name: "Krakow" },
-            { cap: false, pop:  0.625, lat: 49.9211692810059, lon: -97.1244430541992, country: "Canada", name: "Winnipeg" },
-            { cap: false, pop:  0.614, lat: 49.879207611084, lon: 73.20263671875, country: "Kazakhstan", name: "Karaganda" },
-            { cap: false, pop:  0.790, lat: 49.8373107910156, lon: 24.0345211029053, country: "Ukraine", name: "Lvov" },
-            { cap: false, pop:  0.450, lat: 49.2029800415039, lon: 16.6162452697754, country: "Czech Repub", name: "Brno" },
-            { cap: true,  pop:  9.775, lat: 48.8815536499023, lon: 2.43283271789551, country: "France", name: "Paris" },
-            { cap: false, pop:  1.360, lat: 48.7102470397949, lon: 44.4836311340332, country: "Russia", name: "Volgograd" },
-            { cap: false, pop:  0.400, lat: 48.5834350585938, lon: 7.76799440383911, country: "France", name: "Strasbourg" },
-            { cap: false, pop:  0.335, lat: 48.2975959777832, lon: 14.2939014434814, country: "Austria", name: "Linz" },
-            { cap: true,  pop:  1.875, lat: 48.2021179199219, lon: 16.3209857940674, country: "Austria", name: "Vienna" },
-            { cap: false, pop:  1.955, lat: 48.1409759521484, lon: 11.5429534912109, country: "Germany", name: "Munchen" },
-            { cap: false, pop:  2.200, lat: 48.0401458740234, lon: 37.7370529174805, country: "Ukraine", name: "Donets'k" },
-            { cap: true,  pop:  0.548, lat: 47.928596496582, lon: 106.912353515625, country: "Mongolia", name: "Ulaanbaatar" },
-            { cap: true,  pop:  2.565, lat: 47.5146255493164, lon: 19.0942497253418, country: "Hungary", name: "Budapest" },
-            { cap: false, pop:  1.150, lat: 47.3440055847168, lon: 123.964965820313, country: "China", name: "Qiqihar" },
-            { cap: false, pop:  0.185, lat: 47.2654609680176, lon: 11.3499822616577, country: "Austria", name: "Innsbruck" },
-            { cap: false, pop:  1.165, lat: 47.2320976257324, lon: 39.6880378723145, country: "Russia", name: "Rostov-na-Donu" },
-            { cap: false, pop:  0.465, lat: 47.2194328308105, lon: -1.56156122684479, country: "France", name: "Nantes" },
-            { cap: false, pop:  0.325, lat: 47.0649223327637, lon: 15.4311008453369, country: "Austria", name: "Graz" },
-            { cap: true,  pop:  0.299, lat: 46.9482078552246, lon: 7.44573640823364, country: "Switzerland", name: "Bern" },
-            { cap: false, pop:  0.603, lat: 46.802074432373, lon: -71.2449340820313, country: "Canada", name: "Quebec" },
-            { cap: false, pop:  1.185, lat: 46.5722007751465, lon: 30.6839370727539, country: "Ukraine", name: "Odessa" },
-            { cap: false, pop:  2.670, lat: 45.7552185058594, lon: 126.622634887695, country: "China", name: "Harbin" },
-            { cap: false, pop:  1.275, lat: 45.7470817565918, lon: 4.85540056228638, country: "France", name: "Lyon" },
-            { cap: false, pop:  2.921, lat: 45.541015625, lon: -73.6535339355469, country: "Canada", name: "Montreal" },
-            { cap: false, pop:  3.750, lat: 45.4733810424805, lon: 9.19046401977539, country: "Italy", name: "Milano" },
-            { cap: false, pop:  0.420, lat: 45.4247741699219, lon: 12.370719909668, country: "Italy", name: "Venezia" },
-            { cap: true,  pop:  0.819, lat: 45.3742179870605, lon: -75.650749206543, country: "Canada", name: "Ottawa" },
-            { cap: false, pop:  1.550, lat: 45.0748748779297, lon: 7.66642618179321, country: "Italy", name: "Torino" },
-            { cap: false, pop:  2.012, lat: 44.924186706543, lon: -93.3077926635742, country: "US", name: "Minneapolis" },
-            { cap: false, pop:  0.640, lat: 44.8414726257324, lon: -0.599498748779297, country: "France", name: "Bordeaux" },
-            { cap: true,  pop:  1.400, lat: 44.7996826171875, lon: 20.4125556945801, country: "Serbia", name: "Beograd" },
-            { cap: true,  pop:  2.250, lat: 44.4304847717285, lon: 26.1229763031006, country: "Romania", name: "Bucuresti" },
-            { cap: false, pop:  1.740, lat: 43.8813171386719, lon: 125.312652587891, country: "China", name: "Changchung" },
-            { cap: false, pop:  1.170, lat: 43.8502159118652, lon: 126.56706237793, country: "China", name: "Jilin" },
-            { cap: false, pop:  1.040, lat: 43.7826652526855, lon: 87.5865173339844, country: "China", name: "Urumqi" },
-            { cap: false, pop:  0.640, lat: 43.7815742492676, lon: 11.207745552063, country: "Italy", name: "Firenze" },
-            { cap: false, pop:  3.427, lat: 43.7207679748535, lon: -79.4126358032227, country: "Canada", name: "Toronto" },
-            { cap: false, pop:  0.541, lat: 43.5999603271484, lon: 1.43798303604126, country: "France", name: "Toulouse" },
-            { cap: false, pop:  0.985, lat: 43.2821578979492, lon: -2.97378325462341, country: "Spain", name: "Bilbao" },
-            { cap: true,  pop:  1.190, lat: 43.2550621032715, lon: 76.9126281738281, country: "Kazakhstan", name: "Almaty" },
-            { cap: false, pop:  0.816, lat: 43.2104644775391, lon: -77.635612487793, country: "US", name: "Rochester" },
-            { cap: false, pop:  1.375, lat: 43.0679473876953, lon: -87.9907379150391, country: "US", name: "Milwaukee" },
-            { cap: false, pop:  1.900, lat: 43.0552520751953, lon: 141.345474243164, country: "Japan", name: "Sapporo" },
-            { cap: false, pop:  1.483, lat: 42.8986625671387, lon: -78.8484344482422, country: "US", name: "Buffalo" },
-            { cap: true,  pop:  1.205, lat: 42.7072639465332, lon: 23.3318710327148, country: "Bulgaria", name: "Sofia" },
-            { cap: false, pop:  4.692, lat: 42.3943138122559, lon: -83.0789260864258, country: "US", name: "Detroit" },
-            { cap: false, pop:  3.972, lat: 42.3752975463867, lon: -71.1025848388672, country: "US", name: "Boston" },
-            { cap: false, pop:  1.270, lat: 41.8591575622559, lon: 123.905570983887, country: "China", name: "Fushun" },
-            { cap: false, pop:  7.717, lat: 41.826545715332, lon: -87.6413040161133, country: "US", name: "Chicago" },
-            { cap: false, pop:  3.840, lat: 41.8021621704102, lon: 123.383056640625, country: "China", name: "Shenyang" },
-            { cap: true,  pop:  1.460, lat: 41.721809387207, lon: 44.7831268310547, country: "Georgia", name: "Tbilisi" },
-            { cap: false, pop:  0.575, lat: 41.6512641906738, lon: -0.878205060958862, country: "Spain", name: "Zaragoza" },
-            { cap: false, pop:  2.218, lat: 41.3907165527344, lon: -81.7275085449219, country: "US", name: "Cleveland" },
-            { cap: true,  pop:  0.211, lat: 41.3316535949707, lon: 19.8318042755127, country: "Albania", name: "Tirane" },
-            { cap: false, pop:  1.300, lat: 41.1152458190918, lon: 122.977012634277, country: "China", name: "Anshan" },
-            { cap: false, pop:  5.750, lat: 41.0659561157227, lon: 29.0060691833496, country: "Turkey", name: "Istanbul" },
-            { cap: false, pop:  0.682, lat: 40.693920135498, lon: -111.89217376709, country: "US", name: "Salt Lake City" },
-            { cap: false, pop:  2.219, lat: 40.4972038269043, lon: -79.9970855712891, country: "US", name: "Pittsburgh" },
-            { cap: true,  pop:  4.650, lat: 40.4422187805176, lon: -3.69096946716309, country: "Spain", name: "Madrid" },
-            { cap: true,  pop:  2.020, lat: 40.3242988586426, lon: 49.8162384033203, country: "Azerbaijan", name: "Baku" },
-            { cap: true,  pop:  1.315, lat: 40.2080230712891, lon: 44.5326690673828, country: "Armenia", name: "Yerevan" },
-            { cap: false, pop:  0.964, lat: 40.0446434020996, lon: -82.9927062988281, country: "US", name: "Columbus" },
-            { cap: true,  pop:  2.400, lat: 39.929328918457, lon: 32.853271484375, country: "Turkey", name: "Ankara" },
-            { cap: false, pop:  5.209, lat: 39.9275512695313, lon: -75.2182235717773, country: "US", name: "Philadelphia" },
-            { cap: true,  pop:  6.450, lat: 39.906192779541, lon: 116.388038635254, country: "China", name: "Beijing" },
-            { cap: false, pop:  0.246, lat: 39.9044532775879, lon: 41.2918243408203, country: "Turkey", name: "Erzurum" },
-            { cap: false, pop:  0.366, lat: 39.6575813293457, lon: 66.9476013183594, country: "Uzbekistan", name: "Samarkand" },
-            { cap: false, pop:  1.060, lat: 39.6154441833496, lon: 118.180213928223, country: "China", name: "Tangshan" },
-            { cap: false, pop:  1.270, lat: 39.4709167480469, lon: -0.367400944232941, country: "Spain", name: "Valencia" },
-            { cap: false, pop:  1.960, lat: 39.3218841552734, lon: -76.6183776855469, country: "US", name: "Baltimore" },
-            { cap: false, pop:  0.305, lat: 39.2251434326172, lon: 9.10890960693359, country: "Italy", name: "Cagliari" },
-            { cap: false, pop:  1.480, lat: 39.1480102539063, lon: -84.4770202636719, country: "US", name: "Cincinnati" },
-            { cap: false, pop:  4.880, lat: 39.1284141540527, lon: 117.18522644043, country: "China", name: "Tianjin" },
-            { cap: true,  pop:  1.600, lat: 39.0285148620605, lon: 125.757514953613, country: "Korea D P Rp", name: "Pyongyang" },
-            { cap: false, pop:  1.272, lat: 38.9941177368164, lon: -94.6265640258789, country: "US", name: "Kansas City" },
-            { cap: true,  pop:  3.221, lat: 38.8909111022949, lon: -76.9538345336914, country: "US", name: "Washington D.C." },
-            { cap: false, pop:  2.203, lat: 38.6388854980469, lon: -90.3419799804688, country: "US", name: "St. Louis" },
-            { cap: false, pop:  0.866, lat: 38.5670166015625, lon: -121.422706604004, country: "US", name: "Sacramento" },
-            { cap: false, pop:  0.971, lat: 38.0809783935547, lon: 46.2901191711426, country: "Iran", name: "Tabriz" },
-            { cap: false, pop:  1.190, lat: 38.0770950317383, lon: 114.559707641602, country: "China", name: "Shijiazhuang" },
-            { cap: true,  pop:  0.398, lat: 37.9504203796387, lon: 58.3901329040527, country: "Turkmenistan", name: "Ashkhabad" },
-            { cap: false, pop:  1.660, lat: 37.8930549621582, lon: 112.551704406738, country: "China", name: "Taiyuan" },
-            { cap: true,  pop: 15.850, lat: 37.542350769043, lon: 126.935249328613, country: "Korea Rep", name: "Seoul" },
-            { cap: false, pop:  0.945, lat: 37.3726463317871, lon: -5.97083187103271, country: "Spain", name: "Sevilla" },
-            { cap: false, pop:  0.778, lat: 36.9999809265137, lon: 35.3243637084961, country: "Turkey", name: "Adana" },
-            { cap: false, pop:  0.796, lat: 36.8792915344238, lon: -76.2685699462891, country: "US", name: "Norfolk" },
-            { cap: true,  pop:  1.225, lat: 36.8188133239746, lon: 10.1659603118896, country: "Tunisia", name: "Tunis" },
-            { cap: false, pop:  0.830, lat: 36.7914962768555, lon: 118.062042236328, country: "China", name: "Zibo" },
-            { cap: false, pop:  1.460, lat: 36.6555366516113, lon: 116.967056274414, country: "China", name: "Jinan" },
-            { cap: false, pop:  0.571, lat: 36.3355674743652, lon: 43.1371269226074, country: "Iraq", name: "Mosul" },
-            { cap: false, pop:  1.464, lat: 36.2900695800781, lon: 59.596851348877, country: "Iran", name: "Mashhad" },
-            { cap: false, pop:  1.216, lat: 36.2155456542969, lon: 37.1592826843262, country: "Syria", name: "Aleppo" },
-            { cap: false, pop:  1.270, lat: 36.1134300231934, lon: 103.599594116211, country: "China", name: "Lanzhou" },
-            { cap: false, pop:  2.206, lat: 35.8635368347168, lon: 128.591384887695, country: "Korea Rep", name: "Taegu" },
-            { cap: true,  pop:  6.400, lat: 35.7744750976563, lon: 51.4476509094238, country: "Iran", name: "Tehran" },
-            { cap: true,  pop: 23.620, lat: 35.6830558776855, lon: 139.809188842773, country: "Japan", name: "Tokyo" },
-            { cap: false, pop:  1.089, lat: 35.5045700073242, lon: 139.72721862793, country: "Japan", name: "Kawasaki" },
-            { cap: false, pop:  0.742, lat: 35.4895896911621, lon: -97.5302963256836, country: "US", name: "Oklahoma City" },
-            { cap: false, pop:  2.993, lat: 35.437385559082, lon: 139.619659423828, country: "Japan", name: "Yokohama" },
-            { cap: false, pop:  0.479, lat: 35.2058143615723, lon: -80.8356857299805, country: "US", name: "Charlotte" },
-            { cap: false, pop:  3.800, lat: 35.1578674316406, lon: 129.0546875, country: "Korea Rep", name: "Pusan" },
-            { cap: false, pop:  4.800, lat: 35.1549224853516, lon: 136.920593261719, country: "Japan", name: "Nagoya" },
-            { cap: false, pop:  0.853, lat: 35.1147270202637, lon: -90.0003280639648, country: "US", name: "Memphis" },
-            { cap: false, pop:  1.479, lat: 35.0091285705566, lon: 135.754821777344, country: "Japan", name: "Kyoto" },
-            { cap: false, pop:  1.170, lat: 34.757682800293, lon: 113.641777038574, country: "China", name: "Zhengzhou" },
-            { cap: false, pop:  0.431, lat: 34.7338752746582, lon: 36.7181739807129, country: "Syria", name: "Homs" },
-            { cap: false, pop:  0.740, lat: 34.6713485717773, lon: 112.361236572266, country: "China", name: "Luoyang" },
-            { cap: false, pop: 15.040, lat: 34.6355285644531, lon: 135.519119262695, country: "Japan", name: "Osaka" },
-            { cap: true,  pop:  1.179, lat: 34.5309066772461, lon: 69.1367568969727, country: "Afghanistan", name: "Kabul" },
-            { cap: false, pop:  1.575, lat: 34.377555847168, lon: 132.444778442383, country: "Japan", name: "Hiroshima" },
-            { cap: false, pop:  2.050, lat: 34.265697479248, lon: 108.883361816406, country: "China", name: "Xian" },
-            { cap: false, pop:  0.535, lat: 34.0435676574707, lon: -4.99554777145386, country: "Morocco", name: "Fes" },
-            { cap: false, pop:  1.963, lat: 33.7957000732422, lon: -84.3492279052734, country: "US", name: "Atlanta" },
-            { cap: true,  pop:  0.204, lat: 33.7181510925293, lon: 73.060546875, country: "Pakistan", name: "Islamabad" },
-            { cap: false, pop:  0.836, lat: 33.6058044433594, lon: 73.0437469482422, country: "Pakistan", name: "Rawalpindi" },
-            { cap: true,  pop:  1.850, lat: 33.5193023681641, lon: 36.3134536743164, country: "Syria", name: "Damascus" },
-            { cap: false, pop:  1.482, lat: 33.5090217590332, lon: -112.110260009766, country: "US", name: "Phoenix" },
-            { cap: true,  pop:  3.841, lat: 33.3340377807617, lon: 44.397834777832, country: "Iraq", name: "Baghdad" },
-            { cap: false, pop:  2.727, lat: 32.763729095459, lon: -96.663688659668, country: "US", name: "Dallas" },
-            { cap: false, pop:  0.987, lat: 32.6513900756836, lon: 51.6791877746582, country: "Iran", name: "Esfahan" },
-            { cap: false, pop:  2.290, lat: 32.0483665466309, lon: 118.768905639648, country: "China", name: "Nanjing" },
-            { cap: true,  pop:  1.250, lat: 31.9493827819824, lon: 35.9329071044922, country: "Jordan", name: "Amman" },
-            { cap: false, pop:  0.595, lat: 31.6308898925781, lon: 74.8715515136719, country: "India", name: "Amritsar" },
-            { cap: false, pop:  3.025, lat: 31.5450534820557, lon: 74.3406753540039, country: "Pakistan", name: "Lahore" },
-            { cap: false, pop:  1.104, lat: 31.4089508056641, lon: 73.0834579467773, country: "Pakistan", name: "Faisalabad" },
-            { cap: false, pop:  9.300, lat: 31.2478694915771, lon: 121.47265625, country: "China", name: "Shanghai" },
-            { cap: false, pop:  1.810, lat: 30.6700687408447, lon: 104.071273803711, country: "China", name: "Chengdu" },
-            { cap: false, pop:  3.490, lat: 30.5724983215332, lon: 114.279220581055, country: "China", name: "Wuhan" },
-            { cap: false, pop:  0.617, lat: 30.503490447998, lon: 47.7608642578125, country: "Iraq", name: "Al Basra" },
-            { cap: false, pop:  1.270, lat: 30.2526245117188, lon: 120.165077209473, country: "China", name: "Hangzhou" },
-            { cap: true,  pop:  9.300, lat: 30.0779113769531, lon: 31.2507972717285, country: "Egypt", name: "Cairo" },
-            { cap: false, pop:  1.185, lat: 29.9563789367676, lon: -90.0986862182617, country: "US", name: "New Orleans" },
-            { cap: false, pop:  2.755, lat: 29.7718296051025, lon: -95.407112121582, country: "US", name: "Houston" },
-            { cap: false, pop:  0.084, lat: 29.6507034301758, lon: 91.1320877075195, country: "China", name: "Lhasa" },
-            { cap: false, pop:  2.450, lat: 29.5441036224365, lon: 106.522689819336, country: "China", name: "Chongqing" },
-            { cap: false, pop:  0.968, lat: 29.4299221038818, lon: -98.5245742797852, country: "US", name: "San Antonio" },
-            { cap: false, pop:  1.030, lat: 28.6712398529053, lon: 115.88941192627, country: "China", name: "Nanchang" },
-            { cap: true,  pop:  0.273, lat: 28.5687255859375, lon: 77.2167510986328, country: "India", name: "New Delhi" },
-            { cap: false, pop:  7.200, lat: 28.5264587402344, lon: 77.2243728637695, country: "India", name: "Delhi" },
-            { cap: false, pop:  1.190, lat: 28.1976413726807, lon: 112.968482971191, country: "China", name: "Changsha" },
-            { cap: true,  pop:  0.320, lat: 27.7120170593262, lon: 85.3129501342773, country: "Nepal", name: "Kathmandu" },
-            { cap: true,  pop:  0.012, lat: 27.44260597229, lon: 89.6673278808594, country: "Bhutan", name: "Thimbu" },
-            { cap: false, pop:  1.025, lat: 26.9051132202148, lon: 75.8012771606445, country: "India", name: "Jaipur" },
-            { cap: false, pop:  1.060, lat: 26.8494281768799, lon: 80.9197235107422, country: "India", name: "Lucknow" },
-            { cap: false, pop:  1.010, lat: 26.5719413757324, lon: 106.700302124023, country: "China", name: "Guiyang" },
-            { cap: false, pop:  1.875, lat: 26.4578304290771, lon: 80.3178634643555, country: "India", name: "Kanpur" },
-            { cap: false, pop:  0.890, lat: 26.0710163116455, lon: 119.303520202637, country: "China", name: "Fuzhou" },
-            { cap: false, pop:  2.827, lat: 25.8321304321289, lon: -80.2702178955078, country: "US", name: "Miami" },
-            { cap: false, pop:  2.015, lat: 25.6773529052734, lon: -100.317085266113, country: "Mexico", name: "Monterrey" },
-            { cap: false, pop:  1.025, lat: 25.6138973236084, lon: 85.1353454589844, country: "India", name: "Patna" },
-            { cap: false, pop:  0.800, lat: 25.3801860809326, lon: 68.3664703369141, country: "Pakistan", name: "Hyderabad" },
-            { cap: false, pop:  0.925, lat: 25.2820110321045, lon: 82.9563369750977, country: "India", name: "Benares" },
-            { cap: true,  pop:  0.310, lat: 25.2036418914795, lon: 51.4972343444824, country: "Qatar", name: "Doha" },
-            { cap: false, pop:  1.280, lat: 25.0510330200195, lon: 102.702125549316, country: "China", name: "Kunming" },
-            { cap: true,  pop:  6.130, lat: 25.0350914001465, lon: 121.506729125977, country: "Taiwan", name: "Taipei" },
-            { cap: false, pop:  0.715, lat: 24.1436424255371, lon: 120.670280456543, country: "Taiwan", name: "T`ai-chung" },
-            { cap: true,  pop:  3.430, lat: 23.7099189758301, lon: 90.4071426391602, country: "Bangladesh", name: "Dhaka" },
-            { cap: false, pop:  3.050, lat: 23.0961952209473, lon: 113.293609619141, country: "China", name: "Guangzhou" },
-            { cap: false, pop:  2.400, lat: 23.0397911071777, lon: 72.5668640136719, country: "India", name: "Ahmadabad" },
-            { cap: false, pop:  0.648, lat: 22.8426475524902, lon: 89.5582427978516, country: "Bangladesh", name: "Khulna" },
-            { cap: false, pop: 11.100, lat: 22.5435371398926, lon: 88.3342208862305, country: "India", name: "Calcutta" },
-            { cap: false, pop:  0.435, lat: 22.2432346343994, lon: -97.8426284790039, country: "Mexico", name: "Tampico" },
-            { cap: false, pop:  0.533, lat: 21.975944519043, lon: 96.0841522216797, country: "Burma", name: "Mandalay" },
-            { cap: false, pop:  0.550, lat: 21.4273815155029, lon: 39.8148384094238, country: "Saudi Arabia", name: "Mecca" },
-            { cap: false, pop:  1.302, lat: 21.1557579040527, lon: 79.089111328125, country: "India", name: "Nagpur" },
-            { cap: true,  pop:  1.500, lat: 21.0319480895996, lon: 105.81990814209, country: "Vietnam", name: "Hanoi" },
-            { cap: false, pop:  0.385, lat: 20.8613586425781, lon: 106.679794311523, country: "Vietnam", name: "Haiphong" },
-            { cap: false, pop:  0.400, lat: 20.8218688964844, lon: -89.552864074707, country: "Mexico", name: "Merida" },
-            { cap: false, pop:  2.325, lat: 20.6735916137695, lon: -103.343795776367, country: "Mexico", name: "Guadalajara" },
-            { cap: false, pop:  0.207, lat: 19.6157131195068, lon: 37.2196884155273, country: "Sudan", name: "Bur Sudan" },
-            { cap: true,  pop: 14.100, lat: 19.4270458221436, lon: -99.127571105957, country: "Mexico", name: "Mexico City" },
-            { cap: false, pop:  1.055, lat: 19.0486316680908, lon: -98.1929473876953, country: "Mexico", name: "Puebla de Zaragoza" },
-            { cap: false, pop:  1.775, lat: 18.5357475280762, lon: 73.8522720336914, country: "India", name: "Pune" },
-            { cap: true,  pop:  0.880, lat: 18.5266170501709, lon: -72.3431091308594, country: "Haiti", name: "Port-au-Prince" },
-            { cap: true,  pop:  1.775, lat: 18.4006156921387, lon: -66.0817565917969, country: "Puerto Rico", name: "San Juan" },
-            { cap: true,  pop:  0.770, lat: 18.0157127380371, lon: -76.7973022460938, country: "Jamaica", name: "Kingston" },
-            { cap: false, pop:  2.750, lat: 17.3945465087891, lon: 78.4850311279297, country: "India", name: "Hyderabad" },
-            { cap: true,  pop:  2.800, lat: 16.8722229003906, lon: 96.1248931884766, country: "Burma", name: "Rangoon" },
-            { cap: true,  pop:  0.427, lat: 15.3614444732666, lon: 44.2095031738281, country: "Yemen", name: "Sanaa" },
-            { cap: true,  pop:  1.400, lat: 14.6180076599121, lon: -90.52490234375, country: "Guatemala", name: "Guatemala" },
-            { cap: true,  pop:  0.552, lat: 14.0990505218506, lon: -87.2030944824219, country: "Honduras", name: "Tegucigalpa" },
-            { cap: true,  pop:  6.450, lat: 13.7455711364746, lon: 100.552665710449, country: "Thailand", name: "Bangkok" },
-            { cap: true,  pop:  0.920, lat: 13.7014122009277, lon: -89.2002334594727, country: "El Salvador", name: "San Salvador" },
-            { cap: true,  pop:  0.398, lat: 13.6045436859131, lon: 2.08344984054565, country: "Niger", name: "Niamey" },
-            { cap: false, pop:  4.475, lat: 13.0615034103394, lon: 80.2478256225586, country: "India", name: "Madras" },
-            { cap: false, pop:  2.950, lat: 12.9747505187988, lon: 77.5877304077148, country: "India", name: "Bangalore" },
-            { cap: true,  pop:  0.646, lat: 12.6529502868652, lon: -7.98648166656494, country: "Mali", name: "Bamako" },
-            { cap: true,  pop:  0.682, lat: 12.1514730453491, lon: -86.2730331420898, country: "Nicaragua", name: "Managua" },
-            { cap: true,  pop:  0.700, lat: 11.564736366272, lon: 104.913192749023, country: "Cambodia", name: "Phnom Penh" },
-            { cap: false, pop:  3.100, lat: 10.7591819763184, lon: 106.662452697754, country: "Vietnam", name: "Ho Chi Minh City" },
-            { cap: false, pop:  0.891, lat: 10.6450433731079, lon: -71.6371459960938, country: "Venezuela", name: "Maracaibo" },
-            { cap: true,  pop:  3.600, lat: 10.4960489273071, lon: -66.8982849121094, country: "Venezuela", name: "Caracas" },
-            { cap: false, pop:  0.498, lat: 10.0656652450562, lon: -69.3391952514648, country: "Venezuela", name: "Barquisimeto" },
-            { cap: true,  pop:  0.670, lat: 9.93047618865967, lon: -84.07861328125, country: "Costa Rica", name: "San Jose" },
-            { cap: false, pop:  0.960, lat: 9.91398620605469, lon: 78.1217269897461, country: "India", name: "Madurai" },
-            { cap: false, pop:  1.144, lat: 7.37884044647217, lon: 3.8952784538269, country: "Nigeria", name: "Ibadan" },
-            { cap: false, pop:  0.409, lat: 7.08008003234863, lon: 125.613677978516, country: "Philippines", name: "Davao" },
-            { cap: false, pop:  0.253, lat: 6.45053863525391, lon: 7.4920802116394, country: "Nigeria", name: "Enugu" },
-            { cap: false, pop:  2.095, lat: 6.24114656448364, lon: -75.5920333862305, country: "Colombia", name: "Medellin" },
-            { cap: true,  pop:  1.250, lat: 5.55856275558472, lon: -0.200923636555672, country: "Ghana", name: "Accra" },
-            { cap: true,  pop:  1.950, lat: 5.32485723495483, lon: -4.02188682556152, country: "Ivory Coast", name: "Abidjan" },
-            { cap: true,  pop:  4.260, lat: 4.63021993637085, lon: -74.0805130004883, country: "Colombia", name: "Bogota" },
-            { cap: true,  pop:  0.474, lat: 4.3658561706543, lon: 18.5623416900635, country: "Cent Af Rep", name: "Bangui" },
-            { cap: true,  pop:  0.654, lat: 3.86512303352356, lon: 11.5136413574219, country: "Cameroon", name: "Yaounde" },
-            { cap: false, pop:  1.374, lat: 3.58524203300476, lon: 98.6755981445313, country: "Indonesia", name: "Medan" },
-            { cap: false, pop:  1.400, lat: 3.45685529708862, lon: -76.5224380493164, country: "Colombia", name: "Cali" },
-            { cap: true,  pop:  1.475, lat: 3.1502103805542, lon: 101.707672119141, country: "Malaysia", name: "Kuala Lumpur" },
-            { cap: true,  pop:  0.600, lat: 2.04117751121521, lon: 45.3441429138184, country: "Somalia", name: "Muqdisho" },
-            { cap: false, pop:  0.283, lat: 0.519284904003143, lon: 25.1961479187012, country: "Zaire", name: "Kisangani" },
-            { cap: true,  pop:  1.050, lat: -0.229498133063316, lon: -78.524284362793, country: "Ecuador", name: "Quito" },
-            { cap: false, pop:  0.179, lat: -3.75289535522461, lon: -73.1914901733398, country: "Peru", name: "Iquitos" },
-            { cap: false, pop:  1.825, lat: -3.78332185745239, lon: -38.5889015197754, country: "Brazil", name: "Fortaleza" },
-            { cap: true,  pop:  0.586, lat: -4.28518676757813, lon: 15.2851486206055, country: "Congo", name: "Brazzaville" },
-            { cap: false, pop:  0.291, lat: -5.89221096038818, lon: 22.4027786254883, country: "Zaire", name: "Kananga" },
-            { cap: true,  pop:  1.300, lat: -6.81735897064209, lon: 39.2533493041992, country: "Tanzania", name: "Dar es Salaam" },
-            { cap: false, pop:  1.800, lat: -6.91243028640747, lon: 107.606903076172, country: "Indonesia", name: "Bandung" },
-            { cap: false, pop:  2.625, lat: -8.08516788482666, lon: -34.9146385192871, country: "Brazil", name: "Recife" },
-            { cap: false, pop:  0.155, lat: -12.7177352905273, lon: 13.464879989624, country: "Angola", name: "Benguela" },
-            { cap: true,  pop:  1.568, lat: -15.7921094894409, lon: -47.8977470397949, country: "Brazil", name: "Brasilia" },
-            { cap: false, pop:  0.447, lat: -16.3975391387939, lon: -71.5227432250977, country: "Peru", name: "Arequipa" },
-            { cap: true,  pop:  0.993, lat: -16.4990062713623, lon: -68.1462478637695, country: "Bolivia", name: "La Paz" },
-            { cap: false, pop:  0.990, lat: -16.7266998291016, lon: -49.254810333252, country: "Brazil", name: "Goiania" },
-            { cap: false, pop:  0.442, lat: -17.7887916564941, lon: -63.1974182128906, country: "Bolivia", name: "Santa Cruz de La Sierra" },
-            { cap: false, pop:  0.087, lat: -19.0421352386475, lon: -65.2558822631836, country: "Bolivia", name: "Sucre" },
-            { cap: false, pop:  2.950, lat: -19.8517208099365, lon: -43.9090690612793, country: "Brazil", name: "Belo Horizonte" },
-            { cap: false, pop: 10.150, lat: -22.7215728759766, lon: -43.4551773071289, country: "Brazil", name: "Rio de Janeiro" },
-            { cap: false, pop: 15.175, lat: -23.5813045501709, lon: -46.6228981018066, country: "Brazil", name: "Sao Paulo" },
-            { cap: false, pop:  1.065, lat: -23.9547004699707, lon: -46.3094940185547, country: "Brazil", name: "Santos" },
-            { cap: true,  pop:  0.095, lat: -24.6614418029785, lon: 25.7948017120361, country: "Botswana", name: "Gaborone" },
-            { cap: false, pop:  1.700, lat: -25.4304790496826, lon: -49.2845077514648, country: "Brazil", name: "Curitiba" },
-            { cap: true,  pop:  0.960, lat: -25.7313461303711, lon: 28.2183723449707, country: "South Africa", name: "Pretoria" },
-            { cap: true,  pop:  1.070, lat: -25.9621543884277, lon: 32.5736923217773, country: "Mozambique", name: "Maputo" },
-            { cap: false, pop:  3.650, lat: -26.1789569854736, lon: 28.0043087005615, country: "South Africa", name: "Johannesburg" },
-            { cap: false, pop:  1.149, lat: -27.4539127349854, lon: 153.026489257813, country: "Australia", name: "Brisbane" },
-            { cap: false, pop:  1.550, lat: -29.8363723754883, lon: 30.9421882629395, country: "South Africa", name: "Durban" },
-            { cap: false, pop:  2.600, lat: -30.0395336151123, lon: -51.2079887390137, country: "Brazil", name: "Porto Alegre" },
-            { cap: false, pop:  1.070, lat: -31.3162784576416, lon: -64.1798553466797, country: "Argentina", name: "Cordoba" },
-            { cap: false, pop:  0.292, lat: -31.6168975830078, lon: -60.6978416442871, country: "Argentina", name: "Santa Fe" },
-            { cap: false, pop:  0.650, lat: -32.8974380493164, lon: -68.8297348022461, country: "Argentina", name: "Mendoza" },
-            { cap: false, pop:  1.045, lat: -32.9377365112305, lon: -60.6639404296875, country: "Argentina", name: "Rosario" },
-            { cap: true,  pop:  4.100, lat: -33.475025177002, lon: -70.6475143432617, country: "Chile", name: "Santiago" },
-            { cap: false, pop:  0.690, lat: -33.8815765380859, lon: 25.4842987060547, country: "South Africa", name: "Port Elizabeth" },
-            { cap: false, pop:  3.365, lat: -33.8897743225098, lon: 151.028198242188, country: "Australia", name: "Sydney" },
-            { cap: true,  pop: 10.750, lat: -34.6654014587402, lon: -58.4095916748047, country: "Argentina", name: "Buenos Aires" },
-            { cap: true,  pop:  0.271, lat: -35.349925994873, lon: 149.041625976563, country: "Australia", name: "Canberra" },
-            { cap: false, pop:  0.850, lat: -36.893253326416, lon: 174.801055908203, country: "New Zealand", name: "Auckland" },
-            { cap: false, pop:  2.833, lat: -37.8529586791992, lon: 145.075103759766, country: "Australia", name: "Melbourne" },
-            { cap: false, pop:  0.224, lat: -38.7252731323242, lon: -62.2740669250488, country: "Argentina", name: "Bahia Blanca" },
-            { cap: false, pop:  0.320, lat: -43.5489158630371, lon: 172.683654785156, country: "New Zealand", name: "Christchurch" },
-            { cap: true,  pop:  0.900, lat: 60.1964225769043, lon: 24.9766998291016, country: "Finland", name: "Helsinki" },
-            { cap: false, pop:  0.310, lat: 34.745231628418, lon: 10.7592582702637, country: "Tunisia", name: "Sfax" },
-            { cap: false, pop:  1.411, lat: 34.6638412475586, lon: 135.181838989258, country: "Japan", name: "Kobe" },
-            { cap: false, pop:  0.490, lat: 31.7737464904785, lon: 35.2252197265625, country: "Israel", name: "Jerusalem" },
-            { cap: false, pop:  0.616, lat: 10.1782207489014, lon: -68.0031127929688, country: "Venezuela", name: "Valencia" },
-            { cap: false, pop:  1.255, lat: -2.20381617546082, lon: -79.9093933105469, country: "Ecuador", name: "Guayaquil" },
-            { cap: false, pop:  4.054, lat: 37.7275123596191, lon: -122.308815002441, country: "US", name: "San Francisco" },
-            { cap: false, pop:  0.630, lat: 55.8752517700195, lon: -3.29878330230713, country: "UK", name: "Edinburgh" },
-            { cap: false, pop:  0.239, lat: 45.7002830505371, lon: 13.9328374862671, country: "Italy", name: "Trieste" },
-            { cap: false, pop:  1.750, lat: 33.3099060058594, lon: 130.317184448242, country: "Japan", name: "Fukuoka" },
-            { cap: false, pop:  1.525, lat: 33.6818656921387, lon: 130.797454833984, country: "Japan", name: "Kita Kyushu" },
-            { cap: true,  pop:  0.303, lat: 12.1041393280029, lon: 15.2408237457275, country: "Chad", name: "N'Djamena" },
-            { cap: true,  pop:  0.991, lat: 32.7516174316406, lon: 13.2118225097656, country: "Libya", name: "Tripoli" },
-            { cap: false, pop:  1.550, lat: 38.4389190673828, lon: 27.2057685852051, country: "Turkey", name: "Izmir" },
-            { cap: true,  pop:  3.000, lat: -4.38867473602295, lon: 15.4692935943604, country: "Zaire", name: "Kinshasa" },
-            { cap: false, pop:  0.978, lat: -34.9185371398926, lon: 138.870681762695, country: "Australia", name: "Adelaide" },
-            { cap: true,  pop:  8.600, lat: -6.29390430450439, lon: 106.762466430664, country: "Indonesia", name: "Jakarta" },
-            { cap: false, pop:  1.025, lat: -7.02784442901611, lon: 110.444259643555, country: "Indonesia", name: "Semarang" },
-            { cap: false, pop:  0.264, lat: -12.0435400009155, lon: -76.8356323242188, country: "Peru", name: "Callao" },
-            { cap: false, pop:  1.200, lat: -1.60532903671265, lon: -48.316276550293, country: "Brazil", name: "Belem" },
-            { cap: false, pop:  1.270, lat: 36.1483535766602, lon: 120.434127807617, country: "China", name: "Qingdao" },
-            { cap: true,  pop:  0.377, lat: 18.0017318725586, lon: 102.680236816406, country: "Laos", name: "Vientiane" },
-            { cap: false, pop:  0.220, lat: 47.8011703491211, lon: 13.0908985137939, country: "Austria", name: "Salzburg" },
-            { cap: true,  pop:  0.698, lat: 45.8070755004883, lon: 15.9643859863281, country: "Croatia", name: "Zagreb" },
-            { cap: true,  pop:  0.273, lat: -3.26908373832703, lon: 29.5335865020752, country: "Burundi", name: "Bujumbura" },
-            { cap: true,  pop:  0.185, lat: 35.1650695800781, lon: 33.3851623535156, country: "Cyprus", name: "Nicosia" },
-            { cap: true,  pop:  0.182, lat: -2.11793518066406, lon: 29.9914855957031, country: "Rwanda", name: "Kigali" },
-            { cap: true,  pop:  0.233, lat: 46.068302154541, lon: 14.639612197876, country: "Slovenia", name: "Ljubljana" },
-            { cap: true,  pop:  0.109, lat: -29.2567100524902, lon: 27.8903884887695, country: "Lesotho", name: "Maseru" },
-            { cap: true,  pop:  0.133, lat: 49.740406036377, lon: 6.27325582504272, country: "Luxembourg", name: "Luxembourg" },
-            { cap: false, pop:  0.770, lat: 51.903621673584, lon: 4.30062437057495, country: "Netherlands", name: "The Hague" },
-            { cap: true,  pop:  0.435, lat: 48.2745094299316, lon: 17.2698059082031, country: "Slovakia", name: "Bratislava" },
-            { cap: false, pop:  0.201, lat: 52.1100006103516, lon: -106.629997253418, country: "Canada", name: "Saskatoon" },
-            { cap: false, pop:  0.187, lat: 50.4099998474121, lon: -104.650001525879, country: "Canada", name: "Regina" },
-            { cap: false, pop:  1.038, lat: 31.7800006866455, lon: -106.449996948242, country: "US", name: "El Paso" },
-            { cap: false, pop:  0.636, lat: 30.3299999237061, lon: -81.6600036621094, country: "US", name: "Jacksonville" },
-            { cap: false, pop:  0.002, lat: 51.3300018310547, lon: -80.7300033569336, country: "Canada", name: "Moosonee" },
-            { cap: false, pop:  0.002, lat: 54.8600006103516, lon: -67.0100021362305, country: "Canada", name: "Schefferville" },
-            { cap: false, pop:  0.008, lat: 53.310001373291, lon: -60.5499992370605, country: "Canada", name: "Goose Bay" },
-            { cap: false, pop:  0.202, lat: -8.75, lon: -63.9000015258789, country: "Brazil", name: "Porto Velho" },
-            { cap: false, pop:  0.185, lat: -13.6000003814697, lon: -71.8600006103516, country: "Peru", name: "Cuzco" },
-            { cap: false, pop:  0.280, lat: -15.5500001907349, lon: -56.0499992370605, country: "Brazil", name: "Cuiaba" },
-            { cap: false, pop:  0.220, lat: -27.3999996185303, lon: -58.9000015258789, country: "Argentina", name: "Resistencia" },
-            { cap: false, pop:  0.032, lat: 16.7600002288818, lon: -3.00999999046326, country: "Mali", name: "Tombouctoo" },
-            { cap: false, pop:  0.255, lat: 11.8800001144409, lon: 13.2600002288818, country: "Niger", name: "Maiduguri" },
-            { cap: false, pop:  0.145, lat: -5.80999994277954, lon: 13.4499998092651, country: "Zaire", name: "Matadi" },
-            { cap: false, pop:  0.203, lat: -12.7299995422363, lon: 15.7799997329712, country: "Angola", name: "Huambo" },
-            { cap: false, pop:  0.145, lat: -28.6599998474121, lon: 24.8299999237061, country: "South Africa", name: "Kimberley" },
-            { cap: false, pop:  0.320, lat: -33.0299987792969, lon: 27.8999996185303, country: "South Africa", name: "East london" },
-            { cap: false, pop:  0.247, lat: -7.32999992370605, lon: 19, country: "Zaire", name: "Kahemba" },
-            { cap: false, pop:  0.054, lat: -6.17999982833862, lon: 35.75, country: "Tanzania", name: "Dodoma" },
-            { cap: false, pop:  0.019, lat: 68.3499984741211, lon: 17.2999992370605, country: "Norway", name: "Narvik" },
-            { cap: false, pop:  0.160, lat: 34.4599990844727, lon: 62.2099990844727, country: "Afghanistan", name: "Herat" },
-            { cap: false, pop:  0.006, lat: 55.8800010681152, lon: 37.75, country: "Russia", name: "Druzba" },
-            { cap: false, pop:  0.146, lat: 39.4799995422363, lon: 76, country: "China", name: "Kashi" },
-            { cap: false, pop:  9.415, lat: 24.9799995422363, lon: 121.529998779297, country: "Taiwan", name: "Chingmei" },
-            { cap: false, pop:  0.166, lat: 16.4599990844727, lon: 107.699996948242, country: "Vietnam", name: "Hue" },
-            { cap: false, pop:  0.073, lat: 1.5, lon: 110.430000305176, country: "Malaysia", name: "Kuching" },
-            { cap: false, pop:  0.208, lat: -1.21000003814697, lon: 116.860000610352, country: "Indonesia", name: "Balikpapan" },
-            { cap: false, pop:  0.168, lat: 50.3300018310547, lon: 110.75, country: "Russia", name: "Chatanga" },
-            { cap: false, pop:  0.006, lat: 52.0499992370605, lon: 113.580001831055, country: "Russia", name: "Chita" },
-            { cap: false, pop:  0.001, lat: 67.5800018310547, lon: 133.410003662109, country: "Russia", name: "Verkhoyansk" },
-            { cap: false, pop:  0.187, lat: 62.0099983215332, lon: 129.830001831055, country: "Russia", name: "Yakutsk" },
-            { cap: false, pop:  0.006, lat: 59.3300018310547, lon: 143.25, country: "Russia", name: "Okhotsk" },
-            { cap: false, pop:  0.000, lat: 50.0800018310547, lon: 45.5299987792969, country: "Russia", name: "Nikolayevsk" },
-            { cap: false, pop:  0.000, lat: 46.9599990844727, lon: 142.75, country: "Russia", name: "Yuzhno-Sakhalinsk" },
-            { cap: false, pop:  0.000, lat: -23.6299991607666, lon: 133.929992675781, country: "Australia", name: "Alice Springs" },
-            { cap: false, pop:  0.039, lat: -16.8500003814697, lon: 145.710006713867, country: "Australia", name: "Cairns" },
-            { cap: false, pop:  0.106, lat: -19.2999992370605, lon: 146.830001831055, country: "Australia", name: "Townsville" },
-            { cap: false, pop:  0.059, lat: -23.4300003051758, lon: 150.479995727539, country: "Australia", name: "Rockhampton" },
-            { cap: false, pop:  0.405, lat: -33, lon: 151.910003662109, country: "Australia", name: "Newcastle" },
-            { cap: false, pop:  0.175, lat: -43, lon: 147.5, country: "Australia", name: "Hobart" },
-            { cap: false, pop:  0.109, lat: -45.8600006103516, lon: 170.5, country: "New Zealand", name: "Dunedin" },
-            { cap: false, pop:  0.256, lat: 48.6545677185059, lon: -123.569107055664, country: "Canada", name: "Victoria" },
-            { cap: true,  pop:  0.164, lat: 6.60109615325928, lon: 2.63250279426575, country: "Benin", name: "Porto Novo" },
-            { cap: false, pop:  1.030, lat: 4.13665008544922, lon: 9.706374168396, country: "Cameroon", name: "Douala" },
-            { cap: false, pop:  0.708, lat: -5.19043016433716, lon: 119.722793579102, country: "Indonesia", name: "Vjuag Padang" },
-            { cap: false, pop:  0.112, lat: -3.3865532875061, lon: 129.312927246094, country: "Indonesia", name: "Ambon" },
-            { cap: false, pop:  1.604, lat: 37.5894508361816, lon: 126.767440795898, country: "Korea Rep", name: "Inch`on" },
-            { cap: false, pop:  1.680, lat: 39.0317153930664, lon: 121.598197937012, country: "China", name: "Dalian" },
-            { cap: false, pop:  1.227, lat: 45.4421310424805, lon: -122.641677856445, country: "US", name: "Portland" },
-            { cap: false, pop:  0.810, lat: -3.12230491638184, lon: -60.0146179199219, country: "Brazil", name: "Manaus" },
-            { cap: false, pop:  0.227, lat: -2.46000003814697, lon: -54.6100006103516, country: "Brazil", name: "Santarem" },
-            { cap: false, pop:  0.053, lat: -46.4099998474121, lon: 168.449996948242, country: "New Zealand", name: "Invercargill" },
-            { cap: false, pop:  0.049, lat: -10.2600002288818, lon: 40.1800003051758, country: "Tanzania", name: "Mtwara" },
-            { cap: false, pop:  0.100, lat: -18.2299995422363, lon: 49.4099998474121, country: "Madagascar", name: "Toamasina" },
-            { cap: false, pop:  0.235, lat: -29.1499996185303, lon: 26.2600002288818, country: "South Africa", name: "Bloemfontein" },
-            { cap: false, pop:  0.414, lat: -20.2000007629395, lon: 28.7099990844727, country: "Zimbabwe", name: "Bulawayo" },
-            { cap: false, pop:  0.061, lat: -17.8299999237061, lon: 25.8799991607666, country: "Zambia", name: "Livingstone" },
-            { cap: false, pop:  0.290, lat: 24.4300003051758, lon: 39.7000007629395, country: "Saudi Arabia", name: "Al Madinah" },
-            { cap: false, pop:  0.000, lat: 21.7600002288818, lon: 31.2800006866455, country: "Sudan", name: "Wadi Halfa" },
-            { cap: false, pop:  0.191, lat: 24.0799999237061, lon: 32.9500007629395, country: "Egypt", name: "Aswan" },
-            { cap: false, pop:  0.000, lat: 25.9099998474121, lon: 13.9099998474121, country: "Libya", name: "Murzuq" },
-            { cap: false, pop:  0.000, lat: 27.7000007629395, lon: -8.15999984741211, country: "Algeria", name: "Tindouf" },
-            { cap: false, pop:  0.050, lat: 16.9599990844727, lon: 7.98000001907349, country: "Niger", name: "Agadez" },
-            { cap: false, pop:  0.140, lat: 13.1800003051758, lon: 30.1599998474121, country: "Sudan", name: "El Obeid" },
-            { cap: false, pop:  0.125, lat: 0.0500000007450581, lon: 18.4599990844727, country: "Zaire", name: "Mbandaka" },
-            { cap: false, pop:  0.015, lat: 60.6500015258789, lon: -135.009994506836, country: "Canada", name: "Whitehorse" },
-            { cap: false, pop:  0.095, lat: -53.1500015258789, lon: -70.8000030517578, country: "Chile", name: "Punte Arenas" },
-            { cap: false, pop:  0.084, lat: -41.4799995422363, lon: -73, country: "Chile", name: "Puerto Montt" },
-            { cap: false, pop:  0.000, lat: -51.7099990844727, lon: -69.4100036621094, country: "Argentina", name: "Rio Gallegos" },
-            { cap: false, pop:  0.097, lat: -45.8300018310547, lon: -67.5, country: "Argentina", name: "Comodoro Rivadavia" },
-            { cap: false, pop:  0.327, lat: 29.9599990844727, lon: 32.560001373291, country: "Egypt", name: "Suez" },
-            { cap: false, pop:  3.350, lat: 31.0746040344238, lon: 29.9778099060059, country: "Egypt", name: "Alexandria" },
-            { cap: false, pop:  0.000, lat: -15.0500001907349, lon: 40.7000007629395, country: "Mozambique", name: "Mocambique" },
-            { cap: false, pop:  9.950, lat: 19.0453472137451, lon: 73.1723480224609, country: "India", name: "Bombay" },
-            { cap: true,  pop:  2.548, lat: 36.596492767334, lon: 2.99369311332703, country: "Algeria", name: "Algiers" },
-            { cap: false, pop:  1.940, lat: 49.989673614502, lon: 36.2083129882813, country: "Ukraine", name: "Kharkov" },
-            { cap: false, pop:  1.600, lat: 48.4228897094727, lon: 35.1378936767578, country: "Ukraine", name: "Dnepropetrovsk" },
-            { cap: true,  pop:  0.482, lat: 59.2775726318359, lon: 24.7520561218262, country: "Estonia", name: "Tallinn" },
-            { cap: false, pop:  0.000, lat: 47.810001373291, lon: 97, country: "Mongolia", name: "Uliastay" },
-            { cap: true,  pop:  1.313, lat: 18.4997291564941, lon: -69.9104919433594, country: "Dominican Rp", name: "Santo Domingo" },
-            { cap: true,  pop:  0.064, lat: 4.93300008773804, lon: 114.967002868652, country: "Brunei", name: "Bandar Seri Begawan" },
-            { cap: true,  pop:  0.095, lat: 13.4452724456787, lon: -16.4946155548096, country: "Gambia", name: "Banjul" },
-            { cap: true,  pop:  0.370, lat: 10.6397342681885, lon: -61.490062713623, country: "Trinidad", name: "Port of Spain" },
-            { cap: false, pop:  0.302, lat: 16.97438621521, lon: -99.9314956665039, country: "Mexico", name: "Acapulco" },
-            { cap: false, pop:  0.000, lat: 64.4001617431641, lon: 177.130187988281, country: "Russia", name: "Anadyr" },
-            { cap: false, pop:  0.003, lat: 65.6699981689453, lon: -37.3118667602539, country: "Greenland", name: "Angmagssalik" },
-            { cap: false, pop:  0.185, lat: -23.8325366973877, lon: -70.2254486083984, country: "Chile", name: "Antofagasta" },
-            { cap: false, pop:  0.294, lat: 40.75, lon: 140.669998168945, country: "Japan", name: "Aomori" },
-            { cap: false, pop:  0.436, lat: 32.0430526733398, lon: 20.3086757659912, country: "Libya", name: "Banghazi" },
-            { cap: false, pop:  0.000, lat: -15.75, lon: 133.220001220703, country: "Australia", name: "Birdum" },
-            { cap: false, pop:  0.000, lat: 2.75, lon: -60.5, country: "Brazil", name: "Boa Vista" },
-            { cap: false, pop:  0.280, lat: -6.61999988555908, lon: -79.8300018310547, country: "Peru", name: "Chiclayo" },
-            { cap: false, pop:  0.223, lat: -8.930100440979, lon: -78.4531478881836, country: "Peru", name: "Chimbote" },
-            { cap: false, pop:  0.001, lat: 58.710765838623, lon: -94.1800003051758, country: "Canada", name: "Churchill" },
-            { cap: false, pop:  0.686, lat: 9.98798847198486, lon: 76.5217819213867, country: "India", name: "Cochin" },
-            { cap: false, pop:  0.675, lat: -36.8832969665527, lon: -72.8516387939453, country: "Chile", name: "Concepcion" },
-            { cap: false, pop:  0.062, lat: -31, lon: -71.0199966430664, country: "Chile", name: "Coquimbo" },
-            { cap: false, pop:  0.073, lat: -12.7014999389648, lon: 130.994552612305, country: "Australia", name: "Darwin" },
-            { cap: true,  pop:  0.120, lat: 11.5, lon: 43.0999984741211, country: "Djibouti", name: "Djibouti" },
-            { cap: false, pop:  0.022, lat: -32.0441665649414, lon: 115.9345703125, country: "Australia", name: "Fremantle" },
-            { cap: false, pop:  0.495, lat: 5.34999990463257, lon: 100.547142028809, country: "Malaysia", name: "George Town" },
-            { cap: false, pop:  0.001, lat: 69.3831405639648, lon: -53.6300010681152, country: "Greenland", name: "Godhavn" },
-            { cap: true,  pop:  0.012, lat: 64.2711868286133, lon: -51.5800018310547, country: "Greenland", name: "Godthab" },
-            { cap: false, pop:  0.296, lat: 44.6300010681152, lon: -63.5800018310547, country: "Canada", name: "Halifax" },
-            { cap: false, pop:  0.007, lat: 70.3913269042969, lon: 23.9063415527344, country: "Norway", name: "Hammerfest" },
-            { cap: false, pop:  0.000, lat: 67.3499984741211, lon: 86.5500030517578, country: "Russia", name: "Igarka" },
-            { cap: false, pop:  0.019, lat: 27.2000007629395, lon: 2.52999997138977, country: "Algeria", name: "In Salah" },
-            { cap: false, pop:  0.003, lat: 68.2699966430664, lon: -133.669998168945, country: "Canada", name: "Inuvik" },
-            { cap: false, pop:  0.050, lat: -4.94999980926514, lon: 30, country: "Tanzania", name: "Kigoma" },
-            { cap: false, pop:  0.069, lat: 61.1500015258789, lon: 47, country: "Russia", name: "Kotlas" },
-            { cap: false, pop:  0.094, lat: 27, lon: -13.1800003051758, country: "W Sahara", name: "Laayoune" },
-            { cap: false, pop:  0.217, lat: 1.420086145401, lon: 124.884239196777, country: "Indonesia", name: "Manado" },
-            { cap: false, pop:  0.306, lat: 12.9499998092651, lon: 75.1608810424805, country: "India", name: "Mangalore" },
-            { cap: false, pop:  0.535, lat: 31.1499996185303, lon: -8, country: "Morocco", name: "Marrakech" },
-            { cap: true,  pop:  0.038, lat: -26.3033809661865, lon: 31.1912975311279, country: "Swaziland", name: "Mbabne" },
-            { cap: false, pop:  0.449, lat: 32.8827476501465, lon: 129.857467651367, country: "Japan", name: "Nagasaki" },
-            { cap: false, pop:  0.510, lat: -5.78000020980835, lon: -35.25, country: "Brazil", name: "Natal" },
-            { cap: false, pop:  0.033, lat: -41.2999992370605, lon: 173.270004272461, country: "New Zealand", name: "Nelson" },
-            { cap: false, pop:  0.004, lat: 64.5862808227539, lon: -165.270004272461, country: "US", name: "Nome" },
-            { cap: false, pop:  0.174, lat: 69.3300018310547, lon: 88.0999984741211, country: "Russia", name: "Noril`sk" },
-            { cap: false, pop:  0.022, lat: 20.8999996185303, lon: -16.825647354126, country: "Mauritania", name: "Nouadnibou" },
-            { cap: false, pop:  0.600, lat: 53.7000007629395, lon: 87.1699981689453, country: "Russia", name: "Novokuznetsk" },
-            { cap: false, pop:  0.097, lat: 46.9199981689453, lon: -122.879997253418, country: "US", name: "Olympia" },
-            { cap: false, pop:  0.297, lat: -0.917578816413879, lon: 100.475059509277, country: "Indonesia", name: "Padang" },
-            { cap: false, pop:  0.787, lat: -3, lon: 104.830001831055, country: "Indonesia", name: "Palembang" },
-            { cap: false, pop:  0.155, lat: 38.1412391662598, lon: 21.8831691741943, country: "Greece", name: "Patras" },
-            { cap: false, pop:  0.269, lat: 53.2000007629395, lon: 158.720001220703, country: "Russia", name: "Petropavloski-Kamchatskiy" },
-            { cap: true,  pop:  0.083, lat: 42.5, lon: 19.3999996185303, country: "Montenegro", name: "Podgorica" },
-            { cap: false, pop:  0.294, lat: -4.63870811462402, lon: 12.0580930709839, country: "Congo", name: "Pointe Noire" },
-            { cap: false, pop:  0.124, lat: -0.819999992847443, lon: 9.15334415435791, country: "Gabon", name: "Port Gentil" },
-            { cap: false, pop:  0.016, lat: 54.420280456543, lon: -130.048080444336, country: "Canada", name: "Prince Rupert" },
-            { cap: false, pop:  0.121, lat: 45.338134765625, lon: -65.6499481201172, country: "Canada", name: "Saint John" },
-            { cap: false, pop:  0.091, lat: 15.9512100219727, lon: -16.2978382110596, country: "Senegal", name: "Saint Louis" },
-            { cap: false, pop:  0.000, lat: 66.5699996948242, lon: 66.5800018310547, country: "Russia", name: "Salekhard" },
-            { cap: false, pop:  0.241, lat: 41.3199996948242, lon: 36.3699989318848, country: "Turkey", name: "Samsun" },
-            { cap: false, pop:  0.600, lat: -2.5, lon: -44.4300575256348, country: "Brazil", name: "Sao Luis" },
-            { cap: true,  pop:  0.341, lat: 43.8699989318848, lon: 18.4300003051758, country: "Bosnia/Herz", name: "Sarajevo" },
-            { cap: false, pop:  0.000, lat: 70.5285720825195, lon: -22.9963226318359, country: "Greenland", name: "Scoresbyund" },
-            { cap: false, pop:  0.029, lat: 50.2825469970703, lon: -66.4025421142578, country: "Canada", name: "Sept-Iles" },
-            { cap: false, pop:  0.003, lat: 60.1199989318848, lon: -149.449996948242, country: "US", name: "Seward" },
-            { cap: true,  pop:  0.445, lat: 42, lon: 21.5300006866455, country: "Macedonia", name: "Skopje" },
-            { cap: false, pop:  0.000, lat: 22.8299999237061, lon: 5.55000019073486, country: "Algeria", name: "Tamanrasset" },
-            { cap: false, pop:  0.000, lat: 77.6699981689453, lon: -69, country: "Greenland", name: "Thule" },
-            { cap: false, pop:  0.000, lat: 71.6999969482422, lon: 128.75, country: "Russia", name: "Tiksi" },
-            { cap: false, pop:  0.055, lat: -23.2901554107666, lon: 44.0190925598145, country: "Madagascar", name: "Toliara" },
-            { cap: false, pop:  0.354, lat: -7.92999982833862, lon: -79, country: "Peru", name: "Trujillo" },
-            { cap: false, pop:  0.604, lat: 17.75, lon: 83.3300018310547, country: "India", name: "Vishakhapatnam" },
-            { cap: false, pop:  0.116, lat: 67.8000030517578, lon: 64.3300018310547, country: "Russia", name: "Vorkuta" },
-            { cap: false, pop:  0.230, lat: 31.9699993133545, lon: 54.4500007629395, country: "Iran", name: "Yazd" },
-            { cap: false, pop:  0.282, lat: 29.6000003814697, lon: 60.8300018310547, country: "Iran", name: "Zahedan" },
-            { cap: false, pop:  0.318, lat: 12.861159324646, lon: 45.1800003051758, country: "Yemen", name: "Aden" },
-            { cap: true,  pop:  1.500, lat: 9.02999973297119, lon: 38.7000007629395, country: "Ethiopia", name: "Adis Abeba" },
-            { cap: true,  pop:  1.375, lat: 29.1949901580811, lon: 48.0027770996094, country: "Kuwait", name: "Al Kuwayt" },
-            { cap: true,  pop:  0.663, lat: -18.8700008392334, lon: 47.5, country: "Madagascar", name: "Antananarivo" },
-            { cap: true,  pop:  1.250, lat: 24.6499996185303, lon: 46.7700004577637, country: "Saudi Arabia", name: "Ar Riyad" },
-            { cap: true,  pop:  0.275, lat: 15.3299999237061, lon: 38.9700012207031, country: "Eritrea", name: "Asmara" },
-            { cap: true,  pop:  0.700, lat: -25.2199993133545, lon: -57.6699981689453, country: "Paraguay", name: "Asuncion" },
-            { cap: true,  pop:  3.027, lat: 38.1216011047363, lon: 23.6548633575439, country: "Greece", name: "Athens" },
-            { cap: false, pop:  1.120, lat: 40.6500015258789, lon: 109.980003356934, country: "China", name: "Baotou" },
-            { cap: false, pop:  4.040, lat: 41.5299987792969, lon: 2.17000007629395, country: "Spain", name: "Barcelona" },
-            { cap: false, pop:  1.140, lat: 11.0142946243286, lon: -74.6800003051758, country: "Colombia", name: "Barranquilla" },
-            { cap: false, pop:  0.292, lat: -19.7692832946777, lon: 35.0231704711914, country: "Mozambique", name: "Beira" },
-            { cap: true,  pop:  1.675, lat: 33.7799987792969, lon: 35.6579437255859, country: "Lebanon", name: "Beirut" },
-            { cap: true,  pop:  0.005, lat: 17.1200008392334, lon: -88.8000030517578, country: "Belize", name: "Belmopan" },
-            { cap: false, pop:  0.239, lat: 60.3499984741211, lon: 5.49067831039429, country: "Norway", name: "Bergen" },
-            { cap: true,  pop:  0.109, lat: 11.9109897613525, lon: -15.6499996185303, country: "GuineaBissau", name: "Bissau" },
-            { cap: false, pop:  1.790, lat: -33.8040084838867, lon: 18.6904315948486, country: "South Africa", name: "cape Town" },
-            { cap: false, pop:  0.625, lat: 51.5, lon: -3.15000009536743, country: "UK", name: "Cardiff" },
-            { cap: false, pop:  2.475, lat: 33.5444107055664, lon: -7.53409194946289, country: "Morocco", name: "Casablanca" },
-            { cap: true,  pop:  0.038, lat: 4.92000007629395, lon: -52.4000015258789, country: "Fr Guiana", name: "Cayenne" },
-            { cap: false, pop:  1.392, lat: 22.4799995422363, lon: 91.8327941894531, country: "Bangladesh", name: "Chittagong" },
-            { cap: true,  pop:  2.050, lat: 7.01999998092651, lon: 80.0883331298828, country: "Sri Lanka", name: "Colombo" },
-            { cap: true,  pop:  0.800, lat: 9.52000045776367, lon: -12.8000001907349, country: "Guinea", name: "Conakry" },
-            { cap: true,  pop:  1.428, lat: 14.6300001144409, lon: -16.8480949401855, country: "Senegal", name: "Dakar" },
-            { cap: false, pop:  1.405, lat: 39.75, lon: -105.069999694824, country: "US", name: "Denver" },
-            { cap: true,  pop:  0.595, lat: 38.6300010681152, lon: 68.9000015258789, country: "Tajikistan", name: "Dushanfe" },
-            { cap: false, pop:  0.785, lat: 53.5699996948242, lon: -113.269996643066, country: "Canada", name: "Edmonton" },
-            { cap: false, pop:  1.871, lat: 30.4699993133545, lon: 30.8500003814697, country: "Egypt", name: "Giza" },
-            { cap: true,  pop:  0.525, lat: 8.38277053833008, lon: -12.9102764129639, country: "Sierra Leone", name: "Freetown" },
-            { cap: true,  pop:  0.616, lat: 42.8800010681152, lon: 74.7699966430664, country: "Kyrgyzstan", name: "Frunze" },
-            { cap: false, pop:  0.805, lat: 44.4550895690918, lon: 8.92229557037354, country: "Italy", name: "Genova" },
-            { cap: true,  pop:  0.188, lat: 6.76999998092651, lon: -58.1699981689453, country: "Guyana", name: "Georgetown" },
-            { cap: false, pop:  0.711, lat: 57.75, lon: 12, country: "Sweden", name: "Goteborg" },
-            { cap: true,  pop:  0.890, lat: -17.8299999237061, lon: 31.0200004577637, country: "Zimbabwe", name: "Harare" },
-            { cap: true,  pop:  2.125, lat: 23.0489521026611, lon: -82.4164505004883, country: "Cuba", name: "Havana" },
-            { cap: false, pop:  1.300, lat: 21.6200008392334, lon: 39.3733062744141, country: "Saudi Arabia", name: "Jiddah" },
-            { cap: true,  pop:  0.460, lat: 0.319999992847443, lon: 32.5800018310547, country: "Uganda", name: "Kampala" },
-            { cap: false, pop:  0.538, lat: 11.9200000762939, lon: 8.52000045776367, country: "Nigeria", name: "Kano" },
-            { cap: false, pop:  1.845, lat: 22.6734161376953, lon: 120.341484069824, country: "Taiwan", name: "Kao-Hsiung" },
-            { cap: false, pop:  5.300, lat: 24.8500003814697, lon: 67.0299987792969, country: "Pakistan", name: "Karachi" },
-            { cap: false, pop:  0.601, lat: 48.5299987792969, lon: 135.070007324219, country: "Russia", name: "Khabarovsk" },
-            { cap: true,  pop:  0.924, lat: 15.5500001907349, lon: 32.5299987792969, country: "Sudan", name: "Khartoum" },
-            { cap: true,  pop:  0.665, lat: 47, lon: 28.8299999237061, country: "Moldova", name: "Kishinev" },
-            { cap: true,  pop:  1.685, lat: 55.7200012207031, lon: 12.5500001907349, country: "Denmark", name: "Kobenhavn" },
-            { cap: true,  pop:  3.800, lat: 6.44999980926514, lon: 3.29999995231628, country: "Nigeria", name: "Lagos" },
-            { cap: false, pop:  0.255, lat: 49.3240203857422, lon: 0.219999998807907, country: "France", name: "Le Havre" },
-            { cap: true,  pop:  0.236, lat: -0.504144549369812, lon: 9.49045658111572, country: "Gabon", name: "Libreville" },
-            { cap: true,  pop:  0.234, lat: -13.9200000762939, lon: 33.8199996948242, country: "Malawi", name: "Lilongwe" },
-            { cap: true,  pop:  4.344, lat: -12.0679960250854, lon: -76.8235549926758, country: "Peru", name: "Lima" },
-            { cap: true,  pop:  2.250, lat: 38.7299995422363, lon: -9.13000011444092, country: "Portugal", name: "Lisboa" },
-            { cap: false, pop:  1.525, lat: 53.4226875305176, lon: -2.76683640480042, country: "UK", name: "Liverpool" },
-            { cap: true,  pop:  0.400, lat: 6.28000020980835, lon: 1.35000002384186, country: "Togo", name: "Lome" },
-            { cap: false, pop:  9.764, lat: 34, lon: -118.25, country: "US", name: "Los Angeles" },
-            { cap: true,  pop:  1.460, lat: -9, lon: 13.4617786407471, country: "Angola", name: "Luanda" },
-            { cap: false, pop:  0.543, lat: -11.6800003051758, lon: 27.5499992370605, country: "Zaire", name: "Lumumbashi" },
-            { cap: true,  pop:  0.536, lat: -15.4300003051758, lon: 28.1700000762939, country: "Zambia", name: "Lusaka" },
-            { cap: true,  pop:  0.031, lat: 3.64468479156494, lon: 8.81999969482422, country: "Eq Guinea", name: "Malabo" },
-            { cap: true,  pop:  5.474, lat: 14.5500001907349, lon: 121.173408508301, country: "Philippines", name: "Manila" },
-            { cap: false, pop:  1.225, lat: 43.2999992370605, lon: 5.38000011444092, country: "France", name: "Marseille" },
-            { cap: true,  pop:  0.050, lat: 23.5166397094727, lon: 58.6274795532227, country: "Oman", name: "Masqat" },
-            { cap: false, pop:  0.200, lat: 23.3615112304688, lon: -106.269996643066, country: "Mexico", name: "Mazatlan" },
-            { cap: false, pop:  0.442, lat: -4.01999998092651, lon: 39.6699981689453, country: "Kenya", name: "Mombasa" },
-            { cap: true,  pop:  0.465, lat: 6.51743936538696, lon: -10.7700004577637, country: "Liberia", name: "Monrovia" },
-            { cap: true,  pop:  1.550, lat: -34.9199981689453, lon: -56.1699981689453, country: "Uruguay", name: "Montevideo" },
-            { cap: true,  pop: 13.100, lat: 55.75, lon: 37.7000007629395, country: "Russia", name: "Moscow" },
-            { cap: true,  pop:  1.286, lat: -1.16999995708466, lon: 36.8300018310547, country: "Kenya", name: "Nairobi" },
-            { cap: false, pop:  2.875, lat: 40.8300018310547, lon: 14.2700004577637, country: "Italy", name: "Napoli" },
-            { cap: false, pop: 16.472, lat: 40.75, lon: -74.0999984741211, country: "US", name: "New York" },
-            { cap: false, pop:  0.329, lat: 40.7200012207031, lon: -74.1999969482422, country: "US", name: "Newark" },
-            { cap: true,  pop:  0.285, lat: 18.0300006866455, lon: -15.7828607559204, country: "Mauritania", name: "Nouakchott" },
-            { cap: false, pop:  0.138, lat: 55.574535369873, lon: 9.90299892425537, country: "Denmark", name: "Odense" },
-            { cap: false, pop:  0.526, lat: 15.6199998855591, lon: 32.4799995422363, country: "Sudan", name: "Omdurman" },
-            { cap: false, pop:  0.629, lat: 35.75, lon: -0.519999980926514, country: "Algeria", name: "Oran" },
-            { cap: true,  pop:  0.720, lat: 59.9300003051758, lon: 10.7200002670288, country: "Norway", name: "Oslo" },
-            { cap: true,  pop:  0.442, lat: 12.4799995422363, lon: -1.66999995708466, country: "Burkina Faso", name: "Ouagadouou" },
-            { cap: false, pop:  0.724, lat: 38.1300010681152, lon: 13.3999996185303, country: "Italy", name: "Palermo" },
-            { cap: true,  pop:  0.625, lat: 8.94999980926514, lon: -79.4000015258789, country: "Panama", name: "Panama" },
-            { cap: true,  pop:  0.241, lat: 5.92999982833862, lon: -55.2299995422363, country: "Suriname", name: "Paramaribo" },
-            { cap: false, pop:  0.994, lat: -31.9758644104004, lon: 115.923370361328, country: "Australia", name: "Perth" },
-            { cap: true,  pop:  0.152, lat: -9.55000019073486, lon: 147.414520263672, country: "Papua N Guin", name: "Port Moresby" },
-            { cap: false, pop:  1.225, lat: 41.1500015258789, lon: -8.48794841766357, country: "Portugal", name: "Porto" },
-            { cap: false, pop:  0.203, lat: 31.6000003814697, lon: 65.5, country: "Afghanistan", name: "Qandahar" },
-            { cap: false, pop:  1.326, lat: 14.6499996185303, lon: 121.029998779297, country: "Philippines", name: "Quezon City" },
-            { cap: true,  pop:  0.980, lat: 33.9201965332031, lon: -6.74804067611694, country: "Morocco", name: "Rabat" },
-            { cap: true,  pop:  0.138, lat: 64.3132629394531, lon: -21.336820602417, country: "Iceland", name: "Reykjavik" },
-            { cap: true,  pop:  1.005, lat: 56.8800010681152, lon: 24.0499992370605, country: "latvia", name: "Riga" },
-            { cap: true,  pop:  3.175, lat: 41.8800010681152, lon: 12.5200004577637, country: "Italy", name: "Roma" },
-            { cap: false, pop:  2.050, lat: -12.6002569198608, lon: -38.4799995422363, country: "Brazil", name: "Salvador" },
-            { cap: false, pop:  0.848, lat: 29.6299991607666, lon: 52.5699996948242, country: "Iran", name: "Shiraz" },
-            { cap: true,  pop:  1.450, lat: 59.2446327209473, lon: 18.0842685699463, country: "Sweden", name: "Stockholm" },
-            { cap: false, pop:  2.028, lat: -7.40000009536743, lon: 112.684371948242, country: "Indonesia", name: "Surabaja" },
-            { cap: false, pop:  0.657, lat: 23.1700000762939, lon: 120.230003356934, country: "Taiwan", name: "T`ai-nan" },
-            { cap: false, pop:  0.595, lat: 27.9973583221436, lon: -82.5930252075195, country: "US", name: "Tampa" },
-            { cap: true,  pop:  1.670, lat: 31.9171981811523, lon: 34.8568344116211, country: "Israel", name: "Tel Aviv-Yafo" },
-            { cap: false, pop:  0.706, lat: 40.6300010681152, lon: 22.7999992370605, country: "Greece", name: "Thessaloniki" },
-            { cap: true,  pop:  2.325, lat: 41.247932434082, lon: 69.3498687744141, country: "Uzbekistan", name: "Toshkent" },
-            { cap: false, pop:  0.198, lat: 34.3437576293945, lon: 36.0070686340332, country: "Lebanon", name: "Tripoli" },
-            { cap: false, pop:  0.675, lat: -32.9000015258789, lon: -71.2993392944336, country: "Chile", name: "Valparaiso" },
-            { cap: false, pop:  1.381, lat: 49.274299621582, lon: -122.963066101074, country: "Canada", name: "Vancouver" },
-            { cap: false, pop:  0.648, lat: 43.1300010681152, lon: 131.960433959961, country: "Russia", name: "Vladivostok" },
-            { cap: false, pop:  0.017, lat: -23.1018676757813, lon: 14.6171045303345, country: "Namibia", name: "Walvis Bay" },
-            { cap: true,  pop:  0.115, lat: -22.5699996948242, lon: 17.1000003814697, country: "Namibia", name: "Windhoek" },
-            { cap: true,  pop:  0.350, lat: -41.2103958129883, lon: 175.144943237305, country: "New Zealand", name: "Wellington" },
-            { cap: false, pop:  2.077, lat: 47.5885543823242, lon: -122.316650390625, country: "US", name: "Seattle" },
-            { cap: false, pop:  2.099, lat: 32.7614593505859, lon: -117.125495910645, country: "US", name: "San Diego" },
-            { cap: false, pop:  0.110, lat: -20.2600002288818, lon: -69.9132614135742, country: "Chile", name: "Iquique" },
-            { cap: true,  pop:  0.243, lat: 24.2360076904297, lon: 54.619270324707, country: "Untd Arab Em", name: "Abu Zaby" },
-            { cap: false, pop:  0.199, lat: 7.57660102844238, lon: -72.0054550170898, country: "Venezuela", name: "San Cristobal" },
-            { cap: false, pop:  0.509, lat: 46.25, lon: 48, country: "Russia", name: "Astrakhan" },
-            { cap: false, pop:  0.000, lat: 30.1386032104492, lon: 9.81835079193115, country: "Libya", name: "Ghadamis" },
-            { cap: false, pop:  0.077, lat: -31.3051528930664, lon: -57.7087745666504, country: "Uruguay", name: "Salto" },
-            { cap: false, pop:  0.012, lat: 62.5206146240234, lon: -114.061363220215, country: "Canada", name: "Yellowknife" },
-            { cap: false, pop:  0.043, lat: 19.7148151397705, lon: -155.067291259766, country: "US", name: "Hilo" },
-            { cap: false, pop:  0.763, lat: 21.3211765289307, lon: -157.806182861328, country: "US", name: "Honolulu" },
-            { cap: false, pop:  0.184, lat: 61.188648223877, lon: -149.172973632813, country: "US", name: "Anchorage" },
-            { cap: false, pop:  0.040, lat: 64.8387451171875, lon: -147.651184082031, country: "US", name: "Fairbanks" },
-            { cap: false, pop:  0.020, lat: 58.3910064697266, lon: -134.132476806641, country: "US", name: "Juneau" },
-            { cap: false, pop:  0.629, lat: 37.30810546875, lon: -121.847457885742, country: "US", name: "San Jose" },
-            { cap: false, pop:  0.386, lat: 28.5581398010254, lon: -105.966636657715, country: "Mexico", name: "Chihuaha" },
-            { cap: false, pop:  0.385, lat: 19.0096759796143, lon: -96.0840606689453, country: "Mexico", name: "Veracruz" },
-            { cap: false, pop:  0.154, lat: 16.9209060668945, lon: -96.9420394897461, country: "Mexico", name: "Oaxaca" },
-            { cap: false, pop:  0.000, lat: 78.1999969482422, lon: 15.6599998474121, country: "Norway", name: "longyearbyen" },
-            { cap: true,  pop:  5.396, lat: 22.4284057617188, lon: 114.145706176758, country: "UK", name: "Hong Kong" },
-            { cap: false, pop:  0.775, lat: 22.3798961639404, lon: 114.230117797852, country: "UK", name: "Kowloon" },
-            { cap: false, pop:  3.025, lat: 1.22979354858398, lon: 104.177116394043, country: "Singapore", name: "Singapore" },
-        ];
-
-        this.capitals = this.locations.filter(city => city.cap);
-        this.cities = this.locations.filter(city => !city.cap);
-        return this.locations
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx b/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx
deleted file mode 100644
index aed24edb02..0000000000
--- a/docs/angular/src/content/en/components/geo-map-resources-world-util.mdx
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: "Angular Map | World Utility | Data Source | Infragistics"
-description: Use Infragistics' Angular JavaScript map data utility to generate geographic data. View Ignite UI for Angular map demos!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-llms:
-  description: "The resource topic provides implementation of utility that helps with generating Angular geographic data."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular World Utility
-
-The resource topic provides implementation of utility that helps with generating Angular geographic data.
-
-## Code Snippet
-
-```ts
-export default class WorldUtils {
-
-    // calculate geo-paths between two locations using great circle formula
-    public static calcPaths(origin: any, dest: any): any[] {
-        let interval = 200;
-        let paths: any[] = [[]];
-        let pathID = 0;
-        let distance = this.calcDistance(origin, dest);
-        if (distance <= interval) {
-            paths[pathID].push({ x: origin.lon, y: origin.lat });
-            paths[pathID].push({ x: dest.lon, y: dest.lat });
-        } else {
-            let current = origin;
-            let previous = origin;
-
-            for (let dist = interval; dist <= distance; dist += interval)
-            {
-                previous = current
-                paths[pathID].push({ x: current.lon, y: current.lat });
-
-                let bearing = this.calcBearing(current, dest);
-                current = this.calcDestination(current, bearing, interval);
-                // ensure geo-path wrap around the world through the new date-line
-                if (previous.lon > 150 && current.lon < -150) {
-                    paths[pathID].push({ x: 180, y: current.lat });
-                    paths.push([]);
-                    pathID++
-                    current = { lon: -180, lat: current.lat }
-                } else if (previous.lon < -150 && current.lon > 150) {
-                    paths[pathID].push({ x: -180, y: current.lat });
-                    paths.push([]);
-                    pathID++
-                    current = { lon: 180, lat: current.lat }
-                }
-            }
-            paths[pathID].push({ x: dest.lon, y: dest.lat });
-        }
-        return paths;
-    }
-
-    // calculate bearing angle between two locations
-    public static calcBearing(origin: any, dest: any) : number
-    {
-        origin = this.toRadianLocation(origin);
-        dest = this.toRadianLocation(dest);
-        let range = (dest.lon - origin.lon);
-        let y = Math.sin(range) * Math.cos(dest.lat);
-        let x = Math.cos(origin.lat) * Math.sin(dest.lat) -
-                Math.sin(origin.lat) * Math.cos(dest.lat) * Math.cos(range);
-        let angle = Math.atan2(y, x);
-        return this.toDegreesNormalized(angle);
-    }
-
-    // calculate destination for origin location and travel distance
-    public static calcDestination(origin: any, bearing: number, distance: number): any {
-        let radius = 6371.0;
-        origin = this.toRadianLocation(origin);
-        bearing = this.toRadians(bearing);
-        distance = distance / radius; // angular distance in radians
-
-        let lat = Math.asin(Math.sin(origin.lat) * Math.cos(distance) +
-                       Math.cos(origin.lat) * Math.sin(distance) * Math.cos(bearing));
-        let x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.lat);
-        let y = Math.cos(distance) - Math.sin(origin.lat) * Math.sin(origin.lat);
-        let lon = origin.lon + Math.atan2(x, y);
-        // normalize lon to coordinate between -180º and +180º
-        lon = (lon + 3 * Math.PI) % (2 * Math.PI) - Math.PI;
-
-        lon = this.toDegrees(lon);
-        lat = this.toDegrees(lat);
-
-        return { lon: lon, lat: lat };
-    }
-
-    // calculate distance between two locations
-    public static calcDistance(origin: any, dest: any) : number {
-        origin = this.toRadianLocation(origin);
-        dest = this.toRadianLocation(dest);
-        let sinProd = Math.sin(origin.lat) * Math.sin(dest.lat);
-        let cosProd = Math.cos(origin.lat) * Math.cos(dest.lat);
-        let lonDelta = (dest.lon - origin.lon);
-
-        let angle = Math.acos(sinProd + cosProd * Math.cos(lonDelta));
-        let distance = angle * 6371.0;
-        return distance; // * 6371.0; // in km
-    }
-
-    public static toRadianLocation(geoPoint: any) : any {
-        let x = this.toRadians(geoPoint.lon);
-        let y = this.toRadians(geoPoint.lat);
-        return { lon: x, lat: y };
-    }
-
-    public static toRadians(degrees: number) : number
-    {
-        return degrees * Math.PI / 180;
-    }
-
-    public static toDegrees(radians: number) : number {
-        return (radians * 180.0 / Math.PI);
-    }
-
-    public static toDegreesNormalized(radians: number) : number
-    {
-        let degrees = this.toDegrees(radians);
-        degrees = (degrees + 360) % 360;
-        return degrees;
-    }
-
-    // converts latitude coordinate to a string
-    public static toStringLat(latitude: number) : string {
-        let str = Math.abs(latitude).toFixed(1) + "°";
-        return latitude > 0 ? str + "N" : str + "S";
-    }
-
-    // converts longitude coordinate to a string
-    public static toStringLon(coordinate: number) : string {
-        let val = Math.abs(coordinate);
-        let str = val < 100 ? val.toFixed(1) : val.toFixed(0);
-        return coordinate > 0 ? str + "°E" : str + "°W";
-    }
-
-    public static toStringAbbr(value: number) : string {
-        if (value > 1000000000000) {
-            return (value / 1000000000000).toFixed(1) + " T"
-        } else if (value > 1000000000) {
-            return (value / 1000000000).toFixed(1) + " B"
-        } else if (value > 1000000) {
-            return (value / 1000000).toFixed(1) + " M"
-        } else if (value > 1000) {
-            return (value / 1000).toFixed(1) + " K"
-        }
-        return value.toFixed(0);
-    }
-
-    public static getLongitude(location: any) : number {
-        if (location.x) return location.x;
-        if (location.lon) return location.lon;
-        if (location.longitude) return location.longitude;
-        return Number.NaN;
-    }
-
-    public static getLatitude(location: any) : number {
-        if (location.y) return location.y;
-        if (location.lat) return location.lat;
-        if (location.latitude) return location.latitude;
-        return Number.NaN;
-    }
-
-    public static getBounds(locations: any[]) : any {
-        let minLat = 90;
-        let maxLat = -90;
-        let minLon = 180;
-        let maxLon = -180;
-
-        for (const location of locations) {
-            const crrLon = this.getLongitude(location);
-            if (!Number.isNaN(crrLon)) {
-                minLon = Math.min(minLon, crrLon);
-                maxLon = Math.max(maxLon, crrLon);
-            }
-
-            const crrLat = this.getLatitude(location);
-            if (!Number.isNaN(crrLat)) {
-                minLat = Math.min(minLat, crrLat);
-                maxLat = Math.max(maxLat, crrLat);
-            }
-        }
-
-        const geoBounds = {
-            left: minLon,
-            top: minLat,
-            width: Math.abs(maxLon - minLon),
-            height: Math.abs(maxLat - minLat)
-        };
-        return geoBounds;
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx
deleted file mode 100644
index 4150b4f710..0000000000
--- a/docs/angular/src/content/en/components/geo-map-shape-files-reference.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Shape Files Reference | Shape Files Editing | Infragistics"
-description: Learn about shape files format to use with Infragistics' Angular map. Check out Ignite UI for Angular map tutorials!
-keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, shape editing"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicShapeSeriesBase", "Series"]
-llms:
-  description: "Before plotting geo-spatial data in the control, one should get familiar with the following resources which provide general information about maps and geo-spatial data."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Shape Files Reference
-
-## Purpose
-
-This topic provides resources about maps and geo-spatial related material as well as information about shape files. Use these resources to learn about and obtain shape files as well as tools for their editing before starting to bind geo-spatial data to the Ignite UI for Angular map component™ control.
-
-## Resources
-
-## Geo-spatial Overview
-
-Before plotting geo-spatial data in the control, one should get familiar with the following resources which provide general information about maps and geo-spatial data.
-
-- [Wikipedia – Cartography](http://en.wikipedia.org/wiki/Cartography)
-
-- [National Atlas of the United States – Geographic Locations](http://nationalatlas.gov/articles/mapping/a_latlong.html)
-
-- [National Atlas of the United States – Map Projections](http://nationalatlas.gov/articles/mapping/a_projections.html)
-
-- [U.S. Geological Survey](http://www.usgs.gov/)
-
-- [Wikipedia – Map Projections](http://en.wikipedia.org/wiki/Map_projection)
-
-- [University of Colorado – Map Projections](http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj_f.html)
-
-- [CSISS – Map Projections](http://www.csiss.org/map-projections/index.html)
-
-## Shape Files Format
-
-The Angular <ApiLink type="GeographicMap" /> control uses popular [Shape Files](http://en.wikipedia.org/wiki/Shapefile#Overview) format as one of the sources for geo-spatial data. Shape files are usually shipped with other file types, generally files with  **.shp**, **.shx**, and **.dbf** extensions.
-
-The following table provides basic information and purpose for each type of shape files.
-
-| File Extension | Description |
-| ---------------|------------ |
-| `.shp` | A shape file contains geo-spatial vector data items that describe points, polylines, and polygons. In this file, points may describe cities, polylines may describe roads, and polygons may describe shapes/borders of countries in geographic context. |
-| `.shx` | A shape index file contains an index for a quick lookup of a geo-spatial vector data items. |
-| `.dbf` | A shape database file contains a table in which a row corresponds to each geo-spatial data item from a shape (.shp) file. In the shape database file, string columns may describe attributes for geo-spatial data item such as strings (names of countries, regions, cities) and numeric columns (population of countries, location of cities). |
-
-Refer to the following resources for detailed information and specifications on how geo-spatial data is stored in shape files.
-
-- [ESRI - Shape File Technical Description](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf)
-
-- [Wikipedia - Shape File Description](http://en.wikipedia.org/wiki/Shapefile#Overview)
-
-## Shape File Tools
-
-The following list provides resource tools for editing shape files.
-
-- [MapWindow – Shape (.shp) and Database (.dbf) File Editor](http://www.mapwindow.org/)
-
-- [Open Office – Database (.dbf) File Editor](http://openoffice.org/)
-
-- [DBF Editor - Database (.dbf) File Editor](http://dbfeditor.com/)
-
-- [DBF View - Database (.dbf) File Editor](http://dbfview.com/view-dbf-file.html)
-
-- [Satellite Signals – Geo-spatial Calculator](http://www.satsig.net/degrees-minutes-seconds-calculator.htm)
-
-- [RITA – NORTAD to Shape Files Converter](http://www.bts.gov/publications/north_american_transportation_atlas_data/html/data_converter.html)
-
-## Shape Files Data Sources
-
-The following list provides resources for obtaining shape files. Also, samples for the <ApiLink type="GeographicMap" /> control are good source of shape files. These shape files are included in the installer for the Samples Browser.
-
-- [ESRI - World Map Data](http://www.esri.com/data/download/basemap/index.html)
-- [ESRI - Census 2010 Tiger/Line® - Shape Files](http://www.census.gov/geo/www/tiger/tgrshp2010/tgrshp2010.html)
-- [National Atlas of the United States – Shape Files](http://www.nationalatlas.gov/atlasftp.html)
-- [U.S. Census Bureau – Cartographic Boundary Files](http://www.census.gov/geo/www/cob/index.html)
-- [U.S. Census Bureau - 2007 Tiger/Line® - Shape Files](http://www.census.gov/cgi-bin/geo/shapefiles/national-files)
-- [U.S. Federal Executive Branch – Raw Data](https://explore.data.gov/catalog/raw/)
-- [NOAA – Shape Files](http://www.nws.noaa.gov/geodata/)
-- [CDC - Shape Files](http://wwwn.cdc.gov/epiinfo/script/shapefiles.aspx)
-- [Massachusetts Geographic Information System](http://www.mass.gov/mgis/massgis.htm)
-- [Geo Commons – Shape Files](http://geocommons.com/searches?query=shapefiles)
-- [Geo Community – Shape Files](http://data.geocomm.com/catalog/)
-- [RITA – NORTAD Files (Must-be converted to Shape Files)](http://www.bts.gov/publications/north_american_transportation_atlas_data/)
-- [MapCruzin – Shape Files](http://www.mapcruzin.com/download-free-arcgis-shapefiles.htm)
-
-## Additional Resources
-
-The following topics provide additional information related to this topic.
-
-- [Binding Shape Files](geo-map-binding-shp-file.md)
-
-## API References
-<ApiLink type="GeographicMap" />
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="ShapefileRecord" />
diff --git a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx b/docs/angular/src/content/en/components/geo-map-shape-styling.mdx
deleted file mode 100644
index ccc715ca62..0000000000
--- a/docs/angular/src/content/en/components/geo-map-shape-styling.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Shape Styling | Conditional Formatting | Infragistics"
-description: Learn how to apply custom styling to Infragistics' Angular map's shape series. Check out Ignite UI for Angular map tutorials!
-keywords: "Angular map, custom styling, Ignite UI for Angular, Infragistics, conditional formatting, shape styling"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicShapeSeries", "Series"]
-llms:
-  description: "Explains how to apply data-driven conditional styling to geographic shape series in the Ignite UI for Angular Map."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Shape Styling on Geographic Shape Series
-
-This topic explains how to apply custom styling to the <ApiLink type="GeographicShapeSeries" /> in the Angular <ApiLink type="GeographicMap" />.
-
-## Angular Shape Styling on Geographic Shape Series Example
-
-<Sample src="/maps/geo-map/shape-styling" height={500} alt="Angular Shape Styling on Geographic Shape Series Example" />
-
-## Required Imports
-
-Shape styling requires that you import the following classes:
-
-```ts
-import { IgxGeographicShapeSeries } from 'igniteui-angular-maps';
-import { IgxStyleShapeEventArgs } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxShapefileRecord } from 'igniteui-angular-core';
-```
-
-Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes:
-- [Shape Comparison Styling](#shape-comparison-styling)
-- [Shape Random Styling](#shape-random-styling)
-- [Shape Range Styling](#shape-range-styling)
-- [Shape Scale Styling](#shape-scale-styling)
-
-## Shape Random Styling
-
-This code snippet creates instances of **ShapeRandomStyling** that will randomly assign fill colors to the countries of the world.
-
-```ts
-import { ShapeRandomStyling } from './ShapeStylingUtility';
-// ...
-
-this.shapeRandomStyling = new ShapeRandomStyling();
-this.shapeRandomStyling.shapeStrokeColors = ['Black'];
-this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## Shape Scale Styling
-
-This code snippet creates instances of **ShapeScaleStyling** that will assign fill colors to shape of countries based on population scaled on logarithmic scale.
-
-```ts
-import { ShapeScaleStyling } from './ShapeStylingUtility';
-// ...
-this.shapeScaleStyling = new ShapeScaleStyling();
-this.shapeScaleStyling.itemMinimumValue = 5000;
-this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
-this.shapeScaleStyling.itemMemberPath = 'Population';
-this.shapeScaleStyling.isLogarithmic = true;
-this.shapeScaleStyling.defaultFill = 'Gray';
-this.shapeScaleStyling.shapeStrokeColors = ['Black'];
-this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## Shape Range Styling
-
-This code snippet creates instances of **ShapeRangeStyling** that will assign colors to shape of countries based on ranges of population.
-
-```ts
-import { ShapeRangeStyling } from './ShapeStylingUtility';
-// ...
-this.shapeRangeStyling = new ShapeRangeStyling();
-this.shapeRangeStyling.defaultFill = 'Gray';
-this.shapeRangeStyling.itemMemberPath = 'Population';
-this.shapeRangeStyling.ranges = [
-    { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
-    { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
-    { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
-    { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
-];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## Shape Comparison Styling
-
-This code snippet creates instances of **ShapeComparisonStyling** that will assign colors to countries based on their region name in the world.
-
-```ts
-import { ShapeComparisonStyling } from './ShapeStylingUtility';
-this.shapeComparisonStyling = new ShapeComparisonStyling();
-this.shapeComparisonStyling.defaultFill = 'Gray';
-this.shapeComparisonStyling.itemMemberPath = 'Region';
-this.shapeComparisonStyling.itemMappings = [
-    { fill: 'Red', itemValue: 'Eastern Europe' },
-    { fill: 'Red', itemValue: 'Central Asia' },
-    { fill: 'Red', itemValue: 'Eastern Asia' },
-    { fill: 'Orange', itemValue: 'Southern Asia' },
-    { fill: 'Orange', itemValue: 'Middle East' },
-    { fill: 'Orange', itemValue: 'Northern Africa' },
-    { fill: 'Yellow', itemValue: 'Eastern Africa' },
-    { fill: 'Yellow', itemValue: 'Western Africa' },
-    { fill: 'Yellow', itemValue: 'Middle Africa' },
-    { fill: 'Yellow', itemValue: 'Southern Africa' },
-    { fill: 'DodgerBlue', itemValue: 'Central America' },
-    { fill: 'DodgerBlue', itemValue: 'Northern America' },
-    { fill: 'DodgerBlue', itemValue: 'Western Europe' },
-    { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
-    { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
-    { fill: '#22c928', itemValue: 'South America' },
-    { fill: '#b64fff', itemValue: 'Melanesia' },
-    { fill: '#b64fff', itemValue: 'Micronesia' },
-    { fill: '#b64fff', itemValue: 'Polynesia' },
-    { fill: '#b64fff', itemValue: 'Australia' },
-];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## API References
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
deleted file mode 100644
index ecb15a6185..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-area-series.mdx
+++ /dev/null
@@ -1,164 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Scatter Area Series | Data Binding | Infragistics"
-description: Use Infragistics Angular map's scatter area series to draw a colored area surface based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, scatter area series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap","GeographicScatterAreaSeries","CustomPaletteColorScale", "Series"]
-llms:
-  description: "In Angular map component, you can use the GeographicScatterAreaSeries to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Area Map
-
-In Angular map component, you can use the <ApiLink type="GeographicScatterAreaSeries" /> to draw a colored surface, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data, defined by geographic locations such as weather temperature, precipitation, population distribution, air pollution, etc.
-
-## Angular Geographic Area Map Example
-
-<Sample src="/maps/geo-map/type-scatter-area-series" height={500} alt="Angular Using Scatter Area Series Example" />
-
-The <ApiLink type="GeographicScatterAreaSeries" /> works a lot like the <ApiLink type="GeographicContourLineSeries" /> except that it represents data as interpolated and colored surface instead of contour lines connecting data points with the same values.
-
-## Data Requirements
-Similar to other types of geographic series in the map component, the <ApiLink type="GeographicScatterAreaSeries" /> has the `ItemsSource` property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store a geographic longitude and latitude coordinates and one data column that stores a value associated with the geographic location. The `LongitudeMemberPath`, `LatitudeMemberPath`, and `ColorMemberPath` properties of the geographic series identify these data column.
-The <ApiLink type="GeographicScatterAreaSeries" /> automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the `TrianglesSource` property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a TriangulationSource for this property, especially when a large number of data items are present.
-
-## Data Binding
-The following table summarizes properties of GeographicScatterAreaSeries used for data binding.
-
-| Property Name  | Property Type   | Description   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" />|any|The source of data items to perform triangulation on if the <ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> property provides no triangulation data.|
-|<ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|string|The name of the property containing the Longitude for all items bound to the <ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" />.|
-|<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|The name of the property containing the Latitude for all items bound to the <ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" />.|
-|<ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the `ColorScale` property is set.|
-|<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" />|any|The source of triangulation data. Setting Triangles of the `TriangulationSource` object to this property improves both runtime performance and geographic series rendering.|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath1" label="TriangleVertexMemberPath1" />|string|The name of the property of the <ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath2" label="TriangleVertexMemberPath2" />|string|The name of the property of the <ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath3" label="TriangleVertexMemberPath3" />|string|The name of the property of the <ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-
-## Color Scale
-Use the ColorScale property of the <ApiLink type="GeographicScatterAreaSeries" /> to resolve colors values of points and thus fill surface of the geographic series. The colors are smoothly interpolated around the shape of the surface by applying a pixel-wise triangle rasterizer to a triangulation data. Because rendering of the surface is pixel-wise, the color scale uses colors instead of brushes.
-The provided <ApiLink type="CustomPaletteColorScale" /> class should satisfy most coloring needs, but the ColorScale base class can be inherited by the application for custom coloring logic.
-
-The following table list properties of the `CustomPaletteColorScale` affecting surface coloring of the GeographicScatterAreaSeries.
-
-| Property Name  | Property Type   | Description   |
-|--------------|---------------| ---------------|
-|<ApiLink type="CustomPaletteColorScale" member="palette" label="Palette" />| `ObservableCollection<Color>` |Gets or sets the collection of colors to select from or to interpolate between.|
-|<ApiLink type="CustomPaletteColorScale" member="interpolationMode" label="InterpolationMode" />|`ColorScaleInterpolationMode`|Gets or sets the method getting a color from the Palette.|
-|<ApiLink type="CustomPaletteColorScale" member="maximumValue" label="MaximumValue" />|double|The highest value to assign a color. Any given value greater than this value will be Transparent.|
-|<ApiLink type="CustomPaletteColorScale" member="minimumValue" label="MinimumValue" />|double|The lowest value to assign a color. Any given value less than this value will be Transparent.|
-
-## Code Snippet
-The following code shows how to bind the <ApiLink type="GeographicScatterAreaSeries" /> to triangulation data representing surface temperatures in the world.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            Degrees: {{item.value}} "°F"
-        </span>
-        <br/>
-        <span>
-                Longitude: {{item.lon}}
-        </span>
-        <br/>
-        <span>
-                Latitude: {{item.lat}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxCustomPaletteColorScaleComponent } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicScatterAreaSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-scatter-area-series",
-  styleUrls: ["./map-geographic-scatter-area-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-area-series.component.html"
-})
-export class MapTypeScatterAreaSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild ("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-    sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-}
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    const contourPoints: any[] = [];
-    for (const record of shapeRecords) {
-        const temp = record.fieldValues.Contour;
-        // using only major contours (every 10th degrees Celsius)
-        if (temp % 10 === 0 && temp >= 0) {
-            for (const shapes of record.points) {
-                for (let i = 0; i < shapes.length; i++) {
-                if (i % 5 === 0) {
-                    const p = shapes[i];
-                    const item = { lon: p.x, lat: p.y, value: temp};
-                    contourPoints.push(item);
-                }
-                }
-            }
-        }
-    }
-    this.createContourSeries(contourPoints);
-}
-
-    public createContourSeries(data: any[]) {
-    const brushes = [
-        "rgba(32, 146, 252, 0.5)", // semi-transparent blue
-        "rgba(14, 194, 14, 0.5)",  // semi-transparent green
-        "rgba(252, 120, 32, 0.5)", // semi-transparent orange
-        "rgba(252, 32, 32, 0.5)"  // semi-transparent red
-    ];
-
-    const colorScale = new IgxCustomPaletteColorScaleComponent();
-    colorScale.palette = brushes;
-    colorScale.minimumValue = 0;
-    colorScale.maximumValue = 30;
-
-    const areaSeries = new IgxGeographicScatterAreaSeriesComponent();
-    areaSeries.dataSource = data;
-    areaSeries.longitudeMemberPath = "lon";
-    areaSeries.latitudeMemberPath = "lat";
-    areaSeries.colorMemberPath = "value";
-    areaSeries.colorScale = colorScale;
-    areaSeries.tooltipTemplate = this.tooltipTemplate;
-    areaSeries.thickness = 4;
-
-    this.map.series.add(areaSeries);
-}
-}
-```
-
-## API References
-<ApiLink type="ColorScale" />
-<ApiLink type="CustomPaletteColorScale" />
-<ApiLink type="GeographicContourLineSeries" />
-<ApiLink type="GeographicScatterAreaSeries" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
deleted file mode 100644
index 893e73eafd..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Scatter Proportional Series | Data Binding | Infragistics"
-description: Use Infragistics Angular map's scatter proportional series to plot markers for the geographic points specified by the data in your application. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, scatter proportional series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-llms:
-  description: "In Angular map component, you can use the GeographicProportionalSymbolSeries to plot bubbles or proportional markers at the geographic locations specified by the data in your application."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Bubble Map
-
-In Angular map component, you can use the <ApiLink type="GeographicProportionalSymbolSeries" /> to plot bubbles or proportional markers at the geographic locations specified by the data in your application. This map series can be useful for highlighting points of interest in your particular business case like department stores, warehouses, or offices. Also you can use this map series in a fleet management system or a GPS system for dynamic vehicle tracking.
-
-## Angular Geographic Bubble Map Example
-
-<Sample src="/maps/geo-map/type-scatter-bubble-series" height={500} alt="Angular Using Scatter Proportional Series Example" />
-
-<div class="divider--half"></div>
-
-The demo above shows the <ApiLink type="GeographicProportionalSymbolSeries" /> series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.
-
-## Configuration Summary
-Similar to other types of scatter series in the map control, the <ApiLink type="GeographicProportionalSymbolSeries" /> series has the <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the <ApiLink type="GeographicProportionalSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> and <ApiLink type="GeographicProportionalSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> properties to map these data columns. The <ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" /> and <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" /> will settings configures the radius for the bubbles.
-
-The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.
-
-| Property|Type|Description |
-| ---|---|--- |
-| <ApiLink type="GeographicMap" member="dataSource" label="DataSource" />|any|Gets or sets the items source |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />|string|Sets the path to use to get the radius values for the series. |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" />|<ApiLink type="SizeScale" />|Gets or sets the radius scale property for the current bubble series. |
-| <ApiLink type="SizeScale" member="minimumValue" label="MinimumValue" />|any|Configure the minimum value for calculating value sub ranges. |
-| <ApiLink type="SizeScale" member="maximumValue" label="MaximumValue" />|any|Configure the maximum value for calculating value sub ranges. |
-
-## Code Snippet
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            {{item.name}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxSizeScaleComponent } from 'igniteui-angular-charts';
-import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
-import { IgxDataContext } from 'igniteui-angular-core';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { MarkerType } from 'igniteui-angular-charts';
-import { WorldLocations } from "../../utilities/WorldLocations";
-
-@Component({
-  selector: "app-map-geographic-scatter-proportional-series",
-  styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-proportional-series.component.html"
-})
-export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild ("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-    sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-}
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp");
-
-    const contourPoints: any[] = [];
-    for (const record of shapeRecords) {
-        const temp = record.fieldValues.Contour;
-        // using only major contours (every 10th degrees Celsius)
-        if (temp % 10 === 0 && temp >= 0) {
-            for (const shapes of record.points) {
-                 for (let i = 0; i < shapes.length; i++) {
-                    if (i % 5 === 0) {
-                        const p = shapes[i];
-                        const item = { lon: p.x, lat: p.y, value: temp};
-                        contourPoints.push(item);
-                    }
-                 }
-            }
-        }
-    }
-
-    console.log("loaded contour points: " + contourPoints.length);
-    this.addSeriesWith(WorldLocations.getAll());
-}
-
-    public addSeriesWith(locations: any[]) {
-        const sizeScale = new IgxSizeScaleComponent();
-        sizeScale.minimumValue = 4;
-        sizeScale.maximumValue = 60;
-
-        const brushes = [
-            "rgba(14, 194, 14, 0.4)",  // semi-transparent green
-            "rgba(252, 170, 32, 0.4)", // semi-transparent orange
-            "rgba(252, 32, 32, 0.4)"  // semi-transparent red
-        ];
-
-        const brushScale = new IgxValueBrushScaleComponent();
-        brushScale.brushes = brushes;
-        brushScale.minimumValue = 0;
-        brushScale.maximumValue = 30;
-
-        const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
-        symbolSeries.dataSource = locations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.radiusScale = sizeScale;
-        symbolSeries.fillScale = brushScale;
-        symbolSeries.fillMemberPath = "pop";
-        symbolSeries.radiusMemberPath = "pop";
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
-        symbolSeries.tooltipTemplate = this.tooltipTemplate;
-
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API References
-
-<ApiLink type="GeographicProportionalSymbolSeries" /><br />
-<ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" /><br />
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
deleted file mode 100644
index eeaf449577..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-contour-series.mdx
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Scatter Contour Series | Data Binding | Infragistics"
-description: Use Infragistics Angular map's scatter contour series to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, scatter contour series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap","GeographicContourLineSeries","CustomPaletteColorScale", "Series"]
-llms:
-  description: "In Angular map component, you can use the GeographicContourLineSeries to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Contour Map
-
-In Angular map component, you can use the <ApiLink type="GeographicContourLineSeries" /> to draw colored contour lines, in a geographic context, based on a triangulation of longitude and latitude data with a numeric value assigned to each point. This type of geographic series is useful for rendering scattered data defined by geographic locations such as weather temperature, atmospheric pressure, precipitation, population distribution, topographic data, etc.
-
-## Angular Geographic Contour Map Example
-
-<Sample src="/maps/geo-map/type-scatter-contour-series" height={500} alt="Angular Using Scatter Contour Series Example" />
-
-<div class="divider--half"></div>
-
-The <ApiLink type="GeographicContourLineSeries" /> works a lot like the <ApiLink type="GeographicScatterAreaSeries" /> except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale.
-
-## Data Requirements
-Similar to other types of geographic series in the map component, the <ApiLink type="GeographicContourLineSeries" /> has the <ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" /> property which can be bound to an array of objects. In addition, each item in the items source must have three data columns, two that store geographic location (longitude and latitude coordinates) and one data column that stores a value associated with the geographic location. These data column, are identified by <ApiLink type="GeographicContourLineSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />, <ApiLink type="GeographicContourLineSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />, and <ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" /> properties of the geographic series.
-The <ApiLink type="GeographicContourLineSeries" /> automatically performs built-in data triangulation on items in the ItemsSource if no triangulation is set to the <ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" /> property. However, computing triangulation can be a very time-consuming process, so the runtime performance will be better when specifying a `TriangulationSource` for this property, especially when a large number of data items are present.
-
-## Data Binding
-The following table summarizes properties of <ApiLink type="GeographicContourLineSeries" /> used for data binding.
-
-| Property Name  | Property Type   | Description   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" />|any|The source of data items to perform triangulation on if the <ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" /> property provides no triangulation data.|
-|<ApiLink type="GeographicContourLineSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|string|The name of the property containing the Longitude for all items bound to the <ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" />.|
-|<ApiLink type="GeographicContourLineSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|The name of the property containing the Latitude for all items bound to to the <ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" />.|
-|<ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />|string|The name of the property containing a value at Latitude and Longitude coordinates of each data item. This numeric value will be be converted to a color when the <ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /> property is set.|
-|<ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" />|any|Gets or sets the source of triangulation data. Setting Triangles of the TriangulationSource object to this property improves both runtime performance and geographic series rendering.|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath1" label="TriangleVertexMemberPath1" />|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath2" label="TriangleVertexMemberPath2" />|string| The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath3" label="TriangleVertexMemberPath3" />|string|The name of the property of the TrianglesSource items which, for each triangle, contains the index of the first vertex point in the ItemsSource. It is not mandatory to set this property. It is taken by default unless custom triangulation logic is provided.|
-
-## Contour Fill Scale
-Use the <ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /> property of the <ApiLink type="GeographicContourLineSeries" /> to resolve fill brushes of the contour lines of the geographic series.
-The provided `ValueBrushScale class should satisfy most of your coloring needs, but the application for custom coloring logic can inherit the ValueBrushScale class.
-The following table list properties of the CustomPaletteColorScale affecting the surface coloring of the GeographicContourLineSeries.
-
-| Property Name  | Property Type   | Description   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicMap" member="brushes" label="Brushes" />|BrushCollection|Gets or sets the collection of brushes for filling contours of the <ApiLink type="GeographicContourLineSeries" />|
-|<ApiLink type="CustomPaletteColorScale" member="maximumValue" label="MaximumValue" />|double|The highest value to assign a brush in a fill scale.|
-|<ApiLink type="CustomPaletteColorScale" member="minimumValue" label="MinimumValue" />|double|The lowest value to assign a brush in a fill scale.|
-
-## Code Snippet
-
-The following code shows how to bind the <ApiLink type="GeographicContourLineSeries" /> to triangulation data representing surface temperatures in the world.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <span [style.color]="series.brush">
-        {{item | number: 2}} "°C"
-    </span>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicContourLineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-scatter-contour-series",
-  styleUrls: ["./map-geographic-scatter-contour-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-contour-series.component.html"
-})
-
-export class MapTypeScatterContourSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild ("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        const sds = new IgxShapeDataSource();
-        sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-        sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-        sds.dataBind();
-        sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-
-        const contourPoints: any[] = [];
-        for (const record of shapeRecords) {
-            const temp = record.fieldValues.Contour;
-            // using only major contours (every 10th degrees Celsius)
-            if (temp % 10 === 0 && temp >= 0) {
-                for (const shapes of record.points) {
-                     for (let i = 0; i < shapes.length; i++) {
-                        if (i % 5 === 0) {
-                            const p = shapes[i];
-                            const item = { lon: p.x, lat: p.y, value: temp};
-                            contourPoints.push(item);
-                        }
-                     }
-                }
-            }
-        }
-
-        this.createContourSeries(contourPoints);
-    }
-
-    public createContourSeries(data: any[]) {
-        const brushes = [
-            "rgba(32, 146, 252, 0.5)", // semi-transparent blue
-            "rgba(14, 194, 14, 0.5)",  // semi-transparent green
-            "rgba(252, 120, 32, 0.5)", // semi-transparent orange
-            "rgba(252, 32, 32, 0.5)"  // semi-transparent red
-        ];
-
-        const brushScale = new IgxValueBrushScaleComponent();
-        brushScale.brushes = brushes;
-        brushScale.minimumValue = 0;
-        brushScale.maximumValue = 30;
-
-        const contourSeries = new IgxGeographicContourLineSeriesComponent();
-        contourSeries.dataSource = data;
-        contourSeries.longitudeMemberPath = "lon";
-        contourSeries.latitudeMemberPath = "lat";
-        contourSeries.valueMemberPath = "value";
-        contourSeries.fillScale = brushScale;
-        contourSeries.tooltipTemplate = this.tooltip;
-        contourSeries.thickness = 4;
-
-        this.map.series.add(contourSeries);
-    }
-}
-```
-
-## API References
-
-<ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /><br />
-<ApiLink type="GeographicContourLineSeries" /><br />
-<ApiLink type="GeographicScatterAreaSeries" /><br />
-<ApiLink type="ValueBrushScale" /><br />
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
deleted file mode 100644
index 0182d71149..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-density-series.mdx
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Scatter High Density Series | Data Binding | Infragistics"
-description: Use Infragistics Angular map's scatter high density series to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, scatter high density series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-llms:
-  description: "In Angular map component, you can use the GeographicHighDensityScatterSeries to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic High Density Map
-
-In Angular map component, you can use the <ApiLink type="GeographicHighDensityScatterSeries" /> to bind and show scatter data ranging from hundreds to millions of data points requiring exceedingly little loading time.
-
-## Angular Geographic High Density Map Example
-
-<Sample src="/maps/geo-map/type-scatter-density-series" height={400} alt="Angular Using Scatter High Density Series Example" />
-
-The demo above shows the <ApiLink type="GeographicHighDensityScatterSeries" /> series in the map component bound to hundreds or even thousands of data points representing Australia’s population density. The map plot area with more densely populated data points represented as coalescences of red pixels and loosely distributed data points by discrete blue pixels.
-
-Because there are so many data points, the series displays the scatter data as tiny dots as opposed to full size markers, and displays areas with the most data using a higher color density representing a cluster of data points.
-
-## Data Requirements
-Similar to other types of scatter series in the map control, the <ApiLink type="GeographicHighDensityScatterSeries" /> series has the <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in the items source must have two data columns that store geographic longitude and latitude coordinates and uses the <ApiLink type="GeographicHighDensityScatterSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> and <ApiLink type="GeographicHighDensityScatterSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> properties to map these data columns.
-
-### Data Binding
-The following table summarizes the GeographicHighDensityScatterSeries series properties used for data binding.
-
-| Property|Type|Description |
-| ---|---|--- |
-| <ApiLink type="GeographicMap" member="dataSource" label="DataSource" />|any|Gets or sets the items source |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|string|Uses the DataSource property to determine the location of the longitude values on the assigned items |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|Uses the DataSource property to determine the location of the latitude values on the assigned items |
-
-## Heat Color Scale
-The Heat Color Scale, an optional feature, determines the color pattern within the series. The following table summarizes the properties used for determining the color scale.
-
-| Property |Type|Description |
-| ---|---|--- |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimum" label="HeatMinimum" />|Double|Defines the double value representing the minimum end of the color scale |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximum" label="HeatMaximum" />|Double|Defines the double value representing the maximum end of the color scale |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" />|Color|Defines the point density color used at the bottom end of the color scale |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" />|Color|Defines the point density color used at the top end of the color scale |
-
-## Code Example
-
-The following code demonstrates how set the <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" /> and <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" /> properties of the <ApiLink type="GeographicHighDensityScatterSeries" />
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            {{item.n}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { WorldUtils } from "../../utilities/WorldUtils";
-
-@Component({
-  selector: "app-map-geographic-scatter-density-series",
-  styleUrls: ["./map-geographic-scatter-density-series.component.scss"],
-  templateUrl: ".map-geographic-scatter-density-series.component.html"
-})
-
-export class MapTypeScatterDensitySeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    public geoLocations;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-         // fetching geographic locations from public JSON folder
-         fetch("assets/Data/AusPlaces.json")
-         .then((response) => response.json())
-         .then((data) => this.onDataLoaded(data, ""));
-      }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        this.geoLocations = sds;
-        // creating HD series with loaded data
-        const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
-        geoSeries.dataSource = sds;
-        geoSeries.longitudeMemberPath = "x";
-        geoSeries.latitudeMemberPath = "y";
-        geoSeries.heatMaximumColor = "Red";
-        geoSeries.heatMinimumColor = "Black";
-        geoSeries.heatMinimum = 0;
-        geoSeries.heatMaximum = 5;
-        geoSeries.pointExtent = 1;
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.mouseOverEnabled = true;
-
-        // adding HD series to the geographic amp
-        this.map.series.add(geoSeries);
-
-        // zooming to bound of all geographic locations
-        const geoBounds = WorldUtils.getBounds(this.geoLocations);
-        geoBounds.top = 0;
-        geoBounds.height = -50;
-        this.map.zoomToGeographic(geoBounds);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicHighDensityScatterSeries" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
deleted file mode 100644
index 9067ba5710..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-scatter-symbol-series.mdx
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Scatter Symbol Series | Data Binding | Infragistics"
-description: Use Infragistics Angular map's scatter symbol series to display geo-spatial data using points or markers in a geographic context.. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, scatter symbol series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series"]
-llms:
-  description: "In Angular map component, you can use the GeographicSymbolSeries to display geo-spatial data using points or markers in a geographic context."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Symbol Map
-
-In Angular map component, you can use the <ApiLink type="GeographicSymbolSeries" /> to display geo-spatial data using points or markers in a geographic context. This type of geographic series is often used to render a collection of geographic locations such as cities, airports, earthquakes, or points of interests.
-
-## Angular Geographic Symbol Map Example
-
-<Sample src="/maps/geo-map/type-scatter-symbol-series" height={500} alt="Angular Using Scatter Symbol Series Example" />
-
-## Data Requirements
-Similarly to other types of geographic series in the map component, the <ApiLink type="GeographicSymbolSeries" /> has the <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in this object must have two numeric data columns that store a geographic location (longitude and latitude). These data columns are then mapped to the <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> and <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> properties. The `GeographicSymbolSeries` uses values of these mapped data columns to plot symbol elements in the geographic map component.
-
-## Code Snippet
-The following code shows how to bind the <ApiLink type="GeographicSymbolSeries" /> to locations of cities loaded from a shape file using the <ApiLink type="ShapefileRecord" />.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-        <div>
-            <div *ngIf="item.org;then hasOrg; else notOrg" ></div>
-            <span [style.color]="series.brush">
-                {{item.name}}
-            </span>
-            <br/>
-            <span>
-                Population {{item.pop}} M
-            </span>
-        </div>
-        <ng-template #hasOrg>
-            <span>
-                Population {{item.pop}} M
-            </span>
-            <br />
-        </ng-template>
-         <ng-template #notOrg>
-            <span>
-            </span>
-         </ng-template>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
-import { WorldLocations } from "../../utilities/WorldLocations";
-
-@Component({
-  selector: "app-map-geographic-scatter-symbol-series",
-  styleUrls: ["./map-geographic-scatter-symbol-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-symbol-series.component.html"
-})
-
-export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      this.addSeriesWith(WorldLocations.getCities(), "Gray");
-      this.addSeriesWith(WorldLocations.getCapitals(), "rgb(32, 146, 252)");
-    }
-
-    public addSeriesWith(locations: any[], brush: string) {
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = locations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush  = "White";
-        symbolSeries.markerOutline = brush;
-        symbolSeries.tooltipTemplate = this.tooltip;
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicSymbolSeries" />
-<ApiLink type="ShapefileRecord" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-series.mdx b/docs/angular/src/content/en/components/geo-map-type-series.mdx
deleted file mode 100644
index 77547d71cc..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-series.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Geographic Series Types | Infragistics"
-description: Use Infragistics Angular map's series to display geo-spatial data as points such as locations of cities, polylines such as road connections, or polygons such as shape of countries in a geographic context. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, geographic series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-llms:
-  description: "In the Ignite UI for Angular Map component, geographic series are visual elements of the map that display geo-spatial data as points (e.g. locations of cities), polylines (e.g. road connections), or polygons (shape of countries) in a geographic context."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Series Overview
-
-In the Ignite UI for Angular Map component, geographic series are visual elements of the map that display geo-spatial data as points (e.g. locations of cities), polylines (e.g. road connections), or polygons (shape of countries) in a geographic context.
-The map component's Series property is a collection of geographic series objects. This property is used to support rendering an unlimited number of geographic series in the same plot area. When multiple geographic series objects are added to the Series property, each successive series will be layered on top of the previous series starting from the first to the last series. Therefore, geographic series can be better understood as map layers that can be stacked on top of each other and/or on top of geographic imagery.
-
-All types of geographic series are always rendered on top of the geographic imagery tiles. However, sometimes geographic series (e.g. with detailed shape files of the world) might provide enough geographic contexts for an application and geographic imagery is not desired in the map control.
-
-## Type of Geographic Series
-
-The Angular Geographic Map component supports the following types of geographic series:
-
-- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
-- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
-- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
-- [Using Scatter Density Series](geo-map-type-scatter-density-series.md)
-- [Using Scatter Area Series](geo-map-type-scatter-area-series.md)
-- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md)
-- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md)
-
-## API References
-<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
deleted file mode 100644
index 21ae8c9ccc..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-shape-polygon-series.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Shape Polygon Series | Infragistics"
-description: Use Infragistics Angular map's shape polygon series to render shapes of countries or regions defined by geographic locations. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, shape polygon series, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"]
-llms:
-  description: "In Angular map component, you can use the GeographicShapeSeries to display geo-spatial data using shape polygons in a geographic context."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Polygon Map
-
-In Angular map component, you can use the <ApiLink type="GeographicShapeSeries" /> to display geo-spatial data using shape polygons in a geographic context. This type of geographic series is often used to render shapes of countries or regions defined by geographic locations.
-
-## Angular Geographic Polygon Map Example
-
-<Sample src="/maps/geo-map/type-shape-polygon-series" height={500} alt="Angular Using Shape Polygon Series Example" />
-
-The <ApiLink type="GeographicShapeSeries" /> works a lot like the <ApiLink type="GeographicPolylineSeries" /> except that geo-spatial data is rendered with polygons instead of polylines.
-
-## Data Requirements
-Similar to other types of geographic series in the map control, the <ApiLink type="GeographicShapeSeries" /> has the <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicShapeSeries` uses points of this mapped data column to plot polygons in the map control.
-
-## Code Snippet
-The following code demonstrates how to bind the <ApiLink type="GeographicShapeSeries" /> to shapes of countries in the world loaded from a shape file using the <ApiLink type="ShapefileRecord" />.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <div *ngIf="item.org;then hasOrg; else notOrg" ></div>
-        <span [style.color]="series.brush">
-            {{item.name}}
-        </span>
-        <br/>
-        <span>
-            Population {{item.pop}} M
-        </span>
-    </div>
-    <ng-template #hasOrg>
-        <span>
-            Population {{item.pop}} M
-        </span>
-        <br />
-    </ng-template>
-        <ng-template #notOrg>
-        <span>
-        </span>
-        </ng-template>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-shape-polygon-series",
-  styleUrls: ["./map-geographic-shape-polygon-series.component.scss"],
-  templateUrl: "./map-geographic-shape-polygon-series.component.html"
-})
-export class MapTypeShapePolygonSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    public data: any;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      const sds = new IgxShapeDataSource();
-      sds.shapefileSource = "assets/Shapes/WorldCountries.shp";
-      sds.databaseSource  = "assets/Shapes/WorldCountries.dbf";
-      sds.dataBind();
-      sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-        console.log("loaded /Shapes/WorldCountries.shp " + shapeRecords.length);
-
-        const countriesNATO: any[] = [];
-        const countriesSCO: any[] = [];
-        const countriesARAB: any[] = [];
-        const countriesOther: any[] = [];
-
-        for (const record of shapeRecords) {
-            // using field/column names from .DBF file
-            const country = {
-                name: record.fieldValues.NAME,
-                org: record.fieldValues.ALLIANCE,
-                points: record.points,
-                pop: record.fieldValues.POPULATION
-            };
-
-            const group = record.fieldValues.ALLIANCE;
-            if (group === "NATO") {
-                countriesNATO.push(country);
-            } else if (group === "SCO") {
-                countriesSCO.push(country);
-            } else if (group === "ARAB LEAGUE") {
-                countriesARAB.push(country);
-            } else {
-                countriesOther.push(country);
-            }
-        }
-
-        this.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO");
-        this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO");
-        this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL");
-        this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other");
-  }
-
-    public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) {
-        const seriesName = shapeTitle + "series";
-        const geoSeries = new IgxGeographicShapeSeriesComponent();
-        geoSeries.dataSource = shapeData;
-        geoSeries.shapeMemberPath = "points";
-        geoSeries.brush = shapeBrush;
-        geoSeries.outline = "Black";
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.thickness = 1;
-        geoSeries.title = shapeTitle;
-
-        this.map.series.add(geoSeries);
-  }
-}
-```
-
-## API References
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="ShapefileRecord" />
diff --git a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
deleted file mode 100644
index 18aac18d30..0000000000
--- a/docs/angular/src/content/en/components/geo-map-type-shape-polyline-series.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Shape Polyline Series | Infragistics"
-description: Use Infragistics Angular map's shape polyline series to render roads or connections between geographic locations such as cities or airports. Learn more about Ignite UI for Angular map's series!
-keywords: "Angular map, Ignite UI for Angular, shape polyline series, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileRecord", "Series", "GeographicShapeSeriesBase"]
-llms:
-  description: "In Angular map component, you can use the GeographicPolylineSeries to display geo-spatial data using polylines in a geographic context."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Polyline Map
-
-In Angular map component, you can use the <ApiLink type="GeographicPolylineSeries" /> to display geo-spatial data using polylines in a geographic context. This type of geographic series is often used to render roads or connections between geographic locations such as cities or airports.
-
-## Angular Geographic Polyline Map Example
-
-<Sample src="/maps/geo-map/type-shape-polyline-series" height={500} alt="Angular Using Shape Polyline Series Example" />
-
-The <ApiLink type="GeographicPolylineSeries" /> works a lot like the <ApiLink type="GeographicShapeSeries" /> except that geo-spatial data is rendered with polylines instead of polygons.
-
-## Data Requirements
-Similarly to other types of geographic series in the control, the <ApiLink type="GeographicPolylineSeries" /> has the <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property which can be bound to an array of objects. In addition, each data item in this object must have one data column that stores single/multiple shapes using an array of arrays of objects with x and y values representing geographic locations. This data column is then mapped to the `ShapeMemberPath` property. The `GeographicPolylineSeries` uses points of this mapped data column to plot polygons in the control.
-
-## Code Snippet
-The following code shows how to bind the <ApiLink type="GeographicPolylineSeries" /> to locations of cities loaded from a shape file using the <ApiLink type="ShapefileRecord" />.
-
-```html
-<div class="sampleRoot" >
-
-        <igx-geographic-map #map
-            width="700px"
-            height="500px"
-            zoomable="true"
-            >
-        </igx-geographic-map>
-</div>
-<ng-template let-series="series" let-item="item" #template>
-<div>
-    <span>
-    {{item.country}} {{item.type}}
-    </span>
-    <br />
-    <span>
-    Length: {{item.length}} miles
-    </span>
-</div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild} from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxIgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-shape-polyline-series",
-  styleUrls: ["./map-geographic-shape-polyline-series.component.scss"],
-  templateUrl: "./map-geographic-shape-polyline-series.component.html"
-})
-
-export class MapTypeShapePolylineSeriesComponent implements AfterViewInit {
-
-  @ViewChild ("map")
-  public map: IgxGeographicMapComponent;
-
-  @ViewChild("template")
-  public tooltip: TemplateRef<object>;
-
-  constructor() {
-  }
-
-  public ngAfterViewInit(): void {
-    this.map.windowRect = { left: 0.195, top: 0.325, width: 0.2, height: 0.1 };
-
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "/assets/Shapes/AmericanRoads.shp";
-    sds.databaseSource  = "/assets/Shapes/AmericanRoads.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-  }
-
-  public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length);
-
-    const roadsUSA: any[] = [];
-    const roadsMEX: any[] = [];
-    const roadsCAN: any[] = [];
-
-    // filtering records of loaded shapefile
-    for (const record of shapeRecords) {
-        // reading field values loaded from DBF file
-        const type = record.fieldValues.RoadType;
-        const road = {
-            country: record.fieldValues.Country,
-            length: record.fieldValues.RoadLength / 10,
-            points: record.points,
-            type: type === 1 ? "Highway" : "Road"
-        };
-        // grouping road items by country names
-        if (type === 1 || type === 2) {
-            if (road.country === "USA") {
-                roadsUSA.push(road);
-            } else if (road.country === "MEX") {
-                roadsMEX.push(road);
-            } else if (road.country === "CAN") {
-                roadsCAN.push(road);
-            }
-        }
-    }
-
-    // creating polyline series for roads of each country
-    this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
-    this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
-    this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
-}
-
-  public addSeriesWith(shapeData: any[], shapeBrush: string) {
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = shapeData;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeFilterResolution = 2.0;
-        lineSeries.shapeStrokeThickness = 2;
-        lineSeries.shapeStroke = shapeBrush;
-        lineSeries.tooltipTemplate = this.tooltip;
-        this.map.series.add(lineSeries);
-    }
-}
-```
-
-## API References
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="ShapefileRecord" />
diff --git a/docs/angular/src/content/en/components/geo-map.mdx b/docs/angular/src/content/en/components/geo-map.mdx
deleted file mode 100644
index f6930e5745..0000000000
--- a/docs/angular/src/content/en/components/geo-map.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: "Angular Map | Data Visualization Tools | Map Overview | Infragistics"
-description: Use Infragistics' Angular JavaScript map to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. View the Ignite UI for Angular map demos!
-keywords: "Angular map, geographic map, imagery tiles, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-llms:
-  description: "The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Map Overview
-
-The Ignite UI for Angular map component allows you to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps.
-
-## Angular Map Example
-
-The following sample demonstrates how display data in <ApiLink type="GeographicMap" /> using <ApiLink type="GeographicProportionalSymbolSeries" /> also known as Bubble Series.
-
-<Sample src="/maps/geo-map/type-scatter-bubble-series" height={500} alt="Angular geo map type scatter bubble series" />
-
-The map component allows you to render geographic imagery from Bing Maps™, and Open Street Maps. The map provides plotting of tens of thousands of data points, and updates them every few milliseconds so that the control can handle your real-time feeds.
-
-The map's Series property is used to support rendering an unlimited number of geographic series. This property is a collection of geographic series objects and any type of geographic series can be added to it. For example, <ApiLink type="GeographicSymbolSeries" /> can be added for plotting geographic locations such as cities and the <ApiLink type="GeographicPolylineSeries" /> for plotting connections (e.g. roads) between these geographic locations.
-
-The map provides customizable navigation behaviors for navigating map content using mouse, keyboard, or code-behind.
-
-NOTE: As of June 30, 2025 all Microsoft Bing Maps for Enterprise Basic (Free) accounts will be retired. If you're still using an unpaid Basic Account and key, now is the time to act to avoid service disruptions. Bing Maps for Enterprise license holders can continue to use Bing Maps in their applications until June 30,2028.
-
-For more details please visit:
-
-[Microsoft Bing Blogs](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-## Dependencies
-
-The Angular geographic map component, you need to first install these packages:
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-charts
-npm install --save igniteui-angular-maps
-```
-
-## Component Modules
-
-The <ApiLink type="GeographicMap" /> requires the following modules, however the DataChartInteractivityModule is only required for mouse interactions, such as panning and zooming the map content.
-
-```ts
-// app.module.ts
-import { IgxGeographicMapModule } from 'igniteui-angular-maps';
-import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxGeographicMapModule,
-        IgxDataChartInteractivityModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-```ts
-import { AfterViewInit, Component, ViewChild } from "@angular/core";
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-overview",
-  styleUrls: ["./map-overview.component.scss"],
-  templateUrl: "./map-overview.component.html"
-})
-
-export class MapOverviewComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
-    }
-}
-```
-
-## Usage
-
-Now that the map module is imported, next step is to create geographic map. The following code demonstrates how to do this and enable zooming in the map.
-
-```html
-<div class="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-```
-
-## Additional Resources
-
-You can find more information about related Angular map features in these topics:
-
-- [Geographic Map Navigation](geo-map-navigation.md)
-{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/}
-- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
-- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
-- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
-- [Using Scatter Density Series](geo-map-type-scatter-density-series.md)
-- [Using Scatter Area Series](geo-map-type-scatter-area-series.md)
-- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md)
-- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md)
-
-## API References
-<ApiLink type="GeographicMap" />
-<ApiLink type="GeographicContourLineSeries" />
-<ApiLink type="GeographicHighDensityScatterSeries" />
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="GeographicShapeSeries" />
-<ApiLink type="GeographicProportionalSymbolSeries" />
-<ApiLink type="GeographicSymbolSeries" />
-<ApiLink type="GeographicScatterAreaSeries" />
diff --git a/docs/angular/src/content/en/components/inputs/color-editor.mdx b/docs/angular/src/content/en/components/inputs/color-editor.mdx
deleted file mode 100644
index 1d885f8a2f..0000000000
--- a/docs/angular/src/content/en/components/inputs/color-editor.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: "Angular Color Editor | Color Editor | Infragistics"
-description: Color Editor component provides an easily configurable option to change colors for any desirable component or aspect of your application.
-keywords: "Angular Color Editor, Ignite UI for Angular, Infragistics"
-license: commercial
-mentionedTypes: ["ColorEditor"]
-namespace: Infragistics.Controls
-llms:
-  description: "The Ignite UI for Angular Color Editor is a lightweight color picker component."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Color Editor Overview <Badge variant="preview" />
-The Ignite UI for Angular Color Editor is a lightweight color picker component. The Color Editor can pop open by clicking the brush icon. Both the rgba and hex values can be obtained from the desired color along the bottom. These values will update when the three sliders are modified. The center box is designed for adjusting the saturation and brightness along with two adjacent sliders for adjusting the rgb and luminance values. Rgb registers between (1-255). The lightness registers between(0-1).
-
-## Angular Color Editor Example
-
-<Sample src="/inputs/color-editor/overview" height={340} alt="Angular Color Editor Example" />
-
-<div class="divider--half"></div>
-
-## Dependencies
-
-First, you need to install the Ignite UI for Angular by running the following command:
-
-```cmd
-npm install igniteui-angular-core
-npm install igniteui-angular-inputs
-```
-
-Before using the <ApiLink type="ColorEditor" />, you need to register the following modules as follows:
-
-## Usage
-
-The simplest way to start using the <ApiLink type="ColorEditor" /> is as follows:
-
-```html
-<igx-color-editor
-    name="colorEditor"
-    #colorEditor>
-    </igx-color-editor>
-```
-
-## Binding to events
-
-The Color Editor component raises the following events:
-
-- valueChanged
-- valueChanging
-
-```ts
-@ViewChild("colorEditor", { static: true } )
-private colorEditor: IgxColorEditorComponent
-public ngAfterViewInit(): void
-{
-    this.colorEditor.valueChanged.subscribe(this.onValueChanged);
-}
-
-public onValueChanged = (e: any) => {
-    console.log("test");
-}
-
-```
-
-<div class="divider--half"></div>
-
-## API References
-
-<ApiLink type="ColorEditor" /><br />
-
-## Additional Resources
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
deleted file mode 100644
index 484dc8f2e1..0000000000
--- a/docs/angular/src/content/en/components/interactivity/accessibility-compliance.mdx
+++ /dev/null
@@ -1,195 +0,0 @@
----
-title: Ignite UI for Angular Accessibility Compliance | Ignite UI for Angular | Infragistics
-description: Ignite UI for Angular Accessibility Support and Compliance - Section 508 Compliance, WCAG and ARIA .
-keywords: accessibility, Angular, ignite ui for Angular, infragistics
-license: MIT
-mentionedTypes: []
-llms:
-  description: "As the leading global provider of UI and UX tools for developers, our Angular team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-
-<style>{`
-.greenCheck {
-  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
-}
-
-.redCheck {
-  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
-}
-`}</style>
-
-# Accessibility Compliance
-
-As the leading global provider of UI and UX tools for developers, our Angular team at Infragistics is committed to providing components and tools that make it easier for you to create the best possible user experience. Our goal is to enable you to focus on crafting the best applications and the best user experience for all users.
-
-Here you can find specific information regarding the accessibility support and compliance for our Angular grids, charts, and UI components and controls within Ignite UI for Angular.
-
-## Section 508 Compliance
-
-[Section 508](http://www.section508.gov/) of the Rehabilitation Act was amended in 1998 by Congress to require all Federal agencies to make their electronic and information technology accessible to people with disabilities. Since then, Section 508 compliance has not only been a requirement in government agencies, but it's also important when providing software solutions and designing Web pages.
-
-Section 1194.22 of the Section 508 law specifically targets Web-based intranet and internet information and systems, and contains a set of 16 rules to follow. In order to enable you to keep your Web applications and Web sites compatible with these rules with minimal effort on your part, Infragistics has taken steps to ensure that the Ignite UI for Angular controls and components are compliant with the relevant accessibility rules.
-
-The matrix below provides a high-level outline of the accessibility support provided by our visual controls (and related components). To learn more about an individual control/component's accessibility compliance, click the name of the control/component.
-
-### Ignite UI for Angular Compliance with Section 508
-
-|**Component/Principle**|<a title="A text equivalent for every non-text element shall be provided (e.g., via 'alt', 'longdesc', or in element content)."> (a)</a><br/>|<a title="Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation">(b)</a><br/>|<a title="Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup">(c)</a><br/>|<a title="Documents shall be organized so they are readable without requiring an associated style sheet">(d)</a><br/>|<a title="Redundant text links shall be provided for each active region of a server-side image map">(e)</a><br/>|<a title="Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape">(f)</a><br/>|<a title="Row and column headers shall be identified for data tables">(g)</a><br/>|<a title="Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers">(h)</a><br/>|<a title="Frames shall be titled with text that facilitates frame identification and navigation">(i)</a><br/>|<a title="Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz">(j)</a><br/>|<a title="A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way">(k)</a><br/>|<a title="When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.">(l)</a><br/>|<a title="When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21 (a)">(m)</a><br/>|<a title="When electronic forms are designed to be completed online, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.">(n)</a><br/>|<a title="A method shall be provided that permits users to skip repetitive navigation links.">(o)</a><br/>|<a title="When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required">(p)</a><br/>|
-|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|**Grids**|||||||||||||||||
-| - Grid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - HierarchicalGrid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - TreeGrid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-|**Other**||||||||||<span class="greenCheck" />*|||||||
-| - Avatar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Badge|<span class="greenCheck" />||<span class="greenCheck" />|||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Bottom navigation|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Button|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Button group|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Calendar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Card|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Carousel|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - Checkbox|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Chip|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Circular progress|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Combo|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Date time input|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Date picker|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Divider|<span class="greenCheck" />||<span class="greenCheck" />|||||||||<span class="greenCheck" />|||||
-| - Dialog|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Drop down|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Expansion panel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Icon|||<span class="greenCheck" />|||||||||<span class="redCheck" />|||||
-| - Input|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Input group|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Linear progress|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - List|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Navbar|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Navigation drawer|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Radio group|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Radio|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Select|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Slider|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Snackbar|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - Switch|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Tabs|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Time picker|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Toast|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-
-**LEGEND**
-
-||||
-|---|---|---|
-|<span class="greenCheck" />|The control/component is completely accessible in this particular area.||
-|<span class="greenCheck" />*|The control/component is accessible in this particular area after implementing certain configurations| Example: Use **NoopAnimationsModule**utility module to allow disabling of animations|
-|<span class="redCheck" />|The control/component is not entirely accessible unless you perform some sort of action.||
-|'white space'|this particular rule does not apply to the control||
-
-<DocsAside type="warning">
-The table above is relevant only to the **Default theme** of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors.
-</DocsAside>
-
-### Compliance Information
-
-- **a** - A text equivalent for every non-text element shall be provided (e.g., via "alt", "longdesc", or in element content).
-- **b** - Equivalent alternatives for any multimedia presentation shall be synchronized with the presentation.
-- **c** - Web pages shall be designed so that all information conveyed with color is also available without color, for example from context or markup.
-- **d** - Documents shall be organized so they are readable without requiring an associated style sheet.
-- **e** - Redundant text links shall be provided for each active region of a server-side image map.
-- **f** - Client-side image maps shall be provided instead of server-side image maps except where the regions cannot be defined with an available geometric shape.
-- **g** - Row and column headers shall be identified for data tables.
-- **h** - Markup shall be used to associate data cells and header cells for data tables that have two or more logical levels of row or column headers.
-- **i** - Frames shall be titled with text that facilitates frame identification and navigation.
-- **j** - Pages shall be designed to avoid causing the screen to flicker with a frequency greater than 2 Hz and lower than 55 Hz.
-- **k** - A text-only page, with equivalent information or functionality, shall be provided to make a web site comply with the provisions of this part, when compliance cannot be accomplished in any other way. The content of the text-only page shall be updated whenever the primary page changes.
-- **l** - When pages utilize scripting languages to display content, or to create interface elements, the information provided by the script shall be identified with functional text that can be read by assistive technology.
-- **m** - When a web page requires that an applet, plug-in or other application be present on the client system to interpret page content, the page must provide a link to a plug-in or applet that complies with §1194.21(a) through l.
-- **n** - When electronic forms are designed to be completed on-line, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues.
-- **o** - A method shall be provided that permits users to skip repetitive navigation links.
-- **p** - When a timed response is required, the user shall be alerted and given sufficient time to indicate more time is required.
-
-## WCAG compliance
-[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) is simply a set of formal guidelines on how to develop accessible web content. These standards represent a higher level of accessibility than 508 standards, although they are identical or very similar. WCAG focuses primarily on HTML accessibility.
-
-|**Component/Guideline**|<a title="Text Alternatives - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.">1.1</a><br/>|<a title="Time-based Media - Provide alternatives for time-based media.">1.2</a><br/>|<a title="Adaptable - Create content that can be presented in different ways (for example simpler layout) without losing information or structure">1.3 </a><br/>|<a title="Distinguishable - Make it easier for users to see and hear content including separating foreground from background.">1.4</a><br/>|<a title="Keyboard Accessible - Make all functionality available from a keyboard">2.1</a><br/>|<a title="Enough Time - Provide users enough time to read and use content.">2.2</a><br/>|<a title="Seizures and Physical Reactions - Do not design content in a way that is known to cause seizures or physical reactions.">2.3</a><br/>|<a title="Navigable - Provide ways to help users navigate, find content, and determine where they are">2.4</a><br/>|<a title="Input Modalities - Make it easier for users to operate functionality through various inputs beyond keyboard.<br/>">2.5</a><br/>|<a title="Readable - Make text content readable and understandable">3.1</a><br/>|<a title="Predictable - Make Web pages appear and operate in predictable ways">3.2</a><br/>|<a title="Input Assistance - Help users avoid and correct mistakes">3.3</a><br/>|<a title="Compatible - Maximize compatibility with current and future user agents, including assistive technologies">4.1 </a><br/>|
-|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|**Grids**||||||||||||||
-| - Grid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - HierarchicalGrid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - TreeGrid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-|**Other**|||||||<span class="greenCheck" />*|||||||
-| - Avatar|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Badge|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Banner|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Bottom navigation||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Button||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Button group||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Calendar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - Card|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Carousel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Checkbox|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|||
-| - Chip||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Circular progress|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*|||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Combo|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Date time editor||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Date picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Divider|<span class="greenCheck" />||||||||||<span class="greenCheck" />*|||
-| - Dialog|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Drop down|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Expansion panel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Icon||||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Input|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Input group|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Label|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Linear progress|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*|||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - List|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Month picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Navbar|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Navigation drawer|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Radio group|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Radio|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Select|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Slider||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Snackbar|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Switch|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Tabs|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Time picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Toast|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Tooltip|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-
-**Legend**
-
-||||
-|---|---|---|
-|<span class="greenCheck" />|The control/component is completely accessible in this particular area.||
-|<span class="greenCheck" />*|The control/component is accessible in this particular area after implementing certain configurations|Example 1: Guideline 2.2. For certain components additional actions and time parameters should be set; Example 2: Guideline 2.3. Use **NoopAnimationsModule**utility module to allow disabling of animations;|
-|<span class="redCheck" />|The control/component is not entirely accessible unless you perform some sort of action.||
-|'white space'|this particular rule does not apply to the control||
-
-<DocsAside type="warning">
-The table above is relevant only to the **Default theme** of Ignite UI for Angular theming library. The checklist compliance might be different when it comes to custom themes, typography and any visual changes related to animations and colors.
-</DocsAside>
-
-### Compliance Information
-
-- **Principle 1 - Perceivable** - Information and user interface components must be presentable to users in ways they can perceive
-  - Guideline 1.1 – **Text Alternatives** - Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.
-  - Guideline 1.2 – **Time-based Media** - Provide alternatives for time-based media.
-  - Guideline 1.3 – **Adaptable** - Create content that can be presented in different ways (for example simpler layout) without losing information or structure.
-  - Guideline 1.4 – **Distinguishable** - Make it easier for users to see and hear content including separating foreground from background.
-- **Principle 2 – Operable** - User interface components and navigation must be operable.
-  - Guideline 2.1 – **Keyboard Accessible** - Make all functionality available from a keyboard.
-  - Guideline 2.2 – **Enough Time** - Provide users enough time to read and use content.
-  - Guideline 2.3 – **Seizures and Physical Reactions** - Do not design content in a way that is known to cause seizures or physical reactions.
-  - Guideline 2.4 – **Navigable** - Provide ways to help users navigate, find content, and determine where they are.
-  - Guideline 2.5 – **Input Modalities** - Make it easier for users to operate functionality through various inputs beyond keyboard.
-- **Principle 3 – Understandable** - Information and the operation of the user interface must be understandable.
-  - Guideline 3.1 – **Readable** - Make text content readable and understandable.
-  - Guideline 3.2 – **Predictable** - Make Web pages appear and operate in predictable ways.
-  - Guideline 3.3 – **Input Assistance** - Help users avoid and correct mistakes.
-- **Principle 4 – Robust** - Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
-  - Guideline 4.1 – **Compatible** - Maximize compatibility with current and future user agents, including assistive technologies
-
-## WAI-ARIA Support
-In 2014 the W3C finalized their [WAI-ARIA specification](http://www.w3.org/TR/wai-aria/) which defined how to design Web content and Web applications to be more accessible to users with disabilities.
diff --git a/docs/angular/src/content/en/components/linear-gauge.mdx b/docs/angular/src/content/en/components/linear-gauge.mdx
deleted file mode 100644
index 837a9533c0..0000000000
--- a/docs/angular/src/content/en/components/linear-gauge.mdx
+++ /dev/null
@@ -1,333 +0,0 @@
----
-title: "Angular Linear Gauge | Data Visualization Tools | Infragistics"
-description: Use Infragistics' Angular linear gauge control to visualize data with a simple and concise view. Learn about the Ignite UI for Angular linear gauge configurable elements!
-keywords: linear gauge, Ignite UI for Angular, Infragistics, animation, labels, needle, scales, ranges, tick marks
-license: commercial
-mentionedTypes: ["LinearGauge"]
-namespace: Infragistics.Controls.Gauges
-llms:
-  description: "The Ignite UI for Angular linear gauge component allows for visualizing data in the form of a linear gauge."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Linear Gauge Overview
-
-The Ignite UI for Angular linear gauge component allows for visualizing data in the form of a linear gauge. The <ApiLink type="LinearGauge" /> provides a simple and concise view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The component has also a built-in support for animated transitions. This animation is easily customizable by setting the <ApiLink type="LinearGauge" member="transitionDuration" label="TransitionDuration" /> property. The features of the linear gauge component include configurable orientation and direction, configurable visual elements such as the needle, and more.
-
-## Angular Linear Gauge Example
-
-The following sample demonstrates how setting multiple properties on the same <ApiLink type="LinearGauge" /> can transform it to completely different linear gauge.
-
-<Sample src="/gauges/linear-gauge/animation" height={155} alt="Angular Linear Gauge Example" />
-
-## Dependencies
-
-When installing the Angular gauge component, the core package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## Component Modules
-
-The <ApiLink type="LinearGauge" /> requires the following modules:
-
-```ts
-// app.module.ts
-import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxLinearGaugeModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Usage
-
-The following code demonstrates how create a linear gauge containing a needle and three comparative ranges on the scale.
-
-```html
- <igx-linear-gauge width="700px"
-                   height="30px"
-                   minimumValue = "5"
-                   maximumValue = "55"
-                   value = "43">
-    <igx-linear-graph-range startValue="0"
-                            endValue="15"
-                            brush="red">
-    </igx-linear-graph-range>
-    <igx-linear-graph-range startValue="15"
-                            endValue="30"
-                            brush="yellow">
-    </igx-linear-graph-range>
-    <igx-linear-graph-range startValue="30"
-                            endValue="55"
-                            brush="green">
-    </igx-linear-graph-range>
- </igx-linear-gauge>
-```
-
-## Needle
-
-This is the primary measure displayed by the linear gauge component and is visualized as a bar or you can customize it to show almost any shape as is demonstrated below.
-
-```html
- <igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100 interval=10
-    value=50
-    isNeedleDraggingEnabled=true
-    needleShape="Custom"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleStrokeThickness=1
-    needleBreadth=15
-    needleInnerExtent=0.35
-    needleOuterExtent=0.65
-    needleOuterPointExtent=0.8
-    needleInnerPointExtent=0.325
-    needleInnerPointWidth=0
-    needleOuterPointWidth=0.3
-    needleInnerBaseWidth=0
-    needleOuterBaseWidth=0.07>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/needle" height={125} alt="Angular linear gauge needle" />
-
-## Highlight Needle
-
-The linear gauge can be modified to show a second needle. This will make the main needle's <ApiLink type="LinearGauge" member="value" label="Value" /> appear with a lower opacity. To enable this first set <ApiLink type="LinearGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> to Overlay and then apply a <ApiLink type="LinearGauge" member="highlightValue" label="HighlightValue" />.
-
-```html
-<igx-linear-gauge
-    #linearGauge
-    height="80px"
-    width="400px"
-    value=70
-    minimumValue=0
-    maximumValue=100
-    interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    needleBrush="Blue"
-    highlightValueDisplayMode="Overlay"
-    highlightValue=25
-    isHighlightNeedleDraggingEnabled=true>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/highlight-needle" height={125} alt="Angular linear gauge highlight needle" />
-
-## Ranges
-
-The ranges are visual elements that highlight a specified range of values on a scale. Their purpose is to visually communicate the qualitative state of the performance bar measure, illustrating at the same times the degree to which it resides within that state.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    rangeBrushes="#a4bd29, #F86232"
-    rangeOutlines="#a4bd29, #F86232" >
-    <igx-linear-graph-range
-        startValue=0 endValue=50
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.25 outerEndExtent=0.4>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=50 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.4 outerEndExtent=0.55>
-    </igx-linear-graph-range>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/ranges" height={125} alt="Angular linear gauge ranges" />
-
-## Tick Marks
-
-The tick marks serve as a visual division of the scale into intervals in order to increase the readability of the linear gauge.
-
-Major tick marks – The major tick marks are used as primary delimiters on the scale. The frequency they appear at, their extents and style can be controlled by setting their corresponding properties.
-
-Minor tick marks – The minor tick marks represent helper tick marks, which might be used to additionally improve the readability of the scale and can be customized in a way similar to the major ones.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100
-    interval=10
-    tickBrush="DodgerBlue"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.25
-    tickEndExtent=0.05
-    minorTickCount=4
-    minorTickBrush="DarkViolet"
-    minorTickEndExtent=0.05
-    minorTickStartExtent=0.15
-    minorTickStrokeThickness=1>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/tickmarks" height={125} alt="Angular linear gauge tickmarks" />
-
-## Labels
-
-The labels indicate the measures on the scale.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="DodgerBlue"
-    font="11px Verdana">
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/labels" height={125} alt="Angular linear gauge labels" />
-
-## Backing
-
-The backing element represents background and border of the linear gauge component. It is always the first element rendered and all the rest of elements such as labels, and tick marks are overlaid on top of it.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    backingBrush="#bddcfc"
-    backingOutline="DodgerBlue"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/backing" height={125} alt="Angular linear gauge backing" />
-
-## Scale
-
-The scale is a visual element that highlights the full range of values in the linear gauge. You can customize the appearance and the shape of the scale. It can also be inverted (using <ApiLink type="LinearGauge" member="isScaleInverted" label="IsScaleInverted" /> property) and all labels will be rendered from right-to-left instead of left-to-right.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    isScaleInverted=false
-    scaleBrush="DodgerBlue"
-    scaleOutline="DarkViolet"
-    scaleStrokeThickness=1
-    scaleInnerExtent=0.05
-    scaleOuterExtent=0.65
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/scale" height={125} alt="Angular linear gauge scale" />
-
-## Summary
-
-For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the linear gauge with all features and visuals enabled.
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100
-
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="Black"
-    font="11px Verdana"
-
-    interval=10
-    tickBrush="Black"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.25
-    tickEndExtent=0.05
-
-    minorTickCount=4
-    minorTickBrush="Black"
-    minorTickEndExtent=0.05
-    minorTickStartExtent=0.15
-    minorTickStrokeThickness=1
-
-    value=50
-    isNeedleDraggingEnabled=true
-    needleShape="Custom"
-    needleBrush="Black"
-    needleOutline="Black"
-    needleStrokeThickness=1
-    needleBreadth=15
-    needleInnerExtent=0.35
-    needleOuterExtent=0.65
-    needleOuterPointExtent=0.8
-    needleInnerPointExtent=0.325
-    needleInnerPointWidth=0
-    needleOuterPointWidth=0.3
-    needleInnerBaseWidth=0
-    needleOuterBaseWidth=0.07
-
-    isScaleInverted=false
-    scaleBrush="Gray"
-    scaleOutline="Gray"
-    scaleStrokeThickness=1
-    scaleInnerExtent=0.05
-    scaleOuterExtent=0.65
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95
-
-    backingBrush="#cecece"
-    backingOutline="#cecece"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1
-
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=0 endValue=50
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.25 outerEndExtent=0.4>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=50 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.4 outerEndExtent=0.55>
-    </igx-linear-graph-range>
-</igx-linear-gauge>
-```
-
-## API References
-<ApiLink type="LinearGauge" />
-<ApiLink type="LinearGraphRange" />
-## Additional Resources
-
-You can find more information about other types of gauges in these topics:
-
-- [Bullet Graph](bullet-graph.md)
-- [Radial Gauge](radial-gauge.md)
diff --git a/docs/angular/src/content/en/components/maps/map-api.mdx b/docs/angular/src/content/en/components/maps/map-api.mdx
deleted file mode 100644
index 9e7479168b..0000000000
--- a/docs/angular/src/content/en/components/maps/map-api.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: "Angular Chart API | Data Visualization Tools | Infragistics"
-description: Use Infragistics Ignite UI for Angular map provides useful API to configure and styles map visuals
-keywords: "Angular maps, geographic, map API, API, Ignite UI for Angular,"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series", "SeriesViewer", "GeographicSymbolSeries", "GeographicProportionalSymbolSeries", "GeographicShapeSeries", "GeographicHighDensityScatterSeries", "GeographicScatterAreaSeries", "GeographicContourLineSeries", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-llms:
-  description: "API reference for the Angular Geographic Map component covering zoom and viewport management (WorldRect, WindowRect, WindowScale), geographic coordinate conversion (GetGeographicPoint, GetPixelPoint, GetGeographicFromZoom), and the Zoomable interface."
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Geographic Map API
-
-The Angular <ApiLink type="GeographicMap" /> has the following API members:
-
-- <ApiLink type="GeographicMap" member="zoomable" label="Zoomable" />
-- <ApiLink type="GeographicMap" member="zoomToGeographic" label="ZoomToGeographic" />
-- <ApiLink type="GeographicMap" member="worldRect" label="WorldRect" />
-- <ApiLink type="GeographicMap" member="windowRect" label="WindowRect" />
-- <ApiLink type="GeographicMap" member="windowScale" label="WindowScale" />
-- <ApiLink type="GeographicMap" member="getGeographicFromZoom" label="GetGeographicFromZoom" />
-- <ApiLink type="GeographicMap" member="getGeographicPoint" label="GetGeographicPoint" />
-- <ApiLink type="GeographicMap" member="getPixelPoint" label="GetPixelPoint" />
-
-## Angular Geographic Series Types
-
-The Angular <ApiLink type="GeographicMap" /> has 7 types of series and they have the <ApiLink type="Series" member="dataSource" label="ItemsSource" /> property for data binding.
-
-- <ApiLink type="GeographicHighDensityScatterSeries" />
-- <ApiLink type="GeographicSymbolSeries" />
-- <ApiLink type="GeographicProportionalSymbolSeries" />
-- <ApiLink type="GeographicPolylineSeries" />
-- <ApiLink type="GeographicShapeSeries" />
-- <ApiLink type="GeographicScatterAreaSeries" />
-- <ApiLink type="GeographicContourLineSeries" />
-
-In addition, each type of series has specific properties for mapping data items and styling their appearance:
-
-## Angular Geographic Symbol Series API
-
-The Angular <ApiLink type="GeographicSymbolSeries" /> (Geographic Marker Series) has the following API members:
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="markerType" label="MarkerType" />
-- <ApiLink type="GeographicSymbolSeries" member="markerBrush" label="MarkerBrush" />
-- <ApiLink type="GeographicSymbolSeries" member="markerOutline" label="MarkerOutline" />
-
-## Angular Geographic Bubble Series API
-
-The Angular <ApiLink type="GeographicProportionalSymbolSeries" /> (Geographic Bubble Series) has the following API members:
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillScale" label="FillScale" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillMemberPath" label="FillMemberPath" />
-
-## Angular Geographic Shape Series API
-
-The Angular <ApiLink type="GeographicShapeSeries" /> and <ApiLink type="GeographicPolylineSeries" /> have the same API members:
-
-- <ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />
-- <ApiLink type="Series" member="thickness" label="Thickness" />
-- <ApiLink type="Series" member="brush" label="Brush" />
-- <ApiLink type="Series" member="outline" label="Outline" />
-
-## Angular Geographic Area Series API
-
-The Angular <ApiLink type="GeographicScatterAreaSeries" /> has the following API members:
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />
-- <ApiLink type="GeographicScatterAreaSeries" member="colorScale" label="ColorScale" />
-
-## Angular Geographic Contour Series API
-
-The Angular <ApiLink type="GeographicContourLineSeries" /> has the following API members:
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillScale" label="FillScale" />
-
-## Angular Geographic HD Series API
-
-The Angular <ApiLink type="GeographicHighDensityScatterSeries" /> has the following API members:
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" />
-- <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" />
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/menus/toolbar.mdx b/docs/angular/src/content/en/components/menus/toolbar.mdx
deleted file mode 100644
index b582cad466..0000000000
--- a/docs/angular/src/content/en/components/menus/toolbar.mdx
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: "Angular Toolbar Component | Ignite UI for Angular"
-description: See how you can easily get started with Angular Toolbar Component. Compatible with the Data Chart. Extend your .
-keywords: "Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Toolbar components, Angular Toolbar controls"
-license: commercial
-mentionedTypes: ["Toolbar", "ToolAction", "DomainChart", "CategoryChart", "DataChart", "TrendLineType"]
-llms:
-  description: "The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Toolbar Overview
-
-The Angular Toolbar component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
-
-## Angular Toolbar Example
-
-<Sample src="/charts/toolbar/actions-built-in-category-chart" height={600} alt="Angular Toolbar Example" />
-
-## Dependencies
-
-Install the Ignite UI for Angular layouts, inputs, charts and core packages:
-
-```cmd
-npm install igniteui-angular-layouts
-npm install igniteui-angular-inputs
-npm install igniteui-angular-charts
-npm install igniteui-angular-core
-```
-
-The following modules are required when using the <ApiLink type="Toolbar" /> with the <ApiLink type="DataChart" /> component and it's features.
-
-```ts
-import { IgxToolbarModule } from 'igniteui-angular-layouts';
-import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxToolbarModule,
-        IgxDataChartToolbarModule,
-        IgxDataChartCoreModule,
-        IgxDataChartCategoryModule,
-        IgxDataChartAnnotationModule,
-        IgxDataChartInteractivityModule,
-        IgxDataChartCategoryTrendLineModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Usage
-
-### Tool Actions
-
-The following is a list of the different <ApiLink type="ToolAction" /> items that you can add to the Toolbar.
-
-- <ApiLink type="ToolActionButton" />
-- <ApiLink type="ToolActionCheckbox" />
-- <ApiLink type="ToolActionIconButton" />
-- <ApiLink type="ToolActionIconMenu" />
-- <ApiLink type="ToolActionLabel" />
-- <ApiLink type="ToolActionNumberInput" />
-- <ApiLink type="ToolActionRadio" />
-- <ApiLink type="ToolActionSubPanel" />
-
-Each of these tools exposes an `OnCommand` event that is triggered by mouse click. Note, the <ApiLink type="ToolActionIconMenu" /> is a wrapper for other tools that can also be wrapped inside a <ApiLink type="ToolActionIconMenu" />.
-
-New and existing tools can be repositioned and marked hidden using the <ApiLink type="ToolAction" member="overlayId" label="OverlayId" />, <ApiLink type="ToolAction" member="beforeId" label="BeforeId" /> and <ApiLink type="ToolAction" member="afterId" label="AfterId" /> properties on the <ApiLink type="ToolAction" /> object. ToolActions also expose a <ApiLink type="ToolAction" member="visibility" label="Visibility" /> property.
-
-The following example demonstrates a couple of features. First you can group tools together in the <ApiLink type="ToolActionSubPanel" /> including hiding built in tools such as the **ZoomReset** and **AnalyzeMenu** menu tool actions. In this example a new instance of the **ZoomReset** tool action within the **ZoomMenu** by using the the <ApiLink type="ToolAction" member="afterId" label="AfterId" /> property and assigning that to **ZoomOut** to be precise with it's placement. It is also highlighted via the <ApiLink type="ToolAction" member="isHighlighted" label="IsHighlighted" /> property on the tool.
-
-<Sample src="/charts/toolbar/layout-actions-for-data-chart" height={600} alt="Angular Toolbar Example" />
-
-### Angular Data Chart Integration
-
-The Angular Toolbar contains a <ApiLink type="Toolbar" member="Target" label="Target" /> property. This is used to link a component, such as the <ApiLink type="DataChart" /> as shown in the code below:
-
-```html
-  <div class="legend">
-    <igx-toolbar
-      name="toolbar"
-      [target]="chart"
-      #toolbar>
-    </igx-toolbar>
-  </div>
-  <div class="container fill">
-    <igx-data-chart
-    name="chart"
-    #chart>
-  </igx-data-chart>
-```
-
-Several pre-existing <ApiLink type="ToolAction" /> items and menus become available when the <ApiLink type="DataChart" /> is linked with the Toolbar. Here is a list of the built-in Angular <ApiLink type="DataChart" /> Tool Actions and their associated <ApiLink type="ToolAction" member="overlayId" label="OverlayId" />:
-
-Zooming Actions
-
-- `ZoomMenu`: A <ApiLink type="ToolActionIconMenu" /> that exposes three <ApiLink type="ToolActionLabel" /> items to invoke the <ApiLink type="DomainChart" member="zoomIn" label="ZoomIn" /> and <ApiLink type="DomainChart" member="zoomOut" label="ZoomOut" /> methods on the chart for increasing/decreasing the chart's zoom level including `ZoomReset`, a <ApiLink type="ToolActionLabel" /> that invokes the <ApiLink type="DomainChart" member="resetZoom" label="ResetZoom" /> method on the chart to reset the zoom level to it's default position.
-
-Trend Actions
-
-- `AnalyzeMenu`: A <ApiLink type="ToolActionIconMenu" /> that contains several options for configuring different options of the chart.
-- `AnalyzeHeader`: A sub section header.
-  - `LinesMenu`: A sub menu containing various tools for showing different dashed horizontal lines on the chart.
-  - `LinesHeader`: A sub menu section header for the following three tools:
-    - `MaxValue`: A <ApiLink type="ToolActionCheckbox" /> that displays a dashed horizontal line along the yAxis at the maximum value of the series.
-    - `MinValue`: A <ApiLink type="ToolActionCheckbox" /> that displays a dashed horizontal line along the yAxis at the minimum value of the series.
-    - <ApiLink type="ValueLayerValueMode" member="Average" label="Average" />:  A <ApiLink type="ToolActionCheckbox" /> that displays a dashed horizontal line along the yAxis at the average value of the series.
-  - `TrendsMenu`: A sub menu containing tools for applying various trendlines to the <ApiLink type="DataChart" /> plot area.
-  - `TrendsHeader`: A sub menu section header for the following three tools:
-    - **Exponential**: A <ApiLink type="ToolActionRadio" /> that sets the <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> on each series in the chart to **ExponentialFit**.
-    - **Linear**: A <ApiLink type="ToolActionRadio" /> that sets the <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> on each series in the chart to **LinearFit**.
-    - **Logarithmic**: A <ApiLink type="ToolActionRadio" /> that sets the <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> on each series in the the chart to **LogarithmicFit**.
-- `HelpersHeader`: A sub section header.
-  - `SeriesAvg`: A <ApiLink type="ToolActionCheckbox" /> that adds or removes a <ApiLink type="ValueLayer" /> to the chart's series collection using the <ApiLink type="ValueLayerValueMode" /> of type <ApiLink type="ValueLayerValueMode" member="Average" label="Average" />.
-  - `ValueLabelsMenu`: A sub menu containing various tools for showing different annotations on the <ApiLink type="DataChart" />'s plot area.
-  - `ValueLabelsHeader`: A sub menu section header for the following tools:
-    - `ShowValueLabels`: A <ApiLink type="ToolActionCheckbox" /> that toggles data point values by using a <ApiLink type="CalloutLayer" />.
-    - `ShowLastValueLabel`: A <ApiLink type="ToolActionCheckbox" /> that toggles final value axis annotations by using a <ApiLink type="FinalValueLayer" />.
-- `ShowCrosshairs`: A <ApiLink type="ToolActionCheckbox" /> that toggles mouse-over crosshair annotations via the chart's <ApiLink type="DomainChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" /> property.
-- `ShowGridlines`: A <ApiLink type="ToolActionCheckbox" /> that toggles extra gridlines by applying a `MajorStroke` to the X-Axis.
-
-Save to Image Action
-
-- `CopyAsImage`: A <ApiLink type="ToolActionLabel" /> that exposes an option to copy the chart to the clipboard.
-- `CopyHeader`: A sub section header.
-
-### SVG Icons
-
-When adding tools manually, icons can be assigned using the `RenderIconFromText` method. There are three parameters to pass in this method. The first is the icon collection name defined on the tool eg. <ApiLink type="ToolAction" member="iconCollectionName" label="IconCollectionName" />. The second is the name of the icon defined on the tool eg. <ApiLink type="ToolAction" member="iconName" label="IconName" />, followed by adding the SVG string.
-
-### Data URL Icons
-
-Similarly to adding svg, you can also add an Icon image from a URL via the <ApiLink type="Toolbar" member="registerIconFromDataURL" label="RegisterIconFromDataURL" />. The method's third parameter would be used to enter a string URL.
-
-The following snippet shows both methods of adding an Icon.
-
-```html
-<igx-tool-action-label
-    title="Custom Icon"
-    iconName="CustomIcon"
-    iconCollectionName="CustomCollection">
-</igx-tool-action-label>
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
-
-  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
-
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
-
-  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
-
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
-
-}
-```
-
-### Vertical Orientation
-
-By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property.
-
-```html
-<igx-toolbar orientation="Vertical" />
-```
-
-The following example demonstrates the vertical orientation of the Angular Toolbar.
-
-<Sample src="/charts/toolbar/layout-in-vertical-orientation" height={600} alt="Angular Vertical Orientation" />
-
-### Color Editor
-
-You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application.
-
-```html
-<igx-toolbar
-  name="toolbar"
-  #toolbar>
-      <igx-tool-action-color-editor
-      title="Series Brush"
-      name="colorEditorTool"
-      #colorEditorTool>
-      </igx-tool-action-color-editor>
-</igx-toolbar>
-```
-
-The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool.
-<Sample src="/charts/toolbar/color-editor-support" height={600} alt="Angular Color Editor Support" />
-
-{/* ## Styling/Theming
-
-The icon component can be styled by using it's <ApiLink type="Toolbar" member="baseTheme" label="BaseTheme" /> property directly to the <ApiLink type="Toolbar" />.
-
-```html
-<igx-toolbar baseTheme="SlingshotDark" />
-```
-
-{/*The following example demonstrates the various theme options that can be applied.
-<Sample src="/charts/toolbar/theming" height={600} alt="Angular Toolbar Styling/Theming" />
- */}
-
-## API References
-
-<ApiLink type="Toolbar" /><br />
-<ApiLink type="DataChart" /><br />
-
-## Additional Resources
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/en/components/radial-gauge.mdx b/docs/angular/src/content/en/components/radial-gauge.mdx
deleted file mode 100644
index 27cd51afad..0000000000
--- a/docs/angular/src/content/en/components/radial-gauge.mdx
+++ /dev/null
@@ -1,344 +0,0 @@
----
-title: "Angular Radial Gauge Chart | Data Visualization Tools | Infragistics"
-description: Use Infragistics' Angular radial gauge control to create engaging data visualizations and dashboards and show off KPIs with rich style and interactivity. Learn about the Ignite UI for Angular radial gauge configurable elements!
-keywords: Radial Gauge, Ignite UI for Angular, Infragistics, animation, labels, needle, scales, ranges, tick marks
-license: commercial
-mentionedTypes: ["RadialGauge", "RadialGaugeRange"]
-namespace: Infragistics.Controls.Gauges
-llms:
-  description: "The Angular radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Radial Gauge Overview
-
-The Angular radial gauge component provides a number of visual elements, like a needle, tick marks, ranges, and labels, in order to create a predefined shape and scale. The <ApiLink type="RadialGauge" /> also has built-in support for animated transitions. This animation is easily customizable by setting the <ApiLink type="RadialGauge" member="transitionDuration" label="TransitionDuration" /> property.
-
-## Angular Radial Gauge Example
-
-The following sample demonstrates how setting multiple properties on the same <ApiLink type="RadialGauge" /> can transform it to completely different radial gauge.
-
-<Sample src="/gauges/radial-gauge/animation" height={375} alt="Angular Radial Gauge Example" />
-
-## Dependencies
-
-When installing the gauge component, the core package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## Component Modules
-
-The <ApiLink type="RadialGauge" /> requires the following modules:
-
-```ts
-// app.module.ts
-import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxRadialGaugeModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Usage
-
-The following code demonstrates how create a radial gauge containing a needle and three comparative ranges on the scale.
-
-```html
- <igx-radial-gauge height="400px" width="400px"
-    value="25"
-    interval="5"
-    minimumValue="0"
-    maximumValue="100">
-    <igx-radial-gauge-range startValue="0"
-                            endValue="30"
-                            brush="red">
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range startValue="30"
-                            endValue="60"
-                            brush="yellow">
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range startValue="60"
-                            endValue="100"
-                            brush="green">
-    </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-## Backing
-
-The radial gauge component comes with a backing shape drawn behind the scale that acts as a background for the radial gauge.
-
-The backing element represents background and border of the radial gauge component. It is always the first element rendered and all the rest of elements such as needle, labels, and tick marks are overlay on top of it.
-
-The backing can be circular or fitted. A circular shape creates a 360 degree circle gauge while a fitted shape creates a filled arc segment encompassing the <ApiLink type="RadialGauge" member="scaleStartAngle" label="ScaleStartAngle" /> and <ApiLink type="RadialGauge" member="scaleEndAngle" label="ScaleEndAngle" /> properties. This can be set by setting the <ApiLink type="RadialGauge" member="backingShape" label="BackingShape" /> property.
-
-```html
-<igx-radial-gauge
-    backingShape="Fitted"
-    backingBrush="#fcfcfc"
-    backingOutline="DodgerBlue"
-    backingOversweep=5
-    backingCornerRadius=10
-    backingStrokeThickness=5
-    backingOuterExtent=0.8
-    backingInnerExtent=0.15
-    scaleStartAngle=135 scaleEndAngle=45
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/backing" height={320} alt="Angular radial gauge backing" />
-
-## Scale
-
-The scale is visual element that highlights full range of values in the gauge which can be created by supplying <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> and <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> values. Together with backing, it defines overall shape of gauge. The <ApiLink type="RadialGauge" member="scaleStartAngle" label="ScaleStartAngle" /> and <ApiLink type="RadialGauge" member="scaleEndAngle" label="ScaleEndAngle" /> properties define bounds of arc of the scale. While, the <ApiLink type="RadialGauge" member="scaleSweepDirection" label="ScaleSweepDirection" /> property specifies whether the scale sweeps in clockwise or counter-clockwise direction. You can customize appearance of the scale by setting <ApiLink type="RadialGauge" member="scaleBrush" label="ScaleBrush" />, <ApiLink type="RadialGauge" member="scaleStartExtent" label="ScaleStartExtent" />, and <ApiLink type="RadialGauge" member="scaleEndExtent" label="ScaleEndExtent" /> properties.
-
-```html
-<igx-radial-gauge
-    scaleStartAngle=135
-    scaleEndAngle=45
-    scaleBrush="DodgerBlue"
-    scaleSweepDirection="Clockwise"
-    scaleOversweep=1
-    scaleOversweepShape="Fitted"
-    scaleStartExtent=0.45
-    scaleEndExtent=0.575
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/scale" height={320} alt="Angular radial gauge scale" />
-
-## Labels and Titles
-
-The radial gauge labels are visual elements displaying numeric values at a specified interval between values of the <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> and <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> properties. You can position labels by setting the <ApiLink type="RadialGauge" member="labelExtent" label="LabelExtent" /> property to a fraction, where 0 represents center of gauge and 1 represents outer extent of the gauge backing. Also, you can customize labels setting various styling properties such as <ApiLink type="RadialGauge" member="fontBrush" label="FontBrush" /> and <ApiLink type="RadialGauge" member="font" label="Font" />.
-
-Each of these labels for the needle have various styling attributes you can apply to change the font, angle, brush and distance from the center of the gauge such as <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />, <ApiLink type="RadialGauge" member="titleAngle" label="TitleAngle" />, `SubtitleFontSize`, <ApiLink type="RadialGauge" member="highlightLabelBrush" label="HighlightLabelBrush" />.
-
-```html
-<igx-radial-gauge
-    labelExtent=0.65
-    labelInterval=10
-    font="11px Verdana"
-    fontBrush="DodgerBlue"
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/labels" height={320} alt="Angular radial gauge labels" />
-
-## Title & Subtitle
-
-<ApiLink type="RadialGauge" member="titleText" label="TitleText" /> and <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> properties are available and can both be used to display custom text for the needle. Alternatively, <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> and <ApiLink type="RadialGauge" member="subtitleDisplaysValue" label="SubtitleDisplaysValue" />, when set to true, will let display the needle's value and override <ApiLink type="RadialGauge" member="titleText" label="TitleText" /> and <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" />. So you can occupy custom text for the title but show the value via the subtitle and vice versa.
-
-If the highlight needle is shown, as explained below, then custom text can be shown via  <ApiLink type="RadialGauge" member="highlightLabelText" label="HighlightLabelText" />, otherwise <ApiLink type="RadialGauge" member="highlightLabelDisplaysValue" label="HighlightLabelDisplaysValue" /> can be enabled and display it's value.
-
-```html
-<igx-radial-gauge
-    titleText="Global Sales"
-    subtitleText="2024">
-</igx-radial-gauge>
-```
-
-## Optical Scaling
-
-The radial gauge's labels and titles can change it's scaling. To enable this, first set <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> to true. Then you can set <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> which manages the size at which labels have 100% optical scaling. Labels will have larger fonts when gauge's size is larger. For example, labels will have a 200% larger font size when this property is set to 500 and the gauge px size is doubled to eg. 1000.
-
-<Sample src="/gauges/radial-gauge/optical-scaling" height={500} alt="Angular radial gauge optical scaling" />
-
-## Tick Marks
-
-Tick marks are thin lines radiating from the center of the radial gauge. There are two types of tick marks: major and minor. Major tick marks are displayed at the <ApiLink type="RadialGauge" member="interval" label="Interval" /> between the <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> and <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> properties. Use the <ApiLink type="RadialGauge" member="minorTickCount" label="MinorTickCount" /> property to specify the number of minor tick marks displayed between each major tick mark. You can control the length of tick marks by setting a fraction (between 0 and 1) to <ApiLink type="RadialGauge" member="tickStartExtent" label="TickStartExtent" />, <ApiLink type="RadialGauge" member="tickEndExtent" label="TickEndExtent" />, <ApiLink type="RadialGauge" member="minorTickStartExtent" label="MinorTickStartExtent" />, and <ApiLink type="RadialGauge" member="minorTickEndExtent" label="MinorTickEndExtent" /> properties.
-
-```html
-<igx-radial-gauge
-    tickStartExtent=0.45
-    tickEndExtent=0.575
-    tickStrokeThickness=2
-    tickBrush="DodgerBlue"
-    minorTickCount=4
-    minorTickEndExtent=0.5
-    minorTickStartExtent=0.575
-    minorTickStrokeThickness=1
-    minorTickBrush="DarkViolet"
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/tickmarks" height={320} alt="Angular radial gauge tickmarks" />
-
-## Ranges
-
-A range highlights a set of continuous values bound by a specified <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> and <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> properties. You can add multiple ranges to the radial gauge by specifying their starting and ending values. Each range has a few customization properties such as <ApiLink type="RadialGaugeRange" member="brush" label="Brush" /> and <ApiLink type="RadialGaugeRange" member="outline" label="Outline" />. Alternatively, you can set <ApiLink type="RadialGauge" member="rangeBrushes" label="RangeBrushes" /> and <ApiLink type="RadialGauge" member="rangeOutlines" label="RangeOutlines" /> properties to a list of colors for the ranges.
-
-```html
-<igx-radial-gauge
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10
-    rangeBrushes ="red, yellow, green"
-    rangeOutlines="red, yellow, green">
-   <igx-radial-gauge-range
-       startValue=5  endValue=15 brush="red">
-   </igx-radial-gauge-range>
-   <igx-radial-gauge-range
-       startValue=15  endValue=35 brush="yellow">
-   </igx-radial-gauge-range>
-   <igx-radial-gauge-range
-       startValue=35  endValue=45 brush="green">
-   </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/ranges" height={320} alt="Angular radial gauge ranges" />
-
-## Needle
-
-Radial gauge needles are visual elements used to signify a gauge set value. Needles are available in one of the several predefined shapes. The needle can have a pivot shape, which is placed in the center of the gauge. The pivot shape also takes one of the predefined shapes. Pivot shapes that include an overlay or an underlay can have a separate pivot brush applied to the shape.
-
-The supported needle shapes and caps are set using the <ApiLink type="RadialGauge" member="needleShape" label="NeedleShape" /> and <ApiLink type="RadialGauge" member="needlePivotShape" label="NeedlePivotShape" /> properties.
-
-You can enable an interactive mode of the gauge (using <ApiLink type="RadialGauge" member="isNeedleDraggingEnabled" label="IsNeedleDraggingEnabled" /> property) and the end-user will be able to change value by dragging the needle between values of <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> and <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> properties.
-
-```html
-<igx-radial-gauge
-    value=50
-    isNeedleDraggingEnabled=true
-    isNeedleDraggingConstrained=true
-    needleShape="NeedleWithBulb"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleEndExtent=0.475
-    needleStrokeThickness=1
-    needlePivotShape="CircleOverlay"
-    needlePivotBrush="#9f9fa0"
-    needlePivotOutline="#9f9fa0"
-    needlePivotWidthRatio=0.2
-    needlePivotStrokeThickness=1
-    height="300px" width="300px"
-    minimumValue=0
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/needle" height={320} alt="Angular radial gauge needle" />
-
-## Highlight Needle
-
-The radial gauge can be modified to show a second needle. This will make the main needle's <ApiLink type="RadialGauge" member="value" label="Value" /> appear with a lower opacity. To enable this first set <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> to Overlay and then apply a <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" />.
-
-```html
-<igx-radial-gauge #radialGauge
-    labelExtent=0.65
-    labelInterval=10
-    highlightValueDisplayMode="Overlay"
-    highlightValue=50
-    highlightLabelDisplaysValue=true
-    highlightLabelSnapsToNeedlePivot=true
-    isHighlightNeedleDraggingEnabled=true
-    height="100%" width="100%"
-    minimumValue=0 value=30
-    maximumValue=100 interval=10  >
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/highlight-needle" height={320} alt="Angular radial gauge highlight needle" />
-
-## Summary
-
-For your convenience, all above code snippets are combined into one code block below that you can easily copy to your project and see the radial gauge with all features and visuals enabled.
-
-```html
-<igx-radial-gauge
-    height="300px" width="300px"
-    minimumValue=0
-    maximumValue=80
-    scaleStartAngle=135
-    scaleEndAngle=45
-    scaleBrush="#c6c6c6"
-    scaleSweepDirection="Clockwise"
-    scaleOversweep=1
-    scaleOversweepShape="Fitted"
-    scaleStartExtent=0.45
-    scaleEndExtent=0.575
-
-    value=70
-    isNeedleDraggingEnabled=true
-    isNeedleDraggingConstrained=true
-    needleShape="NeedleWithBulb"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleEndExtent=0.475
-    needleStrokeThickness=1
-    needlePivotShape="CircleOverlay"
-    needlePivotBrush="#9f9fa0"
-    needlePivotOutline="#9f9fa0"
-    needlePivotWidthRatio=0.2
-    needlePivotStrokeThickness=1
-
-    interval=10
-    tickStartExtent=0.45
-    tickEndExtent=0.575
-    tickStrokeThickness=2
-    tickBrush="Black"
-    minorTickCount=4
-    minorTickEndExtent=0.5
-    minorTickStartExtent=0.575
-    minorTickStrokeThickness=1
-    minorTickBrush="Black"
-
-    labelExtent=0.65
-    labelInterval=10
-    font="11px Verdana"
-    fontBrush="Black"
-
-    backingShape="Fitted"
-    backingBrush="#ededed"
-    backingOutline="Gray"
-    backingOversweep=5
-    backingCornerRadius=10
-    backingStrokeThickness=5
-    backingOuterExtent=0.8
-    backingInnerExtent=0.15
-
-    rangeBrushes ="#a4bd29, #F86232"
-    rangeOutlines="#a4bd29, #F86232">
-    <igx-radial-gauge-range
-        startValue=20 endValue=40
-        innerStartExtent=0.45 innerEndExtent=0.45
-        outerStartExtent=0.57 outerEndExtent=0.57>
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range
-        startValue=40 endValue=60
-        innerStartExtent=0.45 innerEndExtent=0.45
-        outerStartExtent=0.57 outerEndExtent=0.57>
-    </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-## API References
-<ApiLink type="RadialGauge" />
-<ApiLink type="RadialGaugeRange" />
-## Additional Resources
-
-You can find more information about other types of gauges in these topics:
-
-- [Bullet Graph](bullet-graph.md)
-- [Linear Gauge](Linear-gauge.md)
diff --git a/docs/angular/src/content/en/components/spreadsheet-activation.mdx b/docs/angular/src/content/en/components/spreadsheet-activation.mdx
deleted file mode 100644
index 2aed0316ec..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-activation.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: Angular Spreadsheet | Activation | Infragistics
-description: Learn how to use the activation feature of the  Angular spreadsheet control which is split between the cells, panes and worksheets. Check out the Ignite UI for Angular spreadsheet demos!
-keywords: Excel Spreadsheet, activation, Ignite UI for Angular, Infragistics
-license: commercial
-
-llms:
-  description: "The Angular Spreadsheet component exposes properties that allow you to determine the currently active cell, pane, and worksheet in the control."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet Activation
-
-The Angular Spreadsheet component exposes properties that allow you to determine the currently active cell, pane, and worksheet in the control. This is helpful as it can help you to determine where the user may be navigating or editing in the control.
-
-## Angular Spreadsheet Activation Example
-
-<Sample src="/excel/spreadsheet/activation" height={500} alt="Angular Spreadsheet Activation Example" />
-
-<div class="divider--half"></div>
-
-## Activation Overview
-
-The activation of the Angular <ApiLink type="Spreadsheet" /> control is split up between the cells, panes, and worksheets of the current <ApiLink type="Workbook" /> of the spreadsheet. The three "active" properties are described below:
-
-- <ApiLink type="Spreadsheet" member="activeCell" label="ActiveCell" />: Returns or sets the active cell in the spreadsheet. To set it, you must create a new instance of <ApiLink type="SpreadsheetCell" /> and pass in information about that cell, such as the column and row or the string address of the cell.
-- <ApiLink type="Spreadsheet" member="activePane" label="ActivePane" />: Returns the active pane in the currently active worksheet of the spreadsheet control.
-- <ApiLink type="Spreadsheet" member="activeWorksheet" label="ActiveWorksheet" />: Returns or sets the active worksheet in the <ApiLink type="Workbook" /> of the spreadsheet control. This can be set by setting it to an existing worksheet in the <ApiLink type="Workbook" /> attached to the spreadsheet.
-
-## Code Snippet
-
-The following code snippet shows setting activation of the cell and worksheet in the <ApiLink type="Spreadsheet" /> control:
-
-```ts
-this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1);
-
-this.spreadsheet.activeCell = new SpreadsheetCell("C5");
-```
-
-## API References
-
-<ApiLink type="SpreadsheetCell" />
-<br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
deleted file mode 100644
index 38e78b0494..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-chart-adapter.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: "Angular Spreadsheet | Chart Adapter | Infragistics"
-description: Display charts such as column, line and area, in the Infragistics' Angular spreadsheet control. Learn how to integrate charts in Ignite UI for Angular spreadsheet!
-keywords: Excel Spreadsheet, chart adapter, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet", "Worksheet", "WorksheetShapeCollection", "WorksheetChart"]
-llms:
-  description: "The Angular Spreadsheet component allows displaying charts in your Spreadsheet."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet Chart Adapter
-
-The Angular Spreadsheet component allows displaying charts in your <ApiLink type="Spreadsheet" />.
-
-## Angular Spreadsheet Chart Adapter Example
-
-<Sample src="/excel/spreadsheet/adapter-chart" height={500} alt="Angular Spreadsheet Chart Adapter Example" />
-
-<div class="divider--half"></div>
-
-## Chart Adapter Overview
-
-Using
-<ApiLink type="SpreadsheetChartAdapterBase" />
-you can display the charts in the spreadsheet. The spreadsheet chart adapters creates and initializes chart elements for the spreadsheet based on a Infragistics.Documents.Excel.WorksheetChart instance.
-
-In order to add a WorksheetChart to a worksheet, you must use the <ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> method of the worksheet’s Shapes collection. You can find more detail of adding charts in Excel below.
-
-Here are the steps by step description :
-
-1. Add the SpreadsheetChartAdapterModule reference to your project
-2. Create an instance of a SpreadsheetChartAdapter class assigning it to the Spreadsheet
-3. Run your app and load a worksheet containing a chart.
-
-## Supported Charts Types
-
-There are over 35 chart types supported by the Spreadsheet ChartAdapters including, Line, Area, Column, and Doughnut. See the full list here:
-
-- Column Charts
-  - Clustered column
-  - Stacked column
-  - 100% stacked column
-- Line Charts
-  - Line
-  - Line with Markers
-  - Stacked line
-  - Stacked line with markers
-  - 100% stacked line
-  - 100% stacked line with markers
-- Pie Charts
-- Donut Charts
-- Bar Charts
-  - Clustered bar
-  - Stacked bar
-  - 100% stacked bar
-  - Area Charts
-  - Area
-  - Stacked area
-  - 100% stacked area
-- XY (Scatter) and Bubble Charts
-  - Scatter (with Marker only)
-  - Scatter with smooth lines
-  - Scatter with smooth lines and markers
-  - Scatter with straight lines
-  - Scatter with straight lines and markers
-  - Bubble (without effects)
-  - Bubble3DEffect
-- Stock Charts
-  - High-low-close
-  - Open-high-low-close
-  - Volume-high-low-close
-  - Volume-open-high-low-close
-- Radar Charts
-  - Radar without markers
-  - Radar with markers
-  - Filled Radar
-- Combo Charts
-  - Column and line chart sharing xAxis
-  - Column and line chart and 2nd xAxis
-  - Stacked Area and Column
-  - Custom Combination
-
-## Dependencies
-
-<DocsAside type="info">
-
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
-</DocsAside>
-
-When setting up your Angular spreadsheet control to add charts, you will need to import the <ApiLink type="SpreadsheetChartAdapter" /> class like so:
-
-```ts
-import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter';
-import { SpreadsheetChartAdapter } from 'igniteui-angular-spreadsheet-chart-adapter';
-
-import { ChartTitle, ChartType, FormattedString, Workbook } from 'igniteui-angular-excel';
-import { ExcelUtility } from "ExcelUtility";
-import { Worksheet } from 'igniteui-angular-excel';
-import { WorksheetCell } from 'igniteui-angular-excel';
-```
-
-## Code Snippet
-
-The following code snippet demonstrates how to add charts to the currently viewed worksheet in the <ApiLink type="Spreadsheet" /> control:
-
-```typescript
-this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();
-
-ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx").then((w) => {
-    this.spreadsheet.workbook = w;
-
-    const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);
-
-    sheet.defaultColumnWidth = 500 * 20;
-    sheet.rows(0).height = 150 * 20;
-
-    const cell1: WorksheetCell = sheet.getCell("A1");
-    const cell2: WorksheetCell = sheet.getCell("B1");
-    const cell3: WorksheetCell = sheet.getCell("C1");
-    const cell4: WorksheetCell = sheet.getCell("D1");
-
-    const dataCellAddress = "A4:D6";
-
-    const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 });
-
-    const title: Angular ChartTitle = new ChartTitle();
-    title.text = new FormattedString("Line Chart");
-    chart1.chartTitle = title;
-
-    chart1.setSourceData(dataCellAddress, true);
-
-    const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 0, y: 0 }, cell2, { x: 100, y: 100 });
-
-    const title2: ChartTitle = new ChartTitle();
-    title2.text = new FormattedString("Column Chart");
-    chart2.chartTitle = title2;
-
-    chart2.setSourceData(dataCellAddress, true);
-
-    const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 0, y: 0 }, cell3, { x: 100, y: 100 });
-
-    const title3: ChartTitle = new ChartTitle();
-    title3.text = new FormattedString("Area Chart");
-    chart3.chartTitle = title3;
-
-    chart3.setSourceData(dataCellAddress, true);
-
-    const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 0, y: 0 }, cell4, { x: 100, y: 100 });
-
-    const title4: ChartTitle = new ChartTitle();
-    title4.text = new FormattedString("Pie Chart");
-    chart4.chartTitle = title4;
-
-    chart4.setSourceData(dataCellAddress, true);
-});
-```
-
-## API References
-
-<ApiLink type="SpreadsheetChartAdapterBase" />
-<br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
deleted file mode 100644
index e58f1046ff..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-clipboard.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Angular Spreadsheet | Clipboard Operations | Infragistics"
-description: Use clipboard operations such as copy, cut and paste within Infragistics' Angular spreadsheet control. View Infragistics Ignite UI for Angular spreadsheet demos today!
-keywords: Spreadsheet, clipboard operations, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet", "SpreadsheetAction", "SpreadsheetCommandType", "Command"]
-llms:
-  description: "Explains how to copy, cut, and paste cells in the Angular Spreadsheet by using its clipboard commands and API."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Working with Clipboard
-
-This topic explains how to perform clipboard operations on the Ignite UI for Angular spreadsheet component.
-
-## Angular Working with Clipboard Example
-
-<Sample src="/excel/spreadsheet/clipboard" height={500} alt="Angular Working with Clipboard Example" />
-
-<div class="divider--half"></div>
-
-## Dependencies
-
-Before making use of the clipboard you will want to import the <ApiLink type="SpreadsheetAction" /> enumeration:
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-```
-
-<div class="divider--half"></div>
-
-## Usage
-
-The following code snippet shows how you can execute commands related to the clipboard in the Angular <ApiLink type="Spreadsheet" /> control:
-
-```ts
-public cut(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Cut);
-}
-
-public copy(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Copy);
-}
-
-public paste(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Paste);
-}
-```
-
-## API References
-
-<ApiLink type="SpreadsheetAction" /><br />
-<ApiLink type="Spreadsheet" /><br />
diff --git a/docs/angular/src/content/en/components/spreadsheet-commands.mdx b/docs/angular/src/content/en/components/spreadsheet-commands.mdx
deleted file mode 100644
index 8f0779587e..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-commands.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Angular Spreadsheet | Commands | Infragistics"
-description: Perform commands to activate different features of Infragistics' Angular spreadsheet control. Learn commands such as ZoomIn and ZoomOut with Ignite UI for Angular spreadsheet!
-keywords: Spreadsheet, commands, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet", "SpreadsheetAction"]
-llms:
-  description: "The Angular Spreadsheet component allows you to perform commands for activating different features of the spreadsheet."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Working with Commands
-
-The Angular Spreadsheet component allows you to perform commands for activating different features of the spreadsheet. This topic explains how to perform different operations with the control using commands. Many of the commands will perform their action based on the active cells, rows, or worksheets. For example two such commands are ZoomIn and ZoomOut. See the <ApiLink type="SpreadsheetAction" /> enum for a full list.
-
-## Angular Working with Commands Example
-
-<Sample src="/excel/spreadsheet/commands" height={500} alt="Angular Working with Commands Example" />
-
-<div class="divider--half"></div>
-
-## Dependencies
-
-Before making use of the commands you will want to import the <ApiLink type="SpreadsheetAction" />
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-```
-
-<div class="divider--half"></div>
-
-## Usage
-
-The following snippet shows how you can setup the data validation rules
-
-```ts
-@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
-public spreadsheet: IgxSpreadsheetComponent;
-
-// ...
-
-public zoomIn(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
-}
-
-public zoomOut(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
-}
-```
-
-## API References
-
-<ApiLink type="SpreadsheetAction" /><br />
diff --git a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
deleted file mode 100644
index e461d98f60..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-conditional-formatting.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: "Angular Spreadsheet | Conditional Formatting | Infragistics"
-description: Use Infragistics' Angular spreadsheet control to conditionally format the cells of a worksheet. Check out Ignite UI for Angular spreadsheet demos!
-keywords: Spreadsheet, conditional formatting, Ignite UI for Angular, Infragistics, Worksheet
-license: commercial
-mentionedTypes: ["Spreadsheet", "ConditionalFormatCollection", "WorksheetCell", "Worksheet", "IWorksheetCellFormat"]
-llms:
-  description: "The Angular Spreadsheet component allows you to conditionally format the cells of a worksheet."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet Conditional Formatting
-
-The Angular <ApiLink type="Spreadsheet" /> component allows you to conditionally format the cells of a worksheet. This allows you to highlight different pieces of your data based on a condition.
-
-## Angular Spreadsheet Conditional Formatting Example
-
-<Sample src="/excel/spreadsheet/conditional-formatting" height={500} alt="Angular Spreadsheet Conditional Formatting Example" />
-
-<div class="divider--half"></div>
-
-## Conditional Formatting Overview
-
-You can configure the conditional formatting of a particular worksheet by using the many `Add` methods exposed on the <ApiLink type="Worksheet" member="conditionalFormats" label="ConditionalFormats" /> collection of that worksheet. The first parameter of these `Add` methods is the string region of the worksheet that you would like to apply the conditional format to.
-
-Many of the conditional formats that you can add to your worksheet have a <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property that determines the way that the cells should look when the condition in that conditional format holds true. For example, you can use the properties attached to this <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property such as <ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" /> and <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> to determine the background and font settings of your cells, respectively.
-
-When a conditional format is created and a <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> applied, there is a subset of properties that are currently supported by the worksheet cell. The properties that are currently honored off of the <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> are <ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" />, `Border` properties, <ApiLink type="IWorksheetCellFormat" member="formatString" label="FormatString" />, and some <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> properties such as strikethrough, underline, italic, bold, and color. Many of these can be seen from the code snippet below.
-
-There are a few conditional formats that do not have a <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> property, as their visualization on the cells behaves differently. These conditional formats are the <ApiLink type="DataBarConditionalFormat" />, <ApiLink type="ColorScaleConditionalFormat" />, and <ApiLink type="IconSetConditionalFormat" />.
-
-When loading a pre-existing workbook from Excel, the formats will be preserved when that workbook is loaded. The same is true for when you save the workbook out to an Excel file.
-
-The following lists the supported conditional formats in the Angular <ApiLink type="Spreadsheet" /> control:
-
-- <ApiLink type="AverageConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addAverageCondition" label="AddAverageCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is above or below the average or standard deviation for the associated range.
-- <ApiLink type="BlanksConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addBlanksCondition" label="AddBlanksCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is not set.
-- <ApiLink type="ColorScaleConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addColorScaleCondition" label="AddColorScaleCondition" /> method, this conditional format exposes properties which control the coloring of a worksheet cell based on the cell’s value as relative to minimum, midpoint, and maximum threshold values.
-- <ApiLink type="DataBarConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addDataBarCondition" label="AddDataBarCondition" /> method, this conditional format exposes properties which display data bars in a worksheet cell based on the cell’s value as relative to the associated range of values.
-- <ApiLink type="DateTimeConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addDateTimeCondition" label="AddDateTimeCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s date value falls within a given range of time.
-- <ApiLink type="DuplicateConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addDuplicateCondition" label="AddDuplicateCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique or duplicated across the associated range.
-- <ApiLink type="ErrorsConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addErrorsCondition" label="AddErrorsCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid.
-- <ApiLink type="FormulaConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addFormulaCondition" label="AddFormulaCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a formula.
-- <ApiLink type="IconSetConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addIconSetCondition" label="AddIconSetCondition" /> method, this conditional format exposes properties which display icons in a worksheet cell based on the cell’s value as relative to threshold values.
-- <ApiLink type="NoBlanksConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addNoBlanksCondition" label="AddNoBlanksCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is set.
-- <ApiLink type="NoErrorsConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addNoErrorsCondition" label="AddNoErrorsCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value is valid.
-- <ApiLink type="OperatorConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addOperatorCondition" label="AddOperatorCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether the cell’s value meets the criteria defined by a logical operator.
-- <ApiLink type="RankConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addRankCondition" label="AddRankCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is within the top of bottom rank of values across the associated range.
-- <ApiLink type="TextOperatorConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addTextCondition" label="AddTextCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s text value meets the criteria defined by a string and a <ApiLink type="FormatConditionTextOperator" /> value as placed in the <ApiLink type="ConditionalFormatCollection" member="addTextCondition" label="AddTextCondition" /> method’s parameters.
-- <ApiLink type="UniqueConditionalFormat" />: Added using the <ApiLink type="ConditionalFormatCollection" member="addUniqueCondition" label="AddUniqueCondition" /> method, this conditional format exposes properties which control the visual attributes of a worksheet cell based on whether a cell’s value is unique across the associated range.
-
-## Dependencies
-
-In order to add conditional formatting to the <ApiLink type="Spreadsheet" /> control, you will need to import the following dependencies:
-
-```ts
-import { CellFill } from "igniteui-angular-excel";
-import { Color } from 'igniteui-angular-core';
-import { ColorScaleType } from "igniteui-angular-excelScaleType";
-import { FormatConditionAboveBelow } from 'igniteui-angular-excel';
-import { FormatConditionIconSet } from 'igniteui-angular-excel';
-import { FormatConditionOperator } from 'igniteui-angular-excel';
-import { FormatConditionTextOperator } from 'igniteui-angular-excel';
-import { FormatConditionTimePeriod } from 'igniteui-angular-excel';
-import { FormatConditionTopBottom } from "igniteui-angular-excel";
-import { WorkbookColorInfo } from 'igniteui-angular-excel';
-```
diff --git a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx b/docs/angular/src/content/en/components/spreadsheet-configuring.mdx
deleted file mode 100644
index 0c0896866a..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-configuring.mdx
+++ /dev/null
@@ -1,187 +0,0 @@
----
-title: "Angular Spreadsheet | Configuring | Cell | Formula | Navigation | Selection | Infragistics"
-description: Learn how configuring your Angular spreadsheets with Ignite UI for Angular helps you better chart data. Improve your data visualization with Infragistics!
-keywords: Excel Spreadsheet,  Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "The Angular Spreadsheet component allows the user to configure many different aspects of the control."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Configuring Spreadsheet
-
-The Angular Spreadsheet component allows the user to configure many different aspects of the control. This includes, but is not limited to, editing of the cells, the visibility of gridlines and headers, protection, zoom level, and various other properties related to the Excel worksheet.
-
-## Angular Configuring Spreadsheet Example
-
-<Sample src="/excel/spreadsheet/config-options" height={500} alt="Angular Configuring Spreadsheet Example" />
-
-<div class="divider--half"></div>
-
-## Configuring Cell Editing
-
-When a user edits a cell value and confirms the new input, the <ApiLink type="Spreadsheet" /> control has the ability to navigate to cells adjacent to the currently active cell on press of the <kbd>ENTER</kbd> key, depending on the configuration of the spreadsheet.
-
-In order to enable this <kbd>ENTER</kbd> key navigation, you can set the <ApiLink type="Spreadsheet" member="isEnterKeyNavigationEnabled" label="IsEnterKeyNavigationEnabled" /> property to **true**. If set to false, the active cell will stay the same when pressing the <kbd>ENTER</kbd> key.
-
-You can also configure the direction of the adjacent cell navigated to on press of the <kbd>ENTER</kbd> key by setting the <ApiLink type="Spreadsheet" member="enterKeyNavigationDirection" label="EnterKeyNavigationDirection" /> property to `Down`, `Up`, `Left` or `Right`.
-
-The following code snippets demonstrate the above:
-
-```html
-<igx-spreadsheet isEnterKeyNavigationEnabled=true
-    enterKeyNavigationDirection="Left">
-</igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isEnterKeyNavigationEnabled = true;
-this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
-```
-
-## Configuring Formula Bar
-
-The Angular <ApiLink type="Spreadsheet" /> allows you to configure the visibility of the formula bar by setting the <ApiLink type="Spreadsheet" member="isFormulaBarVisible" label="IsFormulaBarVisible" /> property of the control.
-
-The following code snippets demonstrate the above:
-
-```html
-<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isFormulaBarVisible = true;
-```
-
-## Configuring Gridlines
-
-The <ApiLink type="Spreadsheet" /> allows you to configure the visibility of its gridlines by setting the <ApiLink type="Spreadsheet" member="areGridlinesVisible" label="AreGridlinesVisible" /> property of the control.
-
-The following code snippets demonstrate the above:
-
-```html
-<igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.areGridlinesVisible = true;
-```
-
-## Configuring Headers
-
-The <ApiLink type="Spreadsheet" /> allows you to configure the visibility of its headers by setting the <ApiLink type="Spreadsheet" member="areHeadersVisible" label="AreHeadersVisible" /> property of the control.
-
-The following code snippets demonstrate the above:
-
-```html
-<igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.areHeadersVisible = false;
-```
-
-## Configuring Navigation
-
-The <ApiLink type="Spreadsheet" /> control allows you to configure navigation between a worksheet's cells by configuring whether or not the control is in "end mode." End mode is the functionality where, on press of an arrow key, the active cell will be moved from the current cell to the end of the row or column where data exists in the adjacent cells, depending on the direction of the arrow key pressed. This functionality is good for navigating to the end of large blocks of data very quickly.
-
-For example, if you are in end mode, and you click in a large 100x100 block of data, and press the <kbd>→</kbd> arrow key, this will navigate to the right end of the row that you are in to the furthest right column with data. After this operation, the <ApiLink type="Spreadsheet" /> will pop out of end mode.
-
-End mode goes into effect at runtime when the user presses the <kbd>END</kbd> key, but it can be configured programmatically by setting the <ApiLink type="Spreadsheet" member="isInEndMode" label="IsInEndMode" /> property of the spreadsheet control.
-
-The following code snippets demonstrate the above, in that the <ApiLink type="Spreadsheet" /> will begin in end mode:
-
-```html
-<igx-spreadsheet isInEndMode=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isInEndMode = true;
-```
-
-## Configuring Protection
-
-The <ApiLink type="Spreadsheet" /> will respect the protection of a workbook on a worksheet-by-worksheet basis. Configuration for a worksheet's protection can be configured by calling the `Protect()` method on the worksheet to protect it, and the `Unprotect()` method to unprotect it.
-
-You can activate or deactivate protection on the <ApiLink type="Spreadsheet" /> control's currently active worksheet by using the code below:
-
-```ts
-this.spreadsheet.activeWorksheet.protect();
-this.spreadsheet.activeWorksheet.unprotect();
-```
-
-## Configuring Selection
-
-The <ApiLink type="Spreadsheet" /> control allows you to configure the type of selection allowed in the control then modifier keys (<kbd>SHIFT</kbd> or <kbd>CTRL</kbd>) are pressed by the user. This is done by setting the <ApiLink type="Spreadsheet" member="selectionMode" label="SelectionMode" /> property of the spreadsheet to one of the following values:
-
-- `AddToSelection`: New cell ranges are added to the <ApiLink type="SpreadsheetSelection" /> object's <ApiLink type="SpreadsheetSelection" member="cellRanges" label="CellRanges" /> collection without needing to hold down the <kbd>CTRL</kbd> key when dragging via the mouse and a range is added with the first arrow key navigation after entering the mode. One can enter the mode by pressing <kbd>SHIFT</kbd> + <kbd>F8</kbd>.
-- `ExtendSelection`: The selection range in the <ApiLink type="SpreadsheetSelection" /> object's <ApiLink type="SpreadsheetSelection" member="cellRanges" label="CellRanges" /> collection representing the active cell is updated as one uses the mouse to select a cell or navigating via the keyboard.
-- `Normal`: The selection is replaced when dragging the mouse to select a cell or range of cells. Similarly when navigating via the keyboard a new selection is created. One may add a new range by holding the <kbd>CTRL</kbd> key and using the mouse and one may alter the selection range containing the active cell by holding the <kbd>SHIFT</kbd> key down while clicking with the mouse or navigating with the keyboard such as with the arrow keys.
-
-The
-<ApiLink type="SpreadsheetSelection" />
-object mentioned in the descriptions above can be obtained by using the <ApiLink type="Spreadsheet" member="activeSelection" label="ActiveSelection" /> property of the <ApiLink type="Spreadsheet" /> control.
-
-The following code snippets demonstrate configuration of the selection mode:
-
-```html
-<igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
-```
-
-The selection of the <ApiLink type="Spreadsheet" /> control can also be set or obtained programmatically. For single selection, you can set the <ApiLink type="Spreadsheet" member="activeCell" label="ActiveCell" /> property Multiple selection is done through the
-<ApiLink type="SpreadsheetSelection" />
-object that is returned by the <ApiLink type="Spreadsheet" /> control's <ApiLink type="Spreadsheet" member="activeSelection" label="ActiveSelection" /> property.
-
-The
-<ApiLink type="SpreadsheetSelection" />
-object has an `AddCellRange()` method that allows you to programmatically add a range of cells to the selection of the spreadsheet in the form of a new  <ApiLink type="SpreadsheetCellRange" /> object.
-
-The following code snippet demonstrates adding a cell range to the spreadsheet's selection:
-
-```ts
-this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
-```
-
-## Configuring Tab Bar Area
-
-The <ApiLink type="Spreadsheet" /> control respects the configuration of the visibility and width of the tab bar area from the <ApiLink type="Workbook" member="windowOptions" label="WindowOptions" /> of the currently active <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> via the `TabBarWidth` and `TabBarVisibility` properties, respectively.
-
-The tab bar area is the area that visualizes the worksheet names as tabs in the control.
-
-You can configure the tab bar's visibility and width using the following code snippet:
-
-```ts
-this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
-
-this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
-```
-
-## Configuring Zoom Level
-
-The Angular Spreadsheet component supports zooming in and out by configuring its <ApiLink type="Spreadsheet" member="zoomLevel" label="ZoomLevel" /> property. The zoom level can be a maximum of 400% and a minimum of 10%.
-
-Setting this property to a number represents the percentage as a whole number, so setting the <ApiLink type="Spreadsheet" member="zoomLevel" label="ZoomLevel" /> to 100 is equivalent to setting it to 100%.
-
-The following code snippets show how to configure the spreadsheet's zoom level:
-
-```html
-<igx-spreadsheet zoomLevel=200></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.zoomLevel = 200;
-```
-
-## API References
-
-<ApiLink type="SpreadsheetCellRange" />
-<br />
-<ApiLink type="SpreadsheetSelection" /><br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
deleted file mode 100644
index 0e56a0f5ac..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-data-validation.mdx
+++ /dev/null
@@ -1,37 +0,0 @@
----
-title: "Angular Spreadsheet | Data Validation | Infragistics"
-description: Use Infragistics' Angular spreadsheet control to setup built-in data validation rules. View Ignite UI for Angular spreadsheet demos!
-keywords: Excel Spreadsheet, data validation, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "When setting up the data validation rules you will need to import the rules you want to use."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Data Validation
-
-This topic explains how to configure and set the built-in data validation rules.
-
-## Angular Data Validation Example
-
-<Sample src="/excel/spreadsheet/data-validation" height={500} alt="Angular Data Validation Example" />
-
-## Dependencies
-
-When setting up the data validation rules you will need to import the rules you want to use.
-
-```ts
-import { AnyValueDataValidationRule } from 'igniteui-angular-excel';
-import { CustomDataValidationRule } from 'igniteui-angular-excel';
-import { DataValidationErrorStyle } from 'igniteui-angular-excel';
-import { ListDataValidationRule } from 'igniteui-angular-excel';
-import { OneConstraintDataValidationOperator } from 'igniteui-angular-excel';
-import { OneConstraintDataValidationRule } from 'igniteui-angular-excel';
-import { TwoConstraintDataValidationOperator } from 'igniteui-angular-excel';
-import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel';
-```
-
-## API References
-<ApiLink type="Spreadsheet" />
diff --git a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
deleted file mode 100644
index 857f87478c..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-hyperlinks.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
----
-title: "Angular Spreadsheet | Hyperlinks | Infragistics"
-description: Use Infragistics' Angular spreadsheet control to display hyperlinks in the Excel workbook, which can link to websites, file directories and other worksheets. View Ignite UI for Angular spreadsheet tutorials!
-keywords: Excel Spreadsheet, hyperlinks, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "The Angular Spreadsheet component allows display of pre-existing hyperlinks in your Excel workbook as well as insertion of new ones that can link to websites, file directories, and even other worksheets in the workbook."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet Hyperlinks
-
-The Angular Spreadsheet component allows display of pre-existing hyperlinks in your Excel workbook as well as insertion of new ones that can link to websites, file directories, and even other worksheets in the workbook.
-
-## Angular Spreadsheet Hyperlinks Example
-
-<Sample src="/excel/spreadsheet/hyperlinks" height={500} alt="Angular Spreadsheet Hyperlinks Example" />
-
-<div class="divider--half"></div>
-
-## Hyperlinks Overview
-
-Hyperlinks are added to the <ApiLink type="Spreadsheet" /> control by accessing the `Hyperlinks` collection on the worksheet that you want to place the hyperlink on. This collection has an `Add` method that takes a <ApiLink type="WorksheetHyperlink" /> object, where you can define the cell address, the hyperlink URL to be navigated to, the display text, and a tooltip to optionally be displayed on hover.
-
-## Dependencies
-
-When setting up your Angular spreadsheet control to use hyperlinks, you will need to import the <ApiLink type="WorksheetHyperlink" /> class like so:
-
-```ts
-import { WorksheetHyperlink } from 'igniteui-angular-excel';
-```
diff --git a/docs/angular/src/content/en/components/spreadsheet-overview.mdx b/docs/angular/src/content/en/components/spreadsheet-overview.mdx
deleted file mode 100644
index ba4c03230c..0000000000
--- a/docs/angular/src/content/en/components/spreadsheet-overview.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: "Angular Spreadsheet Component – Ignite UI for Angular"
-description: Get flexible layouts, easy customization options & convenient Excel-like interface with Ignite UI for Angular Spreadsheet. Manage tabular data the way you want!
-keywords: Excel Spreadsheet, Ignite UI for Angular, Infragistics
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "The Angular Spreadsheet (Excel viewer) component is lightweight, feature-rich and supplied with all the necessary options for operating, visualizing, and editing all types of spreadsheet data – scientific, business, financial, and more."
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet Overview
-
-The Angular Spreadsheet  (Excel viewer) component is lightweight, feature-rich and supplied with all the necessary options for operating, visualizing, and editing all types of spreadsheet data – scientific, business, financial, and more. All the information can be presented in a tabular format that feels intuitive and easy to navigate across cells, panes, and worksheets. The <ApiLink type="Spreadsheet" /> is complemented by flexible Excel-like interface, detailed charts, and features such as activation, cell editing, conditional formatting, styling, selection, clipboard.
-
-## Angular Spreadsheet Example
-
-<Sample src="/excel/spreadsheet/overview" height={500} alt="Angular Spreadsheet Example" />
-
-<div class="divider--half"></div>
-
-## Functionality
-
-- Features
-
-Just like in Excel spreadsheet, you can apply filtering functionality, sorting, move cells, customization in terms of cells color, keyboard shortcuts, and add the ability to even calculate formulas.
-
-## Spreadsheet Usage
-
-- Performance
-
-The spreadsheet is compatible on all modern browsers and optimized for complex and voluminous spreadsheet models, while ensuring flawless functionality and simplicity.
-
-- Flexible layout and easy customization
-
-You can easily select, add, remove, switch the features you want on/off, and configure React sheets in an instant so that it all answers the needs of end-users. There are also configurable libraries, styling and formatting alternatives, visibility options, plenty of themes to choose from.
-
-- Convenient Excel-like interface
-
-Just like operating data in Excel, our spreadsheet component delivers all well-known Excel clip board operations – copy, paste, cut. You won’t need extra training or new skills in order to start using it right away. It also comes with options for sorting, full keyboard navigation, values and formulas, cell dragging, column and rows editing, filtering, number formatting, resizing. The smart and fast calculation engine powers even the most complex estimations. With no dependencies on Excel.
-
-- Data operations
-
-Collect and manage scientific, business, engineering, financial and educational data. Prepare and create analysis, advanced grids, reports, data input forms, budgeting, forecasting scenarios, custom spreadsheets. All of this thanks to the comprehensive API.
-
-- Fast and secure data processing
-
-With our spreadsheet, processing data is 100% safe and secure…
-
-- Excel and CSV import & export
-
-With the built-in Excel import/export functionality, you can instantly load and open Excel documents and view them on-demand, add changes and save them. Also, effortlessly export your completed Excel .xlsx spreadsheets.
-
-## Dependencies
-
-When installing the Angular spreadsheet component, the core and excel package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-excel
-npm install --save igniteui-angular-spreadsheet
-```
-
-## Component Modules
-
-The <ApiLink type="Spreadsheet" /> requires the following modules:
-
-```ts
-import { IgxExcelModule } from 'igniteui-angular-excel';
-import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxExcelModule,
-        IgxSpreadsheetModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-<div class="divider--half"></div>
-
-## Usage
-
-Now that the Angular spreadsheet module is imported, next is the basic configuration of the spreadsheet.
-
-```html
-<igx-spreadsheet #spreadsheet height="500px" width="100%">
-</igx-spreadsheet>
-```
-
-<DocsAside type="info">
-
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
-</DocsAside>
-
-The following demonstrates how to load a workbook into the Angular spreadsheet
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { ExcelUtility } from 'ExcelUtility';
-
-// ...
-
-@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
-public spreadsheet: IgxSpreadsheetComponent;
-
-ngOnInit() {
-    const excelFile = '../../assets/Sample1.xlsx';
-    ExcelUtility.loadFromUrl(excelFile).then((w) => {
-      this.spreadsheet.workbook = w;
-    });
-}
-```
-
-## API References
-
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/en/components/zoomslider-overview.mdx b/docs/angular/src/content/en/components/zoomslider-overview.mdx
deleted file mode 100644
index 314e72de18..0000000000
--- a/docs/angular/src/content/en/components/zoomslider-overview.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: "Angular ZoomSlider | Data Visualization Tools | Navigation | Zooming | DataChart | Data Binding | Infragistics"
-description: Use Infragistics' Angular zoom slider control to easily display a subset of data with two handles representing minimum and maximum values. Improve your data visualization with Ignite UI for Angular zoom slider!
-keywords: zoom slider, Ignite UI for Angular, Infragistics, data chart
-license: commercial
-mentionedTypes: ["ZoomSlider", "DataChart"]
-llms:
-  description: "The Angular ZoomSlider control provides zooming functionality to range-enabled controls."
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Zoom Slider Overview
-
-The Angular ZoomSlider control provides zooming functionality to range-enabled controls. The ZoomSlider features a horizontal scroll bar, a thumbnail of the whole range, and a resizable zoom-range window. The ZoomSlider cannot work as a standalone control and it acts as an enhancement for range-based controls like the DataChart or CategoryChart.
-
-## Angular Zoom Slider Example
-
-The following sample demonstrates how to use <ApiLink type="ZoomSlider" /> to navigate content in <ApiLink type="DataChart" />.
-
-<Sample src="/charts/zoomslider/overview" height={600} alt="Angular Zoom Slider Example" />
-
-## Usage
-
-| Feature Name        | Description |
-| --------------------|----------------------- |
-| Scrollbar navigation       | Users can change scale and scroll through ranges of data using the built-in capabilities of the ZoomSlider scrollbar. |
-| Panning and zooming       | Users can adjust the display scale by dragging the edges of the thumb pad to either make the current display cover a larger range (zoom out) or a smaller range (zoom in). |
-| Multiple user interaction options       | All mouse user interactions are redundantly supported through touch and most of them – through the keyboard. For details, see User Interactions and Usability. |
-| Touch support       |  On touch-enabled devices, users can enjoy the full ZoomSlider functionality. All mouse interactions are supported in touch environment. |
-| Extensibility       | The ZoomSlider control supports DataChart control out-of the box. |
-| Configurable zoom-range window       | The initial zoom-range window width and position, as well as its minimum size, are configurable. |
-
-## Dependencies
-
-When installing the Angular chart component, the core package must also be installed.
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-charts
-```
-
-## Component Modules
-
-The <ApiLink type="ZoomSlider" /> requires the following modules:
-
-```ts
-import { IgxZoomSliderModule } from 'igniteui-angular-charts';
-import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxZoomSliderModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## Code Snippet
-
-The following code demonstrates how to setup the ZoomSlider.
-
-```html
-<igx-zoom-slider
-  width="100%"
-  height="150px">
-</igx-zoom-slider>
-```
-
-## Additional Resources
-
-You can find more information about charts in [Chart Features](charts/chart-features.md) topic.
-
-## API References
-<ApiLink type="ZoomSlider" />
-<ApiLink type="DataChart" />
diff --git a/docs/angular/src/content/jp/.gitignore b/docs/angular/src/content/jp/.gitignore
index bf43056a16..ecf4a386c3 100644
--- a/docs/angular/src/content/jp/.gitignore
+++ b/docs/angular/src/content/jp/.gitignore
@@ -51,3 +51,22 @@ components/pivotGrid/*.mdx
 !components/pivotGrid/pivot-grid.mdx
 !components/pivotGrid/pivot-grid-features.mdx
 !components/pivotGrid/pivot-grid-custom.mdx
+
+# All xplat-generated topics that should be ignored:
+/components/charts/
+/components/geo-map*.mdx
+/components/spreadsheet-*.mdx
+/components/excel-library*.mdx
+/components/excel-utility.mdx
+/components/bullet-graph.mdx
+/components/dashboard-tile.mdx
+/components/linear-gauge.mdx
+/components/radial-gauge.mdx
+/components/zoomslider-overview.mdx
+/components/general-changelog-dv.mdx
+/components/inputs/color-editor.mdx
+/components/interactivity/accessibility-compliance.mdx
+/components/maps/map-api.mdx
+/components/menus/toolbar.mdx
+/components/general-step-by-step-guide-using-cli.mdx
+/components/localization.mdx
diff --git a/docs/angular/src/content/jp/components/bullet-graph.mdx b/docs/angular/src/content/jp/components/bullet-graph.mdx
deleted file mode 100644
index 77e7b319c1..0000000000
--- a/docs/angular/src/content/jp/components/bullet-graph.mdx
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: "Angular ブレット グラフ | データ可視化ツール | インフラジスティックス"
-description: インフラジスティックスの Angular ブレット グラフ コントロールを使用すると、範囲を表示し、複数の測定値を比較するダッシュボードを作成できます。インフラジスティックスのデータ視覚化ツールを是非お試しください!
-keywords: "Angular Bullet Graph, animation, labels, needle, scales, ranges, tick marks, Infragistics, ブレット グラフ, インフラジスティックス, Angular ブレット グラフ, アニメーション, ラベル, ニードル, スケール, 範囲, 目盛, インフラジスティックス"
-license: commercial
-mentionedTypes: ["BulletGraph"]
-namespace: Infragistics.Controls.Gauges
-_language: ja
-llms:
-  description: "ブレット グラフ コンポーネントは、きれいなデータ表現を作成するための多数の機能をサポートします。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ブレット グラフの概要
-
-Angular Bullet Graph コンポーネントは、目盛り上でメジャーの比較を簡潔にリニアで表示します。
-
-ブレット グラフ コンポーネントは、きれいなデータ表現を作成するための多数の機能をサポートします。ブレット グラフは、目標に対する進捗状況、評価の範囲、複数の測定比較を表現する際に最も効率的で効果的なグラフの 1 つです。ブレット グラフは、水平または垂直のわずかな領域で、ゴールに至る進捗、評価の範囲、複数の測定比較を表現するための最も効率的で効果的な方法の 1 つです。
-
-## Angular ブレット グラフの例
-
-以下のサンプルは、同じ <ApiLink type="BulletGraph" /> でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
-<Sample src="/gauges/bullet-graph/animation" height={155} alt="Angular ブレット グラフの例" />
-
-このゲージは、スケール、針、目盛 (1 組)、ラベル (1 組) をサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、<ApiLink type="BulletGraph" member="transitionDuration" label="TransitionDuration" /> プロパティの設定で簡単にカスタマイズできます。
-ブレット グラフの機能には構成可能な向きや方向、視覚要素やツールチップなどがあります。
-
-## 依存関係
-gauge パッケージのインストール時に core パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## モジュールの要件
-
-<ApiLink type="BulletGraph" /> を作成するには、以下のモジュールが必要です。
-
-```ts
-// app.module.ts
-import { IgxBulletGraphModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxBulletGraphModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-以下のコードは、ブレット グラフ コンポーネントを作成し、パフォ―マンス バーと比較目盛マーカー、および 3 つの比較範囲をスケールに構成します。
-
-```html
- <igx-bullet-graph height="100"
-                   width="300"
-                   minimumValue="5"
-                   maximumValue="55"
-                   value="35"
-                   targetValue="43">
-        <igx-linear-graph-range startValue="0"
-                                endValue="15"
-                                brush="#828181">
-        </igx-linear-graph-range>
-        <igx-linear-graph-range startValue="15"
-                                endValue="30"
-                                brush="#AAAAAA">
-        </igx-linear-graph-range>
-        <igx-linear-graph-range startValue="30"
-                                endValue="55"
-                                brush="#D0D0D0">
-        </igx-linear-graph-range>
- </igx-bullet-graph>
-```
-
-## 比較メジャー
-ブレットグラフは、パフォーマンス値とターゲット値の 2 つのメジャーを表示できます。
-
-パフォーマンス値は、コンポーネントで表示されるプライマリ メジャーでグラフ全体の長さに沿って拡張するバーとして表示されます。ターゲット値は、パフォーマンス値が比較の対象とするメジャーでパフォーマンス バーの向きに対して直角に交わる小さなブロックとして表示されます。
-
-```html
-<igx-bullet-graph
-    value=50
-    valueBrush="DodgerBlue"
-    valueStrokeThickness=1
-    valueInnerExtent=0.5
-    valueOuterExtent=0.65
-    targetValue=80
-    targetValueBreadth=10
-    targetValueBrush="LimeGreen"
-    targetValueOutline="LimeGreen"
-    targetValueStrokeThickness=1
-    targetValueInnerExtent=0.3
-    targetValueOuterExtent=0.85
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/measures" height={125} alt="Angular ブレット グラフ メジャー" />
-
-## ハイライト値
-
-バレット グラフのパフォーマンス値をさらに変更して、進捗状況をハイライト値として表示することもできます。これにより、<ApiLink type="BulletGraph" member="value" label="Value" /> が低い不透明度で表示されます。良い例としては、<ApiLink type="BulletGraph" member="value" label="Value" /> が 50 で、<ApiLink type="BulletGraph" member="highlightValue" label="HighlightValue" /> が 25 に設定されている場合です。これは、<ApiLink type="BulletGraph" member="targetValue" label="TargetValue" /> の値が何に設定されているかに関係なく、50% のパフォーマンスを表します。これを有効にするには、まず <ApiLink type="BulletGraph" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> を Overlay に設定し、次に <ApiLink type="BulletGraph" member="highlightValue" label="HighlightValue" /> を <ApiLink type="BulletGraph" member="value" label="Value" /> よりも低い値に適用します。
-
-```html
-<igx-bullet-graph
-    #bulletGraph
-    height="80px"
-    width="400px"
-    value=70
-    targetValue=90
-    minimumValue=0
-    maximumValue=100
-    interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    highlightValueDisplayMode="Overlay"
-    highlightValue=25>
-  </igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/highlight-needle" height={125} alt="Angular バレット グラフの針のハイライト" />
-
-## 比較範囲
-範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=80 interval=10
-    maximumValue=100 targetValue=90
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=0 endValue=40
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=40 endValue=70
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=70 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.95 outerEndExtent=0.95>
-    </igx-linear-graph-range>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/ranges" height={125} alt="Angular ブレット グラフの範囲" />
-
-## 目盛
-目盛は、ブレット グラフを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。
-- 主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。
-- 補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70
-    maximumValue=100 targetValue=90
-    interval=10
-    tickBrush="DodgerBlue"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.2
-    tickEndExtent=0.075
-    minorTickCount=4
-    minorTickBrush="DarkViolet"
-    minorTickEndExtent=0.1
-    minorTickStartExtent=0.2
-    minorTickStrokeThickness=1>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/tickmarks" height={125} alt="Angular  ブレット グラフの目盛" />
-
-## ラベル
-ラベルはスケールのメジャーを示します。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="DodgerBlue"
-    font="11px Verdana">
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/labels" height={125} alt="Angular ブレット グラフのラベル" />
-
-## バッキング
-バッキング要素はブレット グラフ コントロールの背景と境界線を表します。常に最初に描画される要素でラベルやメモリなどの残りの要素は互いにオーバーレイします。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    backingBrush="#bddcfc"
-    backingOutline="DodgerBlue"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/background" height={125} alt="Angular ブレット グラフのバッキング" />
-
-## スケール
-スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (<ApiLink type="BulletGraph" member="isScaleInverted" label="IsScaleInverted" /> プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0 value=70 interval=10
-    maximumValue=100 targetValue=90
-    isScaleInverted=false
-    scaleBackgroundBrush="DodgerBlue"
-    scaleBackgroundOutline="DarkViolet"
-    scaleBackgroundThickness=2
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95>
-</igx-bullet-graph>
-```
-
-<Sample src="/gauges/bullet-graph/scale" height={125} alt="Angular ブレット グラフのスケール" />
-
-## まとめ
-上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
-
-```html
-<igx-bullet-graph
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100
-    isScaleInverted=false
-    scaleBackgroundBrush="Gray"
-    scaleBackgroundOutline="Gray"
-    scaleBackgroundThickness=2
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95
-
-    value=50
-    valueBrush="Black"
-    valueStrokeThickness=1
-    valueInnerExtent=0.5
-    valueOuterExtent=0.65
-    targetValue=80
-    targetValueBreadth=7.5
-    targetValueBrush="Black"
-    targetValueOutline="Black"
-    targetValueStrokeThickness=1
-    targetValueInnerExtent=0.3
-    targetValueOuterExtent=0.85
-
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="Black"
-    font="11px Verdana"
-
-    backingBrush="#cecece"
-    backingOutline="#cecece"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1
-
-    interval=10
-    tickBrush="Black"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.2
-    tickEndExtent=0.075
-
-    minorTickCount=4
-    minorTickBrush="Black"
-    minorTickEndExtent=0.1
-    minorTickStartExtent=0.2
-    minorTickStrokeThickness=1
-
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=20 endValue=40
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=40 endValue=60
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=60 endValue=90
-        innerStartExtent=0.25 innerEndExtent=0.25
-        outerStartExtent=0.9 outerEndExtent=0.9>
-    </igx-linear-graph-range>
-</igx-bullet-graph>
-```
-
-## API リファレンス
-
-<ApiLink type="BulletGraph" /><br />
-<ApiLink type="LinearGraphRange" /><br />
-
-## その他のリソース
-
-その他のゲージ タイプの詳細については、以下のトピックを参照してください。
-
-- [リニア ゲージ](linear-gauge.md)
-- [ラジアル ゲージ](radial-gauge.md)
diff --git a/docs/angular/src/content/jp/components/charts/chart-api.mdx b/docs/angular/src/content/jp/components/charts/chart-api.mdx
deleted file mode 100644
index c0d4b9818f..0000000000
--- a/docs/angular/src/content/jp/components/charts/chart-api.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: "Angular チャート API | データ可視化 ツール | インフラジスティックス"
-description: インフラジスティックスの Ignite UI for Angular チャートは、チャートのビジュアルを構成およびスタイル設定するための便利な API を提供します。
-keywords: "Angular charts, chart API, API, Ignite UI for Angular, Infragistics, Angular チャート, チャート API, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "CategoryChart", "FinancialChart", "SeriesViewer", "DoughnutChart", "PieChart", "Sparkline", "DataPieChart" ]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular チャートは、CategoryChart、FinancialChart、DataChart、DataPieChart、DoughnutChart、PieChart、および Sparkline UI 要素でデータをプロットするためのシンプルで使いやすい API を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート API
-
-Ignite UI for Angular チャートは、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、<ApiLink type="DataChart" />、<ApiLink type="DataPieChart" />、<ApiLink type="DoughnutChart" />、<ApiLink type="PieChart" />、および <ApiLink type="Sparkline" /> UI 要素でデータをプロットするためのシンプルで使いやすい API を提供します。
-
-## Angular カテゴリ チャート API
-
-Angular <ApiLink type="CategoryChart" /> には次の API メンバーがあります。
-
-| チャート プロパティ | 軸プロパティ | シリーズ プロパティ |
-|-------------------|--------------|-------------------|
-| - `CategoryChart.ChartType` <br /> - <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> <br /> - <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="CategoryChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" /> <br /> - <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> <br /> - <ApiLink type="DataChart" member="highlightingBehavior" label="HighlightingBehavior" /> <br /> - <ApiLink type="DataChart" member="highlightingMode" label="HighlightingMode" /> <br /> - <ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> <br /> |  - <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> <br /> - <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> <br /> - <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> <br /> - <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" />  <br /> - <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />  <br /> - <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> <br />  - <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> <br /> - <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> | - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> <br />  - <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> <br /> <br /> <br /> <br /> <br /> |
-
-## Angular ファイナンシャル チャート API
-
-Angular <ApiLink type="FinancialChart" /> には次の API メンバーがあります。
-
-| チャート プロパティ | 軸プロパティ | シリーズ プロパティ |
-|-------------------|-------------|--------------------|
-| - `FinancialChart.ChartType` <br /> - <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> <br /> - <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" />  <br /> - <ApiLink type="CategoryChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" />  <br /> - <ApiLink type="DataChart" member="highlightingBehavior" label="HighlightingBehavior" /> <br /> - <ApiLink type="DataChart" member="highlightingMode" label="HighlightingMode" /> <br /> - <ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> |  - <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> <br /> - <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" /> <br /> - <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> <br /> - <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />  <br /> - <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> <br />  - <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> <br /> - <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> <br /> - <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> <br /> - <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" /> | - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" />  <br /> - <ApiLink type="FinancialChart" member="indicatorTypes" label="IndicatorTypes" /> <br />  - <ApiLink type="FinancialChart" member="volumeType" label="VolumeType" /> <br />  - <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> <br /> <br /> <br /> |
-
-## Angular データ チャート API
-
-Angular <ApiLink type="DataChart" /> には次の API メンバーがあります。
-
-| チャート プロパティ | 軸クラス |
-|------------------|--------------|
-| - `SeriesViewer.Title` <br /> - `SeriesViewer.Subtitle` <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - `DataChart.Axes` <br /> - `SeriesViewer.Series` <br /> |  - <ApiLink type="Axis" /> はすべての軸タイプの基本クラスです <br /> - [カテゴリ シリーズ](types/column-chart.md)、[積層型シリーズ](types/stacked-chart.md)、および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="CategoryXAxis" /> <br /> - [カテゴリ シリーズ](types/column-chart.md)および[積層型シリーズ](types/stacked-chart.md)で使用される <ApiLink type="CategoryYAxis" /> <br /> - [ラジアル シリーズ](types/radial-chart.md)で使用される <ApiLink type="CategoryAngleAxis" /> <br /> - [散布シリーズ](types/scatter-chart.md)および[棒シリーズ](types/bar-chart.md)で使用される <ApiLink type="NumericXAxis" />   <br /> - [散布シリーズ](types/scatter-chart.md)、[カテゴリ シリーズ](types/column-chart.md)、[積層型シリーズ](types/stacked-chart.md)、および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="NumericYAxis" /> <br /> - [極座標シリーズ](types/polar-chart.md)で使用される <ApiLink type="NumericAngleAxis" /> <br /> - [極座標シリーズ](types/polar-chart.md) および[ラジアル シリーズ](types/radial-chart.md)で使用される <ApiLink type="NumericRadiusAxis" /> <br /> - [カテゴリ シリーズ](types/column-chart.md)および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="TimeXAxis" /> <br /> <br /> |
-
-Angular <ApiLink type="DataChart" /> は、<ApiLink type="DataChart" member="Series" label="Series" /> から継承する次のタイプのシリーズを使用できます。
-
-| カテゴリ シリーズ  | 積層シリーズ |
-|------------------|----------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="BarSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - <ApiLink type="WaterfallSeries" /> <br /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedBarSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100BarSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> <br /> <br /> |
-
-| 散布シリーズ | ファイナンシャル シリーズ |
-|----------------|------------------|
-| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - おとび [その他](types/stock-chart.md) |
-
-| ラジアル シリーズ | 極座標シリーズ |
-|---------------|--------------|
-| - <ApiLink type="RadialLineSeries" /> <br /> - <ApiLink type="RadialAreaSeries" /> <br /> - <ApiLink type="RadialPieSeries" /> <br /> - <ApiLink type="RadialColumnSeries" /> <br /> <br /> | - <ApiLink type="PolarScatterSeries" /> <br /> - <ApiLink type="PolarLineSeries" /> <br /> - <ApiLink type="PolarAreaSeries" /> <br /> - <ApiLink type="PolarSplineSeries" /> <br /> - <ApiLink type="PolarSplineAreaSeries" /> <br /> |
-
-## Angular データ凡例の API
-
-Angular <ApiLink type="DataLegend" /> には次の API メンバーがあります:
-
-- <ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" />
-- <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" />
-- <ApiLink type="DataLegend" member="includedSeries" label="IncludedSeries" />
-- <ApiLink type="DataLegend" member="excludedSeries" label="ExcludedSeries" />
-- <ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" />
-- <ApiLink type="DataLegend" member="valueFormatMode" label="ValueFormatMode" />
-- <ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" />
-- <ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" />
-- <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" />
-- <ApiLink type="DataLegend" member="valueTextColor" label="ValueTextColor" />
-- <ApiLink type="DataChart" member="titleTextColor" label="TitleTextColor" />
-- <ApiLink type="DataLegend" member="labelTextColor" label="LabelTextColor" />
-- <ApiLink type="DataLegend" member="unitsTextColor" label="UnitsTextColor" />
-- <ApiLink type="DataLegend" member="summaryType" label="SummaryType" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="badgeShape" label="BadgeShape" />
-
-## Angular ドーナツ チャート API
-
-Angular <ApiLink type="DoughnutChart" /> には、次の API メンバーがあります。
-
-- <ApiLink type="DoughnutChart" member="allowSliceExplosion" label="AllowSliceExplosion" />
-- <ApiLink type="DoughnutChart" member="allowSliceSelection" label="AllowSliceSelection" />
-- <ApiLink type="DoughnutChart" member="innerExtent" label="InnerExtent" />
-
-## Angular データ円チャート API
-
-Angular <ApiLink type="DataPieChart" /> には、次の API メンバーがあります。
-
-- `DataPieChart.ChartType`
-- <ApiLink type="DataPieChart" member="highlightingBehavior" label="HighlightingBehavior" />
-- <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />
-- <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />
-- <ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" />
-- <ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" />
-
-## Angular 円チャート API
-
-Angular <ApiLink type="PieChart" /> には、次の API メンバーがあります。
-
-- <ApiLink type="PieChart" member="legendItemBadgeTemplate" label="LegendItemBadgeTemplate" />
-- <ApiLink type="PieChart" member="legendItemTemplate" label="LegendItemTemplate" />
-- <ApiLink type="PieChart" member="legendLabelMemberPath" label="LegendLabelMemberPath" />
-- <ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />
-- <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" />
-- <ApiLink type="PieChart" member="selectionMode" label="SelectionMode" />
-
-## Angular スパークライン チャート API
-
-Angular <ApiLink type="Sparkline" /> には、次の API メンバーがあります。
-
-- `DisplayNormalRangeInFront`
-- <ApiLink type="Sparkline" member="displayType" label="DisplayType" />
-- `LowMarkerBrush`
-- `LowMarkerSize`
-- `LowMarkerVisibility`
-- `NormalRangeFill`
-- <ApiLink type="CategoryChart" member="unknownValuePlotting" label="UnknownValuePlotting" />
-
-## その他のリソース
-
-チャートの詳細については、次のトピックを参照してください。
-
-- [チャートの概要](chart-overview.md)
-- [チャート機能](chart-features.md)
diff --git a/docs/angular/src/content/jp/components/charts/chart-features.mdx b/docs/angular/src/content/jp/components/charts/chart-features.mdx
deleted file mode 100644
index 138dc60164..0000000000
--- a/docs/angular/src/content/jp/components/charts/chart-features.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Angular チャート機能 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート機能
-keywords: "Angular Charts, Features, Infragistics, Angular チャート, 機能, インフラジスティックス"
-license: commercial
-mentionedTypes: ["FinancialChart", "CategoryChart", "DataChart"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータ ストーリーを表現できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート機能
-
-Ignite UI for Angular チャートを使用すると、さまざまな機能を表示して、チャートで伝えられる完全なデータ ストーリーを表現できます。これらの各機能は完全にカスタマイズ可能であり、デザインのニーズにに合わせてスタイルを設定できるため、完全に制御できます。ハイライト表示や注釈などの操作により、重要なデータの詳細を呼び出すことができ、チャート内のより深いデータ分析が可能になります。
-
-Angular チャートは、次のチャート機能を提供します。
-
-## 軸
-
-異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。Angular チャートのカスタマイズについての詳細には、[軸グリッド線](features/chart-axis-gridlines.md)、[軸レイアウト](features/chart-axis-layouts.md)、および[軸オプション](features/chart-axis-options.md)のトピックをご覧ください。
-
-<Sample src="/charts/data-chart/axis-crossing" height={500} alt="Angular 軸交差軸の例" />
-
-## 注釈
-
-これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、[チャート注釈](features/chart-annotations.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/line-chart-with-annotations" height={500} alt="Angular 注釈の例" />
-
-## アニメーション
-
-アニメーションを有効にして、新しいデータ ソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、[チャート アニメーション](features/chart-animations.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="Angular 構成オプションの例" />
-
-## ハイライト表示
-
-線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャートのハイライト表示](features/chart-highlighting.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="Angular ハイライト表示の例" />
-
-## マーカー
-
-チャート シリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データ ポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、[チャート マーカー](features/chart-markers.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/marker-options" height={500} alt="Angular 構成オプションの例" />
-
-## ナビゲーション
-
-マウス、キーボード、およびタッチ操作でズームおよびパンすることにより、チャートをナビゲートできます。この機能の詳細については、[チャート ナビゲーション](features/chart-navigation.md)トピックを参照してください。
-
-<Sample src="/charts/data-chart/chart-navigation" height={500} alt="Angular ナビゲーションの例" />
-
-## オーバーレイ
-
-オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、[チャート オーバーレイ](features/chart-overlays.md)トピックを参照してください。
-
-<Sample src="/charts/data-chart/series-value-overlay" height={600} alt="Angular 値オーバーレイの例" />
-
-## パフォーマンス
-
-Angular チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、[チャート パフォーマンス](features/chart-performance.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/high-volume" height={600} alt="Angular チャート パフォーマンスの例" />
-
-## ツールチップ
-
-ツールチップを使用して、特定のシリーズ タイプに関連するすべての情報を表示します。項目レベルやカテゴリ レベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、[チャート ツールチップ](features/chart-tooltips.md)トピックを参照してください。
-
-<Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="Angular ツールチップ タイプの例" />
-
-## トレンドライン
-
-トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。Angular チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、[チャート トレンドライン](features/chart-trendlines.md)トピックを参照してください。
-
-<Sample src="/charts/financial-chart/trendlines" height={500} alt="Angular トレンドラインの例" />
-
-## API リファレンス
-
-<ApiLink type="FinancialChart" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/chart-overview.mdx b/docs/angular/src/content/jp/components/charts/chart-overview.mdx
deleted file mode 100644
index fe75e8da2a..0000000000
--- a/docs/angular/src/content/jp/components/charts/chart-overview.mdx
+++ /dev/null
@@ -1,227 +0,0 @@
----
-title: "Angular チャートとグラフ ライブラリー | Ignite UI for Angular"
-description: "Ignite UI for Angular チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートを実現します。無料でお試しください。"
-keywords: "Angular Charts, Chart, Infragistics, Angular チャート, チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "DataChart", "CategoryChartType"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import igniteUiAngularFinancialChartModularDesign1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-modular-design-1100.jpg';
-import igniteUiAngularFinancialChartSmartDataBinding1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-smart-data-binding-1100.jpg';
-import igniteUiAngularFinancialChartTrendlines1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-trendlines-1100.jpg';
-import igniteUiAngularFinancialChartZooming1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-zooming-1100.gif';
-import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/charts/ignite-ui-angular-financial-chart-custom-tooltips-1100.jpg';
-
-# Angular チャートとグラフの概要
-
-Ignite UI for Angular チャートおよびグラフは、データ視覚化の広範なライブラリであり、Web アプリやモバイル アプリの魅力的でインタラクティブなチャートやダッシュボードを実現します。速度と美しさを重視して構築され、最新のすべてのブラウザで動作するように設計されており、完全なタッチとインタラクティブ機能により、レスポンシブ ビジュアルをあらゆるデバイスの次のアプリにすばやく簡単に組み込むことができます。
-
-Ignite UI for Angular チャートは、カテゴリ シリーズ、ファイナンシャル シリーズ、極座標シリーズ、ラジアル シリーズ、範囲シリーズ、散布シリーズ、シェイプ シリーズ、地理空間シリーズなど、あらゆるタイプのデータを視覚化できる 65 種類以上のシリーズと組み合わせをサポートします。実行している比較のタイプ、または伝えようとしているデータ ストーリーのタイプに関係なく、次のいずれかの方法でデータを表すことができます:
-
-- 時間毎の変化
-- 比較
-- 相関
-- 配布
-- 地理空間
-- 概要 + 詳細
-- 部分から全体
-- ランキング
-
-インフラジスティックスの Angular チャートを使用して、最もニーズの高い視覚化を強化してください。
-
-## Angular チャートとグラフのタイプ
-
-Angular 製品には、単一のチャート表示からインタラクティブなダッシュボードまで、あらゆるシナリオに対応する 65 を超えるさまざまなチャートおよびグラフ タイプがあります。モバイル アプリやウェブ アプリ用に、円、棒、エリア、折れ線、ポイント、積層型、ドーナツ、散布、ゲージ、極座標、ツリーマップ、株価、ファイナンシャル、地理空間マップなどの Angular チャートを作成できます。Angular チャートと他のチャートの利点は、次のような機能が完全にサポートされていることです:
-
-- 組み込まれたレスポンシブ Web デザイン
-- マウス、キーボード、タッチを使用したインタラクティブなパンとズーム
-- チャート アニメーションのフル コントロール
-- チャート ドリルダウン イベント
-- リアルタイム ストリーミングのサポート
-- 大量 (数百万のデータ ポイント) のサポート
-- トレンドラインおよびその他のデータ分析機能
-
-## カテゴリおよびファイナンシャル (財務) チャートとデータ チャートの比較
-
-Angular カテゴリとファイナンシャル チャートは、ドメイン固有のチャートと呼ばれるものです。これは、ドメインがカテゴリまたは財務価格シリーズであることを前提とした Angular データ チャートのラッパーです。
-
-これらの特定のドメイン チャートを選択すると、API が簡素化され、軸、系列、注釈などの属性を明示的に定義する必要なく、データに関する多くのインターフェイスを描画してチャート シナリオを自動的に構成できます。対照的に、データ チャートは非常に明示的であり、チャートのすべての重要な部分を定義する必要があります。
-
-ドメイン チャートはその中核でデータ チャートを使用しています。したがって、同じパフォーマンスの最適化が両方に適用されます。違いは、開発者にとって非常に簡単に指定できるようにしようとしているのか、それとも可能な限り柔軟にしようとしているのかにあります。Angular データ チャートはより詳細であり、必要なすべてのチャート機能を利用できるようになり、たとえば、任意の数の系列、軸、または注釈を組み合わせて組み合わせることができます。カテゴリ チャートとファイナンシャル チャートでは、数値 X 軸を持つ散布系列を含む系列など、データ チャートの方が適している、簡単に実行できない状況が存在する可能性があります。
-
-最初はどのチャートを選択すればよいのか判断するのが難しいかもしれません。シリーズのタイプと、提示したい追加機能の数を理解することが重要です。より軽量の基本カテゴリまたはファイナンシャル シリーズの場合は、ドメイン チャートのいずれかを使用することをお勧めします。より高度なシナリオの場合は、カテゴリ チャートの <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティでカバーされるもの以外のもの (積層シリーズや散布シリーズ、数値データや時間ベースのデータなど) を表示するなど、Angular データ チャートの使用をお勧めします。Angular ファイナンシャル チャートでは、縦棒、OHLC バー、ローソク足、折れ線シリーズ タイプのみがカバーされていることに注意してください。
-
-Angular カテゴリとファイナンシャル チャートを使いやすくしていますが、将来はいつでもデータ チャートに切り替えることができます。
-
-### Angular 棒チャート
-
-Angular 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[棒チャート](types/bar-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="Angular 複数ソースの棒チャート" />
-
-### Angular 円チャート
-
-Angular 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 100% などの全体の値を表します。円チャートは小さなデータセットに最適で、一目で簡単に読むことができます。[円チャート](types/pie-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/pie-chart/overview" height={600} alt="Angular 凡例付きの Angular 円チャート" />
-
-### Angular 折れ線チャート
-
-Angular 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。[折れ線チャート](types/line-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="Angular 複数ソースの折れ線チャート" />
-
-### Angular ドーナツ チャート
-
-Angular ドーナツ チャート、またはドーナツ グラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツ チャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツ チャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。[ドーナツ チャート](types/donut-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/doughnut-chart/legend" height={600} alt="Angular 凡例付きの Angular ドーナツ チャート" />
-
-### Angular エリア チャート
-
-Angular エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリア チャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。[エリア チャート](types/area-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="Angular 複数ソースのエリア チャート" />
-
-### Angular スパークライン チャート
-
-Angular スパークライン チャート、またはスパークライン グラフは、グリッド セル内や、データ ストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリ チャートの一種です。他の Angular チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。[スパークライン チャート](types/sparkline-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular スパークライン チャートの例" />
-
-### Angular バブル チャート
-
-Angular バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。Angular バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータ ディメンション (通常は色) を使用して、バブル チャートの値をさらに区別することもできます。[バブル チャート](types/bubble-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="Angular バブル チャート" />
-
-### Angular ファイナンシャル チャート/株価チャート
-
-Angular ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャル データを描画する複合視覚化です。日/週/月フィルター、チャート タイプの選択、ボリューム タイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された Angular 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。[株価チャート](types/stock-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular 株価チャートの例" />
-
-### Angular 縦棒チャート
-
-Angular 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[縦棒チャート](types/column-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="Angular 複数ソースの縦棒チャート" />
-
-### Angular 複合チャート
-
-Angular 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。[複合チャート](types/composite-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/composite-chart" height={600} alt="Angular 複合チャートの例" />
-
-### Angular 極座標チャート
-
-Angular 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular 極座標型折れ線チャート" />
-
-### Angular 散布図
-
-Angular 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。Angular 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="Angular 散布マーカー チャート" />
-
-### Angular シェープ チャート
-
-Angular シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。[シェープ チャート](types/shape-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="Angular 散布ポリゴン チャート" />
-
-### Angular スプライン チャート
-
-Angular スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。Angular スプライン チャートは Angular 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプライン チャートの点は滑らかな曲線で接続されていることです。[スプライン チャート](types/spline-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="Angular 複数ソースのスプライン チャート" />
-
-### Angular ステップ チャート
-
-Angular ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。Angular ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。Angular ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で Angular ステップエリア チャートと同じです。[ステップ折れ線チャート](types/step-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="Angular 複数ソースのステップ折れ線チャート" />
-
-### Angular ツリーマップ
-
-Ignite UI for Angular ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。[ツリーマップ](types/treemap-chart.md)の詳細をご覧ください。
-
-<Sample src="/charts/tree-map/overview" height={600} alt="Angular ツリーマップの例" />
-
-## Angular チャート主な機能
-
-組み込みの時間軸を使用して、データが時間の経過とともにどのように変化するかを示します。チャートを操作すると、時間スケールとラベル書式が動的に変更されます。YahooFinance や GoogleFinance など、ファイナンシャル チャートに期待されるすべての機能を備えた完全なファイナンシャル チャートが含まれています。
-
-### 動的なチャート
-
-新しい[複合チャート](types/Composite-chart.md)を作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
-
-### カスタム ツールチップ
-
-新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用して[カスタム ツールチップ](features/chart-tooltips.md#angular-チャート-ツールチップ-テンプレート)を作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
-
-### リアルタイムの高パフォーマンスなチャート
-
-ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、[高頻度のチャート](features/chart-performance.md#高頻度-angular-チャート)トピックを参照してください。
-
-### 大量のデータ処理
-
-[チャート パフォーマンス](features/chart-performance.md)を最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、[大量データのチャート](features/chart-performance.md#大量データの-angular-チャート)トピックを参照してください。
-
-### モジュラー デザイン
-
-Angularチャート は、モジュール性のために設計されています。必要な機能のみが展開一部であるため、描画されたページで可能な限り最小のフットプリントを取得します。
-
-<Image src={igniteUiAngularFinancialChartModularDesign1100} alt="Angular チャート モジュラー デザイン" class="responsive-img" />
-
-### スマート データ バインディング
-
-チャート タイプの選択はお任せください。当社のスマート データ アダプタは、データに最適なチャート タイプを自動的に選択します。データ ソースを設定するだけです。
-
-<Image src={igniteUiAngularFinancialChartSmartDataBinding1100} alt="Angular チャート スマート データ バインディング" class="responsive-img" />
-
-### トレンドライン
-
-Angular チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべての[トレンドライン](features/chart-trendlines.md)をサポートします。
-
-<Image src={igniteUiAngularFinancialChartTrendlines1100} alt="Angular チャート トレンドライン" class="responsive-img" />
-
-### インタラクティブなパニングとズーム
-
-シングル タッチまたはマルチタッチ、キーボード、ズーム バー、マウス ホイールを使用し、マウスで任意の長方形領域をドラッグ選択してズームインし、データ ポイントのクローズアップ、データ履歴のスクロール、またはデータ領域のパンを行います。
-
-<Image src={igniteUiAngularFinancialChartZooming1100} alt="Angular チャート インタラクティブなパニングとズーム" class="responsive-img" />
-
-### マーカー、ツールチップ、およびテンプレート
-
-10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#angular-チャート-マーカーのテンプレート)を作成して、データをハイライト表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#angular-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
-
-<Image src={igniteUiAngularFinancialChartCustomTooltips1100} alt="Angular チャート マーカー、ツールチップ、およびテンプレート" class="responsive-img" />
-
-## その他の詳細
-
-他の Angular チャートを検討している場合は、次のことを考慮しましょう:
-
-- 65 を超える Angular チャート タイプと複合チャートが含まれており、スマート データ アダプタを使用した類を見ない最も簡単な構成が可能です。
-- チャートは、Angular、Blazor、jQuery / JavaScript、React、UNO、UWP、WPF、Windows Forms、WebComponents、WinUI、Xamarin などのすべてのプラットフォームで最適化されています。すべてのプラットフォームで同じ API と機能をサポートします。
-- 当社の株価チャートとファイナンシャル チャートは、YahooFinance または Google Finance のようなエクスペリエンスに必要なすべてを 1 行のコードで提供します。
-- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
-- 他社のパフォーマンスに対してテストします。当社は高速で大量のデータを処理できることを証明できます。大量のデータとリアルタイムのデータ ストリーミングをどのように処理するかをご自身で確認してください。
-- 24/5 対応しております。インフラジスティックスは、常にオンラインでグローバル サポートを提供しています。北米、アジア太平洋、中東、およびヨーロッパでは、いつでもご利用いただけます。
-- チャートの他に、Angular には多くの UI コントロールもあります。アプリケーション構築のための完全な Angular ソリューションを提供します!
-
-- Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
-- Figma デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Figma で作成するすべてのものが Ignite UI for Angular コントロールと一致します。
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="FinancialChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-animations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-animations.mdx
deleted file mode 100644
index c458bdf44f..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-animations.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Angular チャート アニメーション | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート アニメーション
-keywords: "Angular Charts, Animations, Infragistics, Angular チャート, アニメーション, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "アニメーションを使用すると、新しいデータ ソースを読み込むときにシリーズをイーズインできます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート アニメーション
-
-アニメーションを使用すると、新しいデータ ソースを読み込むときにシリーズをイーズインできます。利用可能なアニメーションは、シリーズのタイプに基づきます。たとえば、縦棒シリーズは x 軸から上昇する描画アニメーションになります。折れ線シリーズは y 軸の原点から描画するアニメーションになります。
-
-アニメーションは Ignite UI for Angular チャートで無効ですが、<ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> プロパティを true に設定することで有効にできます。そこから、<ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> プロパティを設定してアニメーションが完了するまでの時間を決定し、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> でアニメーションのタイプを決定できます。
-
-## Angular チャート アニメーションの例
-
-以下の例は、アニメーションをデフォルトの <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> ("Auto") に設定した[折れ線チャート](../types/line-chart.md)を示しています。この例の一番上のドロップダウンとスライダーは、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> と <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> をそれぞれ変更できるため、サポートされるさまざまなアニメーションが異なる速度でどのように見えるかを確認できます。
-
-<Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="Angular 構成オプションの例" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャート ツールチップ](chart-tooltips.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
deleted file mode 100644
index 06be33d739..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-annotations.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
----
-title: "Angular チャート注釈 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート注釈
-keywords: "Angular Charts, Annotations, Infragistics, Angular チャート, 注釈, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Angular チャートのホバー操作と注釈は、シリーズ コレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート注釈
-
-Angular チャートのホバー操作と注釈は、シリーズ コレクションに追加されるシリーズであるホバー操作レイヤーを介して実装されます。これらのレイヤーはカーソルの位置に依存します。これらの注釈レイヤーはそれぞれ、個別に使用することも、他のレイヤーと組み合わせて強力なホバー操作を提供することもできる、異なるホバー操作を提供します。
-
-## Angular 注釈の例
-
-次の例は、Angular チャートで使用できる注釈レイヤーを示しています。チェックボックスをクリックして、各レイヤーのオンとオフを切り替えます。
-
-<Sample src="/charts/category-chart/line-chart-with-annotations" height={600} alt="Angular 注釈の例" />
-
-このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。<a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">無料でダウンロードできます。</a>
-
-## Angular 十字線レイヤー
-
-<ApiLink type="CrosshairLayer" /> は、対象にするために構成される各シリーズの実際値で、異なるセットの線を描画する各シリーズと交差する十字線として描画されます。
-
-十字線のタイプは次のとおりです:
-- Horizontal
-- Vertical
-- Both
-
-チャートの十字線は、<ApiLink type="CategoryChart" member="crosshairsSnapToData" label="CrosshairsSnapToData" /> プロパティを true に設定することでデータ ポイントにスナップするように構成することもできます。そうしないと、十字線がデータ ポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。
-
-デフォルトではチャート コントロールのすべてのシリーズをターゲットにするため、特定のシリーズを 1 つだけ表示するように十字線レイヤーを構成できます。これには、<ApiLink type="CrosshairLayer" member="targetSeries" label="TargetSeries" /> プロパティを設定します。
-
-デフォルトでは、十字線の色は交差するシリーズよりも軽い色になります。しかし、このデフォルト値は、十字線に使用される色を選択できるようにオーバーライドできます。これは、十字線レイヤーの <ApiLink type="CrosshairLayer" member="brush" label="Brush" /> プロパティを設定することによって行われます。
-
-次の例は、単一のシリーズをターゲットにして、タイプを垂直に設定し、ブラシの色をスタイリングすることによって、十字線レイヤーを構成する方法を示しています。
-
-<Sample src="/charts/data-chart/crosshair-layer-styling" height={500} alt="Angular 十字線レイヤーのスタイル設定" />
-
-## Angular 最終値レイヤー
-
-<ApiLink type="DataChart" /> コントロールの <ApiLink type="FinalValueLayer" /> は、シリーズに表示された最終値の軸に沿ったクイック ビューをサポートします。
-
-複数の最終値レイヤーを異なる設定で使用したい場合は、この注釈を設定して特定のシリーズをターゲットにすることができます。これには <ApiLink type="FinalValueLayer" member="targetSeries" label="TargetSeries" /> プロパティを設定します。
-
-次のプロパティを設定して、この注釈をカスタマイズすることもできます:
-
-- <ApiLink type="FinalValueLayer" member="axisAnnotationBackground" label="AxisAnnotationBackground" />: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
-- <ApiLink type="FinalValueLayer" member="axisAnnotationTextColor" label="AxisAnnotationTextColor" />: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
-- <ApiLink type="FinalValueLayer" member="axisAnnotationOutline" label="AxisAnnotationOutline" />: このプロパティは注釈のアウトライン色を選択するために使用されます。
-
-次の例は、上記のプロパティを設定して、最終的な値レイヤーの注釈のスタイルを設定する方法を示しています。
-
-<Sample src="/charts/data-chart/final-value-layer-styling" height={500} alt="Angular 最終値レイヤーのスタイル設定" />
-
-```html
-<igx-category-chart
-    [dataSource]="data"
-    finalValueAnnotationsVisible="true">
-</igx-category-chart>
-```
-
-## Angular コールアウト レイヤー
-
-<ApiLink type="CalloutLayer" /> はチャート コントロール既存または新しいデータの注釈を表示します。注釈は、データ ソース内の指定されたデータ値の横に表示されます。
-
-コールアウト注釈を使用して、メモやデータ ポイントに関する特定の詳細など、ユーザーに追加情報を表示します。
-
-複数のコールアウト レイヤーを異なる設定で使用する場合は、コールアウトを設定して特定のシリーズをターゲットにできます。これには <ApiLink type="CalloutLayer" member="targetSeries" label="TargetSeries" /> プロパティを設定します。
-
-次のプロパティを設定して、この注釈をカスタマイズすることもできます:
-
-- <ApiLink type="CalloutLayer" member="calloutLeaderBrush" label="CalloutLeaderBrush" />: このプロパティは、レイヤーのコールアウトのリーダー線のブラシを選択するために使用されます。
-- <ApiLink type="CalloutLayer" member="calloutOutline" label="CalloutOutline" />: このプロパティは注釈のアウトライン色を選択するために使用されます。
-- <ApiLink type="CalloutLayer" member="calloutBackground" label="CalloutBackground" />: このプロパティは注釈の背景色を選択するために使用されます。デフォルトはシリーズのブラシを使用します。
-- <ApiLink type="CalloutLayer" member="calloutTextColor" label="CalloutTextColor" />: このプロパティは注釈のテキストの色のブラシを選択するために使用されます。
-- <ApiLink type="CalloutLayer" member="calloutStrokeThickness" label="CalloutStrokeThickness" />: このプロパティは、コールアウト バッキングの厚さを選択するために使用されます。
-- <ApiLink type="CalloutLayer" member="calloutCornerRadius" label="CalloutCornerRadius" />: このプロパティは、コールアウトのコーナーをカーブさせるために使用されます。
-- <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" />: このプロパティは、コールアウト レイヤーが使用できる位置を選択するために使用されます。例: 上、下
-
-次の例は、上記のプロパティを設定して、コールアウト レイヤーの注釈のスタイルを設定する方法を示しています。
-
-<Sample src="/charts/data-chart/callout-layer-styling" height={500} alt="Angular コールアウト レイヤーのスタイル設定" />
-
-```html
-<igx-category-chart
-    [dataSource]="data"
-    calloutsVisible="true"
-    [calloutsDataSource]="calloutData"
-    calloutsXMemberPath="index"
-    calloutsYMemberPath="value"
-    calloutsLabelMemberPath="info">
-</igx-category-chart>
-```
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
deleted file mode 100644
index 24e1608519..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: "Angular 軸グリッド線 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 軸グリッド線
-keywords: "Angular Axis, Gridlines, Infragistics, Angular 軸, グリッド線, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "XYChart", "DomainChart", "DataChart", "NumericXAxis", "NumericYAxis", "NumericAxisBase" ]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 軸グリッド線
-
-すべての Ignite UI for Angular チャートには、軸線の外観、X 軸と Y 軸に描画される主/副グリッド線および目盛りの頻度を変更するための組み込み機能が含まれています。
-
-<DocsAside type="info" title="情報">
-次の例は、<ApiLink type="CategoryChart" /> および <ApiLink type="FinancialChart" /> コントロールに適用されます。
-</DocsAside>
-
-軸の主グリッド線は、軸ラベルの位置から水平 (Y 軸) または垂直 (X 軸) に伸びる長い線であり、チャートのプロット領域を介して描画されます。軸の副グリッド線は、軸の主グリッド線の間に描画される線です。
-
-軸目盛りは、Angular チャートのすべての主線の位置で各ラベルのすべての水平軸および垂直軸に沿って表示されます。
-
-## Angular 軸グリッド線の例
-
-この例は、指定した間隔で主グリッド線と副グリッド線を表示するために軸グリッド線を構成する方法を示しています。
-
-<Sample src="/charts/category-chart/axis-gridlines" height={450} alt="Angular 軸グリッド線の例" />
-
-## Angular 軸グリッド線のプロパティ
-
-軸間隔プロパティを設定すると、主グリッド線と軸ラベルが軸に描画される頻度を指定します。同様に、軸副間隔のプロパティは副グリッド線が軸に描画される頻度を指定します。
-
-副間隔に対応する副グリッド線を表示するには、軸に <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /> と <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> プロパティを設定する必要があります。これは、副グリッド線にはデフォルトの色または太さがなく、最初に割り当てるまで表示されないためです。
-
-以下のプロパティを設定して、Angular チャートでのグリッド線の表示をカスタマイズできます。
-
-| 軸ビジュアル           | タイプ    | プロパティ名                                               | 説明 |
-| -----------------------|---------|--------------------------------------------------------------|---------------- |
-| 主なストロークの色     | 文字列  | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" />                   | これらのプロパティは、軸の主グリッド線の色を設定します。 |
-| 副ストロークの色     | 文字列  | <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorStroke" label="YAxisMinorStroke" />                   | これらのプロパティは、軸の副グリッド線の色を設定します。 |
-| 主なストロークの太さ | 数  | <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /> | これらのプロパティは、軸の主グリッド線の太さをピクセル単位で設定します。 |
-| 副ストロークの太さ | 数  | <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /> | これらのプロパティは、軸の副グリッド線の太さをピクセル単位で設定します。 |
-| 主間隔         | 数  | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> <br /> <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" />                         | これらのプロパティは、軸の主グリッド線とラベルの間隔を設定します。 |
-| 副間隔         | 数  | <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" /> <br /> <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" />               | これらのプロパティは、軸の副グリッド線の間隔を設定します (使用する場合)。 |
-| 軸線のストローク色    | 文字列  | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" />                   | これらのプロパティは、軸線の色を設定します。 |
-| 軸のストロークの太さ | 数  | <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" /> | これらのプロパティは、軸線のピクセル単位の太さを設定します。 |
-
-上記のテーブルの主間隔と副間隔については、軸ラベルの主間隔も、この値によって設定され、間隔に関連付けられた軸のポイントにラベルが 1 つ表示されることに注意してください。副間隔グリッド線は常に主グリッド線の間に描画されるため、副間隔プロパティは常に主間隔プロパティの値よりもはるかに小さい値 (通常は 2〜5 倍小さい値) に設定する必要があります。
-
-カテゴリ軸では、間隔は、最初の項目から最後のカテゴリ項目の範囲のインデックスとして表されます。通常、この値は、主間隔のカテゴリ項目の合計数の 10～20% に相当します。その結果、すべての軸ラベルは軸にフィットし、他の軸ラベルによって切り取られることはありません。副間隔の場合、主間隔プロパティの一部として表されます。通常、この値の範囲は 0.25～0.5 です。
-
-数値軸では、間隔値は軸の最小値と最大値の間の double 値として表されます。数値軸はデフォルトで、軸の最小値および最大値から四捨五入されたバランスの良い数値に、自動的に計算されます。
-
-日付/時刻軸では、この値は軸の最小値から最大値の範囲の時間間隔として表されます。
-
-以下の例は、上記のプロパティを設定してグリッド線をカスタマイズする方法を示しています。
-
-<Sample src="/charts/category-chart/axis-gridlines" height={450} alt="Angular 軸グリッド線の例" />
-
-<ApiLink type="DataChart" /> の軸には、それぞれ <ApiLink type="NumericXAxis" member="majorStrokeDashArray" label="MajorStrokeDashArray" /> プロパティと <ApiLink type="NumericXAxis" member="minorStrokeDashArray" label="MinorStrokeDashArray" /> プロパティを利用して、主グリッド線と副グリッド線にダッシュ配列を配置する機能もあります。対応する軸の <ApiLink type="NumericXAxis" member="strokeDashArray" label="StrokeDashArray" /> プロパティを設定することで、実際の軸線も破線にすることができます。これらのプロパティは、対応するグリッド線のダッシュの長さを記述する数値の配列を受け取ります。
-
-次の例は、上記のダッシュ配列プロパティが設定された <ApiLink type="DataChart" /> を示しています。
-
-<Sample src="/charts/data-chart/dash-array-axes" height={450} alt="Angular 軸破線配列の例" />
-
-## Angular 軸目盛りの例
-
-軸の目盛りは、<ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> と <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> プロパティを 0 より大きい値に設定することで有効になります。これらのプロパティは、目盛りを形成する線セグメントの長さを指定します。
-
-目盛りは常に軸線から伸び、ラベルの方向を指します。ラベルは、重ならないように目盛りの長さの値でオフセットされます。たとえば、<ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> プロパティが 5 に設定されている場合、軸ラベルはその量だけ左にシフトされます。
-
-以下の例は、上記のプロパティを設定して目盛りをカスタマイズする方法を示します。
-
-<Sample src="/charts/category-chart/axis-tickmarks" height={450} alt="Angular 軸目盛りの例" />
-
-## Angular 軸目盛りのプロパティ
-
-以下のプロパティを設定して、Angular チャートで軸の目盛りの表示方法をカスタマイズできます。
-
-| 軸ビジュアル           | タイプ    | プロパティ名                                             | 説明 |
-| -----------------------|---------|------------------------------------------------------------|------------------------- |
-| 目盛りストロークの色      | 文字列  | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" />                   | これらのプロパティは、目盛りの色を設定します。 |
-| 目盛りストロークの太さ  | 数  | <ApiLink type="CategoryChart" member="xAxisTickStrokeThickness" label="XAxisTickStrokeThickness" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickStrokeThickness" label="YAxisTickStrokeThickness" /> | これらのプロパティは、軸の目盛りの太さを設定します。 |
-| 目盛りストロークの長さ     | 数  | <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> <br /> <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" />                   | これらのプロパティは、軸の目盛りの長さを設定します。 |
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [軸レイアウト](chart-axis-layouts.md)
-- [軸オプション](chart-axis-options.md)
-
-## API リファレンス
-
-以下は、上記のセクションで説明されている API メンバーのリストです。
-
-| <ApiLink type="DataChart" />                                     | <ApiLink type="CategoryChart" /> または <ApiLink type="FinancialChart" /> |
-| -------------------------------------------------- | ----------------------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="interval" label="Interval" />             | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> (主間隔) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="interval" label="Interval" />             | <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> (主間隔) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="minorInterval" label="MinorInterval" />        | <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="minorInterval" label="MinorInterval" />        | <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="majorStroke" label="MajorStroke" />          | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="majorStroke" label="MajorStroke" />          | <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="majorStrokeThickness" label="MajorStrokeThickness" /> | <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="majorStrokeThickness" label="MajorStrokeThickness" /> | <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="minorStrokeThickness" label="MinorStrokeThickness" /> | <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="minorStrokeThickness" label="MinorStrokeThickness" /> | <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="strokeThickness" label="StrokeThickness" />      | <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="strokeThickness" label="StrokeThickness" />      | <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="stroke" label="Stroke" />               | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /> (軸線色) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="stroke" label="Stroke" />               | <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" /> (軸線色) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="tickLength" label="TickLength" />           | <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="tickLength" label="TickLength" />           | <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="tickStroke" label="TickStroke" />           | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="tickStroke" label="TickStroke" />           | <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="strip" label="Strip" />                | <ApiLink type="CategoryChart" member="xAxisStrip" label="XAxisStrip" /> (軸の主グリッド線の空間) |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericXAxis" member="strip" label="Strip" />                | <ApiLink type="CategoryChart" member="yAxisStrip" label="YAxisStrip" /> (軸の主グリッド線の空間) |
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx
deleted file mode 100644
index 30e0bae0cb..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-axis-layouts.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: "Angular 軸レイアウト | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 軸レイアウト
-keywords: "Angular Axis, Layouts, Location, Position, Share, Multiple, Crossing, Infragistics, Angular 軸, レイアウト, 位置, 配置, 共有, 複数, 交差, インフラジスティックス"
-license: commercial
-mentionedTypes: [ "DomainChart", "CategoryChart", "XYChart", "DomainChart", "DataChart", "Axis", "AxisLabelSettings", "ScatterSplineSeries", "TimeXAxis" ]
-_language: ja
-llms:
-  description: "すべての Ignite UI for Angular チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 軸レイアウト
-
-すべての Ignite UI for Angular チャートには、位置などの多くの軸レイアウト オプションを構成するオプションが含まれているほか、シリーズ間で軸を共有したり、同じチャートに複数の軸を含めることができます。これらの機能は、以下の例で示されています。
-
-<DocsAside type="info" title="情報">
-次の例は、<ApiLink type="CategoryChart" /> および <ApiLink type="FinancialChart" /> コントロールに適用されます。
-</DocsAside>
-
-## 軸位置の例
-
-すべての軸に対して、チャートのプロット領域に関連して軸の位置を指定できます。Angular チャートの <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> プロパティを使用すると、x 軸の線とそのラベルをプロット領域の上または下に配置できます。同様に、<ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> プロパティを使用して、プロット領域の左側または右側に y 軸を配置できます。
-
-以下の例は、2009 年以降に生成された再生可能電力量を[折れ線チャート](../types/line-chart.md)で示しています。チャートのプロット領域の内側または外側の左側または右側にラベルを配置したときに軸がどのように見えるかを視覚化できるように、<ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> を構成できるドロップダウンがあります。
-
-<Sample src="/charts/category-chart/axis-locations" height={450} alt="Angular 軸位置の例" />
-
-## 軸の高度なシナリオ
-
-より高度な軸レイアウト シナリオでは、Angular データ チャートを使用して軸を共有したり、同じプロット領域に複数の y 軸や x 軸を追加したり、特定の値で軸を交差させたりすることができます。次の例は、<ApiLink type="DataChart" /> のこれらの機能の使用方法を示しています。
-
-### 軸共有の例
-
-Angular <ApiLink type="DataChart" /> の同じプロット領域に複数の軸を共有して追加できます。<ApiLink type="TimeXAxis" /> を共有し、複数の <ApiLink type="NumericYAxis" /> を追加して、さまざまな値 (株価や株取引量など) を持つ多くのデータ ソースをプロットするのが一般的なシナリオです。
-
-以下の例は、[株価チャート](../types/stock-chart.md)と[縦棒チャート](../types/column-chart.md)をプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は[縦棒チャート](../types/column-chart.md)で使用され、右側の Y 軸は[株価チャート](../types/stock-chart.md)、X 軸は 2 つの間で共有されます。
-
-<Sample src="/charts/data-chart/axis-sharing" height={450} alt="Angular 軸共有の例" />
-
-### 軸交差の例
-
-軸をプロット領域の外側に配置することに加えて、Angular <ApiLink type="DataChart" /> は、軸をプロット領域の内側に配置し、特定の値で交差させるオプションも提供します。たとえば、x 軸と y 軸の両方で <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> プロパティと <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> プロパティを設定して、原点が (0、0) で 交差するように軸線と軸ラベルを描画することにより、三角関数チャートを作成できます。
-
-以下の例は、[散布スプライン チャート](../types/scatter-chart.md)で表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。
-
-<Sample src="/charts/data-chart/axis-crossing" height={450} alt="Angular 軸交差の例" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸オプション](chart-axis-options.md)
-
-## API リファレンス
-
-以下は、上記のセクションで説明した API メンバーのリストです。
-
-| <ApiLink type="DataChart" />                                         | <ApiLink type="CategoryChart" />                 |
-| ------------------------------------------------------ | ------------------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" />             | なし                            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="crossingValue" label="CrossingValue" />            | なし                            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="isInverted" label="IsInverted" />               | <ApiLink type="CategoryChart" member="xAxisInverted" label="XAxisInverted" />                 |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="isInverted" label="IsInverted" />               | <ApiLink type="CategoryChart" member="yAxisInverted" label="YAxisInverted" />                 |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="labelLocation" label="LabelLocation" />            | <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="labelLocation" label="LabelLocation" />            | <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" />            |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="Axis" member="labelHorizontalAlignment" label="LabelHorizontalAlignment" /> | <ApiLink type="CategoryChart" member="yAxisLabelHorizontalAlignment" label="YAxisLabelHorizontalAlignment" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="Axis" member="labelVerticalAlignment" label="LabelVerticalAlignment" />   | <ApiLink type="CategoryChart" member="xAxisLabelVerticalAlignment" label="XAxisLabelVerticalAlignment" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="labelVisibility" label="LabelVisibility" />          | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" />          |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> <ApiLink type="NumericXAxis" member="labelVisibility" label="LabelVisibility" />          | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" />          |
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-options.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-options.mdx
deleted file mode 100644
index cf19f90297..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-axis-options.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: "Angular 軸オプション | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 軸オプション
-keywords: "Angular Axis, Options, Title, Labels, Gap, Overlap, Range, Scale, Mode, Infragistics, Angular 軸, オプション, タイトル, ラベル, 間隔, 重複, 範囲, スケール, モード, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "すべての Ignite UI for Angular チャートで、軸はタイトル、ラベル、範囲などの視覚的構成のプロパティを提供します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 軸オプション
-
-すべての Ignite UI for Angular チャートで、軸はタイトル、ラベル、範囲などの視覚的構成のプロパティを提供します。これらの機能は、以下の例で示されています。
-
-## 軸タイトルの例
-
-Angular チャートの軸タイトル機能を使用すると、チャートにコンテキスト情報を追加できます。さまざまなフォントスタイル、色、マージン、および配置を適用するなど、さまざまな方法で軸タイトルの外観をカスタマイズできます。
-
-<Sample src="/charts/category-chart/axis-titles" height={450} alt="Angular 軸タイトルの例" />
-
-## 軸ラベルの例
-
-Angular チャートは、チャートで表示されるラベルの構成、書式設定、およびラベル フォントのスタイル設定を制御することが可能です。軸ラベルの回転角度、マージン、水平および垂直方向の配置、色、余白、および表示設定を変更できます。次の例は、これらの軸の機能を使用する方法を示しています。
-
-<Sample src="/charts/category-chart/axis-labels" height={450} alt="Angular 軸ラベルの例" />
-
-## 軸ラベルの管理と書式設定
-
-チャートの軸には、所有する軸のラベルに使用可能なスペースの量に関する拡張計算を実行する機能があります。この拡張された計算により、軸は、指定された軸に対してより多くのラベルを表示するために、指定されたスペースの量を最適化できます。
-
-この拡張された計算は、オプトインする必要があるものです。これは、<ApiLink type="Axis" member="useEnhancedIntervalManagement" label="UseEnhancedIntervalManagement" /> プロパティを true に設定することで実行できます。次に、軸の <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /> プロパティを手動で設定せずに、軸のディメンションに収まるだけの数のラベルを表示したい場合は、軸の <ApiLink type="Axis" member="enhancedIntervalPreferMoreCategoryLabels" label="EnhancedIntervalPreferMoreCategoryLabels" /> プロパティを true に設定できます。
-
-チャートには、ラベルが割り当てられたスペースに収まらない場合にラベルの自動回転を考慮する機能と、ラベルが収まるようにプロット領域に自動マージンを適用する機能もあります。これは、最初にチャートの <ApiLink type="CategoryChart" member="autoMarginAndAngleUpdateMode" label="AutoMarginAndAngleUpdateMode" /> プロパティを `SizeChanging` または `SizeChangingAndZoom` に設定することで最初にオプトインできるものです。これにより、必要に応じて、ラベルに適用された自動マージンと角度をいつ再評価するかがチャートに通知されます。
-
-<ApiLink type="CategoryChart" member="autoMarginAndAngleUpdateMode" label="AutoMarginAndAngleUpdateMode" /> を設定した後、<ApiLink type="CategoryChart" member="shouldAutoExpandMarginForInitialLabels" label="ShouldAutoExpandMarginForInitialLabels" /> プロパティを true に設定して自動マージンをオプトインするか <ApiLink type="CategoryChart" member="shouldConsiderAutoRotationForInitialLabels" label="ShouldConsiderAutoRotationForInitialLabels" /> プロパティを true に設定して自動回転を行うことができます。<ApiLink type="CategoryChart" member="autoExpandMarginExtraPadding" label="AutoExpandMarginExtraPadding" /> と <ApiLink type="CategoryChart" member="autoExpandMarginMaximumValue" label="AutoExpandMarginMaximumValue" /> を設して、それぞれ追加のスペースまたは可能な最大マージンを提供することにより、適用される自動マージンをさらにカスタマイズすることもできます。
-
-<ApiLink pkg="geo-core" type="NumberFormatSpecifier" /> や <ApiLink type="DateTimeFormatSpecifier" /> などのカスタム ラベル書式は、<ApiLink type="CategoryChart" member="xAxisLabelFormatSpecifiers" label="XAxisLabelFormatSpecifiers" /> および <ApiLink type="CategoryChart" member="yAxisLabelFormatSpecifiers" label="YAxisLabelFormatSpecifiers" /> コレクションを介して各軸に追加できます。一般に、Intl.NumberFormat および Intl.DateTimeFormat の言語に依存した数値、日付、時刻の書式設定を適用するために使用されます。ラベルにカスタム書式を適用するには、<ApiLink type="CategoryChart" member="yAxisLabelFormat" label="YAxisLabelFormat" /> または <ApiLink type="CategoryChart" member="xAxisLabelFormat" label="XAxisLabelFormat" /> を <ApiLink type="CategoryChart" /> のデータ項目のプロパティ名 (例: `{Date}`) に設定する必要があります。<ApiLink type="FinancialChart" /> の場合、数値軸を使用するため、数値がコンテキストとなり、これを `{0}` に設定する必要があります。
-
-次の例では、yAxis を <ApiLink pkg="geo-core" type="NumberFormatSpecifier" /> でフォーマットして、米国のトップ興行収入映画の $USD 価格を表します。
-
-<Sample src="/charts/category-chart/format-specifiers" height={450} alt="軸ラベルの Angular 書式指定子" />
-
-## 軸範囲の例
-
-チャートでは数値軸または時間軸の範囲の最小値と最大値を定義できます。範囲の最小値は軸の最小値で、範囲の最大値は軸の最大値です。これらは、<ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> および <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> オプションを設定することによって設定されます。
-
-既定では、Angular チャートは、データ内の対応する最小値と最大値に基づいて、数値と時間軸の範囲の最小値と最大値を計算しますが、この自動計算は、データセットには適していません。たとえば、データの最小値が 850 の場合、<ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> を 800 に設定してください。これにより、軸の最小値とデータ ポイントの最小値の間に 50 のスペース値ができます。<ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> プロパティを使用して、同じ方法を軸の最小値と最大値に適用することができます。
-
-<Sample src="/charts/category-chart/axis-range" height={450} alt="Angular 軸範囲の例" />
-
-## 軸モードとスケール
-
-<ApiLink type="FinancialChart" /> および <ApiLink type="CategoryChart" /> コントロールでは、<ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> プロパティが true に設定されている場合はデータを Y 軸に沿って対数スケールでプロットするか、このプロパティが false (デフォルト価値) に設定されている場合は線形スケールでプロットするかを選択できます。
-
-<ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" /> プロパティを使用すると、対数スケールのベースをデフォルト値の 10 から他の整数値に変更できます。<ApiLink type="FinancialChart" /> とコントロールを使用すると、<ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> モードと <ApiLink type="FinancialChartYAxisMode" member="PercentChange" label="PercentChange" /> モードを提供する <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> プロパティを使用して、Y 軸に沿ってデータをどのように表現するかを選択できます。<ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> モードは正確な値でデータをプロットし、<ApiLink type="FinancialChartYAxisMode" member="PercentChange" label="PercentChange" /> モードは提供された最初のデータ ポイントに対する変化率としてデータを表示します。デフォルト値は <ApiLink type="FinancialChartYAxisMode" member="Numeric" label="Numeric" /> モードです。
-
-<ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> プロパティに加えて、<ApiLink type="FinancialChart" /> コントロールには X 軸に <ApiLink type="FinancialChartXAxisMode" member="Time" label="Time" /> モードと <ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> モードを提供する <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" /> プロパティがあります。<ApiLink type="FinancialChartXAxisMode" member="Time" label="Time" /> モードはデータのギャップを X 軸にスペースを用いて描画します。つまり、週末または休日に株取引がないことを示します。<ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> モードはデータがない日付領域を縮小します。デフォルト値は <ApiLink type="FinancialChartXAxisMode" member="Ordinal" label="Ordinal" /> モードです。
-
-<Sample src="/charts/financial-chart/axis-types" height={450} alt="Angular 軸範囲の例" />
-
-## 軸間隔の例
-
-Angular チャートの <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> プロパティは、プロットされた系列の縦棒または棒間のスペースの量を決定します。このプロパティは、0.0 から 1.0 までの数値を受け入れます。値は、シリーズ間の利用可能なピクセル数からのギャップの相対幅を表します。このプロパティを 0 に設定すると、シリーズ間にギャップがレンダリングされず、1 に設定すると最大ギャップがレンダリングされます。
-
-Angular チャートの <ApiLink type="CategoryChart" member="xAxisMaximumGap" label="XAxisMaximumGap" /> プロパティは、許可される最大ギャップ値を決定します。このデフォルトは 1.0 に設定されていますが、<ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> の設定に応じて変更できます。
-
-Angular チャートの <ApiLink type="CategoryChart" member="xAxisMinimumGapSize" label="XAxisMinimumGapSize" /> プロパティは、可能であれば、カテゴリ間のギャップに使用する最小のピクセル数を決定します。
-
-以下の例は、ニューヨーク市のセントラル パークの摂氏の平均最高気温を示しています。これは、<ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.md)で表されているため、列の間にカテゴリ全体の幅があります。スライダーを使用すると、この例のギャップを構成して、さまざまな値の効果を確認できます。
-
-<Sample src="/charts/category-chart/axis-gap" height={450} alt="Angular 軸間隔の例" />
-
-## 軸重複の例
-
-Angular チャートの <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> プロパティを使用すると、プロットされた系列の描画された縦棒または棒の重複を設定できます。このプロパティは、-1.0 から 1.0 までの数値を受け入れます。値は、各シリーズ専用の使用可能なピクセル数からの相対的な重なりを表します。このプロパティを負の値 (-1.0 まで) に設定すると、カテゴリが互いから離れてしまい、それらの間にギャップが生じます。逆に、このプロパティを正の値 (最大 1.0) に設定すると、カテゴリが互いに重なります。値が 1 の場合、チャートはカテゴリを互いの上に表示します。
-
-以下の例は、フランチャイズの世界の興行収入の合計とシリーズで最も収益の高い映画を比較した、世界で最も収益の高い映画フランチャイズの比較を示しています。これは、<ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.md)で表されており、列は完全に重なり合います。スライダーを使用すると、この例の重複を構成して、さまざまな値の効果を確認できます。
-
-<Sample src="/charts/category-chart/axis-overlap" height={450} alt="Angular 軸重複の例" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸レイアウト](chart-axis-layouts.md)
-
-## API リファレンス
-
-以下は、上記のセクションで説明した API メンバーのリストです。
-
-| <ApiLink type="DataChart" />                                         | <ApiLink type="FinancialChart" />       | <ApiLink type="CategoryChart" />        |
-| ------------------------------------------------------ | ---------------------- | ---------------------- |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="maximumValue" label="MaximumValue" />             | <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" />    | <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="minimumValue" label="MinimumValue" />             | <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" />    | <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" />    |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="isLogarithmic" label="IsLogarithmic" />            | <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" />   | <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> <ApiLink type="NumericYAxis" member="logarithmBase" label="LogarithmBase" />            | <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" />   | <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" />   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="CategoryXAxis" /> -> <ApiLink type="CategoryXAxis" member="gap" label="Gap" />                     | なし                   | <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" />             |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="CategoryXAxis" /> -> <ApiLink type="CategoryXAxis" member="overlap" label="Overlap" />                 | なし                   | <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" />         |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="TimeXAxis" />                                  | <ApiLink type="FinancialChart" member="xAxisMode" label="XAxisMode" />            | なし                   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="PercentChangeYAxis" />                         | <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" />            | なし                   |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.angle`      | <ApiLink type="CategoryChart" member="yAxisLabelAngle" label="YAxisLabelAngle" />      | <ApiLink type="CategoryChart" member="yAxisLabelAngle" label="YAxisLabelAngle" />      |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.angle`      | <ApiLink type="CategoryChart" member="xAxisLabelAngle" label="XAxisLabelAngle" />      | <ApiLink type="CategoryChart" member="xAxisLabelAngle" label="XAxisLabelAngle" />      |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.textColor`  | `YAxisLabelForeground` | `YAxisLabelForeground` |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.textColor`  | `XAxisLabelForeground` | `XAxisLabelForeground` |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericYAxis" /> -> `labelSettings.visibility` | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" /> | <ApiLink type="CategoryChart" member="yAxisLabelVisibility" label="YAxisLabelVisibility" /> |
-| <ApiLink type="DataChart" member="Axes" label="Axes" /> -> <ApiLink type="NumericXAxis" /> -> `labelSettings.visibility` | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" /> | <ApiLink type="CategoryChart" member="xAxisLabelVisibility" label="XAxisLabelVisibility" /> |
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-axis-types.mdx b/docs/angular/src/content/jp/components/charts/features/chart-axis-types.mdx
deleted file mode 100644
index 9b780af9fb..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-axis-types.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
----
-title: "Angular 軸タイプ | データの視覚化 | インフラジスティックス"
-description: インフラジスティックスの Angular 軸タイプ
-keywords: "Angular 軸, オプション, タイトル, ラベル, ギャップ, オーバーラップ, 範囲, スケール, モード, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "FinancialChartYAxisMode", "FinancialChartXAxisMode", "NumericYAxis", "CategoryXAxis"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular カテゴリ チャートは、CategoryXAxis および NumericYAxis タイプを 1 つだけ使用します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 軸タイプ
-
-Ignite UI for Angular カテゴリ チャートは、<ApiLink type="CategoryXAxis" /> および <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。同様に、Ignite UI for Angular ファイナンシャル チャートは、<ApiLink type="TimeXAxis" /> タイプと <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。ただし、Ignite UI for Angular データ チャートは複数の軸タイプをサポートしており、[軸の位置](chart-axis-layouts.md#軸位置の例)を設定してチャートの任意の側に配置したり、[軸交差](chart-axis-layouts.md#軸交差の例)プロパティを使用してチャートの内部に配置したりできます。このトピックでは、相互に互換性のある軸とシリーズ、および固有の軸に対するいくつかの特定のプロパティについて、それぞれについて説明します。
-
-## デカルト軸
-
-デカルト軸を持つ <ApiLink type="DataChart" /> では 3 つのタイプの X 軸を使用して水平 (X 軸) および垂直 (X 軸) 方向にデータをプロットすることが可能です。
-(<ApiLink type="CategoryXAxis" />、<ApiLink type="NumericXAxis" />、および <ApiLink type="TimeXAxis" />) と 2 つのタイプの Y 軸 (<ApiLink type="CategoryYAxis" /> および <ApiLink type="NumericYAxis" />)。
-
-### カテゴリ X 軸
-
-<ApiLink type="CategoryXAxis" /> は、そのデータを一連のカテゴリ データ項目として扱います。文字列や数値など、ほぼすべてのタイプのデータを表示できます。この軸に数値をプロットする場合、この軸は離散軸であり、連続ではないことに注意してください。これは、各カテゴリ データ項目がその前のデータ項目から等距離に配置されることを意味します。また、項目は軸のデータ ソースに表示される順序でプロットされます。
-
-<ApiLink type="CategoryXAxis" /> では、データをプロットするために <ApiLink type="DataSource" /> と <ApiLink type="NumericYAxis" member="label" label="Label" /> を提供する必要があります。通常、次のタイプの系列をプロットするために <ApiLink type="NumericYAxis" /> と共に使用されます。
-
-| カテゴリ シリーズ  | 積層型シリーズ | ファイナンシャル シリーズ |
-|------------------|----------------|--------------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - <ApiLink type="WaterfallSeries" /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> <br /> <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> <br /> <br /> <br /> |
-
- 次の例は、上記のスタイル設定プロパティの使用法を示しています:
-
- <Sample src="/charts/data-chart/stacked-column-chart" height={500} alt="Angular カテゴリ X 軸の例" />
-
-### カテゴリ Y 軸
-
-<ApiLink type="CategoryYAxis" /> は、上記の <ApiLink type="CategoryXAxis" /> と非常によく似た働きをしますが、水平ではなく垂直に配置されます。また、この軸では、データをプロットするために <ApiLink type="DataSource" /> と <ApiLink type="NumericYAxis" member="label" label="Label" /> を提供する必要があります。<ApiLink type="CategoryYAxis" /> は通常 <ApiLink type="NumericXAxis" />  と組み合わせて次のタイプのシリーズをプロットするために使用されます。
-
-- <ApiLink type="BarSeries" />
-- <ApiLink type="StackedBarSeries" />
-- <ApiLink type="Stacked100BarSeries" />
-
- 次の例は、<ApiLink type="CategoryYAxis" /> タイプの使用法を示しています:
-
- <Sample src="/charts/data-chart/bar-chart-multiple-sources" height={500} alt="Angular カテゴリ Y 軸の例" />
-
-### 数値 X 軸
-
-<ApiLink type="NumericXAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、X 軸に沿って水平に配置されます。<ApiLink type="NumericXAxis" /> ラベルの位置は、<ApiLink type="NumericYAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.md) (散布シリーズ) の <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryXAxis" /> と組み合わせた場合、これらのラベルは、<ApiLink type="BarSeries" />、<ApiLink type="StackedBarSeries" />、および <ApiLink type="Stacked100BarSeries" /> の <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。
-
-<ApiLink type="NumericXAxis" /> は、次のタイプのシリーズと互換性があります:
-
-- <ApiLink type="BarSeries" />
-- <ApiLink type="BubbleSeries" />
-- <ApiLink type="HighDensityScatterSeries" />
-- <ApiLink type="ScatterSeries" />
-- <ApiLink type="ScatterLineSeries" />
-- <ApiLink type="ScatterSplineSeries" />
-- <ApiLink type="ScatterAreaSeries" />
-- <ApiLink type="ScatterContourSeries" />
-- <ApiLink type="ScatterPolylineSeries" />
-- <ApiLink type="ScatterPolygonSeries" />
-- <ApiLink type="StackedBarSeries" />
-- <ApiLink type="Stacked100BarSeries" />
-
- 次の例は、<ApiLink type="NumericXAxis" /> の使用法を示しています:
-
- <Sample src="/charts/data-chart/type-scatter-hd-series" height={500} alt="Angular 数値 X 軸の例" />
-
-### 数値 Y 軸
-
-<ApiLink type="NumericYAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、Y 軸に沿って垂直に配置されます。<ApiLink type="NumericYAxis" /> ラベルの位置は、<ApiLink type="NumericXAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.md) (散布シリーズ) の <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryYAxis" /> と組み合わせた場合、これらのラベルは、上記の表に記載されているカテゴリまたは積層シリーズの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。財務シリーズのいずれかを使用している場合、Open/High/Low/Close のパスと使用しているシリーズ タイプに対応して配置されます。
-
-<ApiLink type="NumericYAxis" /> は、次のタイプのシリーズと互換性があります:
-
-| カテゴリ シリーズ  | 積層型シリーズ | ファイナンシャル シリーズ | 散布シリーズ |
-|------------------|----------------|------------------|----------------|
-| - <ApiLink type="AreaSeries" /> <br /> - <ApiLink type="ColumnSeries" /> <br /> - <ApiLink type="LineSeries" /> <br /> - <ApiLink type="PointSeries" />  <br /> - <ApiLink type="SplineSeries" /> <br />  - <ApiLink type="SplineAreaSeries" /> <br /> - <ApiLink type="StepLineSeries" /> <br /> - <ApiLink type="StepAreaSeries" /> <br /> - <ApiLink type="RangeAreaSeries" /> <br /> - <ApiLink type="RangeColumnSeries" /> <br /> - <ApiLink type="WaterfallSeries" /> <br /> | - <ApiLink type="StackedAreaSeries" /> <br /> - <ApiLink type="StackedColumnSeries" /> <br /> - <ApiLink type="StackedLineSeries" /> <br /> - <ApiLink type="StackedSplineSeries" /> <br /> - <ApiLink type="Stacked100AreaSeries" /> <br /> - <ApiLink type="Stacked100ColumnSeries" /> <br /> - <ApiLink type="Stacked100LineSeries" /> <br /> - <ApiLink type="Stacked100SplineSeries" /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> | - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> |
-
- 次の例は、<ApiLink type="NumericYAxis" /> の使用法を示しています:
-
- <Sample src="/charts/data-chart/scatter-line-chart" height={500} alt="Angular 数値 Y 軸の例" />
-
-### 時間 X 軸
-
-<ApiLink type="TimeXAxis" /> は、そのデータを、日付でソートされた一連のデータ項目として扱います。この軸タイプのラベルは日付であり、日付間隔に従ってフォーマットおよび配置できます。この軸の日付範囲は、<ApiLink type="TimeXAxis" member="dateTimeMemberPath" label="DateTimeMemberPath" /> を使用してマップされたデータ列の日付値によって決定されます。これは、<ApiLink type="DataSource" /> とともに、この軸タイプでデータをプロットするために必要です。
-
-<ApiLink type="TimeXAxis" /> は、<ApiLink type="FinancialChart" /> コンポーネントの X 軸タイプです。
-
-#### 時間 X 軸のブレーク
-
-<ApiLink type="TimeXAxis" /> には、<ApiLink type="TimeXAxis" member="breaks" label="Breaks" /> (ブレーク) を使用してデータの間隔を除外するオプションがあります。その結果、ラベルとプロットされたデータは除外された間隔では表示されません。たとえば、勤務日/休業日、休日、週末などです。<ApiLink type="TimeAxisBreak" /> のインスタンスを軸の <ApiLink type="TimeXAxis" member="breaks" label="Breaks" /> コレクションに追加し、一意の <ApiLink type="TimeAxisBreak" member="start" label="Start" />、<ApiLink type="TimeAxisBreak" member="end" label="End" />、および <ApiLink type="NumericYAxis" member="interval" label="Interval" /> を使用して構成できます。
-
-#### 時間 X 軸の書式設定
-
-<ApiLink type="TimeXAxis" /> には、<ApiLink type="TimeAxisLabelFormat" /> オブジェクトのコレクションを表す <ApiLink type="TimeXAxis" member="labelFormats" label="LabelFormats" /> プロパティがあります。コレクションに追加された各 <ApiLink type="TimeAxisLabelFormat" /> は、一意の <ApiLink type="TimeAxisLabelFormat" member="format" label="Format" /> (書式) と <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" /> (範囲) を割り当てる役割を果たします。これは、データを年からミリ秒にドリルダウンし、チャートに表示される時間の範囲に応じてラベルを調整する場合に特に役立ちます。
-
-<ApiLink type="TimeAxisLabelFormat" /> の <ApiLink type="TimeAxisLabelFormat" member="format" label="Format" /> プロパティは、特定の表示範囲に使用する形式を指定します。<ApiLink type="TimeAxisLabelFormat" /> の <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" /> プロパティは、軸ラベルの形式が別の形式に切り替わる表示範囲を指定します。たとえば、範囲が 10 日と 5 時間に設定された 2 つの <ApiLink type="TimeAxisLabelFormat" /> 要素がある場合、軸の表示範囲が 10 日未満になるとすぐに、5 時間形式に切り替わります。
-
-#### 時間 X 軸の間隔
-
-<ApiLink type="TimeXAxis" /> は、カテゴリ軸と数値軸の従来の <ApiLink type="NumericYAxis" member="interval" label="Interval" /> プロパティを <ApiLink type="TimeAxisInterval" /> 型の <ApiLink type="TimeXAxis" member="intervals" label="Intervals" /> コレクションに置き換えます。コレクションに追加された各 <ApiLink type="TimeAxisInterval" /> は、一意の <ApiLink type="NumericYAxis" member="interval" label="Interval" />、<ApiLink type="TimeAxisLabelFormat" member="range" label="Range" />、および <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" /> を割り当てる役割を果たします。これは、データを年単位からミリ秒単位にドリルダウンして、チャートに表示される時間の範囲に応じてラベル間に一意の間隔を設ける場合に特に役立ちます。これらのプロパティの説明は次のとおりです。
-
-- <ApiLink type="NumericYAxis" member="interval" label="Interval" />: 使用する間隔を指定します。<ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" /> プロパティに関連付けられています。たとえば、<ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" /> が `Days` に設定されている場合、<ApiLink type="NumericYAxis" member="interval" label="Interval" /> で指定される数値は日数になります。
-- <ApiLink type="TimeAxisLabelFormat" member="range" label="Range" />: 軸間隔が別の間隔に切り替わる可視範囲を指定します。たとえば、範囲が 10 日間および 5 時間に設定された 2 つの TimeAxisInterval がある場合、軸の表示範囲が 10 日間より短くなる際に 5 時間範囲の間隔に変更します。
-- <ApiLink type="TimeAxisInterval" member="intervalType" label="IntervalType" />: <ApiLink type="NumericYAxis" member="interval" label="Interval" /> プロパティの時間単位を指定します。
-
-## 極座標軸
-
-極座標軸を持つ <ApiLink type="DataChart" /> により、チャートの中心から外側 (半径軸) およびチャートの中心の周り (角度軸) にデータをプロットできます。
-
-### カテゴリ角度軸
-
-<ApiLink type="CategoryAngleAxis" /> は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。
-
-<ApiLink type="CategoryAngleAxis" /> は通常、[ラジアル シリーズ](../types/radial-chart.md)をプロットするために <ApiLink type="NumericRadiusAxis" /> と共に使用されます。
-
-次の例は、<ApiLink type="CategoryAngleAxis" /> タイプの使用法を示しています:
-
- <Sample src="/charts/data-chart/radial-area-chart" height={500} alt="Angular カテゴリ角度軸の例" />
-
-### 比例カテゴリ角度軸
-
-<ApiLink type="ProportionalCategoryAngleAxis" /> は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。
-
-<ApiLink type="ProportionalCategoryAngleAxis" /> は通常、<ApiLink type="NumericRadiusAxis" /> と一緒に使用され、円チャートをプロットします (例: [ラジアル シリーズ](../types/radial-chart.md))。
-
-次の例は、<ApiLink type="ProportionalCategoryAngleAxis" /> タイプの使用方法を示しています。
-
- <Sample src="/charts/data-chart/radial-proportional-category-angle-axis" height={500} alt="Angular 比例カテゴリ角度軸の例" />
-
-### 数字角度軸
-
-<ApiLink type="NumericAngleAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。<ApiLink type="NumericAngleAxis" /> のラベルの位置は、[極座標シリーズ](../types/polar-chart.md) オブジェクトの <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> プロパティまたは[ラジアル シリーズ](../types/radial-chart.md) オブジェクトの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> プロパティを使用してマップされたデータ列の値によって異なります。
-
-<ApiLink type="NumericAngleAxis" /> は、<ApiLink type="CategoryAngleAxis" /> と共に使用して[ラジアル シリーズ](../types/radial-chart.md)をプロットするか、<ApiLink type="NumericRadiusAxis" /> と共に使用して[極座標シリーズ](../types/polar-chart.md)をプロットすることができます。
-
-次の例は、<ApiLink type="NumericAngleAxis" /> タイプの使用法を示しています:
-
- <Sample src="/charts/data-chart/polar-scatter-chart" height={500} alt="Angular 数字角度軸の例" />
-
-### 数字半径軸
-
-<ApiLink type="NumericRadiusAxis" /> は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは、円形プロットの周りに配置されます。ラベルの位置は、対応する極座標シリーズの `AngleMemberPath` プロパティを使用してマップされたデータ列の値によって異なります。
-
-<ApiLink type="NumericRadiusAxis" /> を <ApiLink type="NumericRadiusAxis" /> と共に使用して、[極座標シリーズ](../types/polar-chart.md)をプロットできます。
-
-次の例は、<ApiLink type="NumericRadiusAxis" /> タイプの使用法を示しています:
-
- <Sample src="/charts/data-chart/polar-line-chart" height={500} alt="Angular 数字半径軸の例" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、次のトピックを参照してください:
-
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸レイアウト](chart-axis-layouts.md)
-- [軸オプション](chart-axis-options.md)
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx
deleted file mode 100644
index 2f049b6446..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-aggregations.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: "Angular データ集計 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular データ集計
-keywords: "Angular Charts, Markers, Infragistics, Angular チャート, マーカー, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular CategoryChart コントロールのデータ集計機能を使用すると、チャート内のデータを XAxis の一意の値でグループ化し、それらのグループをソートすることができます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular データ集計
-
-Ignite UI for Angular <ApiLink type="CategoryChart" /> コントロールのデータ集計機能を使用すると、チャート内のデータを <ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> の一意の値でグループ化し、それらのグループをソートすることができます。次に、<ApiLink type="CategoryChart" member="yAxisMemberPath" label="YAxis" /> の範囲に反映され、シリーズにカーソルを合わせるとツールチップに表示される集計を適用できます。
-
-## Angular データ集計の例
-
-次の例は、<ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> の Country メンバーごとにグループ化する[縦棒チャート](../types/column-chart.md)を示しており、各データ項目内の他のプロパティ (Product、MonthName、Year など) に変更して販売データを集計できます。また、グループ化されたプロパティを望ましい順序で取得するために、概要とソートのオプションも利用できます。
-
-<ApiLink type="CategoryChart" member="initialSummaries" label="InitialSummaries" /> と <ApiLink type="CategoryChart" member="groupSorts" label="GroupSorts" /> のドロップダウン内にある短縮関数は、割り当てたプロパティに基づいて正しい結果が得られるように適用されていることに注意してください (例: Sum(sales) as Sales | Sales Desc)。
-
-<Sample src="/charts/category-chart/data-aggregations" height={500} alt="Angular データ集計の例" />
-
-```html
-<igx-category-chart
-    [dataSource]="salesData"
-    initialGroups="country"
-    initialSummaries="Sum(sales) as Sales"
-    groupSorts="Sales Desc">
-</igx-category-chart>
-```
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx
deleted file mode 100644
index b4de6395ac..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-annotations.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Angular チャート データの注釈 | データ可視化 | インフラジスティックス"
-description: Infragistics' Angular チャート データの注釈
-keywords: "Angular Charts, Data Annotations, Infragistics, Angular チャート, データの注釈, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Angular チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート データの注釈 <Badge variant="preview" />
-
-Angular チャートでは、データ注釈レイヤーを使用して、データ チャートにプロットされたデータに、傾斜線、垂直/水平線 (軸スライス)、垂直/水平ストリップ (特定の軸をターゲットとする)、四角形、さらには平行四辺形 (バンド) で注釈を付けることができます。データ バインディングがサポートされているため、チャートをカスタマイズするために必要な数の注釈を作成できます。また、さまざまな注釈レイヤーを組み合わせて、プロット領域内にテキストをオーバーレイし、データ内の重要なイベント、パターン、領域に注釈を付けることもできます。
-
-<DocsAside type="info" title="情報">
-これらの機能はデカルト軸をサポートするように設計されており、現在は半径または角度の軸には対応していません。
-</DocsAside>
-
-たとえば、株式イベントやパターンを用いて株価に注釈を付けることができます。
-
-<Sample src="/charts/data-chart/data-annotation-multiple-with-stocks" height={600} alt="Angular 複数のデータ注釈の例" />
-
-このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。<a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">無料でダウンロードできます。</a>
-
-## Angular データ注釈スライス レイヤーの例
-
-Angular では、DataAnnotationSliceLayer は、<ApiLink type="DataChart" /> コンポーネントの軸の複数の値でチャートをスライスする複数の垂直線または水平線を描画します。このデータ注釈レイヤーは、X 軸上の重要なイベント (例: 企業の四半期決算) または Y 軸上の重要な値に注釈を付けるためによく使用されます。TargetAxis プロパティを y 軸に設定すると、データ注釈レイヤーは水平スライスとして描画され、TargetAxis プロパティを x 軸に設定すると、データ注釈レイヤーは垂直スライスとして描画されます。すべてのシリーズと同様に、DataAnnotationSliceLayer も <ApiLink type="DataSource" /> プロパティを介したデータ バインディングをサポートします。このプロパティは、`AnnotationValueMemberPath` プロパティにマッピングされた少なくとも 1 つの数値データ列を持つデータ項目のコレクションに設定できます。
-
-たとえば、DataAnnotationSliceLayer を使用して、株式分割や収益報告の結果などの重要なイベントを株価に注釈として付けることができます。
-
-<Sample src="/charts/data-chart/data-annotation-slice-layer" height={500} alt="Angular データ注釈スライス レイヤーの例" />
-
-## Angular データ注釈ストリップ レイヤーの例
-
-Angular では、<ApiLink type="DataAnnotationStripLayer" /> は、<ApiLink type="DataChart" /> コンポーネントの軸上の 2 つの値の間に複数の垂直または水平のストリップを描画します。このデータ注釈レイヤーを使用して、X 軸にイベントの期間 (株式市場の暴落など) または Y 軸に重要な範囲の値に注釈を付けることができます。TargetAxis プロパティを y 軸に設定すると、データ注釈レイヤーは水平ストリップとして描画され、TargetAxis プロパティを x 軸に設定すると、データ注釈レイヤーは垂直ストリップとして描画されます。すべてのシリーズと同様に、<ApiLink type="DataAnnotationStripLayer" /> も <ApiLink type="DataSource" /> プロパティを介したデータ バインディングをサポートします。このプロパティは、AnnotationValueMemberPath プロパティにマッピングされた少なくとも 1 つの数値データ列を持つデータ項目のコレクションに設定できます。
-
-たとえば、<ApiLink type="DataAnnotationStripLayer" /> を使用して、株式市場の暴落や連邦金利の変更をチャートに注釈として付けることができます。
-
-<Sample src="/charts/data-chart/data-annotation-strip-layer" height={500} alt="Angular データ注釈ストリップ レイヤーの例" />
-
-## Angular データ注釈ライン レイヤーの例
-
-Angular では、<ApiLink type="DataAnnotationLineLayer" /> は、<ApiLink type="DataChart" /> コンポーネントのプロット領域内の 2 つのポイント間に複数の線を描画します。このデータ注釈レイヤーを使用すると、株価の上昇と下落を株価チャートに注釈として表示できます。すべてのシリーズと同様に、DataAnnotationLineLayer も <ApiLink type="DataSource" /> プロパティによるデータ バインディングをサポートしています。このプロパティは、線の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定する必要があります。開始ポイントは <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> プロパティを使用してマップする必要があり、終了ポイントは <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> プロパティを使用してマップする必要があります。
-
-たとえば、DataAnnotationLineLayer を使用して、Y 軸に株価の増加と減少のパターン、および株価の 52 週間の高値と安値の注釈を付けることができます。
-
-<Sample src="/charts/data-chart/data-annotation-line-layer" height={500} alt="Angular データ注釈ライン レイヤーの例" />
-
-## Angular データ注釈矩形レイヤーの例
-
-Angular では、<ApiLink type="DataAnnotationRectLayer" /> は、<ApiLink type="DataChart" /> コンポーネントのプロット領域内の開始ポイントと終了ポイントによって定義された複数の四角形をを描画します。このデータ注釈レイヤーは、株価の弱気パターンなどのプロットエリアの領域に注釈を付けることに使用できます。すべてのシリーズと同様に、DataAnnotationRectLayer も <ApiLink type="DataSource" /> プロパティによるデータ バインディングをサポートしています。このプロパティは、矩形の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定する必要があります。開始ポイントは <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> プロパティを使用してマップする必要があり、終了ポイントは <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> プロパティを使用してマップする必要があります。
-
-たとえば、DataAnnotationRectLayer を使用して、株価の弱気パターンとギャップを Y 軸に注釈付けできます。
-
-<Sample src="/charts/data-chart/data-annotation-rect-layer" height={500} alt="Angular データ注釈矩形レイヤーの例" />
-
-## Angular データ注釈バンド レイヤーの例
-
-Angular では、<ApiLink type="DataAnnotationBandLayer" /> は、<ApiLink type="DataChart" /> コンポーネントのプロット領域内の 2 つのポイント間に複数の傾斜した四角形を描画します。このデータ注釈レイヤーは、株価の上昇と下落の範囲を注釈するために使用できます。すべてのシリーズと同様に、DataAnnotationBandLayer も <ApiLink type="DataSource" /> プロパティによるデータ バインディングをサポートしています。このプロパティには、線の開始ポイントと終了ポイントの x/y 座標を表す、少なくとも 4 つの数値データ列を持つデータ項目のコレクションを設定します。開始ポイントは <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> プロパティを使用してマップする必要があり、終了ポイントは <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> および <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> プロパティを使用してマップする必要があります。さらに、数値データ列を AnnotationBreadthMemberPath プロパティにバインドすることで、傾斜した四角形の太さ/サイズを指定することもできます。
-
-たとえば、DataAnnotationBandLayer を使用して株価の成長範囲に注釈を付けることができます。
-
-<Sample src="/charts/data-chart/data-annotation-band-layer" height={600} alt="Angular データ注釈バンド レイヤーの例" />
-
-## API リファレンス
-
-以下は上記のセクションで説明した API メンバーのリストです。
-
-- <ApiLink type="DataAnnotationStripLayer" member="targetAxis" label="TargetAxis" />: このプロパティは、どの軸に有効な DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer を設定するかを指定します。
-- <ApiLink type="DataSource" />: このプロパティは、データを注釈レイヤーにバインドして正確な形状を提供します。
-- <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" />: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の開始位置となる x 座標を含むデータ列の列名にマッピングします。
-- <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" />: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の開始位置となる y 座標を含むデータ列の列名にマッピングします。
-- <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" />: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の終了位置となる x 座標を含むデータ列にマッピングします。
-- <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" />: このプロパティは、DataAnnotationBandLayer、DataAnnotationLineLayer、および DataAnnotationRectLayer の終了位置となる y 座標を含むデータ列にマッピングします。
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelXMemberPath" label="StartLabelXMemberPath" />: このプロパティは、軸に沿った xAxis の開始位置のオーバーレイ ラベルを表すデータ列へのマッピングです。
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelXDisplayMode" label="StartLabelXDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="startLabelYDisplayMode" label="StartLabelYDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="endLabelXDisplayMode" label="EndLabelXDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="endLabelYDisplayMode" label="EndLabelYDisplayMode" /> | <ApiLink type="DataAnnotationLineLayer" member="centerLabelXDisplayMode" label="CenterLabelXDisplayMode" />: これらのプロパティは、注釈形状の開始、終了、または中央に注釈ラベルとして何を表示するかを指定します。たとえば、マップされたデータ値、データ ラベル、軸の値を表示したり、特定の注釈ラベルを非表示にします。
-- <ApiLink type="DataAnnotationLineLayer" member="startLabelYMemberPath" label="StartLabelYMemberPath" />: このプロパティは、y 軸上の <ApiLink type="DataAnnotationBandLayer" />、<ApiLink type="DataAnnotationLineLayer" />、<ApiLink type="DataAnnotationRectLayer" /> の開始位置の軸ラベルを表すデータ列へのマッピングです。
-- <ApiLink type="DataAnnotationLineLayer" member="endLabelYMemberPath" label="EndLabelYMemberPath" />: このプロパティは、y 軸上の <ApiLink type="DataAnnotationBandLayer" />、<ApiLink type="DataAnnotationLineLayer" />、<ApiLink type="DataAnnotationRectLayer" /> の終了位置の軸ラベルを表すデータ列へのマッピングです。
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-filtering.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-filtering.mdx
deleted file mode 100644
index aa1c8b89d2..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-filtering.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: "Angular チャートのデータ フィルタリング | データ可視化 | インフラジスティックス"
-description: Infragistics の Angular チャートのデータ フィルタリング
-keywords: "Angular Charts, Filtering, Infragistics, Angular チャート, フィルタリング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "データ フィルタリングを使用すると、チャートにバインド表示されたデータ ソースを手動で変更することなく、大規模なデータをクエリし、フィルター式を使用してデータ エントリの小さなサブセットを分析およびプロットすることができます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャートのデータ フィルタリング
-
-データ フィルタリングを使用すると、チャートにバインド表示されたデータ ソースを手動で変更することなく、大規模なデータをクエリし、フィルター式を使用してデータ エントリの小さなサブセットを分析およびプロットすることができます。
-
-クエリ文字列を形成する有効な式とキーワードの完全なリストは、以下で見つけられます:
-
-[フィルター式 (英語)](https://learn.microsoft.com/en-us/dynamics365/business-central/dev-itpro/webservices/use-filter-expressions-in-odata-uris)
-
-> 注: 不適切なフィルターを適用すると、空のチャートが表示されます。
-
-## Angular チャート データ フィルターの例
-
-次の例は、数十年間の年間出生率の[縦棒チャート](../types/column-chart.md)を示しています。ドロップダウンで年代を選択すると <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> プロパティによって式が挿入され、チャートのビジュアルが更新されます。
-
-<Sample src="/charts/category-chart/data-filter" height={500} alt="Angular チャート データ フィルターの例" />
-
-<ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> プロパティは、適切にフィルター処理するために次の構文を必要とする文字列です。値には、フィルターするレコードに関連付したフィルター式の定義、列と値の両方を含む括弧のセットが必要です。
-
-例: 文字 B で始まる国をすべて表示する:
-
-"(startswith(Country, 'B'))"
-
-例: 複数の式を連結する:
-
-"(startswith(Country, 'B') and endswith(Country, 'L') and contains(Product, 'Royal Oak') and contains(Date, '3/1/20'))"
-
-## その他のリソース
-
-関連するチャート機能の詳細については、次のトピックを参照してください。
-
-- [チャートの注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャートのツールチップ](chart-tooltips.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx
deleted file mode 100644
index 6913319d69..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-legend.mdx
+++ /dev/null
@@ -1,161 +0,0 @@
----
-title: "Angular チャートのデータ凡例 | データ視覚化ツール | インフラジスティックス"
-description: インフラジスティックスの Ignite UI for Angular チャートでデータ凡例をお試しください!
-keywords: "Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics, Angular チャート, チャート凡例, 凡例, 凡例タイプ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart", "DataLegend", "Series", "DataLegendSummaryType", "DataAbbreviationMode" ]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular では、DataLegend は Legend の高度にカスタマイズ可能なバージョンであり、シリーズの値を表示するほか、シリーズの行や値の列のフィルタリング、値のスタイルと書式設定を行うための多くの構成プロパティを提供します。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import layoutMode from '@xplat-images/general/layout_mode.png';
-
-# Angular データ凡例
-
-Ignite UI for Angular では、<ApiLink type="DataLegend" /> は <ApiLink type="CategoryChart" member="Legend" label="Legend" /> の高度にカスタマイズ可能なバージョンであり、シリーズの値を表示するほか、シリーズの行や値の列のフィルタリング、値のスタイルと書式設定を行うための多くの構成プロパティを提供します。この凡例は、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> のプロット領域内でマウスを動かすと更新されます。また、ユーザーのマウス ポインターがプロット領域を出ると、最後にホバーされたポイントが維持されます。このコンテンツは、3 種類の行 (ヘッダー、シリーズ、要約) と 4 種類の列 (タイトル、ラベル、値、単位) のセットを使用して表示されます。
-
-## Angular データ凡例の行
-
-<ApiLink type="DataLegend" /> の行には、ヘッダー行、シリーズ行、および集計行が含まれます。ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、<ApiLink type="DataLegend" member="headerText" label="HeaderText" /> プロパティを使用して変更できます。
-
-<Sample src="/charts/category-chart/data-legend" height={450} alt="Angular カテゴリ チャート データ凡例の例" />
-
-### ヘッダー行
-
-ヘッダー行には、カテゴリ シリーズとファイナンシャル シリーズにマウスを合わせると、x 軸の現在のラベルが表示されます。x 軸に日付が表示されている場合は、<ApiLink type="DataLegend" member="headerFormatDate" label="HeaderFormatDate" /> プロパティと <ApiLink type="DataLegend" member="headerFormatTime" label="HeaderFormatTime" /> プロパティを使用して、<ApiLink type="DataLegend" /> の日付と時刻を書式設定できます。他のタイプのシリーズの場合、<ApiLink type="DataLegend" /> はヘッダー行を描画しません。
-
-### シリーズ行
-
-シリーズ行は、チャートにプロットされた各シリーズを表します。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と測定単位が表示されます。<ApiLink type="DataLegend" member="includedSeries" label="IncludedSeries" /> または <ApiLink type="DataLegend" member="excludedSeries" label="ExcludedSeries" /> プロパティをシリーズのインデックス (1、2、3) またはシリーズのタイトル (Tesla、Microsoft) のコレクションに設定することにより、シリーズの行をフィルタできます。
-
-### 集計行
-
-最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、凡例の <ApiLink type="DataLegend" member="summaryTitleText" label="SummaryTitleText" /> プロパティを使用して変更できます。また、<ApiLink type="DataLegend" member="summaryType" label="SummaryType" /> プロパティを使用して、集計行にシリーズの値の <ApiLink type="DataLegendSummaryType" member="Total" label="Total" />、<ApiLink type="DataLegendSummaryType" member="Min" label="Min" />、<ApiLink type="DataLegendSummaryType" member="Max" label="Max" />、または <ApiLink type="DataLegendSummaryType" member="Average" label="Average" /> を表示するかどうかをカスタマイズできます。
-
-## Angular データ凡例の列
-
-<ApiLink type="DataLegend" /> の列には、シリーズのタイトル、ラベル、データ列の値、および値に関連付けられたオプションの単位が含まれます。チャートの一部のシリーズには、ラベル、値、および単位の複数の列を含めることができます。たとえば、財務価格シリーズには、**High**、**Low**、**Open**、および **Close** のデータ列があります。これらは、<ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> または <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" /> プロパティを使用して <ApiLink type="DataLegend" /> でフィルタリングできます。
-
-<Sample src="/charts/financial-chart/data-legend" height={450} alt="Angular ファイナンシャル チャート データ凡例の例" />
-
-<ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> プロパティと <ApiLink type="DataLegend" member="excludedColumns" label="ExcludedColumns" /> プロパティの値の設定は、シリーズのタイプとそれらがサポートするデータ列の数によって異なります。たとえば、<ApiLink type="DataLegend" member="includedColumns" label="IncludedColumns" /> プロパティに **Open** および **Close** の文字列コレクションを設定すると、チャートがファイナンシャル シリーズをプロットしているときに、株価の始値と終値のみが表示されます。次の表に、データ シリーズの列をフィルタリングするために使用できるすべての列名を示します。
-
-| シリーズのタイプ  | 列名 |
-| -----------------|-------------- |
-| カテゴリ シリーズ  | Value |
-| ラジアル シリーズ    | Value |
-| 極座標シリーズ     | Radius、Angle |
-| バブル シリーズ    | X、Y、Radius |
-| 散布シリーズ   | X、Y |
-| 範囲シリーズ     | High、Low |
-| ファイナンシャル シリーズ | High、Low、Open、Close、Change、TypicalPrice、Volume |
-
-OHLC 価格の **TypicalPrice** (標準価格) とパーセンテージの **Change** (変更) は、ファイナンシャル シリーズによって自動的に計算されるため、データ ソースに含める必要はありません。
-
-### タイトル列
-
-タイトル列には、チャートにプロットされた各 <ApiLink type="Series" /> の <ApiLink type="CategoryChart" member="chartTitle" label="Title" /> プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。
-
-### ラベル列
-
-ラベル列には、値列の左側に短い名前が表示されます。たとえば、**Open** 株価の場合は「O」です。<ApiLink type="DataLegend" member="labelDisplayMode" label="LabelDisplayMode" /> プロパティを使用して、この列の表示・非表示を切り替えることができます。
-
-### 値列
-
-値の列には、シリーズの値が省略形のテキストとして表示されます。このテキストは、<ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> プロパティを使用して書式設定でき、このプロパティを <ApiLink type="DataAbbreviationMode" member="Shared" label="Shared" /> に設定することですべての数値に同じ省略形を適用できます。または、ユーザーは <ApiLink type="DataAbbreviationMode" member="Independent" label="Independent" />、<ApiLink type="DataAbbreviationMode" member="Kilo" label="Kilo" />、<ApiLink type="DataAbbreviationMode" member="Million" label="Million" /> などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ <ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" /> と <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" /> を使用して制御されます。
-
-### 単位列
-
-単位列には、値列の右側に省略記号が表示されます。単位記号は、<ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> プロパティに依存します。「M」は「Million」の略語です。
-
-### 列のカスタマイズ
-
-プロパティ名が **MemberAsLegendLabel** および **MemberAsLegendUnit** で終わる、各シリーズのプロパティを使用して、**Label** および **Unit** 列に表示されるテキストをカスタマイズできます。次の表は、**Label** 列と **Unit** 列で可能なカスタマイズをいくつか示しています。
-
-| シリーズのタイプ | シリーズのプロパティ |
-| ------|---- |
-| カテゴリ シリーズ | ValueMemberAsLegendLabel="$" <br /> ValueMemberAsLegendUnit="M" |
-| ラジアル シリーズ | ValueMemberAsLegendLabel="Distance:" <br /> ValueMemberAsLegendUnit="KM" |
-| 極座標シリーズ | RadiusMemberAsLegendLabel="Radius:" <br /> RadiusMemberAsLegendUnit="KM" <br /> AngleMemberAsLegendLabel="Angle:" <br /> AngleMemberAsLegendUnit="°" |
-| 範囲シリーズ | HighMemberAsLegendLabel="H:" <br /> HighMemberAsLegendUnit="K" <br /> LowMemberAsLegendLabel="L:" <br /> LowMemberAsLegendUnit="K" |
-| ファイナンシャル シリーズ | OpenMemberAsLegendLabel="O:" <br /> OpenMemberAsLegendUnit="K" <br /> HighMemberAsLegendLabel="H:" <br /> HighMemberAsLegendUnit="K" <br /> LowMemberAsLegendLabel="L:" <br /> LowMemberAsLegendUnit="K" <br /> CloseMemberAsLegendLabel="C:" <br /> CloseMemberAsLegendUnit="K" <br /> |
-
-また、<ApiLink type="DataLegend" /> の `UnitText` プロパティを使用して、すべての Unit 列に表示されるテキストを変更できます。
-
-## レイアウト モード
-
-凡例項目は、<ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。
-
-例:
-
-<Image src={layoutMode} alt="Layout Mode" />
-
-## Angular データ凡例のスタイル設定
-
-<ApiLink type="DataLegend" /> は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティの名前は、**Title**、**Label**、**Value**、または **Units** で始まります。テキストの色、フォント、余白のスタイルを設定できます。たとえば、すべての列のテキストの色を設定する場合は、<ApiLink type="CategoryChart" member="titleTextColor" label="TitleTextColor" />、<ApiLink type="DataLegend" member="labelTextColor" label="LabelTextColor" />、<ApiLink type="DataLegend" member="valueTextColor" label="ValueTextColor" />、および <ApiLink type="DataLegend" member="unitsTextColor" label="UnitsTextColor" /> プロパティを設定します。次の例は、上記のスタイル設定プロパティの使用法を示しています:
-
-<Sample src="/charts/financial-chart/data-legend-styling-props" height={450} alt="Angular データ凡例のスタイル設定" />
-
-## Angular データ凡例値の書式設定
-
-<ApiLink type="DataLegend" /> は、<ApiLink type="DataLegend" member="valueFormatAbbreviation" label="ValueFormatAbbreviation" /> プロパティを使用して、大きな数値の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。<ApiLink type="DataLegend" member="valueFormatMinFractions" label="ValueFormatMinFractions" /> および <ApiLink type="DataLegend" member="valueFormatMaxFractions" label="ValueFormatMaxFractions" /> を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。
-次の例は、これらのプロパティの使用方法を示しています:
-
-<Sample src="/charts/category-chart/data-legend-formatting-decimals" height={450} alt="Angular データ凡例の小数の書式設定" />
-
-## Angular データ凡例の値モード
-
-<ApiLink type="DataLegend" member="valueFormatMode" label="ValueFormatMode" /> プロパティを変更することにより、<ApiLink type="DataLegend" /> 内の値のデフォルトの 10 進表示を通貨表示に変更することができます。また、<ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" /> プロパティにカルチャ タグを設定することで、表示される通貨記号のカルチャを変更できます。たとえば、次のデータ凡例の例では、<ApiLink type="DataLegend" member="valueFormatCulture" label="ValueFormatCulture" /> が 「en-GB」 に設定されており、英国ポンド (£) の記号が表示されています:
-
-<Sample src="/charts/financial-chart/data-legend-formatting-currency" height={450} alt="Angular 通貨の書式設定" />
-
-## Angular データ凡例のグループ化
-
-<ApiLink type="Series" member="dataLegendGroup" label="DataLegendGroup" /> は、すべてのタイプのシリーズで、データ凡例内のシリーズ グループを分類する文字列に設定できます。各グループには、別のシリーズ グループが表示される前に、独自の集計行が表示されます。
-デフォルトでは、DataLegend はグループ名を非表示にしますが、<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティを true に設定するとグループ名を表示できます。
-
-<Sample src="/charts/data-chart/data-legend-grouping" height={450} alt="Angular データ凡例のグループ化" />
-
-## Angular データ凡例のスタイル設定とイベント
-
-凡例のグループ化部分を含むいくつかのプロパティが公開されています。
-
-- <ApiLink type="DataLegend" member="groupRowMargin" label="GroupRowMargin" />
-- <ApiLink type="DataLegend" member="groupTextMargin" label="GroupTextMargin" />
-- <ApiLink type="DataLegend" member="groupTextColor" label="GroupTextColor" />
-- <ApiLink type="DataLegend" member="groupTextFontSize" label="GroupTextFontSize" />
-- <ApiLink type="DataLegend" member="groupTextFontFamily" label="GroupTextFontFamily" />
-- <ApiLink type="DataLegend" member="groupTextFontStyle" label="GroupTextFontStyle" />
-- <ApiLink type="DataLegend" member="groupTextFontStretch" label="GroupTextFontStretch" />
-- <ApiLink type="DataLegend" member="groupTextFontWeight" label="GroupTextFontWeight" />
-- <ApiLink type="DataLegend" member="headerTextMargin" label="HeaderTextMargin" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="headerTextFontSize" label="HeaderTextFontSize" />
-- <ApiLink type="DataLegend" member="headerTextFontFamily" label="HeaderTextFontFamily" />
-- <ApiLink type="DataLegend" member="headerTextFontStyle" label="HeaderTextFontStyle" />
-- <ApiLink type="DataLegend" member="headerTextFontStretch" label="HeaderTextFontStretch" />
-- <ApiLink type="DataLegend" member="headerTextFontWeight" label="HeaderTextFontWeight" />
-
-<ApiLink type="DataLegend" /> には、値が更新されているマウス操作中であっても、対応する行を描画するときに発生するいくつかのイベントがあります。それらのイベントを、その使用目的とあわせて以下に示します:
-
-- <ApiLink type="DataLegend" member="styleGroupRow" label="StyleGroupRow" />: このイベントは、グループ行に表示されるテキストのスタイルを設定するために、グループごとに発生します。
-- <ApiLink type="DataLegend" member="styleHeaderRow" label="StyleHeaderRow" />: このイベントは、ヘッダー行を描画するときに発生します。
-- <ApiLink type="DataLegend" member="styleSeriesRow" label="StyleSeriesRow" />: このイベントは、シリーズの行ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。
-- <ApiLink type="DataLegend" member="styleSeriesColumn" label="StyleSeriesColumn" />: このイベントは、シリーズの列ごとに 1 回発生し、シリーズの値の条件付きスタイル設定を可能にします。
-- <ApiLink type="DataLegend" member="styleSummaryRow" label="StyleSummaryRow" />: このイベントは、集計行を描画するときに 1 回発生します。
-- <ApiLink type="DataLegend" member="styleSummaryColumn" label="StyleSummaryColumn" />: このイベントは、集計列を描画するときに 1 回発生します。
-
-一部のイベントは、引数として <ApiLink type="DataLegendStylingRowEventArgs" /> パラメーターを公開します。これにより、各項目のテキスト、テキストの色、および行の全体的な可視性をカスタマイズできます。イベント引数は、イベント固有のプロパティも公開します。たとえば、`StyleSeriesRow` イベントはシリーズごとに発生するため、イベント引数は、シリーズを表す行の、シリーズ インデックスとシリーズ タイトルを返します。
-
-`StyleSummaryColumn` および `SeriesStyleColumn` イベントは、シリーズ内の各フィールドをカスタマイズするために、引数として <ApiLink type="DataLegendStylingColumnEventArgs" /> パラメーターを公開します。イベント引数は、列インデックスや値メンバーなどの列に関するプロパティに関連するイベント固有のプロパティも公開します。
-
-<Sample src="/charts/data-chart/data-legend-styling" height={450} alt="Angular データ凡例のスタイル設定" />
-
-## API リファレンス
-
-<ApiLink type="DataLegend" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx
deleted file mode 100644
index 7a6f14e393..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-selection.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: "Angular チャートのデータの選択 | データ視覚化ツール | インフラジスティックス"
-description: インフラジスティックスの Ignite UI for Angular チャートでデータの選択をお試しください!
-keywords: "Angular charts, chart data, selection, data selection, Ignite UI for Angular, Infragistics, Angular チャート, チャート データ, 選択, データの選択, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "Legend", "CategoryChart", "FinancialChart", "DataLegend", "DataToolTipLayer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Angular データ チャートの Ignite UI for Angular 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャートの選択
-
-Angular データ チャートの Ignite UI for Angular 選択機能を使用すると、ユーザーはチャート内の単一または複数のシリーズを対話的に選択、ハイライト表示、アウトライン表示したり、その逆の選択を解除したりできます。これにより、提示されたデータをユーザーがより意味のある方法で操作するさまざまな可能性が提供されます。
-
-## 選択の設定
-
-デフォルトの動作 <ApiLink type="DataChart" member="selectionMode" label="SelectionMode" /> はオフになっており、次のいずれかのオプションを選択する必要があります。`{ComponentName}` に使用可能な選択モードがいくつかあります。
-
-- **Auto**
-- **None**
-- **Brighten**
-- **FadeOthers**
-- **GrayscaleOthers**
-- **FocusColorThickOutline**
-- **FocusColorOutline**
-- **SelectionColorThickOutline**
-- **SelectionColorOutline**
-- **FocusColorFill**
-- **SelectionColorFill**
-- **ThickOutline**
-
-`Brighten` は選択した項目をフェードアウトしますが、`FadeOthers` は反対の効果を引き起こします。
-`GrayscaleOthers` は `FadeOthers` と同様に動作しますが、シリーズの残りの部分にはグレー色を表示します。これは <ApiLink type="DataChart" member="selectionBrush" label="SelectionBrush" /> 設定をオーバーライドすることに注意してください。
-`SelectionColorOutline` と `SelectionColorThickOutline` はシリーズの周囲に境界線を描画します。
-
-併せて、どの項目を選択するかをより細かく制御できる <ApiLink type="DataChart" member="selectionBehavior" label="SelectionBehavior" /> も利用できます。Auto のデフォルトの動作は `PerSeriesAndDataItemMultiSelect` です。
-
-- **Auto**
-- **PerDataItemMultiSelect**
-- **PerDataItemSingleSelect**
-- **PerSeriesAndDataItemMultiSelect**
-- **PerSeriesAndDataItemSingleSelect**
-- **PerSeriesAndDataItemGlobalSingleSelect**
-- **PerSeriesMultiSelect**
-- **PerSeriesSingleSelect**
-
-## Color Fill (塗りつぶし) による選択の設定
-
-次の例は、`SelectionColorFill` と `Auto` の両方の選択動作の組み合わせ、つまり `PerSeriesAndDataItemMultiSelect` を示しています。塗りつぶしは、シリーズ項目全体の背景色を変更するため、便利な視覚的な合図を提供します。各項目をクリックすると、項目が緑から紫に変わります。
-
-<Sample src="/charts/category-chart/selection-modes" height={450} alt="Angular カテゴリ チャートの選択モードの例" />
-
-## 複数選択の構成
-
-その他の選択モードでは、さまざまな選択方法が提供されます。たとえば、`PerDataItemMultiSelect` とともに <ApiLink type="DataChart" member="selectionBehavior" label="SelectionBehavior" /> を使用すると、複数のシリーズが存在する場合にカテゴリ全体のすべてのシリーズに影響し、カテゴリ間での選択が可能になります。`PerDataItemSingleSelect` と比較すると、一度に選択できるのは 1 つのカテゴリの項目のみです。これは、複数のシリーズが異なるデータ ソースにバインドされている場合に役立ち、カテゴリ間の選択をより細かく制御できます。
-`PerSeriesAndDataItemGlobalSingleSelect` を使用すると、一度にすべてのカテゴリで単一のシリーズを選択できます。
-
-<Sample src="/charts/category-chart/selection-multiple-modes" height={450} alt="Angular カテゴリ チャートの選択の複数モードの例" />
-
-## アウトライン選択の構成
-
-<ApiLink type="DataChart" member="focusBrush" label="FocusBrush" /> を適用すると、<ApiLink type="DataChart" member="selectionMode" label="SelectionMode" /> プロパティがフォーカス オプションの 1 つに設定されている場合に、選択されたシリーズが境界線付きで表示されます。
-
-## ラジアル シリーズの選択
-
-この例では、各ラジアル シリーズを異なる色で選択できる <ApiLink type="DataChart" /> を介した別のシリーズ タイプを示します。
-
-<Sample src="/charts/data-chart/radial-column-chart-selection" height={450} alt="Angular ラジアル縦棒チャートの複数モード選択の例" />
-
-## プログラムによる選択
-チャートの選択項目は、起動時や実行時にチャートの選択項目を表示するようにコードで設定することもできます。これは、<ApiLink type="CategoryChart" /> の `SelectedSeriesCollection` に項目を追加することで実現できます。<ApiLink type="ChartSelection" /> オブジェクトの <ApiLink type="ChartSelection" member="matcher" label="Matcher" /> プロパティを使用すると、「マッチャー」に基づいてシリーズを選択できます。これはチャートから実際のシリーズにアクセスできない場合に最適です。データ ソースに含まれるプロパティがわかっていれば、シリーズが使用される `ValueMemberPath` を使用できます。
-
-マッチャーは、<ApiLink type="DataChart" /> のように実際のシリーズにアクセスできない場合、<ApiLink type="CategoryChart" /> などのチャートで使用するのに最適です。この場合、データ ソースに含まれるプロパティがわかっていれば、シリーズに含まれる ValueMemberPaths を推測できます。たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズをハイライト表示する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを <ApiLink type="DataChart" member="selectedSeriesItems" label="SelectedSeriesItems" /> コレクションに追加できます。
-
-たとえば、データ ソースに Nuclear、Coal、Oil、Solar という数値プロパティがある場合、これらのプロパティごとにシリーズが作成されていることがわかります。Solar 値にバインドされたシリーズを選択する場合は、次のプロパティが設定されたマッチャーを使用して、ChartSelection オブジェクトを SelectedSeriesItems コレクションに追加できます。
-
- <Sample src="/charts/category-chart/selection-matcher" height={500} alt="Angular 選択マッチャー" />
-
-## API リファレンス
-
-以下は上記のセクションで説明した API メンバーのリストです。
-
-| <ApiLink type="CategoryChart" /> プロパティ                    | <ApiLink type="DataChart" /> プロパティ |
-| ----------------------------------------------|---------------------------|
-|                                               |                           |
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx b/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx
deleted file mode 100644
index fb61d8c768..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-data-tooltip.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: "Angular チャート データ ツールチップ | データ視覚化ツール | インフラジスティックス"
-description: データ ツールチップ レイヤーで Infragistics Ignite UI for Angular チャートをお試しください!
-keywords: "Angular charts, chart legend, legend, legend types, Ignite UI for Angular, Infragistics, Angular チャート, チャート凡例, 凡例, 凡例タイプ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "Legend", "CategoryChart", "FinancialChart", "DataLegend", "DataToolTipLayer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular では、DataToolTip は、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import layoutMode from '@xplat-images/general/layout_mode.png';
-
-# Angular チャート データ ツールチップ
-
-Ignite UI for Angular では、**DataToolTip** は、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。さらに、シリーズの行と値の列をフィルタリングし、値をスタイル設定し、書式を設定するための <ApiLink type="DataLegend" /> の多くの構成プロパティを提供します。このツールチップ タイプは、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> コンポーネントのプロット領域内でマウスを動かすと更新されます。
-
-## Angular データ ツールチップのプロパティ
-
-<ApiLink type="DataToolTipLayer" /> のすべてのプロパティには **DataToolTip** のプレフィックスが付けられ、<ApiLink type="CategoryChart" /> および <ApiLink type="FinancialChart" /> コンポーネントの API で公開されます。ただし、ラジアル チャート、極座標チャート、散布図で使用する場合は、<ApiLink type="DataToolTipLayer" /> のインスタンスを作成し、それを <ApiLink type="DataChart" /> コンポーネントのシリーズ コレクションに追加する必要があります。
-
-## Angular データ ツールチップの要素
-
-**DataToolTip** は、3 種類の行と 4 種類の列のセットを使用してコンテンツを表示します。
-
-### Angular データ ツールチップの行
-
-**DataToolTip** の行には、ヘッダー行、シリーズ行、および集計行が含まれます。
-
-ヘッダー行には、ホバーされたポイントの軸ラベルが表示され、<ApiLink type="CategoryChart" member="dataToolTipHeaderText" label="DataToolTipHeaderText" /> プロパティを使用して変更できます。
-
-シリーズ行は、実際には、チャートにプロットされた各シリーズに対応する行のセットにすることができます。これらの行には、凡例バッジ、シリーズ タイトル、シリーズの実際の値 / 省略値、および指定されている場合は省略記号と単位が表示されます。
-
-最後に、すべてのシリーズ値の合計を表示する集計行があります。デフォルトの集計タイトルは、凡例の <ApiLink type="CategoryChart" member="dataToolTipSummaryTitleText" label="DataToolTipSummaryTitleText" /> プロパティを使用して変更できます。また、<ApiLink type="CategoryChart" member="dataToolTipSummaryType" label="DataToolTipSummaryType" /> プロパティを使用して、シリーズ値の合計、最小、最大、または平均を集計行に表示するかどうかをカスタマイズできます。
-
-次の例は、集計が適用されたデータ ツールチップを示しています。
-
-<Sample src="/charts/category-chart/data-tooltip" height={450} alt="Angular カテゴリ チャート データ ツールチップの例" />
-
-### Angular データ ツールチップの列
-
-<ApiLink type="DataToolTipLayer" /> の列には、タイトル、ラベル、値、および単位の列が含まれます。チャートの各シリーズには、凡例の <ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> または <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> コレクションに応じて、ラベル、値、および単位の複数の列を含めることができます。
-
-タイトル列には、チャートにプロットされた各 <ApiLink type="DataChart" member="Series" label="Series" /> の <ApiLink type="DataChart" member="chartTitle" label="Title" /> プロパティに由来する凡例バッジとシリーズ タイトルが表示されます。
-
-ラベル列には、ツールチップの <ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> または <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> コレクション内のさまざまなプロパティパスの名前または省略形が表示されます。
-
-値の列には、一連の値が省略形のテキストとして表示されます。この省略形は、<ApiLink type="CategoryChart" member="dataToolTipValueFormatAbbreviation" label="DataToolTipValueFormatAbbreviation" /> プロパティを使用して書式設定でき、このプロパティを `Auto` または `Shared` に設定することですべての数値に同じ省略形を適用できます。または、ユーザーは `Independent`、`Kilo`、`Million` などの他の省略形を選択できます。省略値の精度は、最小桁数と最大桁数にそれぞれ <ApiLink type="CategoryChart" member="dataToolTipValueFormatMinFractions" label="DataToolTipValueFormatMinFractions" /> と <ApiLink type="CategoryChart" member="dataToolTipValueFormatMaxFractions" label="DataToolTipValueFormatMaxFractions" /> を使用して制御されます。
-
-単位の列には、省略記号や単位のテキストが表示されます。これらは、すべての列に <ApiLink type="CategoryChart" member="dataToolTipUnitsText" label="DataToolTipUnitsText" /> を設定するか、チャートの各系列で次のプロパティを使用して、**DataToolTip** で設定できます:
-
-- カテゴリ シリーズ (例: ColumnSeries):
-  - ValueMemberAsLegendUnit="K"
-- 財務物価シリーズ:
-  - OpenMemberAsLegendUnit="K"
-  - LowMemberAsLegendUnit="K"
-  - HighMemberAsLegendUnit="K"
-  - CloseMemberAsLegendUnit="K"
-- 範囲シリーズ:
-  - LowMemberAsLegendUnit="K"
-  - HighMemberAsLegendUnit="K"
-- ラジアル シリーズ:
-  - ValueMemberAsLegendUnit="km"
-- 極座標シリーズ:
-  - RadiusMemberAsLegendUnit="km"
-  - AngleMemberAsLegendUnit="degrees"
-
-上記のプロパティには、前述のラベル列のテキストを決定するための **MemberAsLegendLabel** で終わる対応するプロパティがあります。
-
-<ApiLink type="CategoryChart" member="dataToolTipIncludedColumns" label="DataToolTipIncludedColumns" /> および <ApiLink type="CategoryChart" member="dataToolTipExcludedColumns" label="DataToolTipExcludedColumns" /> コレクションに含まれる列は、通常、基になるデータ項目の値パスに対応しますが、ファイナンシャル シリーズには、正しくプロットするために必要な `High`、`Low`、`Open`、`Close` パス、および、いくつかの特別なパスを含めるオプションがあります 。ツールチップ内に `TypicalPrice`、`Change`、および `Volume` オプションを表示することができます。
-
-次の例は、Open、High、Low、Close、および Change の列が追加されたデータ ツールチップを示しています。
-
-<Sample src="/charts/financial-chart/data-tooltip" height={450} alt="Angular ファイナンシャル チャート データ ツールチップの例" />
-
-## Angular データ チャートのデータ ツールチップのグループ化
-
-<ApiLink type="DataToolTipLayer" member="dataLegendGroup" label="DataLegendGroup" /> は、すべてのタイプのシリーズで、データ凡例内のシリーズ グループを分類する文字列に設定できます。各グループには、別のシリーズ グループが表示される前に、独自の集計行が表示されます。デフォルトでは、DataLegend はグループ名を非表示にしますが、<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティを true に設定するとグループ名を表示できます。データ ツールチップ レイヤーで <ApiLink type="DataToolTipLayer" member="groupingMode" label="GroupingMode" /> を 「Grouped」 に設定し、<ApiLink type="DataLegend" member="labelDisplayMode" label="LabelDisplayMode" /> を 「Visible」 に設定する必要があります。
-
-<Sample src="/charts/data-chart/data-tooltip-grouping" height={450} alt="Angular データ ツールチップのグループ化" />
-
-## Angular カテゴリ チャート & ファイナンシャル チャートのデータ ツールチップのグループ化と配置
-
-<ApiLink type="CategoryChart" member="dataToolTipGroupingMode" label="DataToolTipGroupingMode" /> プロパティを `Grouped` または `Individual` に設定して、複数のシリーズのコンテンツを 1 つのツールチップにグループ化するか、各シリーズのコンテンツを複数のツールチップに分割することができます。`Grouped` モードでは、<ApiLink type="CategoryChart" member="dataToolTipGroupedPositionModeX" label="DataToolTipGroupedPositionModeX" /> プロパティと <ApiLink type="CategoryChart" member="dataToolTipGroupedPositionModeY" label="DataToolTipGroupedPositionModeY" /> プロパティを設定することにより、ツールチップが表示される場所をカスタマイズできます。これにより、ツールチップの水平方向と垂直方向の配置を、マウス位置に最も近いシリーズ ポイントに追従させるか、プロット領域の端に固定するかをカスタマイズできます。
-
-次の例は、チャートの右上に配置されたデータ ツールチップを示しています。
-
-<Sample src="/charts/category-chart/data-tooltip-positioning" height={450} alt="Angular カテゴリ チャート データツールチップの配置の例" />
-
-## Angular データ ツールチップ値の書式設定
-
-**DataToolTip** は、その <ApiLink type="CategoryChart" member="dataToolTipValueFormatAbbreviation" label="DataToolTipValueFormatAbbreviation" /> プロパティを使用して、大きな数の自動省略形を提供します。これにより、単位の列に kilo、million、billion などの乗数が追加されます。<ApiLink type="CategoryChart" member="dataToolTipValueFormatMinFractions" label="DataToolTipValueFormatMinFractions" /> および <ApiLink type="CategoryChart" member="dataToolTipValueFormatMaxFractions" label="DataToolTipValueFormatMaxFractions" /> を設定することにより、表示される小数桁数をカスタマイズできます。これにより、小数点以下に表示される最小桁数と最大桁数をそれぞれ決定できます。
-
-次の例は、最小分数と最大分数が設定された **DataToolTip** を示しています。
-
-<Sample src="/charts/category-chart/data-tooltip-formatting-decimals" height={450} alt="Angular カテゴリ チャート データ ツールチップの小数の書式設定" />
-
-## Angular データ ツールチップの値モード
-
-レイヤーの <ApiLink type="CategoryChart" member="dataToolTipValueFormatMode" label="DataToolTipValueFormatMode" /> プロパティを変更することにより、**DataToolTip** 内の値のデフォルトの 10 進表示を通貨表示に変更できます。**DataToolTip** は、<ApiLink type="CategoryChart" member="dataToolTipValueFormatCulture" label="DataToolTipValueFormatCulture" /> プロパティを使用し、対応するカルチャ タグに設定することにより、表示されている通貨記号のカルチャを変更する機能も公開します。たとえば、次のサンプルは、<ApiLink type="CategoryChart" member="dataToolTipValueFormatCulture" label="DataToolTipValueFormatCulture" /> が 「en-GB」 に設定されたチャートを示しています。
-
-<Sample src="/charts/financial-chart/data-tooltip-formatting-currency" height={450} alt="Angular ファイナンシャル チャート データ ツールチップの通貨の書式設定" />
-
-## レイアウト モード
-
-凡例項目は、<ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティを使って垂直または表形式の構造に配置できます。デフォルト値は `Table` で、以前のリリースと同じ外観と操作性を維持します。
-
-例:
-<Image src={layoutMode} alt="Layout Mode" />
-
-<Image src={layoutMode} alt="Layout Mode" />
-
-## Angular データ ツールチップのスタイル設定
-
-**DataToolTip** は、各タイプの列をスタイル設定するためのプロパティを提供します。これらの各プロパティ名は、Title、Label、Value、Units で始まり、テキストの色、フォント、およびマージンのスタイルを設定できます。たとえば、これらのそれぞれのテキストの色を設定する場合は、<ApiLink type="CategoryChart" member="dataToolTipTitleTextColor" label="DataToolTipTitleTextColor" />、<ApiLink type="CategoryChart" member="dataToolTipLabelTextColor" label="DataToolTipLabelTextColor" />、<ApiLink type="CategoryChart" member="dataToolTipValueTextColor" label="DataToolTipValueTextColor" />、および <ApiLink type="CategoryChart" member="dataToolTipUnitsTextColor" label="DataToolTipUnitsTextColor" /> プロパティを設定します。
-
-次の例は、上記のスタイル設定プロパティの使用法を示しています:
-
-<Sample src="/charts/financial-chart/data-tooltip-styling-props" height={450} alt="Angular ファイナンシャル チャート データ ツールチップのスタイル設定" />
-
-ツールチップのグループ化部分を含むいくつかのプロパティが公開されています。
-
-- <ApiLink type="DataLegend" member="groupTextMargin" label="GroupTextMargin" />
-- <ApiLink type="DataLegend" member="groupTextColor" label="GroupTextColor" />
-- <ApiLink type="DataLegend" member="groupTextFontSize" label="GroupTextFontSize" />
-- <ApiLink type="DataLegend" member="groupTextFontFamily" label="GroupTextFontFamily" />
-- <ApiLink type="DataLegend" member="groupTextFontStyle" label="GroupTextFontStyle" />
-- <ApiLink type="DataLegend" member="groupTextFontStretch" label="GroupTextFontStretch" />
-- <ApiLink type="DataLegend" member="groupTextFontWeight" label="GroupTextFontWeight" />
-- <ApiLink type="DataLegend" member="headerTextMargin" label="HeaderTextMargin" />
-- <ApiLink type="DataLegend" member="headerTextColor" label="HeaderTextColor" />
-- <ApiLink type="DataLegend" member="headerTextFontSize" label="HeaderTextFontSize" />
-- <ApiLink type="DataLegend" member="headerTextFontFamily" label="HeaderTextFontFamily" />
-- <ApiLink type="DataLegend" member="headerTextFontStyle" label="HeaderTextFontStyle" />
-- <ApiLink type="DataLegend" member="headerTextFontStretch" label="HeaderTextFontStretch" />
-- <ApiLink type="DataLegend" member="headerTextFontWeight" label="HeaderTextFontWeight" />
-
-## API リファレンス
-
-<ApiLink type="DataToolTipLayer" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="FinancialChart" /><br />
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-highlight-filter.mdx b/docs/angular/src/content/jp/components/charts/features/chart-highlight-filter.mdx
deleted file mode 100644
index 2ed2f4063d..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-highlight-filter.mdx
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: "Angular チャートのハイライト表示フィルター | データ可視化 | インフラジスティックス"
-description: Infragistics の Angular チャートのハイライト表示フィルター
-keywords: "Angular Charts, Highlighting, Filtering, Infragistics, Angular チャート, ハイライト表示, フィルターリング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart", "DataChart", "Series", "HighlightedValuesDisplayMode"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular チャート コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータハイライト表示オーバーレイをサポートしています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャートのハイライト表示フィルター
-
-Ignite UI for Angular チャート コンポーネントは、プロットされたデータのサブセットを表示できるようにすることで、これらのチャートにプロットされた系列の視覚化を強化できるデータハイライト表示オーバーレイをサポートしています。これを有効にすると、列シリーズおよびエリア シリーズ タイプの場合は不透明度を下げて全体セットが表示され、線シリーズ タイプの場合は破線が表示されることで、データのサブセットがハイライト表示されます。これは、データセットの目標値と実際の値などを視覚化するのに役立ちます。以下の例で、この機能を説明します。
-
-<Sample src="/charts/data-chart/chart-highlight-filter-multiple-series" height={500} alt="Angular ハイライト表示フィルターの例" />
-
-データハイライト表示機能は <ApiLink type="DataChart" /> および <ApiLink type="CategoryChart" /> でサポートされていますが、これらのコントロールの動作の性質上、それぞれ異なる方法で構成されることに注意してください。ただし、この機能で変わらない点は、ハイライト表示を表示したい場合は <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> プロパティを `Overlay` に設定する必要があることです。以下では、ハイライト表示フィルター機能のさまざまな設定について説明します。
-
-## DataChart でのハイライト表示フィルターの使用
-
-<ApiLink type="DataChart" /> では、ハイライト表示フィルター API の多くは主に、ハイライト表示するデータのサブセットを表すコレクションに <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> プロパティを設定することによって、シリーズ自体で発生します。<ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> 内の項目の数は、ハイライト表示するシリーズの <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> にバインドされているデータの数と一致する必要があります。カテゴリ シリーズの場合は、デフォルトでハイライト表示パスとして定義した `ValueMemberPath` が使用されます。このページの上部にあるサンプルでは、​​<ApiLink type="DataChart" /> の <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> を使用してオーバーレイを表示しています。
-
-シリーズの <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> と <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> の間でスキーマが一致しない場合は、シリーズの `HighlightedValueMemberPath` プロパティを使用してこれを構成できます。さらに、シリーズ自体の <ApiLink type="CategoryChart" member="DataSource" label="ItemsSource" /> をハイライト表示ソースとして使用し、サブセットを表すデータ項目にパスを設定したい場合は、これを行うことができます。これは、<ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" /> を提供せずに、`HighlightedValueMemberPath` プロパティをそのパスに設定するだけで行われます。
-
-列およびエリア シリーズ の場合の不透明度の低減は、シリーズの <ApiLink type="Series" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" /> プロパティを設定することで構成できます。オーバーレイをまったく表示したくない場合は、<ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> プロパティを `Hidden` に設定することもできます。
-
-ハイライト表示フィルターによって表示されるシリーズの部分は、チャートの凡例レイヤーとツールチップ レイヤーに個別に表示されます。<ApiLink type="Series" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" /> を設定することで、ツールチップと凡例に表示されるタイトルを構成できます。これにより、指定した値がシリーズの <ApiLink type="CategoryChart" member="chartTitle" label="Title" /> の末尾に追加されます。
-
-<ApiLink type="DataLegend" /> または <ApiLink type="DataToolTipLayer" /> を使用すると、ハイライト表示されたシリーズがグループ化されて表示されます。これは、シリーズの <ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" /> プロパティを設定してシリーズを適切に分類することで管理できます。
-
-次の例は、<ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" /> を使用した <ApiLink type="DataChart" /> コントロール内のデータ凡例のグループ化とデータ ハイライト オーバーレイ機能の使用法を示しています。
-
-<Sample src="/charts/data-chart/data-legend-grouping-and-highlighting" height={500} alt="Angular データ凡例のグループ化のハイライト表示の例" />
-
-次の例は、<ApiLink type="Series" member="highlightedValuesDataLegendGroup" label="HighlightedValuesDataLegendGroup" /> を使用した <ApiLink type="DataChart" /> コントロール内のデータ ツールチップのグループ化とデータ ハイライト オーバーレイ機能の使用法を示しています。
-
-<Sample src="/charts/data-chart/data-tooltip-grouping-and-highlighting" height={500} alt="Angular データ ツールチップのグループ化のハイライト表示の例" />
-
-次の例は、<ApiLink type="ColumnSeries" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" /> を使用した <ApiLink type="DataChart" /> コントロール内のデータハイライト表示オーバーレイ機能の使用法を示しています。
-
-<Sample src="/charts/data-chart/chart-highlight-filter" height={500} alt="Angular ハイライト表示フィルターの例" />
-
-## CategoryChart でのハイライト表示フィルターの使用
-
-<ApiLink type="CategoryChart" /> ハイライト表示フィルターは、<ApiLink type="CategoryChart" member="initialHighlightFilter" label="InitialHighlightFilter" /> プロパティを設定することによってチャート上で発生します。<ApiLink type="CategoryChart" /> は、デフォルトで、基になるデータ項目のすべてのプロパティを考慮します。そのため、データのサブセットをフィルタリングできるようにデータをグループ化および集計できるように、チャート上でも <ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" /> を定義する必要があります。<ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" /> を基になるデータ項目の値パスに設定して、重複した値を持つパスでグループ化することができます。
-
-<ApiLink type="DataChart" /> と同様に、<ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> プロパティも <ApiLink type="CategoryChart" /> で公開されます。オーバーレイを表示したくない場合は、このプロパティを `Hidden` に設定できます。
-
-以下の例は、<ApiLink type="CategoryChart" /> コントロール内でのデータハイライト表示オーバーレイ機能の使用法を示しています。
-
-<Sample src="/charts/category-chart/chart-highlight-filter" height={500} alt="Angular ハイライト表示フィルターの例" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、次のトピックを参照してください。
-
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャートのデータ ツールチップ](chart-data-tooltip.md)
-- [チャートのデータ集計](chart-data-aggregations.md)
-
-## API リファレンス
-
-以下は上記のセクションで説明した API メンバーのリストです。
-
-| <ApiLink type="CategoryChart" /> プロパティ                       | <ApiLink type="DataChart" /> プロパティ |
-| ----------------------------------------------|---------------------------|
-| <ApiLink type="CategoryChart" member="highlightedDataSource" label="HighlightedItemsSource" />        | <ApiLink type="Series" member="highlightedDataSource" label="HighlightedItemsSource" />  |
-| <ApiLink type="CategoryChart" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" />        | <ApiLink type="Series" member="highlightedTitleSuffix" label="HighlightedTitleSuffix" />  |
-| <ApiLink type="CategoryChart" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />    | <ApiLink type="ColumnSeries" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />     |
-| <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />  | <ApiLink type="Series" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />   |
-| <ApiLink type="CategoryChart" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" />  | <ApiLink type="Series" member="highlightedValuesFadeOpacity" label="HighlightedValuesFadeOpacity" />   |
-| <ApiLink type="CategoryChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />  | <ApiLink type="Series" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />   |
-| <ApiLink type="CategoryChart" member="initialHighlightFilter" label="InitialHighlightFilter" />        |  |
-| <ApiLink type="CategoryChart" member="initialGroups" label="InitialGroups" />                 |  |
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-highlighting.mdx b/docs/angular/src/content/jp/components/charts/features/chart-highlighting.mdx
deleted file mode 100644
index 5c695177e9..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-highlighting.mdx
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: "Angular チャートのハイライト表示 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャートのハイライト表示
-keywords: "Angular Charts, Highlighting, Infragistics, Angular チャート, ハイライト表示, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "すべての Angular チャートは、さまざまなハイライト表示オプションをサポートしています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-## Angular チャートのハイライト表示の例
-
-以下の例は、Angular チャートで使用できるさまざまなハイライト表示オプションを示しています。
-
-<Sample src="/charts/category-chart/annotations-highlighting" height={500} alt="Angular チャートのハイライト表示の例" />
-
-# Angular チャートのハイライト表示モードと動作
-
-すべての Angular チャートは、さまざまなハイライト表示オプションをサポートしています。<ApiLink type="CategoryChart" member="highlightingMode" label="HighlightingMode" /> は、プロット領域に描画されたシリーズ/データ項目にマウスを合わせたときに明るくまたはフェードするように設定できます。<ApiLink type="CategoryChart" member="highlightingBehavior" label="HighlightingBehavior" /> は、ハイライト表示の効果をトリガーするために、直接または最も近いデータ項目に設定できます。ハイライト表示のモードと動作は、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。
-
-以下の例は、<ApiLink type="CategoryChart" member="highlightingMode" label="HighlightingMode" /> Angular チャートを示しています。
-
-<Sample src="/charts/category-chart/highlighting-mode" height={500} alt="Angular ハイライト表示モードの例" />
-
-以下の例は、<ApiLink type="CategoryChart" member="highlightingBehavior" label="HighlightingBehavior" /> Angular チャートを示しています。
-
-<Sample src="/charts/category-chart/highlighting-behavior" height={500} alt="Angular ハイライト表示モードの例" />
-
-# Angular チャート凡例のハイライト表示
-
-すべての Angular チャートは、凡例のハイライト表示をサポートしています。<ApiLink type="CategoryChart" member="legendHighlightingMode" label="LegendHighlightingMode" /> を有効にすると、マウスが凡例マーカー項目にカーソルを合わせると、描画されたシリーズがプロット領域でハイライト表示されます。凡例のハイライト表示は、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> コントロールでサポートされており、ハイライト表示機能を使用するための同じ API を備えています。
-
-以下の例は、凡例シリーズハイライト表示の Angular チャートを示しています。
-
-<Sample src="/charts/category-chart/legend-highlighting" height={500} alt="Angular ハイライト表示モードの例" />
-
-## ハイライト表示レイヤー
-
-Ignite UI for Angular <ApiLink type="CategoryChart" /> は、データ項目にカーソルを合わせると 3 種類のハイライト表示を有効にできます。
-
-1. シリーズ ハイライトは、ポインターがデータ ポイント上ある場合に、マーカーまたは列で表される単一のデータ ポイントをハイライトします。これは、<ApiLink type="CategoryChart" member="isSeriesHighlightingEnabled" label="IsSeriesHighlightingEnabled" /> プロパティを true に設定することで有効になります。
-
-2. 項目ハイライトは、その位置に縞模様の図形を描画したりマーカーを描画したりすることでシリーズの項目をハイライト表示します。これは、<ApiLink type="CategoryChart" member="isItemHighlightingEnabled" label="IsItemHighlightingEnabled" /> プロパティを true に設定することで有効になります。
-
-3. カテゴリ ハイライトはすべてのカテゴリ軸を対象にします。カーソル位置に最も近い軸領域を照らす図形を描画します。これは、<ApiLink type="CategoryChart" member="isCategoryHighlightingEnabled" label="IsCategoryHighlightingEnabled" /> プロパティを true に設定することで有効になります。
-
-以下の例は、Angular チャートで使用できるさまざまなハイライト表示レイヤーを示しています。
-
-<Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="Angular ハイライト表示の例" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [チャート アニメーション](chart-animations.md)
-- [チャート注釈](chart-annotations.md)
-- [チャート ツールチップ](chart-tooltips.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="FinancialChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-markers.mdx b/docs/angular/src/content/jp/components/charts/features/chart-markers.mdx
deleted file mode 100644
index 9621304971..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-markers.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title: "Angular チャート マーカー | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート マーカー
-keywords: "Angular Charts, Markers, Marker Size, Infragistics, Angular チャート, マーカー, マーカー サイズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart", "CategoryChartType", "MarkerType", "MarkerSeries", "ScatterLineSeries", "ScatterSplineSeries", "ScatterSeries", "LineSeries", "SplineSeries", "MarkerAutomaticBehavior", "SeriesViewer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular マーカーは、カテゴリ チャートのプロット領域にデータ ポイントの値を表示する視覚要素です。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-
-# Angular チャート マーカー
-
-Ignite UI for Angular マーカーは、カテゴリ チャートのプロット領域にデータ ポイントの値を表示する視覚要素です。値が主グリッド線と副グリッド線の間にある場合も指定したデータ ポイントの値をただちに識別できるようユーザーをサポートします。
-
-## Angular チャート マーカーの例
-
-次の例では、[折れチャート](../types/line-chart.md)は、2009 年から 2019 年までのヨーロッパ、中国、および米国の国々の再生可能エネルギーの発電量を比較しています。マーカーが <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> プロパティを <ApiLink type="MarkerType" member="Circle" label="Circle" /> 列挙値に設定して有効になっています。
-
-マーカーのカラーは、以下のサンプルの <ApiLink type="CategoryChart" member="markerBrushes" label="MarkerBrushes" />プロパティと <ApiLink type="CategoryChart" member="markerOutlines" label="MarkerOutlines" /> プロパティを設定することによっても管理されます。このサンプルでは、ドロップダウンを使用してマーカーと <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> を構成できます。
-
-<Sample src="/charts/category-chart/marker-options" height={500} alt="Angular 構成オプションの例" />
-
-## Angular チャート マーカー サイズ
-
-<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> プロパティをマーカーをサポートするシリーズに設定することで、データ ポイント マーカーのデバイス非依存ピクセル寸法を正確に制御できます。これにより、マーカー テンプレートやスタイルに関係なく、マーカーが画面上に表示される大きさを正確に制御できます。
-
-デフォルトでは、マーカーのサイズはシリーズのマーカー テンプレートによって決まります。<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> に特定の数値を設定すると、そのシリーズのすべてのマーカーがその正確なデバイス非依存ピクセルの幅と高さでレンダリングされます。<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> を `NaN` に戻すと、デフォルトのテンプレート駆動のサイズ設定が復元されます。
-
-<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> プロパティは、<ApiLink type="MarkerSeries" /> から派生するすべてのシリーズ タイプ (<ApiLink type="LineSeries" />、<ApiLink type="SplineSeries" />、<ApiLink type="AreaSeries" />、<ApiLink type="ColumnSeries" />、<ApiLink type="ScatterSeries" />、<ApiLink type="ScatterLineSeries" />、<ApiLink type="ScatterSplineSeries" />、極座標/放射状シリーズ タイプなど) で使用できます。
-
-次のコード例は、<ApiLink type="DataChart" /> コントロールの <ApiLink type="ScatterLineSeries" /> で <ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> を 30 デバイス非依存ピクセルに設定する方法を示しています。
-
-マーカーをデフォルトのテンプレート駆動サイズにリセットするには、<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> を `NaN` に設定します (またはマークアップで属性を削除します)。
-
-次のサンプルは、インタラクティブなエディターを使用して散布図シリーズで <ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> を示しています。
-
-<Sample src="/charts/data-chart/scatter-marker-options" height={500} alt="Angular チャート マーカー サイズの例" />
-
-<DocsAside type="info">
-<ApiLink type="BubbleSeries" /> の場合、<ApiLink type="MarkerSeries" member="markerSize" label="MarkerSize" /> プロパティはバブルの半径をオーバーライドしません。バブルの半径は、半径データ列と <ApiLink type="BubbleSeries" member="radiusScale" label="RadiusScale" /> によって制御されます。バブルのサイズは、データとスケールの構成によって完全に決まります。
-</DocsAside>
-
-## Angular チャート チェックマーク マーカー タイプ
-
-Ignite UI for Angular チャートは、<ApiLink type="MarkerSeries" member="markerType" label="MarkerType" /> 列挙型に `Checkmark` オプションを含んでいます。このマーカーは、チャートのデータ ポイントに円の中に V 字型のチェックマーク アイコンを描画します。
-
-`Checkmark` マーカー タイプを個々のシリーズに適用するには、シリーズの <ApiLink type="MarkerSeries" member="markerType" label="MarkerType" /> プロパティを `MarkerType.Checkmark` に設定します。チャート内のすべてのシリーズに同時にチェックマーク形状を使用するには、チャートの <ApiLink type="CategoryChart" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> プロパティを `MarkerAutomaticBehavior.Checkmark` に設定します。
-
-`SeriesViewer.CheckmarkMarkerTemplate` プロパティは、チェックマーク マーカー タイプを持つシリーズに使用されるマーカー テンプレートを定義し、チャート全体の外観をカスタマイズするために使用できます。
-
-## Angular チャート マーカー テンプレート
-
-以下の例に示すように、マーカー プロパティに加えて、<ApiLink type="CategoryChart" /> コントロールで描画されたシリーズの <ApiLink type="CategoryChart" member="markerTemplate" label="MarkerTemplate" /> プロパティに関数を設定することで、独自のマーカーを実装できます。
-
-<Sample src="/charts/category-chart/marker-templates" height={600} alt="Angular チャート マーカーのテンプレート" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx b/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx
deleted file mode 100644
index c99f7d5bb7..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-navigation.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: "Angular  データ チャート | データ可視化ツール | ナビゲーション | インフラジスティックス"
-description: インフラジスティックスの Angular チャートをナビゲートするには、マウスまたはタッチを使用して左右にパンし、水平および垂直にズームします。Ignite UI for Angular のグラフ ナビゲーション機能について説明します。
-keywords: "Angular charts, data chart, navigation, Ignite UI for Angular, Infragistics, Angular チャート, データ チャート, ナビゲーション, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "CategoryChart", "FinancialChart", "ModifierKeys"]
-_language: ja
-
-namespace: Infragistics.Controls.Charts
-llms:
-  description: "Ignite UI for Angular チャートを使用すると、マウス、キーボード、およびタッチを介してインタラクティブなパンやズームが可能になります。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート ナビゲーション
-
-Ignite UI for Angular チャートを使用すると、マウス、キーボード、およびタッチを介してインタラクティブなパンやズームが可能になります。
-
-## Angular チャート ナビゲーションの例
-
-次の例は、使用可能なすべてのパンやズームのオプションを示しています。ボタンを使用して例を操作したり、ドロップダウンまたはチェックボックスを使用して目的のオプションを選択したりできます。
-
-<Sample src="/charts/data-chart/chart-navigation" height={600} alt="Angular ナビゲーションの例" />
-
-このサンプルが気に入りましたか?完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。<a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">無料でダウンロードできます。</a>
-
-## ユーザー インタラクションによるチャート ナビゲーション
-
-ズームがデフォルトでオンになっているかどうかは、使用しているチャートによって異なります。<ApiLink type="CategoryChart" /> を使用している場合、デフォルトでオンになっていますが、<ApiLink type="DataChart" /> ではオフです。+UI でナビゲーションを有効または無効にするには、ズームを無効にする方向に応じて、チャートの <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> プロパティおよび/または <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> プロパティを設定する必要があります。
-
-またマウスやタッチでズームまたはパンニングできます。チャートの <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> プロパティは、マウスクリック イベントやタッチ イベントで何が起こるかを決定します。このプロパティはデフォルトで `DragZoom` に設定されており、ズームを有効に設定すると、クリックしてドラッグした際にプロット領域の上に四角形のプレビューが配置され、グラフのズーム領域になります。この <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> プロパティは、パンニングを許可する場合は `DragPan`、これらの操作を禁止する場合は `None` に設定することもできます。
-
-## タッチ、マウスとキーボードによるチャート ナビゲーション
-
-Angular データ チャートのナビゲーションは、タッチ、マウスまたはキーボードのいずれかを使用して発生します。以下の操作は、デフォルトで以下のタッチ、マウスまたはキーボード操作を使用して呼び出すことができます。
-
-- **パン**: キーボードの <kbd>🡐</kbd> <kbd>🡒</kbd> <kbd>🡑</kbd> <kbd>🡓</kbd> 矢印キーを使用するか、<kbd>SHIFT</kbd> キーを押したまま、マウスでクリックしてドラッグするか、タッチで指を押して移動します。
-- **ズームイン**: キーボードの <kbd>PAGE UP</kbd> キーを使用するか、マウスホイールを上に回転させるか、ピンチしてタッチでズームインします。
-- **ズームアウト**: キーボードの <kbd>PAGE DOWN</kbd> キーを使用するか、マウスホイールを下に回転させるか、ピンチしてタッチでズームアウトします。
-- **チャート プロット領域に合わせる**: キーボードのホームキーを使用します。これに対するマウスまたはタッチ操作はありません。
-- **領域ズーム**: <ApiLink type="DataChart" member="defaultInteraction" label="DefaultInteraction" /> プロパティをデフォルトの `DragZoom` に設定して、プロット領域内でマウスをクリックしてドラッグします。
-
-ズーム操作とパン操作は、それぞれ <ApiLink type="DataChart" member="dragModifier" label="DragModifier" /> プロパティと <ApiLink type="DataChart" member="panModifier" label="PanModifier" /> プロパティを設定し、修飾キーを使用して有効にすることもできます。これらのプロパティは以下の修飾キーに設定することができ、押すと対応する操作が実行されます。
-
-| 修飾値 | 対応するキー |
-| ---------------|------------------ |
-| `Shift`        | <kbd>SHIFT</kbd> |
-| `Control`      | <kbd>CTRL</kbd> |
-| `Windows`      | <kbd>WIN</kbd> |
-| `Apple`        | <kbd>APPLE</kbd> |
-| `None`         | なし |
-
-## スクロールバーを使用したチャート ナビゲーション
-
-チャートは、<ApiLink type="DataChart" member="verticalViewScrollbarMode" label="VerticalViewScrollbarMode" /> プロパティと <ApiLink type="DataChart" member="horizontalViewScrollbarMode" label="HorizontalViewScrollbarMode" /> プロパティを有効にすることでスクロールできます。
-
-これらは、次のオプションに構成できます:
-
-- `Persistent` - チャートがズームインされている限り、スクロールバーは常に表示されたままになり、完全にズームアウトされるとフェードアウトします。
-- `Fading` - スクロールバーは使用後に消え、マウスがその位置に近づくと再び表示されます。
-- `FadeToLine` - ズームを使用していないときは、スクロールバーが細い線に縮小されます。
-- `None` - 既定値で、スクロールバーは表示されません。
-
-次の例は、スクロールバーを有効にする方法を示しています。
-
-<Sample src="/charts/financial-chart/scrollbars" height={600} alt="Angular ナビゲーションの例" />
-
-## コードによるチャート ナビゲーション
-
-<DocsAside type="info" title="情報">
-チャートのコード ナビゲーションは、<ApiLink type="DataChart" /> コントロールにのみ使用できます。
-</DocsAside>
-
-Angular データ チャートは、チャートでズームまたはパン操作が行われるたびに更新されるいくつかのナビゲーション プロパティを提供します。各プロパティは、チャートでズームやパンニングするためにコードで設定できます。以下は、これらのプロパティの一覧です。
-
-- <ApiLink type="DataChart" member="windowPositionHorizontal" label="WindowPositionHorizontal" />: コンテンツ ビュー長方形の X 部分を表す数値は、チャートで表示されます。
-- <ApiLink type="DataChart" member="windowPositionVertical" label="WindowPositionVertical" />: 数値は、チャートに表示されるコンテンツビュー四角形のの Y 部分を表します。
-- <ApiLink type="DataChart" member="windowRect" label="WindowRect" />: 長方形を表す <ApiLink type="Rect" /> オブジェクトは、現在ビューにあるチャート部分を表します。例えば、<ApiLink type="DataChart" member="windowRect" label="WindowRect" /> の "0, 0, 1, 1" はチャート全体になります。
-- <ApiLink type="DataChart" member="windowScaleHorizontal" label="WindowScaleHorizontal" />: チャートで表示されるコンテンツ ビュー長方形の幅部分を表す数値。
-- <ApiLink type="DataChart" member="windowScaleVertical" label="WindowScaleVertical" />: チャートで表示されるコンテンツ ビュー長方形の高さ部分を表す数値。
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャート ツールチップ](chart-tooltips.md)
-- [チャート トレンドライン](chart-trendlines.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="FinancialChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx
deleted file mode 100644
index e3f4cdf9d2..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-overlays.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: "Angular チャート オーバーレイ | データ可視化ツール | 値オーバーレイ | インフラジスティックス"
-description: "Ignite UI for Angular チャート コントロールの値オーバーレイ機能を使用して、単一の数値に水平線または垂直線を配置します。Ignite UI for Angular グラフ タイプについて説明します。"
-keywords: "Angular charts, data chart, value overlay, Ignite UI for Angular, Infragistics, Angular チャート, データ チャート, 値オーバーレイ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "ValueOverlay", "CategoryChart", "FinancialChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Angular DataChart を使用すると、ValueOverlay を使用して定義した単一の数値で水平線または垂直線を配置できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular チャートのオーバーレイ
-
-Angular <ApiLink type="DataChart" /> を使用すると、<ApiLink type="ValueOverlay" /> を使用して定義した単一の数値で水平線または垂直線を配置できます。特定のシリーズの平均値や中央値などのデータを視覚化するのに役立ちます。
-
-## Angular 値オーバーレイの例
-
-次の例は、いくつかの水平値オーバーレイがプロットされた[縦棒チャート](../types/column-chart.md)を示しています。
-
-<Sample src="/charts/data-chart/series-value-overlay" height={600} alt="Angular 値オーバーレイの例" />
-
-## Angular 値オーバーレイのプロパティ
-
-データバインディングに <ApiLink type="DataSource" /> を使用する他のシリーズ タイプとは異なり、値オーバーレイは <ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> プロパティを使用して単一の数値をバインドします。さらに、値オーバーレイでは、使用する単一の <ApiLink type="ValueOverlay" member="axis" label="Axis" /> を定義する必要があります。X 軸を使用する場合、値のオーバーレイは垂直線になり、Y 軸を使用する場合は、水平線になります。
-
-数値の X 軸または Y 軸を使用する場合、<ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> プロパティは、値のオーバーレイを描画する軸上の実際の数値を反映する必要があります。カテゴリ X または Y 軸を使用する場合、<ApiLink type="ValueOverlay" member="valueMemberPath" label="ValueMemberPath" /> は、値オーバーレイを表示するカテゴリのインデックスを反映する必要があります。
-
-数値オーバーレイを角度角軸で使用すると、チャートの中心からの線として表示され、半径半径軸を使用すると、円として表示されます。
-
-<ApiLink type="ValueOverlay" /> appearance properties are inherited from <ApiLink type="DataChart" member="Series" label="Series" /> and so <ApiLink type="ValueOverlay" member="brush" label="Brush" /> and <ApiLink type="ValueOverlay" member="thickness" label="Thickness" /> for example are available and work the same way they do with other types of series.
-
-<ApiLink type="ValueOverlay" /> 外観プロパティは、<ApiLink type="DataChart" member="Series" label="Series" /> から継承されているため、例えば <ApiLink type="ValueOverlay" member="brush" label="Brush" /> と <ApiLink type="ValueOverlay" member="thickness" label="Thickness" /> を使用でき、他のタイプのシリーズと同じように機能します。
-
-## Angular 値レイヤー
-
-Angular チャート コンポーネントは、値の線を使用して、最小値、最大値、平均値などのデータのさまざまな焦点を示す機能も公開します。
-
-<ApiLink type="CategoryChart" /> および <ApiLink type="FinancialChart" /> コンポーネントに <ApiLink type="ValueLayer" /> を適用するには、チャート上で <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> プロパティを設定します。このプロパティは、<ApiLink type="ValueLayerValueMode" /> 列挙体のコレクションを受け取ります。複数の <ApiLink type="ValueLayerValueMode" /> 列挙をチャートの <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、同じチャート内で複数の値レイヤーを組み合わせたりできます。
-
-<ApiLink type="DataChart" /> では、これは、チャートの <ApiLink type="DataChart" member="Series" label="Series" /> コレクションに <ApiLink type="ValueLayer" /> を追加し、次に <ApiLink type="ValueLayer" member="valueMode" label="ValueMode" /> プロパティを <ApiLink type="ValueLayerValueMode" /> 列挙の 1 つに設定することによって行われます。これらの各列挙とその意味を以下に示します。
-
-- <ApiLink type="ValueLayerValueMode" member="Auto" label="Auto" />: <ApiLink type="ValueLayerValueMode" /> 列挙体のデフォルト値モード。
-- <ApiLink type="ValueLayerValueMode" member="Average" label="Average" />: 複数の値の線を適用して、チャートにプロットされた各系列の平均値を呼び出します。
-- <ApiLink type="ValueLayerValueMode" member="GlobalAverage" label="GlobalAverage" />: 単一の値線を適用して、チャート内のすべての系列値の平均を呼び出します。
-- <ApiLink type="ValueLayerValueMode" member="GlobalMaximum" label="GlobalMaximum" />: 単一の値線を適用して、チャート内のすべての系列値の絶対最大値を呼び出します。
-- <ApiLink type="ValueLayerValueMode" member="GlobalMinimum" label="GlobalMinimum" />: 単一の値線を適用して、チャート内のすべての系列値の絶対最小値を呼び出します。
-- <ApiLink type="ValueLayerValueMode" member="Maximum" label="Maximum" />: チャートにプロットされた各系列の最大値を示すために、複数の値線を適用する可能性があります。
-- <ApiLink type="ValueLayerValueMode" member="Minimum" label="Minimum" />: チャートにプロットされた各系列の最小値を示すために、複数の値線を適用する可能性があります。
-
-<ApiLink type="ValueLayer" /> 要素を使用するときに特定のシリーズが考慮されないようにする場合は、レイヤーに <ApiLink type="ValueLayer" member="targetSeries" label="TargetSeries" /> プロパティを設定できます。これにより、レイヤーは定義したシリーズを強制的にターゲットにするようになります。単一の <ApiLink type="DataChart" /> 内に必要な数の <ApiLink type="ValueLayer" /> 要素を含めることができます。
-
-次のサンプルは、<ApiLink type="CategoryChart" /> 内のさまざまな <ApiLink type="CategoryChart" member="valueLines" label="ValueLines" /> の使用法を示しています。
-
-<Sample src="/charts/category-chart/value-lines" height={600} alt="Angular 値線の例" />
-
-## Angular ファイナンシャル オーバーレイ
-
-Angular [株価チャート](../types/stock-chart.md)に組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。
-
-## チャート オーバーレイ テキスト <Badge variant="preview" />
-
-Angular <ApiLink type="ValueOverlay" />、<ApiLink type="ValueLayer" />、およびすべてのデータ注釈レイヤーは、DataChart コンポーネントのプロット領域内にカスタム オーバーレイ テキストを描画できます。このオーバーレイ テキストを使用すると、レイヤーとの関係において、x 軸上の重要なイベント (例: 企業の四半期決算) または y 軸上の重要な値に注釈を付けることができます。
-
-たとえば、<ApiLink type="DataAnnotationSliceLayer" />、<ApiLink type="ValueOverlay" />、<ApiLink type="ValueLayer" /> を使用してオーバーレイ テキストを表示できます。
-
-<Sample src="/charts/data-chart/data-annotation-multiple-with-overlay-text" height={600} alt="Angular 複数のオーバーレイ テキスト" />
-
-### オーバーレイ テキストのスタイル設定
-
-このコード例は、<ApiLink type="DataAnnotationSliceLayer" />、<ApiLink type="ValueOverlay" />、および <ApiLink type="ValueLayer" /> 上のオーバーレイ テキストのスタイルを設定およびカスタマイズする方法を示しています。
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [チャート注釈](chart-annotations.md)
-- [縦棒チ株価チャートャート](../types/area-chart.md)
-- [折れ線チャート](../types/line-chart.md)
-- [株価チャート](../types/stock-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="ValueOverlay" /><br />
-<ApiLink type="ValueLayer" /><br />
-<ApiLink type="ValueLayerValueMode" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="FinancialChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx b/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx
deleted file mode 100644
index bc493fbe22..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-performance.mdx
+++ /dev/null
@@ -1,368 +0,0 @@
----
-title: "Angular チャート パフォーマンス | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート パフォーマンス
-keywords: "Angular Charts, Performance, Infragistics, Angular チャート, パフォーマンス, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "FinancialChart", "DataChart", "FinancialChartVolumeType", "FinancialChartZoomSliderType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Angular チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート パフォーマンス
-
-Angular チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。このトピックでは、Angular チャートをアプリケーションで可能な限り高速に機能させる方法について説明します。
-
-## Angular チャート パフォーマンスの例
-
-次の例は、Angular チャートの 2 つの高性能シナリオを示しています。
-
-## 高頻度 Angular チャート
-
-高頻度シナリオでは、Angular チャートは、リアルタイムまたは指定されたミリ秒間隔で更新されるデータ項目を描画できます。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。次のサンプルは、高頻度シナリオでの <ApiLink type="CategoryChart" /> を示しています。
-
-<Sample src="/charts/category-chart/high-frequency" height={400} alt="Angular 高頻度 Angular チャート" />
-
-## 大量のデータの Angular チャート
-
-大量データのシナリオでは、Angular チャートは 100 万のデータ ポイントを描画できますが、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにチャートはスムーズなパフォーマンスを提供し続けます。次のサンプルは、大量データのシナリオでの <ApiLink type="CategoryChart" /> を示しています。
-
-<Sample src="/charts/category-chart/high-volume" height={400} alt="Angular 大量のデータの Angular チャート" />
-
-## 一般的なパフォーマンス ガイドライン
-
-このセクションでは、Angular チャートのオーバーヘッドと処理の更新に追加されるガイドラインとチャート機能を一覧表示します。
-
-### データ サイズ
-
-多数のデータ ポイント (10,000 以上など) を含むデータ ソースをプロットする必要がある場合は、その目的のために特別にデザインされた次のタイプのシリーズのいずれかで Angular <ApiLink type="DataChart" /> を使用することをお勧めします。
-
-- [カテゴリ ポイント チャート](../types/point-chart.md) や[散布マーカー チャート](../types/scatter-chart.md#angular-散布マーカー-チャート) の代わりに[散布高密度チャート](../types/scatter-chart.md#angular-散布高密度チャート)
-- [カテゴリ折れ線チャート](../types/line-chart.md#angular-折れ線チャートの例) や[散布折れ線チャート](../types/scatter-chart.md#angular-散布折れ線チャート) の代わりに[散布ポリライン チャート](../types/shape-chart.md#angular-散布ポリライン-チャート)
-- [カテゴリ エリア チャート](../types/area-chart.md#angular-エリア-チャートの例) や[縦棒チャート](../types/column-chart.md#angular-縦棒チャートの例) の代わりに[散布ポリゴン チャート](../types/shape-chart.md#angular-散布ポリゴン-チャート)
-
-### データ構造
-
-Angular チャートは、データ ポイントの配列の配列を <ApiLink type="DataSource" /> プロパティにバインドすることにより、複数のデータ ソースの描画をサポートします。複数のデータ ソースが単一のデータ ソースにフラット化され、各データ項目に 1 つのデータ列だけでなく複数のデータ列が含まれる場合、チャートははるかに高速になります。例えば:
-
-```ts
-this.CategoryChart.dataSource = FlattenDataSource.create();
-this.FinancialChart.dataSource = FlattenDataSource.create();
-
-export class FlattenDataSource {
-    public static create(): any[] {
-        const data: any[] = [];
-        data.push({ "Year": "1996", "USA": 148, "CHN": 110 });
-        data.push({ "Year": "2000", "USA": 142, "CHN": 115 });
-        return data;
-    }
-}
-// instead of this data structure:
-export class MultiDataSources {
-    public static create(): any[] {
-        const dataSource1: any[] = [];
-        dataSource1.push({ "Year": "1996", "Value": 148 });
-        dataSource1.push({ "Year": "2000", "Value": 142 });
-        const dataSource2: any[] = [];
-        dataSource2.push({ "Year": "1996", "Value": 110 });
-        dataSource2.push({ "Year": "2000", "Value": 115 });
-        const multipleSources: any[] = [dataSource1, dataSource2];
-        return multipleSources;
-    }
-}
-```
-
-### データ フィルタリング
-
-Angular <ApiLink type="CategoryChart" /> および <ApiLink type="FinancialChart" /> コントロールには、データを分析して一連のチャートを生成するデータ アダプターが組み込まれています。ただし、<ApiLink type="DomainChart" member="includedProperties" label="IncludedProperties" /> と <ApiLink type="DomainChart" member="excludedProperties" label="ExcludedProperties" /> を使用して、実際に描画するデータ列のみをフィルタリングすると、より高速に動作します。例:
-
-```ts
-this.Chart.includedProperties = [ "Year", "USA", "RUS" ];
-this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
-```
-
-## チャート パフォーマンス ガイドライン
-
-### チャート タイプ
-
-[折れ線チャート](../types/line-chart.md)などの単純なチャート タイプは、データ ポイント間のスプライン線の補間が複雑であるため、[スプライン チャート](../types/spline-chart.md)を使用するよりもパフォーマンスが速くなります。したがって、Angular <ApiLink type="CategoryChart" /> の <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティまたは <ApiLink type="FinancialChart" /> コントロールを使用して、描画が高速なチャートのタイプを選択する必要があります。または、Angular <ApiLink type="DataChart" /> コントロールで、シリーズのタイプをより高速なシリーズに変更することもできます。
-
-次の表に、チャートの各グループで、パフォーマンスが速いものから遅いものの順にチャートのタイプを示します。
-
-| チャート グループ     | チャート タイプ |
-| ----------------|--------------------------------- |
-| 円チャート       | - [円チャート](../types/pie-chart.md) <br /> - [ドーナツ チャート](../types/donut-chart.md) <br /> - [ラジアル円チャート](../types/radial-chart.md#angular-ラジアル円チャート) <br /> |
-| 折れ線チャート      | - [カテゴリ折れ線チャート](../types/line-chart.md#angular-カテゴリ折れ線チャート) <br /> - [カテゴリ スプライン チャート](../types/spline-chart.md#angular-カテゴリ-スプライン-チャート) <br /> - [ステップ折れ線チャート](../types/step-chart.md#angular-ステップ折れ線チャート) <br /> - [ラジアル折れ線チャート](../types/radial-chart.md#angular-ラジアル折れ線チャート) <br /> - [極座標折れ線チャート](../types/polar-chart.md#angular-極座標型折れ線チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.md#angular-散布折れ線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.md#angular-散布ポリライン-チャート) (\*)  <br /> - [散布等高線チャート](../types/scatter-chart.md#angular-散布等高線チャート) <br /> - [積層型折れ線チャート](../types/stacked-chart.md#angular-積層型折れ線チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.md#angular-積層型-100-折れ線チャート) <br /> |
-| エリア チャート      | - [カテゴリ エリア チャート](../types/area-chart.md#angular-エリア-チャートの例) <br /> - [ステップ エリア チャート](../types/step-chart.md#angular-ステップ-エリア-チャート) <br /> - [範囲エリア チャート](../types/area-chart.md#angular-範囲エリア-チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.md#angular-ラジアル-エリア-チャート) <br /> - [極座標エリア チャート](../types/polar-chart.md#angular-極座標エリア-チャート) <br /> - [散布ポリゴン チャート](../types/shape-chart.md#angular-散布ポリゴン-チャート) (\*) <br /> - [散布エリア チャート](../types/scatter-chart.md#angular-散布エリア-チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.md#angular-積層型エリア-チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.md#angular-積層型-100-エリア-チャート) <br /> |
-| 縦棒チャート    | - [縦棒チャート](../types/column-chart.md#angular-縦棒チャートの例) <br /> - [棒チャート](../types/bar-chart.md#angular-棒チャートの例) <br /> - [ウォーターフォール チャート](../types/column-chart.md#angular-ウォーターフォール-チャート) <br /> - [範囲縦棒チャート](../types/column-chart.md#angular-範囲縦棒チャート) <br /> - [範囲棒チャート](../types/bar-chart.md#angular-範囲棒チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.md#angular-ラジアル縦棒チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.md#angular-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.md#angular-積層型棒チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.md#angular-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.md#angular-積層型-100-棒チャート) |
-| スプライン チャート    | - [カテゴリ スプライン チャート](../types/spline-chart.md#angular-スプライン-チャートの例) <br /> - [極座標スプライン チャート](../types/polar-chart.md#angular-極座標スプラインーチャート) <br /> - [散布スプライン チャート](../types/scatter-chart.md#angular-散布スプライン-チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.md#angular-積層型スプライン-チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.md#angular-積層型-100-スプライン-チャート) <br /> |
-| ポイント チャート     | - [カテゴリ ポイント チャート](../types/point-chart.md) <br /> - [散布高密度チャート](../types/scatter-chart.md#angular-散布高密度チャート)  <br /> - [散布マーカー チャート](../types/scatter-chart.md#angular-散布マーカー-チャート) <br /> - [散布バブル チャート](../types/bubble-chart.md) <br /> - [極座標型マーカーチャート](../types/polar-chart.md#angular-極座標型マーカー-チャート) <br /> |
-| ファイナンシャル チャート | - [折れ線モードの株価チャート](../types/stock-chart.md) <br /> - [縦棒モードの株価チャート](../types/stock-chart.md) <br /> - [棒モードの株価チャート](../types/stock-chart.md) <br /> - [ローソク足モードの株価チャート](../types/stock-chart.md) <br /> - [オーバーレイ付き株価チャート](../types/stock-chart.md) <br /> - [ズーム ペイン付き株価チャート](../types/stock-chart.md#ズーム-ペイン) <br /> - [ボリューム ペイン付き株価チャート](../types/stock-chart.md#ボリューム-ペイン) <br /> - [インジケーター ペイン付き株価チャート](../types/stock-chart.md#インジケーター-ペイン) <br /> |
-| 散布図   | - [散布高密度チャート](../types/scatter-chart.md#angular-散布高密度チャート) <br /> - [散布マーカー チャート](../types/scatter-chart.md#angular-散布マーカー-チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.md#angular-散布折れ線チャート) <br /> - [散布バブル チャート](../types/bubble-chart.md) <br /> - [散布スプライン チャート](../types/scatter-chart.md#angular-散布スプライン-チャート) <br /> - [散布エリア チャート](../types/scatter-chart.md#angular-散布エリア-チャート) <br /> - [散布等高線チャート](../types/scatter-chart.md#angular-散布等高線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.md#angular-散布ポリライン-チャート) (\*) <br /> - [散布ポリゴン チャート](../types/shape-chart.md#angular-散布ポリゴン-チャート) (\*) <br /> |
-| ラジアル チャート    | - [ラジアル折れ線チャート](../types/radial-chart.md#angular-ラジアル折れ線チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.md#angular-ラジアル-エリア-チャート) <br /> - [ラジアル円チャート](../types/radial-chart.md#angular-ラジアル円チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.md#angular-ラジアル縦棒チャート) <br /> |
-| 極座標チャート     | - [極座標型マーカー チャート](../types/polar-chart.md#angular-極座標型マーカー-チャート) <br /> - [極座標型折れ線チャート](../types/polar-chart.md#angular-極座標型折れ線チャート) <br /> - [極座標エリア チャート](../types/polar-chart.md#angular-極座標エリア-チャート) <br /> - [極座標スプライン チャート](../types/polar-chart.md#angular-極座標スプライン-チャート) <br /> - [極座標スプライン エリア チャート](../types/polar-chart.md#angular-極座標スプライン-エリア-チャート) <br /> |
-| 積層型チャート   | - [積層型折れ線チャート](../types/stacked-chart.md#angular-積層型折れ線チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.md#angular-積層型エリア-チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.md#angular-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.md#angular-積層型棒チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.md#angular-積層型スプライン-チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.md#angular-積層型-100-折れ線チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.md#angular-積層型-100-エリア-チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.md#angular-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.md#angular-積層型-100-棒チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.md#angular-積層型-100-スプライン-チャート) <br /> |
-
-\* チャートに多数のデータ ソースがバインドされている場合、[散布ポリゴン チャート](../types/shape-chart.md)と[散布ポリライン チャート](../types/shape-chart.md)のパフォーマンスは他のチャートよりも優れていることに注意してください。詳細については、[シリーズ コレクション](#シリーズ-コレクション)セクションを参照してください。それ以外の場合は、他のチャートのタイプの方が高速です。
-
-### チャート アニメーション
-
-[チャート アニメーション](chart-animations.md)を有効にすると、トランジションイン アニメーションを再生している間、Angular チャートの最終描画シリーズがわずかに遅れます
-
-### チャート注釈
-
-コールアウト注釈、十字線注釈、最終値注釈などの[チャート注釈](chart-annotations.md)を有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
-
-### チャートのハイライト表示
-
-[チャートのハイライト表示](chart-highlighting.md)を有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
-
-### チャート凡例
-
-凡例を Angular チャートに追加すると、凡例にマップされたシリーズまたはデータ項目のタイトルが実行時に頻繁に変更される場合、パフォーマンスが低下する可能性があります。
-
-### チャート マーカー
-
-Angular チャートでは、[チャート マーカー](chart-markers.md)はチャートのレイアウトの複雑さを増し、特定の情報を取得するためにデータ バインディングを実行するため、チャートのパフォーマンスに関しては特に手間がかかります。また、データ ポイントが多い場合、またはバインドされているデータ ソースが多い場合、マーカーはパフォーマンスを低下させます。したがって、マーカーが不要な場合は、チャートから削除する必要があります。
-
-以下のコード例は、Angular チャートからマーカーを削除する方法を示します。
-
-```ts
-// on CategoryChart or FinancialChart
-this.Chart.markerTypes.clear();
-this.Chart.markerTypes.add(MarkerType.None);
-
-// on LineSeries of DataChart
-this.LineSeries.markerType = MarkerType.None;
-
-```
-
-### チャートの解像度
-
-<ApiLink type="DomainChart" member="resolution" label="Resolution" /> プロパティをより大きな値に設定するとパフォーマンスは向上しますが、プロットされた系列の線のグラフィカルな忠実度は低下します。このようなわけで、忠実度が受け入れられなくなるまで値を大きくする可能性があります。
-
-このコード スニペットは、Angular チャートの解像度を下げる方法を示しています。
-
-```ts
-// on CategoryChart or FinancialChart:
-this.Chart.Resolution = 10;
-
-// on LineSeries of DataChart:
-this.LineSeries.Resolution = 10;
-
-```
-
-### チャート オーバーレイ
-
-[チャート オーバーレイ](chart-overlays.md)を有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
-
-### チャート トレンドライン
-
-[チャート トレンドライン](chart-trendlines.md)を有効にすると、Angular チャートのパフォーマンスがわずかに低下します。
-
-### 軸のタイプ
-
-データ ポイント間の時間間隔に基づくスペースが重要でない場合は、DateTime をサポートする x 軸の使用はお勧めしません。代わりに、順序/カテゴリ軸を使用する必要があります。これは、データを結合する方法がより効率的であるためです。また、順序/カテゴリ軸は、時間ベースの x 軸のようにデータのソートを実行しません。
-
-<DocsAside type="info" title="情報">
-<ApiLink type="CategoryChart" /> はすでに順序/カテゴリ軸を使用しているため、そのプロパティを変更する必要はありません。
-</DocsAside>
-
-このコード スニペットは、<ApiLink type="FinancialChart" /> および <ApiLink type="DataChart" /> コントロールで x 軸を順序付け/カテゴリ化する方法を示しています。
-
-```html
-<igx-financial-chart xAxisMode="Ordinal"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis label="Time"></igx-category-x-axis>
-</igx-data-chart>
-```
-
-### 軸の間隔
-
-デフォルトでは、Angular チャートは、データの範囲に基づいて <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> を自動的に計算します。したがって、軸のグリッド線と軸のラベルが多すぎないように、軸の間隔を特に小さい値に設定することは避けてください。また、多くの軸グリッド線または軸ラベルが必要ない場合は、<ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /> プロパティを自動的に計算された軸間隔よりも大きい値に増やすことを検討することをお勧めします。
-
-<DocsAside type="info" title="情報">
-チャートのパフォーマンスが低下するため、軸の副間隔を設定することはお勧めしません。
-</DocsAside>
-
-このコード スニペットは、Angular チャートで軸の主間隔を設定する方法を示しています。
-
-```html
-<igx-category-chart xAxisInterval="5" yAxisInterval="50"></igx-category-chart>
-
-<igx-financial-chart xAxisInterval="5" yAxisInterval="50"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" interval="5"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" interval="50"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### 軸スケール
-
-<ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> プロパティを false に設定すると、パフォーマンスを向上させるために推奨されます。対数目盛で軸範囲と軸ラベルの値を計算するよりも操作が少なくて済むためです。
-
-### 軸ラベルの表示状態
-
-マーカーと同じように、軸ラベルはテンプレートとバインドを使用し、データ コンテキストが頻繁に変更されるために、軸ラベルも負荷がかかります。ラベルを使用しない場合は、非表示にするか、間隔を長くして軸ラベルの数を減らす必要があります。
-
-このコード スニペットは、Angular チャートで軸ラベルを非表示にする方法を示しています。
-
-```html
-<igx-category-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
-</igx-category-chart>
-
-<igx-financial-chart xAxisLabelVisibility="Collapsed" yAxisLabelVisibility="Collapsed">
-</igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" labelVisibility="Collapsed"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" labelVisibility="Collapsed"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### 軸ラベルの省略形
-
-ただし、Angular チャートは、<ApiLink type="CategoryChart" member="yAxisAbbreviateLargeNumbers" label="YAxisAbbreviateLargeNumbers" /> が true に設定されている場合に、軸ラベルに表示される大きな数値 (10,000 以上など) の省略形をサポートします。代わりに、データ 項目の大きな値を公約数で除算して前処理し、<ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /> をデータ値の省略形に使用される約数を表す文字列に設定することをお勧めします。
-
-このコード スニペットは、Angular チャートで軸のタイトルを設定する方法を示しています。
-
-```html
-<igx-category-chart yAxisTitle="In millions of Dollars"></igx-category-chart>
-
-<igx-financial-chart yAxisTitle="In millions of Dollars"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-numeric-y-axis title="In millions of Dollars"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### 軸ラベルの範囲
-
-実行時に、Angular チャートは、最も長い値を持つラベルに基づいて、y 軸上のラベルの範囲を調整します。これにより、データの範囲やラベルを頻繁に更新する必要がある場合に、チャートのパフォーマンスが低下する可能性があります。そのため、チャート パフォーマンスを向上させるためにデザイン時にラベル範囲を設定することをお勧めします。
-
-次のコード スニペットは、Angular チャートの y 軸のラベルに固定されたラベル範囲を設定する方法を示します。
-
-```html
-<igx-category-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-category-chart>
-
-<igx-financial-chart xAxisLabelExtent="50" yAxisLabelExtent="50"></igx-financial-chart>
-
-<igx-data-chart>
-    <igx-category-x-axis name="xAxis" labelExtent="50"></igx-category-x-axis>
-    <igx-numeric-y-axis name="yAxis" labelExtent="50"></igx-numeric-y-axis>
-</igx-data-chart>
-```
-
-### 軸その他のビジュアル
-
-追加の軸ビジュアル (軸タイトルなど) を有効にしたり、デフォルト値を変更したりすると、Angular チャートのパフォーマンスが低下する可能性があります。
-
-たとえば、<ApiLink type="CategoryChart" /> または <ApiLink type="FinancialChart" /> コントロールでこれらのプロパティを変更します。
-
-| 軸ビジュアル          | X 軸プロパティ | Y 軸プロパティ |
-| ---------------------|-------------------|------------------- |
-| すべての軸ビジュアル      | <ApiLink type="CategoryChart" member="xAxisInterval" label="XAxisInterval" /><br />  <ApiLink type="CategoryChart" member="xAxisMinorInterval" label="XAxisMinorInterval" /> | <ApiLink type="CategoryChart" member="yAxisInterval" label="YAxisInterval" /><br />  <ApiLink type="CategoryChart" member="yAxisMinorInterval" label="YAxisMinorInterval" /> |
-| 軸目盛       | <ApiLink type="CategoryChart" member="xAxisTickStroke" label="XAxisTickStroke" /> <br />  <ApiLink type="CategoryChart" member="xAxisTickStrokeThickness" label="XAxisTickStrokeThickness" /><br />  <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /><br />  | <ApiLink type="CategoryChart" member="yAxisTickStroke" label="YAxisTickStroke" /> <br />  <ApiLink type="CategoryChart" member="yAxisTickStrokeThickness" label="YAxisTickStrokeThickness" /><br />  <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /><br /> |
-| 軸主グリッド線 | <ApiLink type="CategoryChart" member="xAxisMajorStroke" label="XAxisMajorStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisMajorStrokeThickness" label="XAxisMajorStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisMajorStroke" label="YAxisMajorStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisMajorStrokeThickness" label="YAxisMajorStrokeThickness" /><br /> |
-| 軸の副グリッド線 | <ApiLink type="CategoryChart" member="xAxisMinorStroke" label="XAxisMinorStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisMinorStrokeThickness" label="XAxisMinorStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisMinorStroke" label="YAxisMinorStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisMinorStrokeThickness" label="YAxisMinorStrokeThickness" /><br /> |
-| 軸主線       | <ApiLink type="CategoryChart" member="xAxisStroke" label="XAxisStroke" /><br />  <ApiLink type="CategoryChart" member="xAxisStrokeThickness" label="XAxisStrokeThickness" /><br />   | <ApiLink type="CategoryChart" member="yAxisStroke" label="YAxisStroke" /><br />  <ApiLink type="CategoryChart" member="yAxisStrokeThickness" label="YAxisStrokeThickness" /><br /> |
-| 軸タイトル          | <ApiLink type="CategoryChart" member="xAxisTitle" label="XAxisTitle" /><br />  <ApiLink type="CategoryChart" member="xAxisTitleAngle" label="XAxisTitleAngle" /><br />    | <ApiLink type="CategoryChart" member="yAxisTitle" label="YAxisTitle" /><br />  <ApiLink type="CategoryChart" member="yAxisTitleAngle" label="YAxisTitleAngle" /><br /> |
-| 軸ストリップ          | <ApiLink type="CategoryChart" member="xAxisStrip" label="XAxisStrip" /><br />   | <ApiLink type="CategoryChart" member="yAxisStrip" label="YAxisStrip" /><br /> |
-
-または、<ApiLink type="DataChart" /> コントロールの <ApiLink type="Axis" /> のプロパティを変更します。
-
-| 軸ビジュアル          | 軸プロパティ |
-| ---------------------|------------------- |
-| すべての軸ビジュアル     | `Interval`、`MinorInterval` |
-| 軸目盛       | <ApiLink type="Axis" member="tickStroke" label="TickStroke" /> 、<ApiLink type="Axis" member="tickStrokeThickness" label="TickStrokeThickness" />、<ApiLink type="Axis" member="tickLength" label="TickLength" /> |
-| 軸主グリッド線 | <ApiLink type="Axis" member="majorStroke" label="MajorStroke" />、<ApiLink type="Axis" member="majorStrokeThickness" label="MajorStrokeThickness" /> |
-| 軸の副グリッド線 | <ApiLink type="Axis" member="minorStroke" label="MinorStroke" />、<ApiLink type="Axis" member="minorStrokeThickness" label="MinorStrokeThickness" /> |
-| 軸主線       | <ApiLink type="Axis" member="stroke" label="Stroke" />、<ApiLink type="Axis" member="strokeThickness" label="StrokeThickness" /> |
-| 軸タイトル          | <ApiLink type="DomainChart" member="chartTitle" label="Title" />、`TitleAngle` |
-| 軸ストリップ         | <ApiLink type="Axis" member="strip" label="Strip" /> |
-
-## ファイナンシャル チャートのパフォーマンス
-
-上記のパフォーマンスガイドラインに加えて、Angular <ApiLink type="FinancialChart" /> コントロールには、パフォーマンスに影響を与える次の独自の機能があります。
-
-### Y 軸モード
-
-<ApiLink type="LineSeries" member="percentChange" label="PercentChange" /> モードを使用するよりも必要な操作が少ないため、パフォーマンスを向上させるには、<ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMode" /> オプションを `Numeric` に設定することをお勧めします。
-
-### チャート ペイン
-
-<ApiLink type="FinancialChart" member="indicatorTypes" label="IndicatorTypes" /> および <ApiLink type="FinancialChart" member="overlayTypes" label="OverlayTypes" /> オプションを使用して複数のペインを設定した場合、パフォーマンスが低下する可能性があり、少数の財務指標および単一の財務オーバーレイを使用することをお勧めします。
-
-### ズーム スライダー
-
-<ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> オプションを <ApiLink type="FinancialChartVolumeType" member="None" label="None" /> に設定すると、チャート パフォーマンスを向上し、その他のインジケーターおよびボリューム ペインのために垂直スペースを利用可能になります。
-
-### ボリューム タイプ
-
-<ApiLink type="FinancialChart" member="volumeType" label="VolumeType" /> プロパティの設定はチャート パフォーマンスに次の影響を与える可能性があります:
-
-- <ApiLink type="FinancialChartVolumeType" member="None" label="None" /> - ボリューム ペインが表示されないため、最も簡易です。
-- <ApiLink type="FinancialChartVolumeType" member="Line" label="Line" /> - 描画するのにより手間がかかるボリューム タイプです。データ ポイントの大量を描画するか、複数のデータ ソースをプロットする場合に使用することをお勧めします。
-- <ApiLink type="FinancialChartVolumeType" member="Area" label="Area" /> - <ApiLink type="FinancialChartVolumeType" member="Line" label="Line" /> ボリューム タイプより描画に手間がかかります。
-- <ApiLink type="FinancialChartVolumeType" member="Column" label="Column" /> - <ApiLink type="FinancialChartVolumeType" member="Area" label="Area" /> ボリューム タイプより描画に手間がかかります。1 つ ～ 3 つの株のボリューム データを描画する場合にお勧めします。
-
-## データ チャートのパフォーマンス
-
-一般的なパフォーマンス ガイドラインに加えて、Angular <ApiLink type="DataChart" /> コントロールには、パフォーマンスに影響を与える次の固有の機能があります。
-
-### 軸コレクション
-
-<ApiLink type="DataChart" /> コントロールの <ApiLink type="DataChart" member="Axes" label="Axes" /> コレクションに追加する軸が多すぎると、チャートのパフォーマンスが低下するため、シリーズ間で[軸の共有](chart-axis-layouts.md#軸共有の例)をお勧めします。
-
-### シリーズ コレクション
-
-また、Angular <ApiLink type="DataChart" /> コントロールの <ApiLink type="DataChart" member="Series" label="Series" /> コレクションに多くのシリーズを追加すると、各シリーズに独自の描画キャンバスがあるため、描画にオーバーヘッドが追加されます。これは、データ チャートに 10 を超えるシリーズがある場合に特に重要です。複数のデータ ソースを組み合わせてフラット化したデータ ソースにし ([データ構造](#データ構造)セクションを参照)、次のシリーズの条件付き書式設定機能を使用することをお勧めします。
-
-| パフォーマンスが低下するシナリオ | 条件付き書式設定を使用したより高速なシナリオ |
-| ----------------------------|---------------------------------------- |
-| <ApiLink type="LineSeries" /> の 10 以上        | 単一の <ApiLink type="ScatterLineSeries" /> |
-| <ApiLink type="LineSeries" /> の 20 以上           | 単一の <ApiLink type="ScatterPolylineSeries" /> |
-| <ApiLink type="ScatterLineSeries" /> の 10 以上  | 単一の <ApiLink type="ScatterPolylineSeries" /> |
-| <ApiLink type="PointSeries" /> の 10 以上       | 単一の <ApiLink type="ScatterSeries" /> |
-| <ApiLink type="PointSeries" /> の 20 以上       | 単一の <ApiLink type="HighDensityScatterSeries" /> |
-| <ApiLink type="ScatterSeries" /> の 20 以上     | 単一の <ApiLink type="HighDensityScatterSeries" /> |
-| <ApiLink type="AreaSeries" /> の 10 以上        | 単一の <ApiLink type="ScatterPolygonSeries" /> |
-| <ApiLink type="ColumnSeries" /> の 10 以上      | 単一の <ApiLink type="ScatterPolygonSeries" /> |
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](../types/area-chart.md)
-- [棒チャート](../types/bar-chart.md)
-- [バブル チャート](../types/bubble-chart.md)
-- [縦棒チャート](../types/column-chart.md)
-- [ドーナツ チャート](../types/donut-chart.md)
-- [円チャート](../types/pie-chart.md)
-- [ポイント チャート](../types/point-chart.md)
-- [極座標チャート](../types/polar-chart.md)
-- [ラジアル チャート](../types/radial-chart.md)
-- [シェープ チャート](../types/shape-chart.md)
-- [スプライン チャート](../types/spline-chart.md)
-- [散布図](../types/scatter-chart.md)
-- [積層型チャート](../types/stacked-chart.md)
-- [ステップ チャート](../types/step-chart.md)
-- [株価チャート](../types/stock-chart.md)
-- [チャート アニメーション](chart-animations.md)
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャート マーカー](chart-markers.md)
-- [チャート オーバーレイ](chart-overlays.md)
-- [チャート トレンドライン](chart-trendlines.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="FinancialChart" /><br />
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-synchronization.mdx b/docs/angular/src/content/jp/components/charts/features/chart-synchronization.mdx
deleted file mode 100644
index 75f2353079..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-synchronization.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: "Angular  Angular データ チャート | データ可視化ツール | 同期化 | インフラジスティックス"
-description: ズーム操作、パン操作および十字線イベントを含む複数のインフラジスティックスの Angular チャート コントロール間で同期します。Ignite UI for Angular のグラフ同期機能について説明します。
-keywords: "Angular charts, data chart, synchronization, Ignite UI for Angular, Infragistics, Angular チャート, データ チャート, 同期化, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "$ ProductName$ データ チャートを使用すると、複数のチャート間のズーム、パン、および十字線イベントの調整に関して同期をとることができます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート同期化
-
-$ ProductName$ データ チャートを使用すると、複数のチャート間のズーム、パン、および十字線イベントの調整に関して同期をとることができます。これは、データ ソースが軸に関して似ているか同じであると仮定して、複数のチャートの同じ領域を視覚化するのに役立ちます。
-
-## Angular チャート同期化の例
-
-このサンプルは、2 つの Angular データ チャートの同期を示しています。
-
-<Sample src="/charts/data-chart/chart-synchronization" height={600} alt="Angular チャート同期化の例" />
-
-## チャート同期化のプロパティ
-
-チャートの同期にはデフォルトで 4 つのオプションがあり、水平方向のみ、垂直方向のみ、その両方を同期、あるいは同期なしを選択することもできます。
-
-チャートのセットを同期する場合は、それらに <ApiLink type="DataChart" member="syncChannel" label="SyncChannel" /> プロパティに同じ名前を割り当ててから、<ApiLink type="DataChart" member="synchronizeHorizontally" label="SynchronizeHorizontally" /> と <ApiLink type="DataChart" member="synchronizeVertically" label="SynchronizeVertically" /> プロパティを対応するブール値に設定して、チャートを水平または垂直に同期するかどうかを指定できます。
-
-垂直または水平に同期するには、<ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> または <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> プロパティをそれぞれ **true** に設定する必要があります。他のチャートに依存している同期チャートは、このプロパティ設定に関係なく、ズームできます。
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-titles.mdx b/docs/angular/src/content/jp/components/charts/features/chart-titles.mdx
deleted file mode 100644
index cc3ebe9b73..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-titles.mdx
+++ /dev/null
@@ -1,44 +0,0 @@
----
-title: "Angular チャート タイトル | データ可視化ツール | インフラジスティックス"
-description: タイトル付きの Infragistics Ignite UI for Angular チャートをお試しください!
-keywords: "Angular charts, chart titles, titles, Ignite UI for Angular, Infragistics, Angular チャート, チャート タイトル, タイトル, インフラジスティックス"
-license: commercial
-mentionedTypes: ["CategoryChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "チャート コントロールのタイトルとサブタイトル機能を使用すると、Angular チャートの上部セクションに情報を追加できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート タイトルとサブタイトル
-
-チャート コントロールのタイトルとサブタイトル機能を使用すると、Angular チャートの上部セクションに情報を追加できます。
-
-## 例
-
-<Sample src="/charts/category-chart/line-chart-with-titles" height={600} alt="Angular チャート同期の例" />
-
-## API リファレンス
-
-チャート コントロールにタイトルまたはサブタイトルを追加すると、タイトルとサブタイトルの情報に応じて、チャートの内容が自動的にサイズ変更されます。
-
-| プロパティ名         | プロパティ タイプ   |     説明 |
-| ----------------------|------------------|------------ |
-| <ApiLink type="ChartTitle" />          | 文字列 |  タイトルのテキスト コンテンツ |
-| <ApiLink type="CategoryChart" member="titleTextColor" label="TitleTextColor" />      | 文字列 |  タイトルのテキスト色 |
-| <ApiLink type="CategoryChart" member="titleAlignment" label="TitleAlignment" />      | HorizontalAlignment |  タイトルの水平方向の配置 |
-| <ApiLink type="CategoryChart" member="titleTextStyle" label="TitleTextStyle" />      | 文字列 | タイトルのフォント スタイル。例えば、Italic Bold 8pt Times New Roman |
-| <ApiLink type="CategoryChart" member="titleTopMargin" label="TitleTopMargin" />      | 数 | タイトルの上マージン。 |
-| <ApiLink type="CategoryChart" member="titleLeftMargin" label="TitleLeftMargin" />     | 数 | タイトルの左マージン。 |
-| <ApiLink type="CategoryChart" member="titleRightMargin" label="TitleRightMargin" />    | 数 | タイトルの右マージン。 |
-| <ApiLink type="CategoryChart" member="titleBottomMargin" label="TitleBottomMargin" />   | 数 | タイトルの下マージン。 |
-| <ApiLink type="CategoryChart" member="subtitle" label="Subtitle" />            | 文字列 |  タイトルのテキスト コンテンツ |
-| <ApiLink type="CategoryChart" member="subtitleTextColor" label="SubtitleTextColor" />   | 文字列 |  タイトルのテキスト色 |
-| <ApiLink type="CategoryChart" member="subtitleAlignment" label="SubtitleAlignment" />   | HorizontalAlignment |  タイトルの水平方向の配置 |
-| <ApiLink type="CategoryChart" member="subtitleTextStyle" label="SubtitleTextStyle" />   | 文字列 | タイトルのフォント スタイル。例えば、Italic Bold 8pt Times New Roman |
-| <ApiLink type="CategoryChart" member="subtitleTopMargin" label="SubtitleTopMargin" />   | 数 | タイトルの上マージン。 |
-| <ApiLink type="CategoryChart" member="subtitleLeftMargin" label="SubtitleLeftMargin" />  | 数 | タイトルの左マージン。 |
-| <ApiLink type="CategoryChart" member="subtitleRightMargin" label="SubtitleRightMargin" /> | 数 | タイトルの右マージン。 |
-| <ApiLink type="CategoryChart" member="subtitleBottomMargin" label="SubtitleBottomMargin" />| 数 | タイトルの下マージン。 |
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-tooltips.mdx b/docs/angular/src/content/jp/components/charts/features/chart-tooltips.mdx
deleted file mode 100644
index e9e1a6da3a..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-tooltips.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: "Angular チャート ツールチップ | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート ツールチップ
-keywords: "Angular Charts, Tooltips, Infragistics, Angular チャート, ツールチップ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "ToolTipType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Angular チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート ツールチップ
-
-Angular チャートでは、ツールチップはバインドされたデータに関する詳細を提供し、エンドユーザーがデータ ポイントにカーソルを合わせるとポップアップで表示されます。ツールチップは、<ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> コンポーネントでサポートされています。
-
-## Angular チャート ツールチップのタイプ
-
-次の例は、開始時に <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> プロパティを "Default" に設定することでツールチップが有効にした[縦棒チャート](../types/column-chart.md)を示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。
-
-<Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="Angular ツールチップ タイプの例" />
-
-<ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> プロパティは構成可能であり、次のいずれかのオプションに設定できます。
-
-| プロパティの値     | 説明 |
-| -------------------|---------------- |
-| <ApiLink type="ToolTipType" member="Default" label="Default" /> ツールチップ | ツールチップは、ポインタがその上に位置されると、単一の項目のツールチップを表示します。 |
-| <ApiLink type="ToolTipType" member="Data" label="Data" /> ツールチップ | チャートのすべてのシリーズのデータ ツールチップを表示します。 |
-| <ApiLink type="ToolTipType" member="Item" label="Item" /> ツールチップ | ツールチップは、ポインタが位置されているカテゴリの各データ項目のツールチップを表示します。 |
-| <ApiLink type="ToolTipType" member="Category" label="Category" /> ツールチップ | ツールチップはポインターがデータ ポイント上に配置されたときにすべてのデータ ポイントに対してツールチップを表示できます。 |
-
-## Angular チャート ツールチップ テンプレート
-
-組み込みタイプのツールチップがいずれも要件に一致しない場合は、独自のツールチップを作成して、シリーズ タイトル、データ値、および軸値を表示およびスタイル設定できます。次のセクションでは、さまざまなタイプの Angular チャートでこれを行う方法を示します。
-
-## カテゴリ チャートのカスタム ツールチップ
-
-この例は、Angular <ApiLink type="CategoryChart" /> コントロールですべてのシリーズのカスタム ツールチップを作成する方法を示しています。Angular <ApiLink type="FinancialChart" /> コントロールのカスタム ツールチップにも同じロジックを適用できることに注意してください。
-
-<Sample src="/charts/category-chart/tooltip-template" height={500} alt="Angular ツールチップ テンプレート" />
-
-## データ チャートのカスタム ツールチップ
-
-この例は、Angular データ チャート コントロールで各シリーズのカスタム ツールチップを作成する方法を示しています。
-
-<Sample src="/charts/data-chart/tooltip-template" height={500} alt="Angular ツールチップ テンプレート" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャート注釈](chart-annotations.md)
-- [チャート マーカー](chart-markers.md)
-
-## API リファレンス
-
-<ApiLink type="DataToolTipLayer" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="FinancialChart" /><br />
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-trendlines.mdx b/docs/angular/src/content/jp/components/charts/features/chart-trendlines.mdx
deleted file mode 100644
index 3a3e3e62ef..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-trendlines.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: "Angular チャート トレンドライン | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャート トレンドライン
-keywords: "Angular Charts, Trendlines, Infragistics, Angular チャート, トレンドライン, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "FinancialChart", "CategoryChart", "DataChart", "TrendLineType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャート トレンドライン
-
-Ignite UI for Angular チャートでは、トレンドラインはトレンドの識別やデータ内のパターンの検索に役立ちます。トレンドラインは、常にチャートにバインドされたデータ ポイントの前に描画されます。積層シリーズ、シェイプ シリーズ、および範囲シリーズを除き、これらは <ApiLink type="CategoryChart" />、<ApiLink type="FinancialChart" />、および <ApiLink type="DataChart" /> (積層型シリーズ、シェイプ シリーズ、範囲シリーズを除く) でサポートされています。
-
-トレンドラインはデフォルトでオフになっていますが、<ApiLink type="CategoryChart" member="trendLineType" label="TrendLineType" /> プロパティを設定することで有効にできます。また、ブラシ、期間、太さなど、トレンドラインの複数の外観プロパティを変更できます。
-
-トレンドラインを有効にすると、ダッシュ配列を適用することもできます。これを行うには、<ApiLink type="FinancialPriceSeries" member="trendLineDashArray" label="TrendLineDashArray" /> プロパティを数値の配列に設定します。数値配列は、トレンドラインの破線の長さを表します。
-
-## Angular チャート トレンドラインの例
-
-次のサンプルは、**QuinticFit** トレンドラインが最初に適用された、2013 年から 2017 年までの Microsoft の株価トレンドを示す <ApiLink type="FinancialChart" /> を示しています。適用されるトレンドラインのタイプを変更できるドロップダウンがあり、可能なすべてのトレンドライン タイプがそのドロップダウン内に一覧表示されます。
-
-<Sample src="/charts/financial-chart/trendlines" height={500} alt="Angular トレンドラインの例" />
-
-## Angular チャート トレンドラインのダッシュ配列の例
-
-次のサンプルは、<ApiLink type="FinancialPriceSeries" member="trendLineDashArray" label="TrendLineDashArray" /> プロパティを介して適用された **QuarticFit** 破線トレンドラインを持つ <ApiLink type="FinancialPriceSeries" /> を示す <ApiLink type="DataChart" /> を示しています。
-
-<Sample src="/charts/data-chart/dash-array-trendline" height={500} alt="Angular トレンドラインの例" />
-
-## Angular チャートト レンドライン レイヤー
-
-<ApiLink type="TrendLineLayer" /> は、ターゲット シリーズに対して単一のトレンドライン タイプを表示するように設計されたシリーズ タイプです。これと既存のシリーズ タイプの既存のトレンド ライン機能との違いは、<ApiLink type="TrendLineLayer" /> はシリーズ タイプであるため、チャートの <ApiLink type="DataChart" member="Series" label="Series" /> コレクションに複数のトレンド ラインを追加して、同じシリーズに複数のトレンド ラインを添付できることです。また、これまでできなかったトレンドラインを凡例に表示する ことも可能です。
-
-## トレンドライン レイヤーの使用
-
-<ApiLink type="TrendLineLayer" /> が正しく動作するには、<ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> と <ApiLink type="TrendLineLayer" member="trendLineType" label="TrendLineType" /> を指定する必要があります。利用可能なさまざまなトレンドラインのタイプは、シリーズで利用可能なトレンドラインと同じです。
-
-凡例に <ApiLink type="TrendLineLayer" /> を表示する場合は、<ApiLink type="TrendLineLayer" member="useLegend" label="UseLegend" /> プロパティを **true** に設定します。
-
-## トレンドライン レイヤーのスタイル設定
-
-デフォルトでは、<ApiLink type="TrendLineLayer" /> は <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> と同じ色の破線で描画されます。これは、<ApiLink type="TrendLineLayer" /> のさまざまなスタイル設定プロパティを使用して構成できます。
-
-描画されるトレンドラインの色を変更するには、<ApiLink type="TrendLineLayer" member="brush" label="Brush" /> プロパティを設定します。あるいは、<ApiLink type="TrendLineLayer" member="useIndex" label="UseIndex" /> プロパティを **true** に設定することもできます。これにより、<ApiLink type="TrendLineLayer" /> がチャートの <ApiLink type="DataChart" member="Series" label="Series" /> コレクションに配置されているインデックスに基づいて、チャートの <ApiLink type="DomainChart" member="brushes" label="Brushes" /> パレットからブラシが取得されます。
-
-<ApiLink type="TrendLineLayer" /> の表示方法は、<ApiLink type="TrendLineLayer" member="appearanceMode" label="AppearanceMode" /> プロパティと <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> プロパティを使用して変更することもできます。<ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> は、-1.0 から 1.0 の範囲の値を受け取り、「Shift」 で終わるオプションに適用する 「シフト」 の量を決定します。
-
-<ApiLink type="TrendLineLayer" member="appearanceMode" label="AppearanceMode" /> プロパティのオプションは次のとおりです。
-
-- `Auto`: デフォルトでは DashPattern 列挙体になります。
-- `BrightnessShift`: トレンドラインは <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> ブラシを取得し、指定された <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> に基づいて明るさを変更します。
-- `DashPattern`: トレンドラインは破線として表示されます。ダッシュの頻度は、<ApiLink type="TrendLineLayer" /> の <ApiLink type="TrendLineLayer" member="dashArray" label="DashArray" /> プロパティを使用して変更できます。
-- `OpacityShift`: トレンドラインは <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> ブラシを取得し、指定された <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> に基づいて不透明度を変更します。
-- `SaturationShift`: トレンドラインは <ApiLink type="TrendLineLayer" member="targetSeries" label="TargetSeries" /> ブラシを取得し、指定された <ApiLink type="TrendLineLayer" member="shiftAmount" label="ShiftAmount" /> に基づいてその彩度を変更します。
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="FinancialChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="TrendLineLayer" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx b/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx
deleted file mode 100644
index 4f892b7240..0000000000
--- a/docs/angular/src/content/jp/components/charts/features/chart-user-annotations.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: "Angular チャートのユーザー注釈 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular チャートのユーザー注釈
-keywords: "Angular Charts, User Annotations, Infragistics, Angular チャート, ユーザー注釈, インフラジスティックス"
-mentionedTypes: ["DataChart", "UserAnnotationLayer", "UserStripAnnotation", "UserSliceAnnotation", "UserPointAnnotation", "Toolbar", "UserAnnotationInformation", "SeriesViewer"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular では、ユーザー注釈機能を使用して、実行時に DataChart にスライス注釈、ストリップ注釈、ポイント注釈を追加できます。"
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user-annotation-create.gif';
-import dataChartUserAnnotationDelete from '@xplat-images/charts/data-chart-user-annotation-delete.gif';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular チャートのユーザー注釈レイヤー <Badge variant="preview" />
-
-Ignite UI for Angular では、ユーザー注釈機能を使用して、実行時に <ApiLink type="DataChart" /> にスライス注釈、ストリップ注釈、ポイント注釈を追加できます。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりするなど、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。
-
-これは、<ApiLink type="Toolbar" /> のデフォルトのツールと統合されています。このトピックでは、<ApiLink type="Toolbar" /> を使用してチャートのプロット領域にユーザー注釈を追加する方法と、これらのユーザー注釈をプログラムから追加する方法を、例と共に解説します。
-
-<Sample src="/charts/data-chart/user-annotation-layer" height={500} alt="Angular 近似曲線の例" />
-
-<DocsAside type="info" title="情報">
-この機能は X 軸と Y 軸をサポートするように設計されており、現在、ラジアル軸やアンギュラー軸はサポートされていません。
-</DocsAside>
-
-## Toolbar でユーザー注釈を使用する
-
-<ApiLink type="Toolbar" /> には、「Annotate Chart」 と 「Delete Note」 という 2 つのツールを含む Annotations メニュー項目が用意されています。このメニュー項目を表示するには、対象のチャートで <ApiLink type="DataChart" member="isUserAnnotationsEnabled" label="IsUserAnnotationsEnabled" /> プロパティを **true** に設定する必要があります。
-
-開いた後に表示される 「Annotate Chart」 オプションを使用すると、<ApiLink type="DataChart" /> のプロット領域に注釈を付けることができます。追加できる注釈はスライス注釈、ストリップ注釈、ポイント注釈です。X 軸または Y 軸のラベルをクリックすると、スライス注釈を追加できます。プロット領域をクリックしてドラッグすることで、ストリップ注釈を追加できます。また、チャートにプロットされたシリーズ内のポイントをクリックして、ポイント注釈を追加することもできます。
-
-<Image src={dataChartUserAnnotationCreate} alt="Angular user-annotation-create" class="responsive-img" />
-
-以前に追加した注釈を削除するには、[Delete Note] メニュー項目を選択した後、スライスまたは ストリップのユーザー注釈に対応する軸注釈、またはポイントのユーザー注釈に対応するデータ ポイントをクリックします。
-
-<Image src={dataChartUserAnnotationDelete} alt="Angular user-annotation-delete" class="responsive-img" />
-
-<ApiLink type="Toolbar" /> を使用してこれらのユーザー注釈を追加すると、<ApiLink type="DataChart" /> は `UserAnnotationInformationRequested` イベントを発生させ、そこでユーザー注釈に関する追加情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な <ApiLink type="UserAnnotationInformation" /> オブジェクトを返します。
-
-以下の表は、<ApiLink type="UserAnnotationInformation" /> で構成可能なさまざまなプロパティの詳細を示しています。
-
-| プロパティ | タイプ | 説明 |
-|------------|---------|-------------|
-|<ApiLink type="UserStripAnnotation" member="annotationData" label="AnnotationData" />|`string`|このプロパティは、ユーザー注釈に追加情報を提供するためのものです。このプロパティは、`UserAnnotationToolTipContentUpdating` イベントと組み合わせて使用され、注釈のツールチップに追加情報を表示するよう設計されています。|
-|<ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" />|`string`|この読み取り専用プロパティは、ユーザー注釈の一意の文字列 ID を返します。|
-|<ApiLink type="UserAnnotationInformation" member="badgeColor" label="BadgeColor" />|`string`|このプロパティは、ユーザー注釈のバッジに使用する色を取得または設定します。|
-|<ApiLink type="UserAnnotationInformation" member="badgeImageUri" label="BadgeImageUri" />|`string`|このプロパティは、ユーザー注釈のバッジに使用する画像へのパスを取得または設定します。|
-|<ApiLink type="UserAnnotationInformation" member="dialogSuggestedXLocation" label="DialogSuggestedXLocation" />|`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 X 座標を取得します。|
-|<ApiLink type="UserAnnotationInformation" member="dialogSuggestedYLocation" label="DialogSuggestedYLocation" />|`double`|このプロパティは、ユーザー注釈が追加された位置に基づいて、ダイアログを表示する推奨 Y 座標を取得します。|
-|<ApiLink type="UserStripAnnotation" member="label" label="Label" />|`string`|このプロパティは、ユーザー注釈に表示するラベルを取得または設定します。|
-|<ApiLink type="UserAnnotationInformation" member="mainColor" label="MainColor" />|`string`|このプロパティは、ユーザー注釈の背景を塗りつぶすために使用する色を取得または設定します。|
-
-`UserAnnotationInformationRequested` イベントで注釈情報を更新した後、<ApiLink type="DataChart" /> の <ApiLink type="DataChart" member="finishAnnotationFlow" label="FinishAnnotationFlow" /> メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、<ApiLink type="DataChart" member="cancelAnnotationFlow" label="CancelAnnotationFlow" /> を呼び出して注釈の <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> を渡すことで注釈の作成をキャンセルすることもできます。注釈の <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。
-
-## ユーザー注釈をプログラムで使用する
-
-<ApiLink type="UserAnnotationLayer" /> をプログラムで使用する場合、<ApiLink type="DataChart" /> に対して 2 つのメソッドを呼び出し、ユーザー注釈の追加または削除を行えるモードに切り替えることができます。これらのメソッドは <ApiLink type="DataChart" member="startCreatingAnnotation" label="StartCreatingAnnotation" /> と <ApiLink type="DataChart" member="startDeletingAnnotation" label="StartDeletingAnnotation" /> です。
-
-<ApiLink type="DataChart" member="startCreatingAnnotation" label="StartCreatingAnnotation" /> を呼び出した後は、X または Y 軸のラベルをクリックしてスライス注釈を追加したり、プロット領域をクリックしドラッグしてからマウスボタンを離してストリップ注釈を追加したり、チャート内のシリーズ上のデータ ポイントをクリックしてポイント注釈を追加したりできます。
-
-これらのユーザー注釈のいずれかを追加すると、`UserAnnotationInformationRequested` イベントが発生し、ユーザー注釈に関する詳細情報を提供できます。このイベント引数には `AnnotationInfo` プロパティがあり、追加される注釈のさまざまな要素を構成可能な <ApiLink type="UserAnnotationInformation" /> オブジェクトを返します。
-
-`UserAnnotationInformationRequested` イベントで注釈情報を更新した後、<ApiLink type="DataChart" /> の <ApiLink type="DataChart" member="finishAnnotationFlow" label="FinishAnnotationFlow" /> メソッドを呼び出して注釈の作成を完了し、変更を確定する必要があります。あるいは、<ApiLink type="DataChart" member="cancelAnnotationFlow" label="CancelAnnotationFlow" /> を呼び出して注釈の <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> を渡すことで注釈の作成をキャンセルすることもできます。注釈の <ApiLink type="UserAnnotationInformation" member="annotationId" label="AnnotationId" /> は、前述のように、`UserAnnotationInformationRequested` イベントの引数の AnnotationInfo パラメーターから取得できます。これにより、プロット領域から注釈が削除されます。
-
-ユーザー注釈がチャートに追加されると、<ApiLink type="DataChart" member="Series" label="Series" /> コレクションに <ApiLink type="UserAnnotationLayer" /> として表示されます。<ApiLink type="UserAnnotationLayer" /> には、プロット領域に追加された注釈の種類に応じて <ApiLink type="UserSliceAnnotation" />、<ApiLink type="UserStripAnnotation" />、および <ApiLink type="UserPointAnnotation" /> 要素を保存できる <ApiLink type="UserAnnotationLayer" member="annotations" label="Annotations" /> コレクションがあります。
-
-## UserAnnotationToolTip
-
-各ユーザー注釈は、マウス ホバー時にツールチップを表示し、さらに詳細な情報を提供できます。
-
-チャートは `UserAnnotationToolTipContentUpdating` イベントを公開しており、ツールチップが表示される際にその内容を更新できます。このイベント引数には `Content` と `AnnotationInfo` の 2 つのプロパティがあります。
-
-ツールチップは `UserAnnotationInformationRequested` イベントと連動する設計になっており、そのイベントで `AnnotationInfo.AnnotationData` に設定した追加情報を、ツールチップ表示時にも利用できます。`UserAnnotationToolTipContentUpdating` イベントのイベント引数の `AnnotationInfo` プロパティは、そのイベントで変更できる `UserAnnotationInformationRequested` の `AnnotationInfo` プロパティと同じインスタンスになります。これにより、ユーザー注釈の作成時に提供された情報を活用し、ツールチップ内にさらに多くの情報を提供できるようになります。
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="UserAnnotationLayer" /><br />
-<ApiLink type="UserAnnotationInformation" /><br />
-<ApiLink type="UserSliceAnnotation" /><br />
-<ApiLink type="UserStripAnnotation" /><br />
-<ApiLink type="UserPointAnnotation" /><br />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、次のトピックを参照してください。
-
-- [チャートの注釈](chart-annotations.md)
-- [チャートのデータ注釈](chart-data-annotations.md)
diff --git a/docs/angular/src/content/jp/components/charts/types/area-chart.mdx b/docs/angular/src/content/jp/components/charts/types/area-chart.mdx
deleted file mode 100644
index f88dfc5f5a..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/area-chart.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: "Angular エリア チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular エリア チャート
-keywords: "Angular Charts, Area Chart, Infragistics, Angular チャート, エリア チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular エリア チャートは、線の下の領域が塗りつぶされた直線セグメントで接続されたポイントのコレクションを使用して描画されます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular エリア チャート
-
-Ignite UI for Angular エリア チャートは、線の下の領域が塗りつぶされた直線セグメントで接続されたポイントのコレクションを使用して描画されます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。これらのチャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。そのため、時系列で量の変化を示します。たとえば、商品の経時的な蓄積などです。
-
-## Angular エリア チャートの例
-
-<ApiLink type="CategoryChart" /> コントロールでエリア チャートを作成するには、以下の例のように、データを <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを **Area** 列挙型に設定します。
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="複数シリーズの Angular エリア チャート" />
-
-## エリア チャートの推奨事項
-
-### エリア チャートのユースケース
-
-エリア チャートを選択するための一般的なユースケースはいくつかあります:
-
-- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。
-- データの経時的なトレンドを比較する必要がある場合。
-- 2 つ以上のデータ シリーズの違いを表示したい場合。
-- 個別のカテゴリの部分対全体の累積比較を表示したい場合。
-- 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合。
-- 時系列データの詳細を視覚化する必要がある場合。
-
-### エリア チャートのベスト プラクティス
-
-- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
-- 時系列データを左から右へ並べ替える。
-- 透明色を使用して、別の系列の背後にプロットされているデータがブロックされないようにする。
-
-### 以下の場合にエリア チャートを使用しないでください
-
-- 多くの (7 または 10 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。
-- 時系列データの値は類似している場合 (同じ期間のデータ)。これにより、重なり合った網掛け領域を区別できなくなります。
-
-### エリア チャートのデータ構造
-
-- データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。
-- データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。
-- データ ソースはデータ項目間に線を描画するために少なくともデータ項目を 2 つ以上含む必要があります。
-- すべてのデータ項目には、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
-- すべてのデータ項目には少なくとも 1 つの数値データ列が含まれている必要があります。
-
-## 単一シリーズの Angular エリア チャート
-
-Angular エリア チャートは、生産される再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="Area" label="Area" /> 値に設定します。
-
-<Sample src="/charts/category-chart/area-chart-single-source" height={600} alt="単一シリーズの Angular エリア チャート" />
-
-## 複数シリーズの Angular エリア チャート
-
-複数の[折れ線チャート](line-chart.md)および[スプライン チャート](spline-chart.md)を表示する方法と同様に、複数のエリア チャートを同じコントロールに結合することもできます。これは、複数のデータ ソースを <ApiLink type="CategoryChart" /> コントロールの <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドすることによって実現されます。
-
-<Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="複数シリーズの Angular エリア チャート" />
-
-## Angular エリア チャートのスタイル設定
-
-エリア チャートには、多くの場合、その領域が半透明で塗りつぶされており、通常より太い線とわずかに大きいマーカーがあります。以下は、それに応じて以前のエリア チャートのスタイルを設定する方法を示す例です。
-
-<Sample src="/charts/category-chart/area-chart-styling" height={600} alt="Angular エリア チャートのスタイル設定" />
-
-## 高度なタイプのエリア チャート
-
-次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの Angular エリア チャートについて説明します。
-
-## Angular ステップ エリア チャート
-
-Ignite UI for Angular ステップ エリア チャートはカテゴリ チャートのグループに属し、連続する垂直線と水平線で接続されたポイントのコレクションを使用して描画され、線の下の領域は塗りつぶされます。値は y 軸に表示され、カテゴリが表示されます x 軸上。ステップ エリア チャートは、一定期間の変化量を強調するか、複数の項目を比較します。<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" /> 値に設定します。
-
-<Sample src="/charts/category-chart/step-area-multiple-sources" height={600} alt="Angular ステップ エリア チャート" />
-
-次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの Angular エリア チャートについて説明します。
-
-## Angular 範囲エリア チャート
-
-Ignite UI for Angular 範囲エリア チャートは、時間の経過とともに 2 つの値の範囲としてエリアを表示します。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RangeAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/range-area-chart" height={600} alt="Angular 範囲エリア チャート" />
-
-## Angular 積層型エリア チャート
-
-Ignite UI for Angular 積層型エリア チャートは、線分で接続されたポイントのコレクションを使用して描画され、線の下のエリアが塗りつぶされ、互いの上に積層されます。積層型エリア チャートは、エリア チャートとすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積層されていることです。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-area-chart" height={600} alt="Angular 積層型エリア チャート" />
-
-## Angular 積層型 100% エリア チャート
-
-Ignite UI for Angular 積層型 100% エリア チャートを使用して、生産元に関連する国のエネルギー消費量など、時間の経過とともに変化する全体の一部を表します。このような場合、積層されたすべての要素を均等に表すことをお勧めします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100AreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-100-area-chart" height={600} alt="Angular 積層型 100% エリア チャート" />
-
-## Angular 積層型スプライン エリア チャート
-
-Ignite UI for Angular 積層型スプライン エリア チャートは、曲線スプライン セグメントで接続されたポイントのコレクションを使用して描画され、曲線スプラインの下の領域が塗りつぶされ、互いに重ねて表示されます。積層型スプライン エリア チャートは、エリア チャートとすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積み重なっていることです。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedSplineAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-spline-area-chart" height={600} alt="Angular 積層型スプライン エリア チャート" />
-
-## Angular 積層型 100% スプライン エリア チャート
-
-Ignite UI for Angular 積層型 100% スプライン エリア チャートは、y 軸の値の処理を除いて、すべての点で積層型スプラインエリア チャートと同じです。データを直接表現するのでなく、積層型 100 スプライン エリア チャートは、特定のデータ ポイント内のすべての値の合計の割合でデータを表します。チャートは、時間の経過とともに変化する全体の一部を表す場合があります。たとえば、生産元に関連する国のエネルギー消費量。このような場合、積層されたすべての要素を均等に表すことをお勧めします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100SplineAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-100-spline-area-chart" height={600} alt="Angular 積層型 100% スプライン エリア チャート" />
-
-## Angular ラジアル エリア チャート
-
-Ignite UI for Angular ラジアル エリア チャートは[ラジアル チャート](radial-chart.md)のグループに属し、データ ポイントを接続する直線のコレクションによってバインドされた塗りつぶされたポリゴンの形状を持っています。このグラフ チャートは、エリア チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/radial-area-chart" height={600} alt="Angular ラジアル エリア チャート" />
-
-## Angular 極座標型エリア チャート
-
-Ignite UI for Angular 極座標エリア チャートは[極座標チャート](polar-chart.md)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、直線で接続されてから、接続されたポイントによって表された領域を塗りつぶします。極座標エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップし、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/polar-area-chart" height={600} alt="Angular 極座標型エリア チャート" />
-
-## Angular 極座標型スプライン エリア チャート
-
-Angular 極座標スプライン エリア チャートは[極座標チャート](polar-chart.md)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、曲線スプラインで接続されてから接続されたポイントで表された領域を塗りつぶします。極座標スプライン エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップして、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="Angular 極座標型スプライン エリア チャート" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
-
-| チャート タイプ               | コントロール名       | API メンバー |
-| -------------------------|--------------------|----------------------- |
-| エリア                     | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="Area" label="Area" /> |
-| ステップ エリア                | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" /> |
-| 範囲エリア               | <ApiLink type="DataChart" />     | <ApiLink type="RangeAreaSeries" /> |
-| ラジアル エリア              | <ApiLink type="DataChart" />     | <ApiLink type="RadialAreaSeries" /> |
-| 極座標エリア               | <ApiLink type="DataChart" />     | <ApiLink type="PolarAreaSeries" /> |
-| 極座標スプライン エリア        | <ApiLink type="DataChart" />     | <ApiLink type="PolarSplineAreaSeries" /> |
-| 積層型エリア             | <ApiLink type="DataChart" />     | <ApiLink type="StackedAreaSeries" /> |
-| 積層型スプライン エリア      | <ApiLink type="DataChart" />     | <ApiLink type="StackedSplineAreaSeries" /> |
-| 積層型 100% エリア        | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100AreaSeries" /> |
-| 積層型 100% スプライン エリア | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100SplineAreaSeries" /> |
-
-## API References
-<ApiLink type="CategoryChart" />
-<ApiLink type="DataChart" />
-<ApiLink type="RangeAreaSeries" />
-<ApiLink type="RadialAreaSeries" />
-<ApiLink type="PolarAreaSeries" />
-<ApiLink type="PolarSplineAreaSeries" />
-<ApiLink type="StackedAreaSeries" />
-<ApiLink type="StackedSplineAreaSeries" />
-<ApiLink type="Stacked100AreaSeries" />
-<ApiLink type="Stacked100SplineAreaSeries" />
diff --git a/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx b/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx
deleted file mode 100644
index 91f330742c..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/bar-chart.mdx
+++ /dev/null
@@ -1,141 +0,0 @@
----
-title: "Angular 棒チャートとグラフ | Ignite UI for Angular"
-description: "Angular 棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均をすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。無料でお試しください。"
-keywords: "Angular Charts, Bar Chart, Bar Graph, Horizontal Chart, Infragistics, Angular チャート, 棒チャート, 棒グラフ, 水平チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "BarSeries", "StackedBarSeries", "Stacked100BarSeries", "RangeBarSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 棒チャート
-
-Ignite UI for Angular 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは[縦棒チャート](column-chart.md)と非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、[縦棒チャート](column-chart.md)は垂直方向 (上下) です。
-
-## Angular 棒チャートの例
-
-次の例に示すように、データ ソースを複数の <ApiLink type="BarSeries" /> にバインドすることにより、<ApiLink type="DataChart" /> コントロールに Angular 棒チャートを作成できます。
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="複数シリーズの Angular 棒チャート" />
-
-## 棒チャートの推奨事項
-
-### Angular 棒チャートはプロジェクトに適していますか?
-
-Angular 棒チャートには、データまたはデータを使用して正しいストーリーを伝える方法に基づいたいくつかの種類が含まれています:
-
-- グループ化された棒チャート
-- 積層型棒チャート
-- 極座標型棒チャート
-- 積層型 100 棒チャート
-
-### 棒チャートのユースケース
-
-チャートを選択するための一般的なユースケースはいくつかあります:
-
-- 時間の経過に伴う傾向またはデータのカテゴリの数値の変化を表示したい場合
-- 1 つ以上のデータ系列のデータ値を比較したい場合
-- 部分と全体の比較を表示したい場合
-- カテゴリの上位または下位のパーセンテージを表示したい場合
-- サブカテゴリにグループ化された複数のデータ ポイントの分析 (積層型棒)
-
-これらのユースケースは、一般的に次のシナリオで使用されます:
-
-- セールス マネージメント
-- インベントリ マネージメント
-- 株価チャート
-- 数値または時系列値を比較する任意の文字列値
-
-### 棒チャートのベスト プラクティス
-
-- 数値軸を 0 から開始します。
-- 棒には単色を使用します。
-- 各棒を区切るスペースが棒自体の幅の 1/2 であることを確認します。
-- ランキング、または順序付けられたカテゴリ (項目) の比較は、昇順または降順でソートされていることを確認します。
-- 読みやすくするために、Y 軸 (チャートの左側のラベル) のカテゴリ値を右揃えにします。
-
-### 以下の場合に棒チャートを使用しないでください
-
-- データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
-- 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](line-chart.md)を検討してください。
-
-### 棒チャートのデータ構造
-
-- データ ソースはデータ項目の配列またはリストである必要があります。
-- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
-- リストには、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
-- リストには、少なくとも 1 つの数値データ列が含まれている必要があります。
-
-## 単一シリーズの Angular 棒チャート
-
-棒チャートは、カテゴリ シリーズのグループに属し、チャートの左から右へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="BarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/bar-chart-single-source" height={600} alt="単一シリーズの Angular 棒チャート" />
-
-## 複数シリーズの Angular 棒チャート
-
-棒チャートは、比較のためにカテゴリごとに複数の棒を描画できます。この例では、棒チャートは人気のある映画フランチャイズの興行収益を比較しています。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを複数の <ApiLink type="BarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="複数シリーズの Angular 棒チャート" />
-
-## Angular 棒チャートのスタイル設定
-
-棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に[注釈値](../features/chart-annotations.md)を使用できます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="BarSeries" /> にバインドし、<ApiLink type="CalloutLayer" /> を追加します。
-
-<Sample src="/charts/data-chart/bar-chart-styling" height={600} alt="Angular 棒チャートのスタイル設定" />
-
-## Angular 積層型棒チャート
-
-積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。
-
-積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、棒チャートとは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedBarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-bar-chart" height={600} alt="Angular 積層型棒チャート" />
-
-## Angular 積層型 100% 棒チャート
-
-Angular 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で Angular 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100BarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-bar-chart" height={600} alt="Angular 積層型 100 棒チャート" />
-
-<div class="divider--half"></div>
-
-## Angular 範囲棒チャート
-
-Angular 範囲棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ棒チャート](bar-chart.md#angular-棒チャートの例)のように左から伸びるのではなく、チャートのプロット領域の中央に表示できる水平の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低値と高値の変化量を強調したり、複数の項目を比較したりするために使用されます。
-
-範囲値は X 軸に表示され、カテゴリは Y 軸に表示されます。各棒は低値と高値の両方を視覚化するため、このチャートは日々の気温の範囲、最低価格と最高価格、または単一の値だけでは不十分な範囲を持つ測定値を示すようなシナリオに役立ちます。
-
-範囲棒チャートは、範囲が垂直柱ではなく水平棒の集まりとして表される点を除いて、[範囲縦棒チャート](column-chart.md#angular-範囲縦棒チャート)とすべての面で同じです。
-
-<ApiLink pkg="charts" type="DataChart" /> コントロールでこのチャート タイプを作成するには、データを <ApiLink pkg="charts" type="RangeBarSeries" /> にバインドします。このシリーズは `LowMemberPath` および `HighMemberPath` から低値と高値を読み取り、通常は `NumericXAxis` と `CategoryYAxis` を使用します。以下の例をご覧ください。
-
-<Sample src="/charts/data-chart/range-bar-chart" height={600} alt="Angular Range Bar Chart" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="BarSeries" /><br />
-<ApiLink type="CalloutLayer" /><br />
-<ApiLink type="StackedBarSeries" /><br />
-<ApiLink type="Stacked100BarSeries" /><br />
-<ApiLink type="RangeBarSeries" /><br />
-<ApiLink type="BarSeries" member="dataSource" label="DataSource" />
diff --git a/docs/angular/src/content/jp/components/charts/types/bubble-chart.mdx b/docs/angular/src/content/jp/components/charts/types/bubble-chart.mdx
deleted file mode 100644
index c1dc833b0e..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/bubble-chart.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
----
-title: "Angular バブル チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular バブル チャート
-keywords: "Angular Charts, Bubble Chart, Infragistics, Angular チャート, バブル チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["Series", "BubbleSeries", "ScatterSeries", "MarkerType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular バブル チャートは散布図の一種で、可変スケーリングのマーカーを表示して、いくつかの異なる一連のデータ内の項目間の関係を表したり、x 座標と y 座標を使用してデータ項目をプロットしたりします。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular バブル チャート
-
-Ignite UI for Angular バブル チャートは[散布図](scatter-chart.md)の一種で、可変スケーリングのマーカーを表示して、いくつかの異なる一連のデータ内の項目間の関係を表したり、x 座標と y 座標を使用してデータ項目をプロットしたりします。データ ポイントのこれらの座標は、2 つの数値データ列によって決定されます。バブル チャートは、データの不均一な間隔またはクラスターに注意を向けます。このチャートは、科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。バブル チャートには、[散布図チャート](scatter-chart.md#angular-散布マーカー-チャート)の多くの特性がありますが、さまざまな半径スケール サイズを持つオプションがあります。
-
-## Angular バブル チャートの例
-
-次の例に示すように、<ApiLink type="BubbleSeries" /> と 2 つの数値軸を使用して、<ApiLink type="DataChart" /> コントロールで Ignite UI for Angular バブル チャートを作成できます。
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="複数シリーズの Angular バブル チャート" />
-
-## 単一シリーズの Angular バブル チャート
-
-以下の例に示すように、データを <ApiLink type="BubbleSeries" /> の <ApiLink type="BubbleSeries" member="dataSource" label="DataSource" /> プロパティにバインドし、その <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" />、<ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" />、<ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> プロパティを使用してデータ列をマップできます。
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-single-source" height={600} alt="単一シリーズの Angular バブル チャート" />
-
-## 複数シリーズの Angular バブル チャート
-
-Angular バブル チャートでは、次の例に示すように、複数のデータ ソースのバインドは、新しい各データ ソースを追加の <ApiLink type="BubbleSeries" /> の <ApiLink type="BubbleSeries" member="dataSource" label="DataSource" /> プロパティに設定することで機能します。
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="複数シリーズの Angular バブル チャート" />
-
-## Angular バブル チャートのスタイル設定
-
-Angular バブル チャートでは、<ApiLink type="BubbleSeries" member="markerType" label="MarkerType" /> プロパティを使用してバブル マーカーの形状をカスタマイズし、<ApiLink type="BubbleSeries" member="radiusScale" label="RadiusScale" /> プロパティを使用してサイズをカスタマイズし、<ApiLink type="BubbleSeries" member="markerBrush" label="MarkerBrush" />、<ApiLink type="BubbleSeries" member="markerOutline" label="MarkerOutline" />、<ApiLink type="BubbleSeries" member="markerThickness" label="MarkerThickness" /> プロパティを使用して外観をカスタマイズできます。さらに、<ApiLink type="BubbleSeries" member="fillMemberPath" label="FillMemberPath" /> プロパティと <ApiLink type="BubbleSeries" member="fillScale" label="FillScale" /> プロパティを使用して、データ列に基づいてバブル マーカーにカラーを付けることもできます。この例では、上記のプロパティの使用法を示しています。
-
-<Sample src="/charts/data-chart/scatter-bubble-chart-styling" height={600} alt="Angular バブル チャートのスタイル設定" />
-
-## その他のリソース
-
-- [散布図](scatter-chart.md)
-- [シェープ チャート](shape-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="BubbleSeries" /><br />
-<ApiLink type="ScatterSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/column-chart.mdx b/docs/angular/src/content/jp/components/charts/types/column-chart.mdx
deleted file mode 100644
index 5752508839..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/column-chart.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
----
-title: "Angular 縦棒チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 縦棒チャート
-keywords: "Angular Charts, Column Chart, Column Graph, Vertical Bar Chart, Infragistics, Angular チャート, 縦棒チャート, 縦棒グラフ, 垂直棒チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "ColumnSeries", "WaterfallSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "RangeColumnSeries", "RadialColumnSeries", "CategoryChartType", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 縦棒チャート
-
-Ignite UI for Angular 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらの縦棒は、チャートの下から上へデータ ポイント値に向かって伸びています。縦棒チャートは[棒チャート](bar-chart.md)と非常によく似ていますが、縦棒チャートは垂直方向 (上下) で描画され、[棒チャート](bar-chart.md)は水平方向 (左から右) または時計回りに 90 度回転します。
-
-## Angular 縦棒チャートの例
-
-次の例に示すように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> を **Column** 列挙型に設定することで、<ApiLink type="CategoryChart" /> コントロールに Angular 縦棒チャートを作成できます。
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="複数シリーズの Angular 縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## 縦棒チャートの推奨事項
-
-### 縦棒チャートのユース ケース
-
-縦棒チャートにはいくつかのユース ケースがあります:
-
-- 関連するカテゴリのデータ値を比較する必要がある場合。
-- 一定期間のデータを比較する必要がある場合。
-- 同じデータ セットに正の値だけでなく負の値も表示する必要がある場合。
-- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合。
-
-### 縦棒チャートのベスト プラクティス
-
-- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
-- 時系列データを左から右へ並べ替える。
-
-### 以下の場合に縦棒チャートを使用しないでください
-
-- 多くの (10 または 12 以上) シリーズのデータがある場合。チャートが読みやすいことを確認する必要があります。
-
-### 縦棒チャートのデータ構造
-
-- データ モデルには少なくとも 1 つの数値プロパティを含む必要があります。
-- データ モデルにはラベルのためのオプションの文字列または日時プロパティを含むことができます。
-- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
-
-## 単一シリーズの Angular 縦棒チャート
-
-縦棒シリーズは、カテゴリ シリーズのグループに属し、チャートの下から上へデータ ポイント値に向かって延びる四角形のコレクションを使用して描画されます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを **Column** 値に設定します:
-
-<Sample src="/charts/category-chart/column-chart-single-source" height={600} alt="単一シリーズの Angular 縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## 複数シリーズの Angular 縦棒チャート
-
-縦棒チャートは、比較のためにカテゴリごとに複数の列を描画できます。<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを **Column** 値に設定します:
-
-<Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="複数シリーズの Angular 縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## Angular 縦棒チャートのスタイル設定
-
-Angular 縦棒チャートには、外観のスタイル設定と変更のための多くのオプションがあります。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドします:
-
-<Sample src="/charts/category-chart/column-chart-styling" height={600} alt="Angular 縦棒チャートのスタイル設定" />
-
-<div class="divider--half"></div>
-
-## 高度なタイプの縦棒チャート
-
-次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの Angular 縦棒チャートについて説明します。
-
-## Angular ウォーターフォール チャート
-
-ウォーターフォール チャートはカテゴリ チャートのグループに属し、連続するデータポイント間の差を示す垂直列のコレクションを使用して描画されます。値の正/負の変化を区別するため、列は色分けされます。ウォーターフォール チャートは、外観が[範囲縦棒チャート](column-chart.md#angular-範囲縦棒チャート)に似ていますが、各データ ポイントに必要な数値データ列は 2 つでなく 1 つのみです。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="WaterfallSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/waterfall-chart" height={600} alt="Angular ウォーターフォール チャート" />
-
-<div class="divider--half"></div>
-
-## Angular 積層型縦棒チャート
-
-積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[カテゴリ縦棒チャート](column-chart.md#angular-縦棒チャートの例)に似ています。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは[積層型棒チャート](stacked-chart.md#angular-積層型棒チャート)と同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedBarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-column-chart" height={600} alt="Angular 積層型縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## Angular 積層型 100% 縦棒チャート
-
-積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で[積層型縦棒チャート](stacked-chart.md#angular-積層型縦棒チャート)と同じです。データを直接表現するのでなく、積層型 100 縦棒は、データ ポイント内のすべての値の合計の割合でデータを表します。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100BarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-column-chart" height={600} alt="Angular 積層型 100 縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## Angular 範囲縦棒チャート
-
-Ignite UI for Angular 範囲縦棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ縦棒チャート](column-chart.md#angular-縦棒チャートの例)のように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低い値と高い値の間の変化量を強調したり、複数の項目を比較したりします。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。
-
-範囲縦棒チャートは、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は[範囲エリア チャート](area-chart.md#angular-範囲エリア-チャート)と同じです。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RangeColumnSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/range-column-chart" height={600} alt="Angular 範囲縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## Angular ラジアル縦棒チャート
-
-ラジアル縦棒チャートは、[ラジアル チャート](radial-chart.md)のグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これは[カテゴリ縦棒チャート](column-chart.md#angular-縦棒チャートの例)と同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialColumnSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/radial-column-chart" height={600} alt="Angular ラジアル縦棒チャート" />
-
-<div class="divider--half"></div>
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [棒チャート](bar-chart.md)
-- [複合チャート](Composite-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-## API References
-
-The following table lists API members mentioned in the above sections:
-
-| Chart Type          | Control Name       | API Members  |
-| --------------------|--------------------|------------------------|
-| Column              | <ApiLink type="CategoryChart" />    | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = **Column** |
-| Radial Column       | <ApiLink type="DataChart" />     | <ApiLink type="RadialColumnSeries" /> |
-| Range Column        | <ApiLink type="DataChart" />     | <ApiLink type="RangeColumnSeries" /> |
-| Stacked Column      | <ApiLink type="DataChart" />     | <ApiLink type="StackedColumnSeries" /> |
-| Stacked 100% Column | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100ColumnSeries" /> |
-| Waterfall           | <ApiLink type="DataChart" />     | <ApiLink type="WaterfallSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="WaterfallSeries" /><br />
-<ApiLink type="StackedBarSeries" /><br />
-<ApiLink type="Stacked100BarSeries" /><br />
-<ApiLink type="RangeColumnSeries" /><br />
-<ApiLink type="RadialColumnSeries" /><br />
-<ApiLink type="StackedColumnSeries" /><br />
-<ApiLink type="Stacked100ColumnSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/composite-chart.mdx b/docs/angular/src/content/jp/components/charts/types/composite-chart.mdx
deleted file mode 100644
index 7ec5e550ab..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/composite-chart.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
----
-title: "Angular 複合チャート | コンボ チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 複合チャート
-keywords: "Angular Charts, Composite Chart, Combo Chart, Infragistics, Angular チャート, 複合チャート, コンボ チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 複合 / コンボ チャート
-
-Ignite UI for Angular 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。
-
-## Angular 複合 / コンボ チャートの例
-
-次の例は、<ApiLink type="DataChart" /> コントロールで <ApiLink type="ColumnSeries" /> と <ApiLink type="LineSeries" /> を使用して複合チャートを作成する方法を示しています。
-
-<Sample src="/charts/data-chart/composite-chart" height={600} alt="Angular 複合チャートの例" />
-
-## その他のリソース
-
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="ColumnSeries" /><br />
-<ApiLink type="LineSeries" /><br />
-<ApiLink type="CategoryXAxis" /><br />
-<ApiLink type="NumericYAxis" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx b/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx
deleted file mode 100644
index 7cd1862873..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/data-pie-chart.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: "Angular 円チャートとグラフ | Ignite UI for Angular"
-description: "Ignite UI for Angular データ円チャートは、セクションに分割された円形の領域で構成される、円チャートを表示するための UI コントロールです。無料でお試しください。"
-keywords: "Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, animation, highlighting, legend, Angular チャート, 円チャート, インフラジスティックス, データ バインディング, スライスの選択, アニメーション, ハイライト表示, 凡例"
-license: commercial
-mentionedTypes: ["DataPieChart", "DataChart", "OthersCategoryType", "SeriesSelectionMode", "SeriesSelectionBehavior", "SeriesHighlightingBehavior"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular データ円チャートは、データ セットのカテゴリ (部分) がどのように合計 (全体) 値に構成されるかを示す部分対全体のチャートです。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Data Pie Chart (データ円チャート)
-
-Ignite UI for Angular データ円チャートは、データ セットのカテゴリ (部分) がどのように合計 (全体) 値に構成されるかを示す部分対全体のチャートです。カテゴリは、円形または円グラフのセクションとして表示されます。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。カテゴリは、分析されている合計値に対する値のパーセンテージ (100 または 100% の一部) に基づいて、他のカテゴリに比例して表示されます。
-
-## Angular データ円チャートの例
-
-データ項目を文字列と数値データでバインドすることで、<ApiLink type="DataPieChart" /> の Angular 円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。
-
-<Sample src="/charts/data-pie-chart/overview" height={600} alt="Angular データ円チャートの概要" />
-
-## Angular データ円チャートの推奨事項
-
-円チャートは小さなデータ セットに適しており、一目で読みやすいです。円チャートは、ドーナツ (リング) チャート、ファンネル チャート、積層型エリア チャート、積層型棒チャート、ツリーマップなど、部分から全体への視覚化の 1 つのタイプです。
-
-Angular データ円チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。
-
-- 凡例
-- スライスの選択
-- スライスのハイライト表示
-- チャート アニメーション
-
-円チャートのベスト プラクティス:
-
-- スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。
-- カテゴリのグループがどのように小さなセグメントに分割されるかを示します。
-- 小規模で階層化されていないデータ セット (6 ～ 8 セグメント未満のデータ) を提示します。
-- データ セグメントの合計が 100% になるようにします。
-- データの順序を最大 (最高) から最小 (最低) に並べます。
-- 12 時の位置から始めて時計回りに続けるなどの標準的なプレゼンテーション手法を使用します。
-- パーツのセグメント/スライスでカラー パレットを区別できるようにします。
-- 読みやすさを考慮して、セグメント内のデータ ラベルと凡例を比較します。
-- 理解しやすさに基づいて、円チャートの代わりに棒やリング などのチャートを選択します。
-- 比較分析のために複数の円チャートを隣り合わせに配置することは避けます。
-
-以下の場合に円チャートを使用しないでください。
-
-- 時間の経過に伴う変化を比較する場合は、棒、折れ線、またはエリア チャートを使用します。
-- 正確なデータ比較が必要な場合は、棒、折れ線、またはエリア チャートを使用します。
-- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、棒、折れ線、またはエリア チャートを検討してください。
-- 棒チャートで、ビューアが値の違いを認識しやすくなります。
-
-## Angular データ円チャートの凡例
-
-凡例は、各ポイントに関する情報を表示し、合計に対する各ポイントの貢献度を知るために使用されます。
-
-円チャートの隣に凡例を表示するには、ItemLegend を作成し、<ApiLink type="DataPieChart" member="legend" label="Legend" /> プロパティに割り当てます。ItemLegend はデフォルトでは項目を縦方向に表示しますが、これは <ApiLink type="DataPieChart" member="orientation" label="Orientation" /> プロパティを設定することで変更できます。
-
-凡例に表示されるラベルには、デフォルトで <ApiLink type="DataPieChart" /> の各スライスに表示されるラベルと同じ内容が表示されますが、チャートの <ApiLink type="DataPieChart" member="legendSliceLabelContentMode" label="LegendSliceLabelContentMode" /> プロパティを使用してこれを変更できます。これにより、ラベル、値、パーセンテージ、またはそれらの任意の組み合わせをチャート内の各スライスの凡例のコンテンツとして表示できる列挙が公開されます。
-
-ItemLegend バッジを変更することもできます。デフォルトでは、関連付けられているチャートのスライスの色に対応する塗りつぶされた円として表示されます。これを設定するには、チャートの <ApiLink type="DataPieChart" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> プロパティを使用し、円、折れ線、棒、縦棒などに設定できます。
-
-以下は、<ApiLink type="DataPieChart" /> での ItemLegend の使用例です。
-
-<Sample src="/charts/data-pie-chart/legend" height={600} alt="Angular データ円チャートの凡例" />
-
-## Angular 円チャートの Others (その他) カテゴリ
-
-円チャートの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、「その他」カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。
-
-<ApiLink type="DataPieChart" /> の「その他」カテゴリには、<ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" />、<ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" />、<ApiLink type="DataPieChart" member="othersCategoryText" label="OthersCategoryText" /> という 3 つの主要な構成可能なプロパティがあり、これらを使用して、チャート内の「その他」スライスの表示方法を構成できます。これらについては、それぞれ以下で説明します。
-
-<ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" /> プロパティは、<ApiLink type="DataPieChart" /> の <ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> プロパティと連動して機能します。<ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" /> では、<ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> を数値として評価するか、パーセンテージとして評価するかを定義できます。たとえば、数値を選択し、<ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> を 5 に設定すると、5 未満の値を持つスライスはすべて「その他」カテゴリの一部になります。パーセント タイプで同じ値 5 を使用すると、<ApiLink type="DataPieChart" /> の合計値の 5 パーセント未満の値はすべて「その他」カテゴリの一部になります。
-
-チャートの Others スライスに含まれる基礎データ項目を取得するには、チャートの <ApiLink type="DataPieChart" member="getOthersContext" label="GetOthersContext" /> メソッドを利用できます。このメソッドの戻り値のタイプは、<ApiLink type="OthersCategoryContext" member="items" label="Items" /> プロパティを公開する <ApiLink type="OthersCategoryContext" /> です。<ApiLink type="OthersCategoryContext" member="items" label="Items" /> プロパティは、Others スライス内の項目を含む配列を返します。さらに、Others スライスをクリックすると、`SeriesClick` イベントのイベント引数の `Item` プロパティもこの <ApiLink type="OthersCategoryContext" /> を返します。
-
-デフォルトでは、「その他」スライスは「その他」というラベルで表されます。チャートの <ApiLink type="DataPieChart" member="othersCategoryText" label="OthersCategoryText" /> プロパティを変更することでこれを変更できます。
-
-### Angular Others (その他) のスライスのスタイル設定
-
-集約されたその他のスライスを他のスライスとは別にスタイル設定するには、次のプロパティを使用します。
-
-- <ApiLink type="DataPieChart" member="othersCategoryBrush" label="OthersCategoryBrush" />
-  「その他」のスライスに使用される塗りつぶし (ブラシ) を設定します。
-
-- <ApiLink type="DataPieChart" member="othersCategoryOutline" label="OthersCategoryOutline" />
-  「その他」のスライスに使用されるアウトライン (ストローク) を設定します。
-
-これらのプロパティは、「その他」のスライス (存在する場合) にのみ影響します。他のすべてのスライスは、通常のパレットと項目ごとの色付け動作を引き続き使用します。
-
-<DocsAside type="info" title="情報">
-「その他」のスライスは、チャートがそれを作成するように構成されている場合にのみレンダリングされます (たとえば、<ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> が 0 より大きく、適切な <ApiLink type="DataPieChart" member="othersCategoryType" label="OthersCategoryType" /> が設定されている場合)。「その他」のスライスが存在しない場合、<ApiLink type="DataPieChart" member="othersCategoryBrush" label="OthersCategoryBrush" /> と <ApiLink type="DataPieChart" member="othersCategoryOutline" label="OthersCategoryOutline" /> は表示上の効果はありません。
-</DocsAside>
-
-<ApiLink type="DataPieChart" /> に「その他」カテゴリが表示されないようにするには、<ApiLink type="DataPieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> を 0 に設定します。
-
-以下のサンプルは、<ApiLink type="DataPieChart" /> 内の「その他」スライスの使用方法を示しています。
-
-<Sample src="/charts/data-pie-chart/others" height={600} alt="Angular 円チャートのその他" />
-
-## Angular データ円チャートの選択
-
-<ApiLink type="DataPieChart" /> は、チャートにプロットされたスライスをマウスでクリックしてスライスを選択できる機能をサポートしています。これは、以下で説明するチャートの <ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" /> プロパティと <ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" /> プロパティを利用して構成できます。
-
-<ApiLink type="DataPieChart" member="selectionBehavior" label="SelectionBehavior" /> の主な 2 つのオプションは <ApiLink type="SeriesSelectionBehavior" member="PerDataItemSingleSelect" label="PerDataItemSingleSelect" /> と <ApiLink type="SeriesSelectionBehavior" member="PerDataItemMultiSelect" label="PerDataItemMultiSelect" /> で、それぞれ単一選択と複数選択を有効にします。
-
-<ApiLink type="DataPieChart" member="selectionMode" label="SelectionMode" /> プロパティは、円チャートのスライスが選択された場合にどのように反応するかを決定します。以下はその列挙体のオプションとその機能です。
-
-- <ApiLink type="SeriesSelectionMode" member="Brighten" label="Brighten" />: 選択したスライスがハイライト表示されます。
-- <ApiLink type="SeriesSelectionMode" member="FadeOthers" label="FadeOthers" />: 選択したスライスは同じ色のまま残り、他のスライスは色が薄くなります。
-- <ApiLink type="SeriesSelectionMode" member="FocusColorFill" label="FocusColorFill" />: 選択したスライスの背景がチャートの FocusBrush に変更されます。
-- <ApiLink type="SeriesSelectionMode" member="FocusColorOutline" label="FocusColorOutline" />: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。
-- <ApiLink type="SeriesSelectionMode" member="FocusColorThickOutline" label="FocusColorThickOutline" />: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。
-- <ApiLink type="SeriesSelectionMode" member="GrayscaleOthers" label="GrayscaleOthers" />: 選択されていないスライスにはグレー色のフィルターが適用されます。
-- <ApiLink type="SeriesSelectionMode" member="None" label="None" />: 選択されたスライスには影響はありません。
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorFill" label="SelectionColorFill" />: 選択されたスライスの背景がチャートの SelectionBrush に変更されます。
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorOutline" label="SelectionColorOutline" />: 選択されたスライスには、チャートの SelectionBrush によって定義された色のアウトラインが表示されます。
-- <ApiLink type="SeriesSelectionMode" member="SelectionColorThickOutline" label="SelectionColorThickOutline" />: 選択されたスライスには、チャートの FocusBrush によって定義された色のアウトラインが表示されます。このアウトラインの太さは、コントロールの Thickness プロパティを使用して設定することもできます。
-- <ApiLink type="SeriesSelectionMode" member="ThickOutline" label="ThickOutline" />: 選択されたスライスには、チャートの Thickness プロパティに応じて太さが異なるアウトラインが適用されます。
-
-スライスが選択されると、その基になるデータ項目がチャートの SelectedSeriesItems コレクションに追加されます。そのため、DataPieChart は SelectedSeriesItemsChanged イベントを公開して、スライスが選択されてこのコレクションが変更されたことを検出します。
-
-以下のサンプルは、<ApiLink type="DataPieChart" /> コントロールの選択機能を示しています。
-
-<Sample src="/charts/data-pie-chart/selection" height={600} alt="Angular 円チャートの選択" />
-
-## Angular データ円チャートのハイライト表示
-
-<ApiLink type="DataPieChart" /> は、マウス オーバーによるハイライト表示と、別のデータ ソースを提供することで設定できるハイライト表示オーバーレイをサポートしています。
-
-<ApiLink type="DataPieChart" member="highlightingBehavior" label="HighlightingBehavior" /> 列挙プロパティは、スライスがどのようにハイライト表示されるかを決定します。以下はそのプロパティのオプションとその機能です。
-
-- <ApiLink type="SeriesHighlightingBehavior" member="DirectlyOver" label="DirectlyOver" />: スライスは、マウスがその上に直接置かれている場合にのみハイライト表示されます。
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItems" label="NearestItems" />: マウスの位置に最も近いスライスがハイライト表示されます。
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItemsAndSeries" label="NearestItemsAndSeries" />: マウスの位置に最も近いスライスとシリーズがハイライト表示されます。
-- <ApiLink type="SeriesHighlightingBehavior" member="NearestItemsRetainMainShapes" label="NearestItemsRetainMainShapes" />: マウスの位置に最も近い項目がハイライト表示され、シリーズのメイン図形はハイライト表示されなくなります。
-
-<ApiLink type="DataPieChart" member="highlightingMode" label="HighlightingMode" /> 列挙プロパティは、データ円チャートのスライスがハイライト表示されたときにどのように反応するかを決定します。以下はそのプロパティのオプションとその機能です。
-
-- <ApiLink type="SeriesSelectionMode" member="Brighten" label="Brighten" />: マウスの位置がそのシリーズ上または近くにあると、そのシリーズの色が明るくなります。
-- <ApiLink type="SeriesSelectionMode" member="FadeOthers" label="FadeOthers" />: マウスの位置がそのシリーズ上または近くにある場合、そのシリーズは色を保持しますが、他の部分は薄く表示されます。
-- <ApiLink type="SeriesSelectionMode" member="None" label="None" />: シリーズとスライスはハイライト表示されません。
-
-以下の例は、<ApiLink type="DataPieChart" /> コンポーネントのマウスハイライト表示の動作を示しています。
-
-<Sample src="/charts/data-pie-chart/highlighting" height={600} alt="Angular データ円チャートのハイライト表示" />
-
-マウスのハイライト表示に加えて、<ApiLink type="DataPieChart" /> はデータのサブセットを表示できるハイライト表示フィルター機能を公開します。これは、コントロールの <ApiLink type="DataPieChart" member="highlightedDataSource" label="HighlightedDataSource" /> を指定し、<ApiLink type="DataPieChart" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> プロパティを `Overlay` に設定することによって適用されます。<ApiLink type="DataPieChart" member="highlightedDataSource" label="HighlightedDataSource" /> は、<ApiLink type="DataPieChart" /> の <ApiLink type="DataPieChart" member="dataSource" label="DataSource" /> プロパティに割り当てられたデータのサブセットを想定しています。
-
-これらの条件が満たされると、サブセットの値がハイライト表示され、データの全セットの残りの部分はフェードアウトされます。これにより、サブセットが効果的にハイライトされ、同じコントロール内でデータのサブセットをより簡単に視覚化できるようになります。
-
-以下の例は、ハイライト表示を示しています。
-
-<Sample src="/charts/data-pie-chart/highlight-filter" height={600} alt="Angular データ円チャートのハイライト表示" />
-
-## Angular データ円チャートのアニメーション
-
-<ApiLink type="DataPieChart" /> は、スライスの表示や値の変更時のアニメーション化をサポートしています。
-
-<ApiLink type="DataPieChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> プロパティを **true** に設定すると、円チャートがアニメーションで表示されます。実行されるアニメーションのタイプは、<ApiLink type="DataPieChart" member="transitionInMode" label="TransitionInMode" /> 列挙プロパティを表示したいアニメーションのタイプに設定することで構成できます。さらに、<ApiLink type="DataPieChart" member="transitionInSpeedType" label="TransitionInSpeedType" /> プロパティを、インデックス、値、通常、またはランダム化でスケー​​ルするように設定することもできます。このアニメーションの期間は、`TimeSpan` を受け取る <ApiLink type="DataPieChart" member="transitionInDuration" label="TransitionInDuration" /> プロパティで制御できます。
-
-データの変更をアニメーション化する場合は、<ApiLink type="DataPieChart" member="animateSeriesWhenAxisRangeChanges" label="AnimateSeriesWhenAxisRangeChanges" /> プロパティを **true** に設定することでも実行できます。この変更の期間は、<ApiLink type="DataPieChart" member="transitionDuration" label="TransitionDuration" /> プロパティを設定することでも構成できます。
-
-以下のは、<ApiLink type="DataPieChart" /> コントロールでのアニメーションを使用する方法を示しています。
-
-<Sample src="/charts/data-pie-chart/animation-replay" height={600} alt="Angular データ円チャートのアニメーション" />
-
-## その他のリソース
-
-- [ドーナツ チャート](donut-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataPieChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx b/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx
deleted file mode 100644
index 899964a67e..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/donut-chart.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Angular ドーナツ チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular ドーナツ チャート
-keywords: "Angular Charts, Donut Chart, Infragistics, Angular チャート, ドーナツ チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DoughnutChart", "DoughnutChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "The Ignite UI for Angular ドーナツ チャートは円チャートと同様、変数の発生を比例的に表示します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ドーナツ チャート
-
-The Ignite UI for Angular ドーナツ チャートは[円チャート](pie-chart.md)と同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリック リングで表示でき、階層データの可視化を組み込みでサポートします。リングは、異なるデータ項目にバインドすることも、共通のデータ ソースを共有することもできます。
-
-## Angular ドーナツ チャートの例
-
-<ApiLink type="DoughnutChart" /> コントロールでドーナツ チャートを作成するには、以下の例のように、データをバインドします。
-
-<Sample src="/charts/doughnut-chart/legend" height={600} alt="Angular ドーナツ チャートの凡例" />
-
-## Angular ドーナツ チャートの推奨事項
-
-### Angular ドーナツ チャートはプロジェクトに適していますか?
-
-ドーナツ チャートは小さなデータ セットに適しており、一目で読みやすいです。ドーナツ チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。
-
-- [円](pie-chart.md)
-- [積層型エリア](area-chart.md)
-- [積層型 100% エリア (積層型パーセンテージ エリア)](area-chart.md)
-- [積層型棒](bar-chart.md)
-- [積層型 100% 棒 (積層型パーセンテージ棒)](bar-chart.md)
-- [ツリーマップ](treemap-chart.md)
-- [ウォーターフォール](column-chart.md)
-
-Angular ドーナツ チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。
-
-- 凡例
-- スライスの分割
-- スライスの選択
-- チャート アニメーション
-
-### ドーナツ チャートのベスト プラクティス
-
-- 複数のデータ セットを使用して、データを輪に表示します。
-- データをすばやく説明するために、ドーナツの穴の中に値やラベルなどの情報を配置します。
-- スライスまたはセグメントを、合計値または全体に比例するパーセンテージ値として比較します。
-- カテゴリのグループがどのように小さなセグメントに分割されるかを示します。
-- データ セグメントの合計が 100% になるようにします。
-- パーツのセグメント/スライスでカラー パレットを区別できるようにします。
-
-### 以下の場合にドーナツ チャートを使用しないでください
-
-- 時間の経過に伴う変化の比較の場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
-- 正確なデータ比較が必要である場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
-- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、[棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを検討してください。
-- [棒](bar-chart.md)チャートで、ビューアが値の違いを認識しやすくなります。
-- 負のデータがある場合、これはドーナツ チャートで表すことができません。
-
-## ドーナツ チャート - スライスの選択
-
-Angular ドーナツ チャートには、クリック時にスライスを選択する機能があります。任意で、単一のカスタム ビジュアル スタイルを選択済みスライスに適用できます。<ApiLink type="DoughnutChart" member="sliceClick" label="SliceClick" /> イベントは、ユーザーがスライスをクリックすると発生します。スライス選択を有効にすると、クリック時にスライスの選択を変更できます。次のサンプルは、スライスの選択を有効にし、選択したスライスの色を灰色に設定する方法を示しています。
-
-<Sample src="/charts/doughnut-chart/selection" height={600} alt="Angular ドーナツ スライスの選択" />
-
-## Angular ドーナツ チャート - 複数のリング
-
-Angular ドーナツ チャートに複数の輪を表示して、各輪を異なるデータ 項目にバインドしたり、共通のデータ ソースを共有したりすることができます。これは、以下の季節ごとのデータ表示など、基礎となる共通のカテゴリを持つ層としてデータを表示する必要がある場合に役立ちます:
-
-<Sample src="/charts/doughnut-chart/rings" height={600} alt="Angular ドーナツ チャート複数のリング" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [円チャート](pie-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DoughnutChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/line-chart.mdx b/docs/angular/src/content/jp/components/charts/types/line-chart.mdx
deleted file mode 100644
index bbecac736e..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/line-chart.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
----
-title: "Angular 折れ線チャートとグラフ | Ignite UI for Angular"
-description: "Angular 折れ線チャートは、数百万のデータポイントに及ぶ大量のデータを処理し、数ミリ秒ごとに更新することができます。無料でお試しください。"
-keywords: "Angular Charts, Line Chart, Line Graph, Infragistics, Angular チャート, 折れ線チャート, 折れ線グラフ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "Legend", "PolarLineSeries", "RadialLineSeries", "StackedLineSeries", "Stacked100LineSeries", "Series", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 折れ線チャート (または折れ線グラフ) は、カテゴリ チャートの一種で、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントで表される連続データ値を示します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 折れ線チャート
-
-Ignite UI for Angular 折れ線チャート (または折れ線グラフ) は、カテゴリ チャートの一種で、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントで表される連続データ値を示します。トレンドの表示や比較分析によく使用されます。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。
-
-## Angular 折れ線チャートの例
-
-次の例に示すように、データを <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="PolarLineSeries" member="line" label="Line" /> 列挙型に設定することで、<ApiLink type="CategoryChart" />コントロールに Angular 折れ線チャートを作成できます。
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="複数シリーズの Angular 折れ線チャート" />
-
-## 折れ線チャートの推奨事項
-
-### Angular 折れ線チャートはプロジェクトに適していますか?
-
-- [エリア チャート](area-chart.md)とは異なり、折れ線チャートは X 軸 (下軸) と線の間の領域を塗りつぶしません。
-- Angular 折れ線チャートは、データ ポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、Angular [スプライン チャート](spline-chart.md)と同じです。
-
-折れ線チャートには、データに基づいて複数のバリアントがあります。以下が含まれます。
-
-- 階層型折れ線チャート
-- 積層型折れ線チャート
-- ステップ折れ線チャート
-- 極座標型折れ線チャート
-- 積層型 100 折れ線チャート
-
-### 折れ線チャートのユースケース
-
-折れ線チャートを選択するための一般的なユースケースはいくつかあります:
-
-- パン、ズーム、ドリルダウンなどのチャート操作に適した大容量のデータセットを使用する場合
-- 経時的なトレンドを比較する必要がある場合
-- 2 つ以上のデータ シリーズの違いを表示したい場合
-- 個別のカテゴリの部分対全体の累積比較を表示したい場合
-- 比較解析のために 1 つ以上のカテゴリのデータ トレンドを表示する必要がある場合
-- 詳細な時系列データを可視化する必要がある場合
-
-### 折れ線チャートのベスト プラクティス
-
-- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する
-- 時系列データを左から右へ並べ替える
-- 実線などの視覚属性を使用して一連のデータを表示する
-
-### 以下の場合に折れ線チャートを使用しないでください。
-
-- 多くの (7 または 10 以上) シリーズのデータがある場合チャートを読みやすくすることが目標である場合
-- 時系列データの値は同じ (同じ期間のデータ) である場合; 重複した行を区別できなくなります。
-
-### 折れ線チャートのデータ構造
-
-- データ ソースはデータ項目の配列またはリスト (単一シリーズの場合) である必要があります。
-- データ ソースは、配列の配列またはリストのリスト (複数シリーズの場合) である必要があります。
-- データ ソースに少なくとも 1 つのデータ項目を含む必要があります
-- すべてのデータ項目には、少なくとも 1 つのデータ列 (文字列または日時) が含まれている必要があります。
-- すべてのデータ項目には少なくとも 1 つの数値データ列が含まれている必要があります。
-
-## 単一シリーズの Angular 折れ線チャート
-
-以下の例に示すように、Angular 折れ線チャートは、2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="PolarLineSeries" member="line" label="Line" /> に設定します:
-
-<Sample src="/charts/category-chart/line-chart-single-source" height={600} alt="単一シリーズの Angular 折れ線チャート" />
-
-## 複数シリーズの Angular 折れ線チャート
-
-Angular 折れ線チャートを使用すると、複数のシリーズを組み合わせて時間の経過に伴う変化を比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、折れ線チャートは追加データに合わせて自動的に更新されます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="PolarLineSeries" member="line" label="Line" /> に設定します:
-
-<Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="複数シリーズの Angular 折れ線チャート" />
-
-## ライブ データの Angular 折れ線チャート
-
-Angular 折れ線チャートは、次のデモに示すように、数百万に及ぶデータ ポイントを含む大量データを処理し、それらを数ミリ秒ごとに更新できます。
-
-この例では、選択した間隔でライブ データを Angular 折れ線チャートにストリーミングしています。データ ポイントを 5,000 から 100 万に設定し、チャートを更新してチャートを描画するデバイスに基づいてスケールを最適化できます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="PolarLineSeries" member="line" label="Line" /> に設定します:
-
-<Sample src="/charts/category-chart/high-frequency" height={600} alt="ライブ データの Angular 折れ線チャートの例" />
-
-## Angular 折れ線チャートのスタイル設定
-
-チャートを設定したら、線の色の変更、凡例のフォント ファミリの変更、軸ラベルのサイズの増加など読みやすくするためにスタイル設定をカスタマイズできます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="PolarLineSeries" member="line" label="Line" /> に設定します:
-
-<Sample src="/charts/category-chart/line-chart-styling" height={600} alt="Angular 折れ線チャートのスタイル設定" />
-
-<ApiLink type="DataChart" /> を使用し、系列に <ApiLink type="LineSeries" member="dashArray" label="DashArray" /> プロパティを設定することで、<ApiLink type="LineSeries" /> 内に破線を作成することもできます。このプロパティは、線の結果として得られるダッシュの長さを表す数値の配列を受け取ります。
-
-次の例は、<ApiLink type="DataChart" /> の <ApiLink type="LineSeries" /> での <ApiLink type="LineSeries" member="dashArray" label="DashArray" /> の使用法を示しています。
-
-<Sample src="/charts/data-chart/dash-array-series" height={600} alt="Angular 折れ線チャートの破線配列" />
-
-## 高度なタイプの折れ線チャート
-
-次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの Angular 折れ線チャートについて説明します。
-
-## Angular 積層型折れ線チャート
-
-積層型折れ線チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-line-chart" height={600} alt="Angular 積層型折れ線チャート" />
-
-## Angular 積層型 100% 折れ線チャート
-
-積層型 100% 折れ線チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型折れ線チャートと同じです。データを直接表現するのでなく、積層型 100% 折れ線チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100LineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-line-chart" height={600} alt="Angular 積層型 100% 折れ線チャート" />
-
-## Angular ラジアル折れ線チャート
-
-ラジアル折れ線チャートはラジアル チャートのグループに属し、データ ポイントを接続する直線のコレクションによってバインドされた塗りつぶしなしのポリゴンの形状を持っています。このグラフ チャートは、折れ線チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/radial-line-chart" height={600} alt="Angular ラジアル折れ線チャート" />
-
-## Angular 極座標型折れ線チャート
-
-極座標折れ線チャートは極座標チャートのグループに属し、極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。極座標チャートは、[散布折れ線チャート](scatter-chart.md)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントがを水平方向に引き伸ばされるのではなく、円の周りにラップされる点が異なります。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular 極座標型折れ線チャート" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
-
-| チャート タイプ        | コントロール名       | API メンバー |
-| ------------------|--------------------|----------------------- |
-| 折れ線              | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="PolarLineSeries" member="line" label="Line" /> |
-| 極座標折れ線        | <ApiLink type="DataChart" />     | <ApiLink type="PolarLineSeries" /> |
-| ラジアル折れ線       | <ApiLink type="DataChart" />     | <ApiLink type="RadialLineSeries" /> |
-| 積層型折れ線      | <ApiLink type="DataChart" />     | <ApiLink type="StackedLineSeries" /> |
-| 積層型 100% 折れ線 | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100LineSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="LineSeries" /><br />
-<ApiLink type="PolarLineSeries" /><br />
-<ApiLink type="RadialLineSeries" /><br />
-<ApiLink type="StackedLineSeries" /><br />
-<ApiLink type="Stacked100LineSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx b/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx
deleted file mode 100644
index a46cb6e404..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/pie-chart.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
----
-title: "Angular 円チャートとグラフ | Ignite UI for Angular"
-description: "Ignite UI for Angular 円チャートは、セクションに分割された円形領域で構成される円チャートを描画する特殊な UI コントロールです。無料でお試しください。"
-keywords: "Angular charts, pie chart, Ignite UI for Angular, Infragistics, data binding, slice selection, slice explosion, animation, チャート, 円チャート, データ バインディング, スライス選択, スライス切り離し, アニメーション, インフラジスティックス"
-license: commercial
-mentionedTypes: ["PieChart", "DataChart"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 円チャート
-
-Ignite UI for Angular 円チャート (円グラフ) は、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示す部分対全体チャートです。カテゴリは、円グラフまたは円グラフのセクションとして描画されます。各セクション (円スライス) は基本データ値に比例する円弧の長さを持ちます。カテゴリは、分析中の合計値に対する値の割合に基づいて、100 または 100% の部分として他のカテゴリに比例して表示されます。
-
-## Angular 円チャートの例
-
-データ項目を文字列と数値データでバインドすることで、<ApiLink type="PieChart" /> の円チャートが作成できます。これらのデータ値を足すと可視化率 100% になります。この例では部門ごとの予算支出の全体的な内訳を示しています。
-
-<Sample src="/charts/pie-chart/overview" height={600} alt="Angular 円チャートの概要" />
-
-## Angular 円チャートの推奨事項
-
-円チャートは小さいデータ セットに適していて、一目で読みやすくなります。円チャートは、部分対全体の可視化の一種です。その他:
-
-- 円
-- ドーナツ (リング)
-- ファンネル
-- 積層型エリア
-- 積層型 100% エリア (積層型パーセント エリア)
-- 積層型棒
-- 積層型 100% 棒 (積層型パーセント棒)
-- ツリーマップ
-- ウォーターフォール
-
-Angular 円チャートは、データを解析するためのビューアー ツールを提供するインタラクティブ機能を含みます。
-
-- 凡例
-- スライスの分割
-- スライスの選択
-- チャート アニメーション
-
-円チャートのベスト プラクティス:
-
-- スライスまたはセグメントを、合計値または全体に対するパーセンテージ値として比較する。
-- カテゴリのグループがどのようにより小さなセグメントに分割されるかを表示する。
-- 小さい非階層データ セット (6 ～ 8 セグメント未満のデータ) を表示する。
-- データ セグメントの合計が 100% になるようにする。
-- データの順序を最大 (最高) から最小 (最低) に並べ替える。
-- 12 時の位置から始めて時計回りに進む標準的なプレゼンテーション方法を使用する。
-- カラー パレットがセグメント/スライスで識別できるようにする。
-- データラベルを読みやすくするため、セグメントと凡例のどちらに配置するべきか検討する。
-- より分かりやすい表現のために、円の代わりに棒またはリング チャートを選択する。
-- 比較分析のために複数の円チャートを並べて配置しないようにする。
-
-以下の場合に円チャートを使用しないでください。
-
-- 経時変化を比較する場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
-- 正確なデータ比較が必要な場合 - 棒チャート、折れ線チャート、またはエリア チャートを使用してください。
-- 6 セグメントまたは 8 セグメント (大量のデータ) がある場合 - データ ストーリーに適した棒チャート、折れ線チャート、またはエリア チャートを検討してください。
-- 棒チャートで値の違いがわかりやすくなります。
-
-## Angular 円チャートの凡例
-
-凡例は、各ポイントに関する情報を表示し、そのポイントの合計に対する割合を示します 凡例クリックを使用してポイントを縮小できます。
-
-円チャート コンポーネントの隣に凡例を表示するには、ItemLegend を作成し、<ApiLink type="PieChart" member="legend" label="Legend" /> プロパティに割り当てます。<ApiLink type="PieChart" member="legendLabelMemberPath" label="LegendLabelMemberPath" /> は、各円スライスの凡例項目を表示するために使用するデータ モデルのプロパティを指定します。
-
-また、凡例項目の外観をカスタマイズするために <ApiLink type="PieChart" member="legendItemTemplate" label="LegendItemTemplate" /> および <ApiLink type="PieChart" member="legendItemBadgeTemplate" label="LegendItemBadgeTemplate" />プロパティ、<ApiLink type="ItemLegend" /> の複数のフォント プロパティも使用できます。
-
-<Sample src="/charts/pie-chart/legend" height={600} alt="凡例付きの Angular 円チャート" />
-
-## Angular 円チャートその他の分類項目
-
-円チャート コンポーネントの基本データに、小さい値を含む多くの項目が含まれる場合があります。この場合、Others カテゴリは、単一スライスへの複数のデータ値の自動集計を許可します。
-
-以下のサンプルは、<ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> を 2 に設定、<ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> は Number に設定されています。したがって、2 以下の値を含む項目は、Others カテゴリに割り当てられます。
-
-<ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> を Percent に設定すると、<ApiLink type="PieChart" member="othersCategoryThreshold" label="OthersCategoryThreshold" /> は値ではなくパーセンテージとして解釈されます。つまり、値がすべての項目の値の合計の 2% 未満である項目は、Others カテゴリに割り当てられます。使用しているアプリケーションに最も適切な <ApiLink type="PieChart" member="othersCategoryType" label="OthersCategoryType" /> を使用できます。
-
-<Sample src="/charts/pie-chart/others" height={600} alt="Angular 円チャートその他の分類項目" />
-
-## Angular 円チャートの展開
-
-円チャート コンポーネントは個々の円スライスの選択と展開だけでなく、選択状態を変更しカスタム ロジックを実装することを可能にする `SliceClick` イベントをコンポーネントサポートします。
-
-<Sample src="/charts/pie-chart/explosion" height={600} alt="Angular 円チャートの展開" />
-
-## Angular 円チャートの選択
-デフォルトで、円チャートはマウス クリックによるスライス選択をサポートします。選択されたスライスは、<ApiLink type="PieChart" member="selectedItems" label="SelectedItems" /> プロパティで取得します。選択したスライスがハイライト表示されます。
-
-円チャートのモードは <ApiLink type="PieChart" member="selectionMode" label="SelectionMode" /> プロパティで設定します。デフォルト値は `Single` です。選択機能を無効化するためにはプロパティを `Manual` に設定します。
-
-円チャート コンポーネントは、選択モードを 3 つコンポーネントサポートします。
-
-- Single - single モードに設定すると、一度に 1 つのスライスのみ選択します。他のスライスを選択すると、最初に選択したスライスは選択解除され、新しいスライスが選択されます。
-- Multiple - Multiple モードに設定すると、一度に複数のスライスを選択します。スライスをクリックするとスライスが選択され、他のスライスをクリックすると、最初のスライスも、新しくクリックしたスライスも選択されます。
-- 手動 - Manual モードに設定すると、選択は無効化されます。
-
-円チャート コンポーネントには、選択機能に関連する 4 つのイベントがあります。
-- SelectedItemChanging
-- SelectedItemChanged
-- SelectedItemsChanging
-- SelectedItemsChanged
-
-「Changing」で終わるイベントはキャンセル可能なイベントです。すなわち、イベント引数プロパティ `Cancel` を true に設定することで、スライスの選択を停止します。True に設定すると、関連付けられたプロパティは更新されず、その結果スライスは選択されません。この設定はたとえば、スライスのデータによって一定のスライスの選択を無効化する場合に使用します。
-
-「その他」スライスをクリックすると、<ApiLink type="PieSliceOthersContext" /> オブジェクトが返されます。オブジェクトは、「その他」スライスに含まれるデータ項目のリストがあります。
-
-<Sample src="/charts/pie-chart/selection" height={600} alt="Angular 円チャートの選択" />
-
-## Angular 円チャートのアニメーション
-
-チャートの半径をスケールする `radiusFactor` プロパティを設定して円チャートをすばやくアニメーション化できます。`startAngle` プロパティを設定してチャートが回転する間、チャートの角度が増加し続けるようにします。
-
-以下のコードでは、radiusFactor がチャートをサイズの 0.25% 増加し、startAngle がチャートを 1 度回転しています。radiusFactor と startAngle が最大値に達すると、アニメーション フラグをリセットし、間隔をクリアしてアニメーションを停止します。
-
-<Sample src="/charts/pie-chart/animation" height={600} alt="Angular 円チャートのアニメーション" />
-
-## Angular 円チャートのスタイル設定
-
-円チャートを作成したら、次に示すように、チャートのスライスの色を変更するなど、スタイルをさらにカスタマイズすることができます。
-
-<Sample src="/charts/pie-chart/styling" height={600} alt="Angular 円チャートのスタイル設定" />
-
-## Angular ラジアル円チャート
-
-ラジアル円チャートはラジアル チャートのグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる円スライスを使用します。このチャート タイプは、複数の一連のデータ ポイントを分類するという概念を採用しており、データ ポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。
-
-<Sample src="/charts/data-chart/radial-pie-chart" height={600} alt="Angular ラジアル円チャート" />
-
-## その他のリソース
-
-- [ドーナツ チャート](donut-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-
-## API リファレンス
-
-<ApiLink type="PieChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/point-chart.mdx b/docs/angular/src/content/jp/components/charts/types/point-chart.mdx
deleted file mode 100644
index a9b226c4d5..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/point-chart.mdx
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: "Angular ポイント チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular ポイント チャート
-keywords: "Angular Charts, Point Chart, Infragistics, Angular チャート, ポイント チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Legend", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular ポイント チャートは、ポイントのコレクションを描画します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ポイント チャート
-
-Ignite UI for Angular ポイント チャートは、ポイントのコレクションを描画します。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。これらのチャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。
-
-## Angular ポイント チャートの例
-
-<ApiLink type="CategoryChart" /> コントロールで Angular  ポイント チャートを作成するには、以下の例のように、データを <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを **Point** 列挙型に設定します。
-
-<Sample src="/charts/category-chart/point-chart-multiple-sources" height={600} alt="複数シリーズの Angular ポイント チャート" />
-
-## 単一シリーズの Angular ポイント チャート
-
-次の例では、Angular ポイント チャートは、y 軸に数値データ列を、x 軸に非数値データ列を自動的に選択することにより、単一のデータ ソースをプロットします。
-
-<Sample src="/charts/category-chart/point-chart-single-source" height={600} alt="単一シリーズの Angular ポイント チャート" />
-
-## 複数シリーズの Angular ポイント チャート
-
-Angular ポイント チャートを使用すると、複数のシリーズを組み合わせて時間の経過に伴う変化を比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、ポイント チャートは追加データに合わせて自動的に更新されます。
-
-<Sample src="/charts/category-chart/point-chart-multiple-sources" height={600} alt="複数シリーズの Angular ポイント チャート" />
-
-## Angular ポイント チャートのスタイル設定
-
-Angular ポイント チャートを設定したら、マーカーとそのアウトライン、ブラシ、太さを変更するなど、スタイルをさらにカスタマイズします。
-
-<Sample src="/charts/category-chart/point-chart-styling" height={600} alt="Angular ポイント チャートのスタイル設定" />
-
-## 高度なタイプのポイント チャート
-
-次のトピックに従って、<ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して、より高度なタイプの Angular ポイント チャートを作成できます。
-
-- [散布バブル チャート](bubble-chart.md)
-- [散布マーカー チャート](scatter-chart.md#angular-散布マーカー-チャート)
-- [散布高密度チャート](scatter-chart.md#angular-散布高密度チャート)
-- [極座標型マーカー チャート](polar-chart.md#angular-極座標型マーカー-チャート)
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャートのパフォーマンス](../features/chart-performance.md)
-- [チャート マーカー](../features/chart-markers.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/polar-chart.mdx b/docs/angular/src/content/jp/components/charts/types/polar-chart.mdx
deleted file mode 100644
index de4136f02c..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/polar-chart.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: "Angular 極座標チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 極座標チャート
-keywords: "Angular Charts, Polar Chart, Infragistics, Angular チャート, 極座標チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "PolarAreaSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 極座標チャートは、デカルト (x、y) 座標系の代わりに極座標 (角度、半径) 座標系を使用してチャートにデータをプロットします。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 極座標チャート
-
-Ignite UI for Angular 極座標チャートは、デカルト (x、y) 座標系の代わりに極座標 (角度、半径) 座標系を使用してチャートにデータをプロットします。言い換えれば、極座標チャートは[散布図シリーズ](scatter-chart.md)の概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。これらは、科学データのプロットによく用いられ (たとえば風向きや風速、地場の方向と強さ、ソーラー システムの機材の場所など)、予測結果からの収集データの偏差をハイライト表示できます。
-
-## Angular 極座標エリア チャート
-
-極座標型エリア チャートは、データ ポイントを接続するポリゴンのコレクションを使用して描画され、[カテゴリ エリア チャート](area-chart.md#angular-エリア-チャートの例)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って配置されるのではなく、円の周りに配置される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-area-chart" height={600} alt="Angular 極座標型エリア チャート" />
-
-## Angular 極座標スプライン エリア チャート
-
-極座標スプライン エリア チャートもポリゴンのコレクションとして描画されますが、[極座標エリア チャート](polar-chart.md#angular-極座標エリア-チャート)のように直線ではなく、データ ポイントを接続する曲線スプラインを使用します。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="Angular 極座標型エリア チャート" />
-
-## Angular 極座標型マーカー チャート
-
-極座標型マーカー チャートは、極座標 (角度、半径) でデータ ポイントを表すマーカーのコレクションを使用して描画します。このチャートは、[散布マーカー チャート](scatter-chart.md#angular-散布マーカー-チャート)と同じデータ プロットの概念を使用していますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りに折り返される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarScatterSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-scatter-chart" height={600} alt="Angular 極座標型マーカー チャート" />
-
-## Angular 極座標型折れ線チャート
-
-極座標折れ線チャートは極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。このチャートは、[散布折れ線チャート](scatter-chart.md#angular-散布折れ線チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-line-chart" height={600} alt="Angular 極座標型折れ線チャート" />
-
-## Angular 極座標スプライン チャート
-
-極座標スプライン チャートは極座標 (角度、半径) でデータ ポイントを接続する曲線スプラインのコレクションを使用して描画されます。このチャートは、[散布スプライン チャート](scatter-chart.md#angular-散布スプライン-チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-spline-chart" height={600} alt="Angular 極座標スプライン チャート" />
-
-## Angular 極座標チャートのスタイル設定
-
-極座標チャートを作成したら、線の色、マーカーの種類、またはそれらのマーカーのアウトライン色の変更など、スタイルをさらにカスタマイズしたい場合があります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/polar-area-chart-styling" height={600} alt="Angular 極座標チャートのスタイル設定" />
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [ドーナツ チャート](Donut-chart.md)
-- [折れ線チャート](line-chart.md)
-- [円チャート](Pie-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [散布図](scatter-chart.md)
-- [スプライン チャート](spline-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="PolarAreaSeries" /><br />
-<ApiLink type="PolarLineSeries" /><br />
-<ApiLink type="PolarSplineSeries" /><br />
-<ApiLink type="PolarSplineAreaSeries" /><br />
-<ApiLink type="PolarScatterSeries" /><br />
-<ApiLink type="NumericAngleAxis" /><br />
-<ApiLink type="NumericRadiusAxis" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/radial-chart.mdx b/docs/angular/src/content/jp/components/charts/types/radial-chart.mdx
deleted file mode 100644
index fff1fbfd36..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/radial-chart.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: "Angular ラジアル チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular ラジアル チャート
-keywords: "Angular Charts, Radial Chart, Infragistics, Angular チャート, ラジアル チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "RadialLineSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular ラジアル チャートは、データを取得し、円の周囲でラップされるデータ ポイントのコレクションとしてデータを描画するチャートのグループです (水平方向の線に沿って拡大するのではなく)。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ラジアル チャート
-
-Ignite UI for Angular ラジアル チャートは、データを取得し、円の周囲でラップされるデータ ポイントのコレクションとしてデータを描画するチャートのグループです (水平方向の線に沿って拡大するのではなく)。ラジアル チャートはチャートの範囲の最小から最大までのカテゴリのリストもマッピングし、カテゴリ グループ化メカニズムをサポートします。
-
-## Angular ラジアル エリア チャート
-
-Ignite UI for Angular ラジアル エリア チャートは、データ ポイントを結ぶ直線のコレクションによってバインドされた塗りつぶされた多角形の形をしています。このチャートは、[エリア チャート](area-chart.md)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/radial-area-chart" height={600} alt="Angular ラジアル エリア チャート" />
-
-## Angular ラジアル縦棒チャート
-
-ラジアル縦棒チャートは、チャートの中心からデータ ポイントの位置に向けて広がる矩形のコレクションを使用して表示されます。これは[縦棒チャート](column-chart.md)と同じデータ プロットの概念を使用していますが、データ ポイントを水平方向に引き伸ばすのではなく、データ ポイントを円でラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialColumnSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/radial-column-chart" height={600} alt="Angular ラジアル縦棒チャート" />
-
-## Angular ラジアル折れ線チャート
-
-Ignite UI for Angular ラジアル折れ線チャートは、データ ポイントを結ぶ直線のコレクションとして描画されます。このチャートは、[折れ線チャート](line-chart.md)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/radial-line-chart" height={600} alt="Angular ラジアル折れ線チャート" />
-
-## Angular ラジアル円チャート
-
-ラジアル円チャートは、チャートの中心からデータ ポイントの位置に向けて広がる円スライスを使用します。このチャート タイプは、複数の一連のデータ ポイントを分類するという概念を採用しており、データ ポイントを水平線に沿って引き伸ばすのではなく、円形の軸に沿ってラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialPieSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/radial-pie-chart" height={600} alt="Angular ラジアル円チャート" />
-
-## Angular ラジアル チャートのスタイル設定
-
-ラジアル チャートを作成したら、線の色、マーカーの種類、またはそれらのマーカーのアウトライン色の変更など、スタイルをさらにカスタマイズしたい場合があります。この例は、<ApiLink type="DataChart" /> コントロールのスタイルをカスタマイズする方法を示しています。
-
-<Sample src="/charts/data-chart/radial-area-chart-styling" height={600} alt="Angular ラジアル エリア チャートのスタイル設定" />
-
-## Angular ラジアル チャートの設定
-
-さらに、ラベルはチャートの近くまたは広い位置に表示されるように設定できます。これは、<ApiLink type="CategoryAngleAxis" /> の <ApiLink type="CategoryAngleAxis" member="labelMode" label="LabelMode" /> プロパティで設定できます。
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [ドーナツ チャート](donut-chart.md)
-- [折れ線チャート](line-chart.md)
-- [円チャート](pie-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="RadialAreaSeries" /><br />
-<ApiLink type="RadialColumnSeries" /><br />
-<ApiLink type="RadialLineSeries" /><br />
-<ApiLink type="RadialPieSeries" /><br />
-<ApiLink type="CategoryAngleAxis" /><br />
-<ApiLink type="NumericRadiusAxis" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/scatter-chart.mdx b/docs/angular/src/content/jp/components/charts/types/scatter-chart.mdx
deleted file mode 100644
index a014b3be24..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/scatter-chart.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: "Angular 散布図 | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 散布図
-keywords: "Angular Charts, Scatter Chart, Infragistics, Angular チャート, 散布図, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "ScatterSeries", "ScatterLineSeries", "ScatterSplineSeries", "HighDensityScatterSeries", "ScatterAreaSeries", "ScatterContourSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 散布図は、異なる一連のデータ内の項目間の関係を示したり、数値の x 座標と y 座標を使用してデータ項目をプロットしたりするチャートのグループに属しています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 散布図
-
-Ignite UI for Angular 散布図は、異なる一連のデータ内の項目間の関係を示したり、数値の x 座標と y 座標を使用してデータ項目をプロットしたりするチャートのグループに属しています。このチャートは、データの不均等な散らばりやデータの塊に注意が向けられます。科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。また、データを時シリーズに (データが時系列でない場合であっても) 構成するためにも使用できます。
-
-## Angular 散布マーカー チャート
-
-Angular 散布図は、マーカーのコレクションとして描画されます。各マーカーには、デカルト座標系での位置を決定する 1 対の数値 X/Y 値があります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="Angular 散布マーカー チャート" />
-
-## Angular 散布折れ線チャート
-
-Angular は、直線で接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/scatter-line-chart" height={600} alt="Angular 散布折れ線チャート" />
-
-## Angular 散布スプライン チャート
-
-Angular は、曲線スプラインで接続されたマーカーのコレクションとして描画され、各マーカーにはデカルト座標系での位置を決定する X/Y の数値のペアがあります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterSplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/scatter-spline-chart" height={600} alt="Angular 散布スプライン チャート" />
-
-## Angular 散布高密度チャート
-
-Angular 散布高密度 (HD) チャートを使用して、わずかな読み込み時間で数千から数百万のデータ ポイントに及ぶ散布データをバインドして表示します。このチャート タイプは非常に多くのポイント用に設計されているため、フル サイズのマーカーではなく小さな点として視覚化され、データ ポイントのクラスターを表すより高い色密度を使用してデータが最も多い領域を表示します。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="HighDensityScatterSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/type-scatter-hd-series" height={600} alt="Angular 散布 HD チャート" />
-
-## Angular 散布エリア チャート
-
-Angular 散布エリア チャートは各ポイントに割り当てられた数値を使って、X および Y データの三角形分割に基づいて、色付きのサーフェスを描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterAreaSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/type-scatter-area-series" height={600} alt="Angular 散布エリア チャート" />
-
-## Angular 散布等高線チャート
-
-Angular 散布等高線チャートは、X データと Y データの三角形分割に基づいて、各ポイントに数値データ値が割り当てられた色付きの等高線を描画します。このチャートはヒート マップ、磁場の強さ、またはオフィスの Wi-Fi の強さを描画する場合などに便利です。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterContourSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/type-scatter-contour-series" height={600} alt="Angular 散布等高線チャート" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [バブル チャート](bubble-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [シェープ チャート](shape-chart.md)
-
-## API リファレンス
-
-以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
-
-| チャート タイプ                  | コントロール名   | API メンバー |
-| ----------------------------|----------------|------------------------ |
-| 散布マーカー              | <ApiLink type="DataChart" /> | <ApiLink type="ScatterSeries" /> |
-| 散布折れ線                | <ApiLink type="DataChart" /> | <ApiLink type="ScatterLineSeries" /> |
-| 散布スプライン              | <ApiLink type="DataChart" /> | <ApiLink type="ScatterSplineSeries" /> |
-| 高密度散布        | <ApiLink type="DataChart" /> | <ApiLink type="HighDensityScatterSeries" /> |
-| 散布エリア                | <ApiLink type="DataChart" /> | <ApiLink type="ScatterAreaSeries" /> |
-| 散布等高線             | <ApiLink type="DataChart" /> | <ApiLink type="ScatterContourSeries" /> |
-
-## API References
-<ApiLink type="DataChart" />
-<ApiLink type="ScatterSeries" />
-<ApiLink type="ScatterLineSeries" />
-<ApiLink type="ScatterSplineSeries" />
-<ApiLink type="HighDensityScatterSeries" />
-<ApiLink type="ScatterAreaSeries" />
-<ApiLink type="ScatterContourSeries" />
diff --git a/docs/angular/src/content/jp/components/charts/types/shape-chart.mdx b/docs/angular/src/content/jp/components/charts/types/shape-chart.mdx
deleted file mode 100644
index 608c5c7a6a..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/shape-chart.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: "Angular シェープ チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular シェープ チャート
-keywords: "Angular Charts, Shape Chart, Infragistics, Angular チャート, シェープ チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "ScatterPolygonSeries", "ScatterPolylineSeries", "Series", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-
-llms:
-  description: "Ignite UI for Angular シェープ チャートは、一連の形状 (1 つまたは複数の X/Y 座標の配列) をとり、それらをデカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular シェープ チャート
-
-Ignite UI for Angular シェープ チャートは、一連の形状 (1 つまたは複数の X/Y 座標の配列) をとり、それらをデカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。シェープ チャートは科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。
-
-## Angular 散布ポリゴン チャート
-
-Angular 散布ポリゴン チャートは、<ApiLink type="DataChart" /> コントロールの <ApiLink type="ScatterPolygonSeries" /> を使用して、デカルト (x、y) 座標系でポリゴンの配列または配列の配列を描画します。このチャートは、プロット図、青写真、さらには建物の間取り図の塗りつぶし図形に使用できます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterPolygonSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="Angular 散布ポリゴン チャート" />
-
-## Angular 散布ポリライン チャート
-
-Angular 散布ポリライン チャートは、<ApiLink type="DataChart" /> コントロールの <ApiLink type="ScatterPolylineSeries" /> を使用して、デカルト (x、y) 座標系でポリラインの配列または配列の配列を描画します。このチャートは、プロット図、青写真、さらには建物の間取り図のアウトラインに使用できます。また、大量の要素間の複雑な関係を視覚化することもできます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="ScatterPolylineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/type-scatter-polyline-series" height={600} alt="Angular 散布ポリライン チャート" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](line-chart.md)
-- [散布チャート](scatter-chart.md)
-
-## API リファレンス
-
-<ApiLink type="DataChart" /><br />
-<ApiLink type="ScatterPolygonSeries" /><br />
-<ApiLink type="ScatterPolylineSeries" /><br />
-<ApiLink type="NumericXAxis" /><br />
-<ApiLink type="NumericYAxis" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx
deleted file mode 100644
index 15187020e2..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/sparkline-chart.mdx
+++ /dev/null
@@ -1,137 +0,0 @@
----
-title: "Angular スパークライン | データ可視化ツール | インフラジスティックス"
-description: インフラジスティックスの Angular スパークライン チャート コントロールを使用して、グリッド セルやスタンドアロンなどのコンパクトなレイアウトで描画します。Ignite UI for Angular スパークライン チャートの設定可能な要素について説明します。
-keywords: Sparkline, Ignite UI for Angular, Infragistics, WinLoss, Area, Column, スパークライン, インフラジスティックス, エリア, 列
-license: commercial
-mentionedTypes: ["Sparkline", "SparklineDisplayType", "TrendLineType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular スパークラインは、軽量なチャート コントロールです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular スパークライン
-
-Ignite UI for Angular スパークラインは、軽量なチャート コントロールです。グリッド セル内などのコンパクトなレイアウト内でのレンダリングを目的としていますが、単独でレンダリングすることもできます。<ApiLink type="Sparkline" /> には、チャートの種類、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズが可能ないくつかの視覚的要素とそれに対応する機能があります。
-
-## Angular スパークラインの例
-
-次の例は、使用可能なすべての異なる <ApiLink type="Sparkline" /> のタイプを示しています。タイプは <ApiLink type="Sparkline" member="displayType" label="DisplayType" /> プロパティの設定により定義されます。<ApiLink type="Sparkline" member="displayType" label="DisplayType" /> プロパティが指定されていない場合は、既定では <ApiLink type="SparklineDisplayType" member="Line" label="Line" /> 型が表示されます。
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular スパークラインの例" />
-
-このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。<a href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/download">無料でダウンロードできます。</a>
-
-## スパークラインの推奨事項
-
-### スパークライン チャートはプロジェクトに適していますか?
-
-他のチャート コントロールと比較したスパークラインの利点は、グリッド セルなどの限られたスペースに、そのすべてのビジュアル要素を表示できることです。
-
-Angular スパークライン コンポーネントには、最高、最低、最初、最後、そして負の値を示す楕円形のアイコンによってデータ ポイントをマークする機能があります。マーカーは、任意のシェイプ、色、または画像でカスタマイズできます。
-
-### スパークライン ユースケース
-
-- チャートを表示するためのコンパクトなスペースがある場合。
-- 週ごとの収益など、一連の値の傾向を示したい場合。
-
-### スパークラインのベスト プラクティス
-
-- データ比較が正確になるように Y 軸 (左軸または右軸) を常に 0 から開始する。
-- 時系列データを左から右へ並べ替える。
-- 実線などの視覚属性を使用して一連のデータを表示する。
-
-### 次の場合にスパークラインを使用しないでください
-
-- データを詳細に分析する必要がある場合。
-- データ ポイントのすべてのラベルを表示する必要がある場合。Y 軸上には最大値と最小値のみを表示でき、X 軸には最初の値と最後の値のみを表示できます。
-
-### スパークラインのデータ構造
-
-- 一次元データが必要です。
-- データ セットには少なくとも 2 つの数値フィールドを含む必要があります。
-- データ ソース フィールドのテキストを使用して、X 軸の最初と最後のラベルを表示できます。
-
-## スパークラインのタイプ
-
-Angular スパークライン コンポーネントは、それに応じて <ApiLink type="Sparkline" member="displayType" label="DisplayType" /> プロパティを設定することにより、以下のスパークライン タイプをサポートしています。
-
-- <ApiLink type="SparklineDisplayType" member="Line" label="Line" />: スパークラインの折れ線チャート タイプを数値データで表示し、データ ポイントを線分で接続します。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
-- <ApiLink type="SparklineDisplayType" member="Area" label="Area" />: スパークラインのエリア チャート タイプを数値データで表示します。これは折れ線タイプに似ており、各線が描画された後に領域を閉じる追加の手順があります。スパークラインでデータを視覚化するには、少なくとも 2 つのデータ ポイントを指定する必要があります。
-- <ApiLink type="SparklineDisplayType" member="Column" label="Column" />: スパークラインの縦棒チャート タイプを数値データで表示します。縦棒と表現される場合もあります。このタイプは単一データ ポイントを描画できますが、Sparkline に最小の値範囲プロパティ (minimum) を指定する必要があるので、供給される単一データ ポイントは表示可能です。そうでなければ、値は最小値として取り扱われ、表示されません。
-- <ApiLink type="SparklineDisplayType" member="WinLoss" label="WinLoss" />: このタイプは、外観は柱状チャートに似ています。各列の値はデータセットの正の最大値 (正の値の場合) または負の最小値 (負の値の場合) に等しくなります。ウィンまたはロス シナリオを示すのが目的です。Win/Loss チャートを正しく表示するには、データセットには正の値と負の値がなければなりません。WinLoss スパークラインが、数値のコレクションにバインドできる Line タイプなどの他のタイプと同じデータにバインドされている場合、Angular スパークライン コンポーネントはそのコレクションから最大値と最小値の 2 つの値を選択し、それらの値に基づいてスパークラインをレンダリングします。
-
-<Sample src="/charts/sparkline/display-types" height={450} alt="Angular スパークラインの例" />
-
-## マーカー
-
-Angular スパークライン コンポーネントを使用すると、マーカーをシリーズ上の円形のアイコンとして表示して、X/Y 座標に基づいて個々のデータポイントを示すことができます。マーカーは、表示タイプが <ApiLink type="SparklineDisplayType" member="Line" label="Line" />、<ApiLink type="SparklineDisplayType" member="Area" label="Area" />、および <ApiLink type="SparklineDisplayType" member="Column" label="Column" /> のスパークラインに設定できます。<ApiLink type="SparklineDisplayType" member="WinLoss" label="WinLoss" /> 型のスパークラインは、現在マーカーを設定できません。デフォルトでは、マーカーは表示されませんが、対応するマーカーの可視性プロパティを設定することで有効にできます。
-
-スパークライン内のマーカーは、以下の場所を任意に組み合わせて配置できます。
-
-- `All` (すべて): スパークライン内のすべてのデータ ポイントにマーカーを表示します。
-- `Low` (低値): 最低値のデータ ポイントにマーカーを表示します。最小値に複数の点がある場合は、その値を持つ各点に表示されます。
-- `High` (高値): 最低値のデータ ポイントにマーカーを表示します。最高値に複数のポイントがある場合は、その値を持つ各ポイントに表示されます。
-- `First` (始値): スパークラインの最初のデータポイントにマーカーを表示します。
-- `Last`: (終値)スパークラインの最後のデータ ポイントにマーカーを表示します。
-- `Negative` (負数): スパークラインにプロットされた負のデータ点にマーカーを表示します。
-
-上記のすべてのマーカーは、色、可視性、およびサイズの観点で関連マーカー タイプのプロパティを使用してカスタマイズできます。たとえば、上記の `Low` マーカーは、<ApiLink type="Sparkline" member="lowMarkerBrush" label="LowMarkerBrush" />、<ApiLink type="Sparkline" member="lowMarkerVisibility" label="LowMarkerVisibility" />、<ApiLink type="Sparkline" member="lowMarkerSize" label="LowMarkerSize" /> の各プロパティを持ちます。
-
-<Sample src="/charts/sparkline/markers" height={300} alt="Angular スパークライン マーカー" />
-
-## 標準範囲
-
-Angular スパークラインの通常の範囲機能は、データが視覚化されているときに定義済みの意味のある範囲を表す水平方向の縞模様です。標準範囲は、指定した色のアウトラインで網掛けエリアとして設定できます。
-
-通常の範囲は、最大データ ポイントよりも広い場合もあれば、それを超える場合もあります。また、しきい値インジケータとして機能するように、スパークラインの <ApiLink type="SparklineDisplayType" member="Line" label="Line" /> 表示タイプと同じ幅にすることもできます。正常範囲の幅は、正常範囲を表示するために最低限必要な以下の 3 つのプロパティによって決まります。
-
-- `NormalRangeVisibility`: 標準範囲が表示されるかどうか。
-- `NormalRangeMaximum`: 範囲の下境界線。
-- `NormalRangeMinimum`: 範囲の上境界線。
-
-既定では、標準範囲は表示されません。有効にすると、標準範囲は薄い灰色の外観で表示されますが、<ApiLink type="Sparkline" member="normalRangeFill" label="NormalRangeFill" /> プロパティを使用して構成することもできます。
-
-<ApiLink type="Sparkline" member="displayNormalRangeInFront" label="DisplayNormalRangeInFront" /> プロパティを設定することで、Angular スパークラインのプロットされたシリーズの前または後ろに標準範囲を表示するかどうかを設定することもできます。
-
-<Sample src="/charts/sparkline/normal-range" height={300} alt="Angular スパークライン標準範囲" />
-
-## トレンドライン
-
-Angular スパークラインは、実際のスパークライン レイヤーの上に別のレイヤーとして表示される一連のトレンドラインをサポートしています。トレンドラインを表示するには、<ApiLink type="TrendLineType" /> プロパティを使用します。
-
-トレンドラインは、チャートがバインドされているデータの値を使用して、<ApiLink type="TrendLineType" /> プロパティで指定されたアルゴリズムに従って計算されます。
-
-トレンドラインは一度に 1 つだけ表示でき、デフォルトではトレンドラインは表示されません。
-
-以下のサンプルは、ドロップダウンを介して利用可能なすべてのトレンドラインを示しています:
-
-<Sample src="/charts/sparkline/trendlines" height={300} alt="Angular スパークライン トレンドライン" />
-
-## 不明な値の補間
-
-Angular スパークラインは、不明な値を検出し、指定された補間アルゴリズムを介して不明な値のためのスペースを描画することができます。データに null 値が含まれていて、この機能を使用しない場合、つまり補間が指定されていない場合、不明な値はプロットされません。
-
-未知の値をプロットするために、Angular スパークラインの <ApiLink type="Sparkline" member="unknownValuePlotting" label="UnknownValuePlotting" /> プロパティを設定することができます。以下のサンプルは、<ApiLink type="Sparkline" member="unknownValuePlotting" label="UnknownValuePlotting" /> プロパティの値の違いを示しており、チェックボックスを使用してオンとオフを切り替えることができます。
-
-<Sample src="/charts/sparkline/unknown-values" height={300} alt="Angular スパークライン不明な値" />
-
-## データ グリッドのスパークライン
-
-Angular スパークラインは、データ グリッドのテンプレート列またはテンプレートをサポートする他の UI コントロールに埋め込むことができます。以下のコード例ではその方法を示します。
-
-<Sample src="/charts/sparkline/grid" height={600} alt="Angular スパークライン グリッド" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-
-## API リファレンス
-
-<ApiLink type="Sparkline" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/spline-chart.mdx b/docs/angular/src/content/jp/components/charts/types/spline-chart.mdx
deleted file mode 100644
index 1342881e87..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/spline-chart.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: "Angular スプライン チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular スプライン チャート
-keywords: "Angular Charts, Spline Chart, Infragistics, Angular チャート, スプライン チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "DataChart", "SplineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "Series", "CategoryChartType"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular スプライン チャート
-
-Ignite UI for Angular スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。値は y 軸に表示され、カテゴリは x 軸に表示されます。スプライン チャートは時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。スプライン チャートは、データ ポイントを接続する線がデータの表示を改善するためのスプライン補間とスムージング機能を持つこと以外のすべての面で[折れ線チャート](line-chart.md)と同じです。
-
-## Angular スプライン チャートの例
-
-次の例は、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> 列挙型に設定することにより、<ApiLink type="CategoryChart" /> コントロールで Angular スプライン チャートを作成する方法を示しています。
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="複数シリーズの Angular スプライン チャート" />
-
-## 単一シリーズの Angular スプライン チャート
-
-以下の例に示すように、スプライン チャートは、ヨーロッパで 2009 年以降の 10 年間の再生可能電力量など、値の経時変化を示すためによく使用されます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> に設定します:
-
-<Sample src="/charts/category-chart/spline-single-source" height={600} alt="単一シリーズの Angular スプライン チャート" />
-
-## 複数シリーズの Angular スプライン チャート
-
-スプライン チャートを使用すると、複数のシリーズを組み合わせて、時間の経過とともにどのように変化するかを比較または確認できます。中国と米国のデータを含むデータ ソースにバインドするだけで、チャートは追加データに合わせて自動的に更新されます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> に設定します:
-
-<Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="複数シリーズの Angular スプライン チャート" />
-
-## Angular スプライン チャートのスタイル設定
-
-他のシリーズの複合などのより多くの機能を備えたスプライン チャートが必要な場合は、以下に示すように、マーカー、マーカー ブラシ、マーカー アウトライン、シリーズ ブラシ、シリーズ アウトラインを構成できます。
-
-<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> に設定します:
-
-<Sample src="/charts/category-chart/spline-styling" height={600} alt="Angular スプライン チャートのスタイル設定" />
-
-## 高度なタイプのスプライン チャート
-
-次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの Angular スプライン チャートについて説明します。
-
-## Angular 積層型スプライン チャート
-
-以下の例に示すように、積層型スプライン チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedSplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-spline-chart" height={600} alt="Angular 積層型スプライン チャート" />
-
-## Angular 積層型 100% スプライン チャート
-
-積層型 100 スプライン チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型スプライン チャートと同じです。データを直接表現するのでなく、積層型 100% スプライン チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100SplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-spline-chart" height={600} alt="Angular 積層型 100 スプライン チャート" />
-
-## その他のリソース
-
-関連するチャートタイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](spline-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [積層型チャート](stacked-chart.md)
-
-## API リファレンス
-
-以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
-
-| チャート タイプ          | コントロール名       | API メンバー |
-| --------------------|--------------------|-------------------------- |
-| スプライン              | <ApiLink type="CategoryChart" /> | <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> = <ApiLink type="CategoryChartType" member="Spline" label="Spline" /> |
-| 積層型スプライン      | <ApiLink type="DataChart" />     | <ApiLink type="StackedSplineSeries" /> |
-| 積層型 100% スプライン | <ApiLink type="DataChart" />     | <ApiLink type="Stacked100SplineSeries" /> |
-
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="StackedSplineSeries" /><br />
-<ApiLink type="Stacked100SplineSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/stacked-chart.mdx b/docs/angular/src/content/jp/components/charts/types/stacked-chart.mdx
deleted file mode 100644
index a8e7ef7ed1..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/stacked-chart.mdx
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: "Angular 積層型チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular 積層型チャート
-keywords: "Angular Charts, Stacked Chart, Stacked 100% Chart, Infragistics, Angular チャート, 積層型チャート, 積層型 100% チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DataChart", "StackedAreaSeries", "Stacked100AreaSeries", "StackedBarSeries", "Stacked100BarSeries", "StackedColumnSeries", "Stacked100ColumnSeries", "StackedLineSeries", "Stacked100LineSeries", "StackedSplineSeries", "Stacked100SplineSeries", "StackedSplineAreaSeries", "Stacked100SplineAreaSeries", "Series"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 積層型チャートは、データ項目の複数の値を積層エリア/ポリゴン、棒、縦棒、折れ線、またはスプラインとして描画するチャートの特別なグループに属しています。。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 積層型チャート
-
-Ignite UI for Angular 積層型チャートは、データ項目の複数の値を積層エリア/ポリゴン、棒、縦棒、折れ線、またはスプラインとして描画するチャートの特別なグループに属しています。。標準の積層型チャートはデータ項目の実際の値を描画しますが、積層型 100% チャートは値を合計値のパーセンテージとして描画します。
-
-## Angular 積層型チャート タイプ
-
-次の例では、ドロップダウンを使用して、Angular <ApiLink type="DataChart" /> コントロールで使用可能なさまざまなタイプの積層型チャートをすべて切り替えることができます。
-
-<Sample src="/charts/data-chart/stacked-chart-types" height={600} alt="Angular 積層型チャートのタイプ" />
-
-以下のセクションは Ignite UI for Angular 積層型チャートの個々のタイプを示します。
-
-## Angular 積層型エリア チャート
-
-積層型エリア チャートは、線分で接続されたポイントのコレクションを使用して描画され、線の下のエリアが塗りつぶされ、互いの上に積層されます。積層型エリア チャートは、[エリア チャート](area-chart.md)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積層されていることです。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-area-chart" height={600} alt="Angular 積層型エリア チャート" />
-
-## Angular 積層型 100 エリア チャート
-このシリーズは、生産元に関連する国のエネルギー消費量など、時間の経過とともに変化する全体の一部を表す場合があります。このような場合積層されたすべての要素を均等に表すことをお勧めします。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100AreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-100-area-chart" height={600} alt="Angular 積層型 100 エリア チャート" />
-
-## Angular 積層型棒チャート
-
-積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。
-
-積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、[棒チャート](bar-chart.md)とは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
-
-積層型棒チャートのこの例では、数値の X 軸 (チャートの下部のラベル) とカテゴリの Y 軸 (チャートの左側のラベル) があります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedBarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-bar-chart" height={600} alt="Angular 積層型 棒チャート" />
-
-## Angular 積層型 100% 棒チャート
-
-Angular 積層型 100% 棒チャートは、X 軸 (チャートの下のラベル) の値の処理を除いて、すべての点で Angular 積層型棒チャートと同じです。データを直接表現するのでなく、積層型棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。
-
-積層型 100% 棒チャートのこの例では、Energy Product (エネルギー積) の値は、水平棒のフラグメント内のすべてのデータの 100% 値として表示されます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100BarSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-bar-chart" height={600} alt="Angular 積層型 100 棒チャート" />
-
-## Angular 積層型縦棒チャート
-
-積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[縦棒チャート](column-chart.md)と同じです。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは積層型棒チャートと同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedColumnSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-column-chart" height={600} alt="Angular 積層型縦棒チャート" />
-
-## Angular 積層型 100% 縦棒チャート
-
-積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型縦棒チャートと同じです。データを直接表現するのでなく、積層型 100% 縦棒チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。
-
-以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100ColumnSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-column-chart" height={600} alt="Angular 積層型 100 縦棒チャート" />
-
-## Angular 積層型折れ線チャート
-
-積層型折れ線チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedLineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-line-chart" height={600} alt="Angular 積層型折れ線チャート" />
-
-## Angular 積層型 100% 折れ線チャート
-
-積層型 100% 折れ線チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型折れ線チャートと同じです。データを直接表現するのでなく、積層型 100% 折れ線チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100LineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-line-chart" height={600} alt="Angular 積層型 100 折れ線チャート" />
-
-## Angular 積層型スプライン エリア チャート
-
-積層型スプライン エリア チャートは、曲線スプライン セグメントで接続されたポイントのコレクションを使用して描画され、曲線スプラインの下の領域が塗りつぶされ、互いに重ねて表示されます。積層型スプライン エリア チャートは、[エリア チャート](area-chart.md)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積み重なっていることです。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedSplineAreaSeries" /> にバインドします。
-
-<Sample src="/charts/data-chart/stacked-spline-area-chart" height={600} alt="Angular 積層型 スプライン エリア チャート" />
-
-## Angular 積層型 100% スプライン エリア チャート
-
-積層型 100% スプライン エリア チャートは、y 軸の値の処理を除いて、すべての点で積層型スプラインエリア チャートと同じです。データを直接表現するのでなく、積層型 100% スプライン エリア チャートは、特定のデータ ポイント内のすべての値の合計の割合でデータを表します。チャートは、時間の経過とともに変化する全体の一部を表す場合があります。たとえば、生産元に関連する国のエネルギー消費量。このような場合、積層されたすべての要素を均等に表すことをお勧めします。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100SplineAreaSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-spline-area-chart" height={600} alt="Angular 積層型 100 スプライン エリア チャート" />
-
-## Angular 積層型スプライン チャート
-
-積層型スプライン チャートは、地域間で数年間に生成された再生可能電力の量など、時間の経過に伴う価値の変化を示すためによく使用されます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedSplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-spline-chart" height={600} alt="Angular 積層型 スプライン チャート" />
-
-## Angular 積層型 100% スプライン チャート
-
-積層型 100% スプライン チャートは、Y 軸上の値の取り扱いを除いたすべての面で積層型スプライン チャートと同じです。データを直接表現するのでなく、積層型 100% スプライン チャートは、データ ポイント内のすべての値の合計の割合でデータを表します。以下の例は、タブレット、携帯電話、およびコンピューターを介した部門によるオンライン ショッピング トラフィックについて行われた調査を示しています。
-
-<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100SplineSeries" /> にバインドします:
-
-<Sample src="/charts/data-chart/stacked-100-spline-chart" height={600} alt="Angular 積層型 100 スプライン チャート" />
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
-
-## API リファレンス
-
-以下のテーブルは、上記のセクションで説明した API メンバーをリストします。
-
-| チャート タイプ               | コントロール名   | API メンバー |
-| -------------------------|----------------|-------------------------------- |
-| 積層型エリア             | <ApiLink type="DataChart" /> | <ApiLink type="StackedAreaSeries" /> |
-| 積層型棒              | <ApiLink type="DataChart" /> | <ApiLink type="StackedBarSeries" /> |
-| 積層型縦棒           | <ApiLink type="DataChart" /> | <ApiLink type="StackedColumnSeries" /> |
-| 積層型折れ線             | <ApiLink type="DataChart" /> | <ApiLink type="StackedLineSeries" /> |
-| 積層型スプライン           | <ApiLink type="DataChart" /> | <ApiLink type="StackedSplineSeries" /> |
-| 積層型スプライン エリア    | <ApiLink type="DataChart" /> | <ApiLink type="StackedSplineAreaSeries" /> |
-| 積層型 100% エリア        | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100AreaSeries" /> |
-| 積層型 100% 棒         | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100BarSeries" /> |
-| 積層型 100% 縦棒      | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100ColumnSeries" /> |
-| 積層型 100% 折れ線        | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100LineSeries" /> |
-| 積層型 100% スプライン      | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100SplineSeries" /> |
-| 積層型 100% スプライン エリア | <ApiLink type="DataChart" /> | <ApiLink type="Stacked100SplineAreaSeries" /> |
diff --git a/docs/angular/src/content/jp/components/charts/types/step-chart.mdx b/docs/angular/src/content/jp/components/charts/types/step-chart.mdx
deleted file mode 100644
index a67daeb85d..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/step-chart.mdx
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: "Angular ステップ チャート | データ可視化 | インフラジスティックス"
-description: インフラジスティックスの Angular ステップ チャート
-keywords: "Angular Charts, Step Chart, Step Area Chart, Step Line Chart, Infragistics, Angular チャート, ステップ チャート, ステップ エリア チャート, ステップ折れ線チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "CategoryChart", "CategoryChartType", "Series", "CategoryChartType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular ステップ チャートは連続する垂直線と水平線で接続されたポイントのコレクションとして描画されるカテゴリ チャートのグループに属しています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ステップ チャート
-
-Ignite UI for Angular ステップ チャートは連続する垂直線と水平線で接続されたポイントのコレクションとして描画されるカテゴリ チャートのグループに属しています。ステップ エリア チャートの場合、線の下の領域が塗りつぶされます。値は y 軸に表示され、カテゴリは x 軸に表示されます。ステップ チャートは、一定期間の変化量を強調したり、複数の項目を比較したりします。
-
-## Angular ステップ エリア チャート
-
-<ApiLink type="CategoryChart" /> コントロールでステップ エリア チャートを作成するには、以下の例のように、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="StepArea" label="StepArea" /> 列挙型に設定します。
-
-<Sample src="/charts/category-chart/step-area-multiple-sources" height={600} alt=" 複数ソースの Angular ステップ エリア チャート" />
-
-## Angular ステップ折れ線チャート
-
-Angular ステップ折れ線チャートは、線の下の領域が塗りつぶされていないことを除いて、ステップ エリア チャートと非常によく似ています。
-
-次の例に示すように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを <ApiLink type="CategoryChartType" member="StepLine" label="StepLine" /> 値に設定することで、<ApiLink type="CategoryChart" /> コントロールでステップ折れ線チャートを作成できます。
-
-<Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="複数ソースの Angular ステップ折れ線チャート" />
-
-## Angular ステップ チャートのスタイル設定
-
-他のシリーズの複合などのより多くの機能を備えたステップ チャートが必要な場合は、以下に示すように、<ApiLink type="CategoryChart" /> コントロールの <ApiLink type="DomainChart" member="markerTypes" label="MarkerTypes" />、<ApiLink type="DomainChart" member="markerBrushes" label="MarkerBrushes" />、<ApiLink type="DomainChart" member="markerOutlines" label="MarkerOutlines" />、折れ線の <ApiLink type="DomainChart" member="brushes" label="Brushes" />、および折れ線の <ApiLink type="DomainChart" member="outlines" label="Outlines" /> プロパティを構成できます。
-
-<Sample src="/charts/category-chart/step-line-styling" height={600} alt="Angular ステップ折れ線チャートのスタイル設定" />
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](line-chart.md)
-- [チャート マーカー](../features/chart-markers.md)
-
-## API リファレンス
-
-<ApiLink type="CategoryChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/stock-chart.mdx b/docs/angular/src/content/jp/components/charts/types/stock-chart.mdx
deleted file mode 100644
index 29c3bcf640..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/stock-chart.mdx
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: "Angular 株価/ファイナンシャル チャート | Ignite UI for Angular"
-description: "Ignite UI for Angular 株価チャートは、インタラクティブな時系列表示で株価ティッカー データまたは価格データを描画する複合視覚化です。無料でお試しください。"
-keywords: "Angular Charts, Stock Chart, Financial Chart, Candlestick Chart, OHLC Chart, Infragistics, Angular チャート, 株価チャート, ファイナンシャル チャート, ローソク足チャート, OHLC チャート, インフラジスティックス"
-license: commercial
-mentionedTypes: ["DomainChart", "FinancialChart", "FinancialChartType", "IndicatorTypes", "ZoomSliderType", "Series", "FinancialChartType"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular 株価チャート (Angular ファイナンシャル チャートまたはローソク足チャートと呼ばれることもあります) は、インタラクティブな時系列表示で株価ティッカー データまたは価格データを描画する複合視覚化です。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 株価チャート
-
-Ignite UI for Angular 株価チャート (Angular ファイナンシャル チャートまたはローソク足チャートと呼ばれることもあります) は、インタラクティブな時系列表示で株価ティッカー データまたは価格データを描画する複合視覚化です。株価チャートは、時系列 X 軸の時間の経過に伴うティッカーの株価を示します。また、このチャートには、設定可能な期間の始値、高値、安値、終値 (OHLC) などの企業のティッカー データの情報も表示されます。株価チャートは、価格とボリュームの表示モードや多数の株指標など、データを視覚化して解釈するための複数の方法を提供します。
-
-## Angular 株価チャートの例
-
-<ApiLink type="FinancialChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="FinancialChart" member="chartType" label="FinancialChart.ChartType" /> プロパティを <ApiLink type="FinancialChartType" member="Line" label="Line" /> 値に設定します。
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular 株価指数チャート" />
-
-## 株価チャートの推奨事項
-
-### Angular 株価チャートはプロジェクトに適していますか?
-
-典型的な株価チャートは、価格帯のテクニカル分析に使用されるローソク足チャートのティッカー データで表されます。ローソク足チャートは、1 日の高値と安値を、ティッカー シンボルの始値と終値と比較します。
-
-- ローソク足チャートの本文には、始値と終値 (O/C) が表示されます。
-- ローソク足チャートには、始値と終値 (O/C) が表示されます。
-- ティッカー値の上限と下限の間の距離は、ティッカー価格の日の範囲です。
-- ローソク足チャートのティッカー値は、資産が開いたよりも高く閉じたときに中空になります。
-- ローソク足チャートのティッカー値は、資産が開いたよりも低く閉じたときに塗りつぶされます。
-- 黒または赤のローソク足は、前のローソク足の終値よりも低い終値の価格を表します。
-- 白または緑のローソク足は、前のローソク足の終値よりも高い終値を表します。
-
-株価チャートは、次のいずれかを表示するように設定できます:
-
-- ローソク足チャート
-- 棒チャート
-- 縦棒チャート
-- 折れ線チャート
-
-株価チャートは、ユーザーがデータ分析機能を実行できるようにすることを目的としているため、次のようなインタラクティブな要素が含まれています:
-
-- 時間ベースのフィルター
-- 価格ペイン
-- ボリューム ペイン
-- インジケーター ペイン
-- トレンドライン
-- ナビゲーション/ズームバー ペイン
-
-### 株価チャートのデータ構造
-
-- データ ソースはデータ項目の配列またはリストである必要があります。
-- データ ソースに少なくとも 1 つのデータ項目を含む必要があります。
-- すべてのデータ項目には、ティッカー データの日付を表す日時 (または文字列) 列が少なくとも 1 つ含まれている必要があります。
-- すべてのデータ項目には、棒チャート、折れ線チャート、および縦棒チャートの 1 つの数値列が含まれている必要があります。
-- すべてのデータ項目には、ローソク足チャートの始値、高値、安値、終値 (OHLC) の 4 つの数値列が含まれている必要があります。
-- すべてのデータ項目には、ローソク足チャートの始値、高値、安値、終値、ボリュームの 5 つの数値列が含まれている必要があります。
-
-## 複数シリーズの Angular 株価チャート
-
-<Sample src="/charts/financial-chart/multiple-data" height={600} alt="Angular 株価指数チャート" />
-
-## Angular 株価チャート
-
-この例では、株価チャートは 1 年間の S&P 500を表しています。投資家に役立ち、テクニカル解析を実施し、将来の価格/レポートを予測します。
-
-<Sample src="/charts/financial-chart/stock-index-chart" height={600} alt="Angular 株価指数チャート" />
-
-## Angular 株価チャートのスタイル設定
-
-他のシリーズの複合などのより多くの機能を備えた株価チャートが必要な場合は、以下に示すように、厚さ、アウトライン、ブラシ、負のアウトライン、負のブラシを構成できます。この例では、株価チャートは Amazon、Microsoft、Tesla の収益を比較しています。
-
-<Sample src="/charts/financial-chart/styling" height={600} alt="Angular 株価指数チャート" />
-
-## Angular チャートの注釈
-
-十字線注釈レイヤーは、各ターゲット シリーズの実際の値に一致する十字線を提供します。十字線タイプは、Horizontal、Vertical、Both があります。`crosshairsSnapToData` プロパティを true に設定してデータに十字線のスナップできます。十字線がデータ ポイント間で補完されます。注釈を有効にして軸に沿って十字線の値を表示できます。
-
-最終値レイヤーは、シリーズに表示された最終値の軸に沿ったクイックビューをサポートします。
-
-コールアウト レイヤーは、X/Y 位置にコールアウトを表示します。
-
-注: X 軸モードを使用する際に CalloutsXMemberPath は数値インデックスをポイントする必要があります。あるいは、CalloutsXMemberPath を時間値にポイントしてください。
-
-<Sample src="/charts/financial-chart/annotations" height={600} alt="Angular チャートの注釈" />
-
-## Angular チャートのペイン
-
-以下のペインを使用できます:
-
-- 価格ペイン - 折れ線、ローソク足、棒 (OHLC)、トレンドライン、および財務オーバーレイを使用して価格を描画します。
-- インジケーター ペイン - すべての財務指標を別のチャートに描画し、BollingerBands および PriceChannel オーバーレイが Y 軸と同じ値範囲を使用するために価格ペインに描画されます。
-- ボリューム ペイン - 縦棒、折れ線、およびエリアのチャート タイプを使用して出来高を上記のペインの下に描画します。
-- ズーム ペイン - すべてのペインのズームを制御します。常にチャートの下側に描画されます。
-
-### インジケーター ペイン
-財務指標は、株価の動きの計測やトレンドを確認するためにトレーダーによって使用されます。これらのインジケーターは、同じ Y 軸を共有しないため価格ペインの下に表示されます。
-
-デフォルトでインジケーター ペインは表示されません。ユーザーは、ツールバーを使用してランタイムで表示するインジケーターを選択できます。初期でインジケーター ペインを表示するには、以下のコードのように `indicatorTypes` プロパティをインジケーターのタイプを 1 つ以上に設定する必要があります:
-
-### ボリューム ペイン
-ボリューム ペインは指定した期間に取引された株式数を表します。出来高の低さは関心が低いことを示し、出来高の多さは取引が多く、関心が高いことを示します。縦棒、折れ線、またはエリア チャート タイプを使用して表示できます。ツールバーでチャート タイプを選択すると、ランタイムにデータを表示するボリューム ペインが表示されます。ペインを表示するには、以下のコードのようにボリューム タイプを設定する必要があります:
-
-### 価格ペイン
-このペインは、在庫価格を表示し、経時的な在庫の高値、安値、始値、終値を示します。さらに、トレンドラインおよびオーバーレイを表示できます。ツールバーからチャート タイプを選択できます。デフォルトで、チャート タイプは <ApiLink type="FinancialChartType" member="Auto" label="Auto" /> に設定されています。次のコードに示すように、デフォルト設定をオーバーライドできます:
-
-注: 複数のデータ ソースまたはデータ ポイントが大量にあるデータ ソースを描画する場合、折れ線チャート タイプを使用してください。
-
-### ズーム ペイン
-このペインはすべての表示されるペインのズームを制御します。このペインはデフォルトで表示されます。以下のコードのように <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> を `none` に設定すると機能を無効にできます:
-
-注: <ApiLink type="FinancialChart" member="zoomSliderType" label="ZoomSliderType" /> オプションを <ApiLink type="FinancialChart" member="chartType" label="FinancialChart.ChartType" /> オプションと同じ値に設定してください。このように、ズーム スライダーは価格ペインの正しいプレビューを表示します。以下のコードはその方法を示しています。
-
-この例では、株価チャートは米国の収益をプロットしています。
-
-<Sample src="/charts/financial-chart/panes" height={600} alt="Angular チャートのペイン" />
-
-## その他のリソース
-
-関連するチャート機能の詳細については、以下のトピックを参照してください。
-
-- [チャート アニメーション](../features/chart-animations.md)
-- [チャート注釈](../features/chart-annotations.md)
-- [チャート ナビゲーション](../features/chart-navigation.md)
-- [チャート トレンドライン](../features/chart-trendlines.md)
-- [チャートのパフォーマンス](../features/chart-performance.md)
-
-## API リファレンス
-
-<ApiLink type="FinancialChart" /><br />
diff --git a/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx
deleted file mode 100644
index 03e3f94552..0000000000
--- a/docs/angular/src/content/jp/components/charts/types/treemap-chart.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: "Angular ツリーマップ | データ可視化ツール | 方向 | レイアウト | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular ツリーマップ コントロールを使用して、複数のレベルをサポートするストリップ、長方形、およびスライスアンドダイス アルゴリズムのデータ ポイントの相対的なウェイトを表示します。Ignite UI for Angular ツリーマップについて説明します。
-keywords: "Angular Tree Map, Treemap, layout, orientation, Ignite UI for Angular, Infragistics, Angular ツリーマップ, ツリーマップ, レイアウト, 方向, インフラジスティックス"
-license: commercial
-mentionedTypes: ["Treemap", "TreemapOrientation", "TreemapLayoutType", "TreemapHighlightingMode", "TreemapHighlightedValueDisplayMode"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "Ignite UI for Angular ツリーマップ チャートは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ツリーマップ
-
-Ignite UI for Angular ツリーマップ チャートは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。
-
-## Angular ツリーマップの例
-
-次の例では、<ApiLink type="Treemap" /> は世界の最大総面積の上位 30 の国を示しています。
-
-<Sample src="/charts/tree-map/overview" height={600} alt="Angular ツリーマップの例" />
-
-## ツリーマップの推奨事項
-
-### Angular ツリーマップはプロジェクトに適していますか?
-
-色とサイズのディメンションが何らかの方法でツリー構造と関連付けられている場合、他の方法では見つけにくいパターンを簡単に識別できます。ツリーマップは、より効率的にスペースを使用します。このため、数千の項目を同時に画面に表示することが可能となります。
-
-- ツリーマップは、データ ポイントの分類とそれらの値の相対的な違いの伝達に苦手なときが多い円チャートや他の形式のエリア チャートよりも効果的です。
-- ツリーマップは、ドリルダウン シナリオ用に設計されています。より効率的なデータ分析のために、小さな長方形で表されるデータ セットに継続的にドリルダウンできます。
-- ツリーマップは、数値の表示ではなく相対的順位の表示に向いています。
-
-他のデータの視覚化と同様に、ツリーマップ チャートの視覚化は特定のシナリオで使用する必要があります。棒チャートや折れ線チャートのような視覚化と同じ問題は解決されません。これは、より複雑で豊富なデータ表示を目的としています。
-
-### ツリーマップのユース ケース
-
-ツリーマップを選択するための一般的なユース ケースがいくつかあります:
-
-- 階層データ (ブランチとサブブランチを持つツリーとして構成されたデータ) をドリルダウンする場合。
-- カテゴリ (ブランチ) とサブカテゴリ (サブブランチ) 間の相対的な重みと比較値の階層を説明したい場合。
-- コンパクトで効率の良い視覚化が必要な大規模なデータ セットを表示したい場合。
-- 正確な値を使用せずに、一目で迅速なデータ分析を提供したい場合長方形の相対的なサイズは、パターンや外れ値を非常に迅速に識別するのに役立ちます。
-- スペースを有効に使用したい場合ツリーマップは、数千の項目を同時に画面に表示することが可能となります。
-
-### 以下の場合にツリーマップを使用しないでください
-
-- 正確な値を必要とするデータ ストーリーを説明している場合。
-- 負のデータ値がある場合。
-- フラットで非階層的なデータがある場合。
-- データのサイズが類似している場合。
-
-### ツリーマップのデータ構造
-
-- データ ソースはデータ項目の配列またはリストである必要があります。
-- データ ソースにはデータ項目を少なくとも 1 つ含む必要があり、含まれない場合はマップでノードがレンダリングされません。
-- すべてのデータ項目には、<ApiLink type="Treemap" member="labelMemberPath" label="LabelMemberPath" /> プロパティにマッピングする必要があるデータ列 (文字列など) を少なくとも 1 列含める必要があります。
-- すべてのデータ項目には、<ApiLink type="Treemap" member="valueMemberPath" label="ValueMemberPath" /> プロパティにマッピングする必要がある数値データ列を少なくとも 1 列含める必要があります。
-- データを整理されたタイルに分類するには、オプションで <ApiLink type="Treemap" member="parentIdMemberPath" label="ParentIdMemberPath" /> および <ApiLink type="Treemap" member="idMemberPath" label="IdMemberPath" /> を使用できます。
-
-## Angular ツリーマップの構成
-
-次の例では、ツリーマップは、<ApiLink type="Treemap" member="layoutType" label="LayoutType" /> プロパティと <ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> プロパティを変更することにより、アルゴリズム構造を変更する機能を示しています。
-
-<Sample src="/charts/tree-map/layout" height={600} alt="Angular ツリーマップのレイアウト構成" />
-
-### レイアウトのタイプ
-
-ツリーマップ チャートは、データの相対的な重みを表示します。さまざまなアルゴリズムを使用して、データ項目のレイアウトをどのように行うかを決定します。
-
-- `SliceAndDice` - レイアウトのアルゴリズムは、縦横比を代わりに最初の順番を維持するようにします。
-- `Squarified` - レイアウトのタイリング アルゴリズムでは、`SliceAndDice` より縦横比がより正確で、Squarified より適切に並べ替えされます。
-- `Stripped` - タイプのアルゴリズムは、最適な縦横比を描画しますが、オブジェクトがサイズによって並べ替えられます。
-
-ツリーマップを使用すると、要件に最適なアルゴリズムを選択できます。デフォルトでは、Squarified メソッドが使用されます。また、次の 2 つのメカニズムを使用してノードに色を付けることができる機能も含まれています。
-
-- 項目を同じ値で色付けするグループ ベースのメカニズム。
-- 階級区分図に似たスケール ベースのメカニズムで、ノードの色をその値に基づいてマップします。
-
-### レイアウト方向
-
-<ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> プロパティによってユーザーは階層のノードが展開される方向を設定できます。
-
-<ApiLink type="Treemap" member="layoutOrientation" label="LayoutOrientation" /> プロパティがレイアウト タイプ SliceAndDice および Strip と動作することに注意してください。
-
-- `Horizontal` – 子ノードは水平に積み重ねられます (SliceAndDice)。
-- `Vertical` – 子ノードは垂直に積み重ねられます (SliceAndDice)。
-
-## Angular ツリーマップのスタイル設定
-
-次の例では、ツリーマップは、`NodeStylingScript` イベントを介してスタイル設定することによって実現されるノードのルック アンド フィールを変更する機能を示しています。
-
-<Sample src="/charts/tree-map/styling" height={600} alt="Angular ツリーマップのスタイル設定" />
-
-### Angular ツリーマップのハイライト表示
-
-次の例では、ツリーマップでノードのハイライト機能を示しています。
-この機能には 2 つのオプションがあります。各ノードは、不透明度を下げることで個別に明るくしたり、他のすべてのノードに同じ効果をトリガーさせたりすることができます。この機能を有効にするには、<ApiLink type="Treemap" member="highlightingMode" label="HighlightingMode" /> を Brighten または FadeOthers に設定します。
-
-<Sample src="/charts/tree-map/highlighting" height={600} alt="Angular ツリーマップのハイライト" />
-
-## Angular ツリーマップのパーセントベースのハイライト表示
-
-- <ApiLink type="Treemap" member="highlightedDataSource" label="HighlightedItemsSource" />: ハイライト表示された値を読み取るデータ ソースを指定します。null の場合、ハイライト表示された値は ItemsSource プロパティから読み取られます。
-- <ApiLink type="Treemap" member="highlightedValueMemberPath" label="HighlightedValueMemberPath" />: ハイライト表示された値が読み取られるデータ ソース内のプロパティの名前を指定します。
-- <ApiLink type="Treemap" member="highlightedValueOpacity" label="HighlightedValueOpacity" />: ハイライト表示された値の背後にある通常の値の不透明度を制御します。
-- <ApiLink type="Treemap" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" />: ハイライト表示された値を有効または無効にします。
-  - Auto: ツリーマップによって、使用するモードが決まります。
-  - Overlay: ツリーマップには、通常の値の上にハイライト表示された値が表示され、通常の値にはわずかに不透明度が適用されます。
-  - Hidden: ツリーマップにはハイライト表示された値は表示されません。
-
-<Sample src="/charts/tree-map/highlighting-percent-based" height={600} alt="Angular ツリーマップのパーセントベースのハイライト" />
-
-## その他のリソース
-
-関連するチャート タイプの詳細については、以下のトピックを参照してください。
-
-- [エリア チャート](area-chart.md)
-- [シェイプ チャート](shape-chart.md)
-
-## API リファレンス
-
-<ApiLink type="Treemap" /><br />
diff --git a/docs/angular/src/content/jp/components/dashboard-tile.mdx b/docs/angular/src/content/jp/components/dashboard-tile.mdx
deleted file mode 100644
index 1ea5763611..0000000000
--- a/docs/angular/src/content/jp/components/dashboard-tile.mdx
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: "Angular Dashboard Tile コンポーネント | Ignite UI for Angular"
-description: "Angular Dashboard Tile コンポーネントを簡単に使い始める方法をご覧ください。"
-keywords: "Ignite UI for Angular, UI controls, Angular widgets, web widgets, UI widgets, Angular, Native Angular Components Suite, Native Angular Controls, Native Angular Components Library, Angular Dashboard components, Angular Dashboard Tile controls, UI コントロール, Angular ウィジェット, Web ウィジェット, UI ウィジェット, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular Dashboard コンポーネント, Angular Dashboard Tile コントロール"
-mentionedTypes: ["Toolbar", "CategoryChart", "DataChart", "RadialGauge", "LinearGauge", "GeographicMap"]
-license: commercial
-_language: ja
-llms:
-  description: "Angular Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import dashboardTileToolbar from '@xplat-images/dashboard-tile-toolbar.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Dashboard Tile (ダッシュボード タイル) <Badge variant="preview" />
-
-Angular Dashboard Tile は、データ ソース コレクション/配列または単一のデータ ポイントを分析して、表示する最も適切な視覚化を決定する自動データ視覚化コンポーネントです。また、埋め込みの <ApiLink type="Toolbar" /> で提供される一連のツールを使用して、さまざまな方法で表示される視覚化を変更できます。
-
-提供されたデータの形状に応じて、以下を含む多種多様な視覚化が選択可能です。これには以下が含まれますが、これらに限定されません: カテゴリ チャート、`ラジアル チャートと極座標チャート、散布図、地理マップ、ラジアル ゲージとリニア ゲージ、ファイナンシャル チャート、積層型チャート。
-
-ツールバー内のチャート タイプ メニューを操作すると、候補リストの中から異なる視覚化を選択できます。
-
-## Angular Dashboard Tile の例
-
-<Sample src="/charts/dashboard-tile/local-data-source-dashboard" height={600} alt="Angular Dashboard Tile の例" />
-
-## 依存関係
-
-Ignite UI for Angular ツールセットに次のパッケージをインストールします:
-
-```cmd
-npm install igniteui-angular-charts
-npm install igniteui-angular-core
-npm install igniteui-angular-dashboards
-npm install igniteui-angular-gauges
-npm install igniteui-angular-data-grids
-npm install igniteui-angular-inputs
-npm install igniteui-angular-layouts
-npm install igniteui-angular-maps
-```
-
-Dashboard Tile コンポーネントを使用する場合、以下のモジュールを使用することをお勧めします:
-
-```ts
-import { IgxDashboardTileModule, IgxDataChartDashboardTileModule, IgxRadialGaugeDashboardTileModule,
-         IgxLinearGaugeDashboardTileModule, IgxGeographicMapDashboardTileModule,
-         IgxPieChartDashboardTileModule } from "igniteui-angular-dashboards";
-
-@NgModule({
-    imports: [
-        IgxDataChartDashboardTileModule,
-        IgxRadialGaugeDashboardTileModule,
-        IgxLinearGaugeDashboardTileModule,
-        IgxGeographicMapDashboardTileModule,
-        IgxPieChartDashboardTileModule,
-        IgxDashboardTileModule
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-コントロールはバインドしたデータを評価し、Ignite UI for Angular ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の <ApiLink type="DataSource" /> プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。
-
-- [IgxCategoryChart](charts/chart-overview.md)
-- [IgxDataChart](charts/chart-overview.md)
-- [IgxDataPieChart](charts/types/data-pie-chart.md)
-- [IgxGeographicMap](geo-map.md)
-- [IgxLinearGauge](linear-gauge.md)
-- [IgxRadialGauge](radial-gauge.md)
-
-デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした <ApiLink type="DataSource" /> の数によって決まります。たとえば、単一の数値をバインドすると <ApiLink type="RadialGauge" /> が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると <ApiLink type="DataPieChart" /> が取得されます。より多くの値パスを持つ <ApiLink type="DataSource" /> をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ <ApiLink type="DataChart" /> を受け取ります。また、<ApiLink type="GeographicMap" /> を取得するために、<ApiLink type="ShapeDataSource" /> または地理的ポイントを含むデータにバインドすることもできます。
-
-<ApiLink type="DataSource" /> をバインドするときに単一の視覚化にロックされることはなく、`VisualizationType` プロパティを設定することで、特定の視覚化を表示することをコントロールに指示できます。たとえば、特に折れ線チャートを表示したい場合は、次のように Dashboard Tile を定義できます。
-
-<Sample src="/charts/dashboard-tile/gauge-dashboard" height={600} alt="Angular Dashboard Tile Gauge の例" />
-
-視覚化または視覚化のプロパティも、コントロールの上部にある <ApiLink type="Toolbar" /> を使用して構成できます。この <ApiLink type="Toolbar" /> には、現在の視覚化の既定のツールに加えて、以下で強調表示されている 4 つの Dashboard Tile 固有のツールが含まれています。
-
-<Image src={dashboardTileToolbar} alt="Dashboard Tile Toolbar" />
-
-左から右へ:
-
-- 最初のツールは、コントロールに提供された <ApiLink type="DataSource" /> を含むデータ グリッドを表示します。これは切り替えツールなので、グリッドを表示した後にもう一度クリックすると、視覚化に戻ります。
-- 2 番目のツールを使用すると、現在のデータ視覚化の設定を構成できます。
-- 3 番目のツールを使用すると、現在の視覚化を変更して、異なるシリーズ タイプをプロットしたり、まったく異なるタイプの視覚化を表示したりすることができます。これは、前述の `VisualizationType` プロパティを設定することによってコントロール上で設定できます。
-- 最後のツールを使用すると、基になるデータ項目のどのプロパティをコントロールに含めるかを構成できます。これを構成するには、コントロールに <ApiLink type="CategoryChart" member="includedProperties" label="IncludedProperties" /> または <ApiLink type="CategoryChart" member="excludedProperties" label="ExcludedProperties" /> コレクションを設定します。
-
-このデモでは、ダッシュボード タイルと Angular 円チャートの統合を示します。右上のツールバー オプションを使用すると、スタイル設定やデータ視覚化の変更にアクセスできます。
-
-<Sample src="/charts/dashboard-tile/pie-dashboard" height={600} alt="Angular Dashboard Tile Pie の例" />
-
-このデモでは、ダッシュボード タイルと Angular 地理マップの統合を示します。右上のツールバー オプションを使用すると、スタイル設定やデータ視覚化の変更にアクセスできます。
-
-<Sample src="/charts/dashboard-tile/map-dashboard" height={600} alt="Angular Dashboard Tile Map の例" />
-
-## API リファレンス
-
-<ApiLink type="Toolbar" /><br />
-<ApiLink type="CategoryChart" /><br />
-<ApiLink type="DataChart" /><br />
-<ApiLink type="DataPieChart" /><br />
-<ApiLink type="GeographicMap" /><br />
-<ApiLink type="LinearGauge" /><br />
-<ApiLink type="RadialGauge" /><br />
-
-## その他のリソース
-
-- [Ignite UI for Angular **フォーラム (英語)**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub (英語)**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx b/docs/angular/src/content/jp/components/excel-library-using-cells.mdx
deleted file mode 100644
index 3e2d50a248..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-using-cells.mdx
+++ /dev/null
@@ -1,348 +0,0 @@
----
-title: "Angular Excel ライブラリ | セルの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリのセルでセルへのアクセス、数式とコメントの追加、セルの結合、セルの書式設定などの操作を実行する方法について説明します。Ignite UI for Angular Excel のサンプルを是非お試しください!
-keywords: Excel library,  cell operations, Ignite UI for Angular, Infragistics, Excel ライブラリ, セル操作, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "WorkbookStyleCollection", "IWorksheetCellFormat", "WorkbookColorInfo", "DisplayOptions"]
-_language: ja
-llms:
-  description: "Excel ワークシートの WorksheetCell オブジェクトは、ワークシートの実際のデータ値を保持するオブジェクトです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular セルの使用
-
-Excel ワークシートの <ApiLink type="WorksheetCell" /> オブジェクトは、ワークシートの実際のデータ値を保持するオブジェクトです。このトピックは、名前で領域にアクセス、数式やコメントをセルに追加、結合および書式設定など、セルで実行できる多くの操作について説明します。
-
-## Angular セルの使用の例
-
-<Sample src="/excel/excel-library/working-with-cells" height={200} alt="Angular セルの使用の例" />
-
-## 参照
-
-以下のコードは、以下のコード スニペットを使用するインポートを示します。
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { Worksheet } from "igniteui-angular-excel";
-import { WorksheetTable } from "igniteui-angular-excel";
-import { NamedReference } from "igniteui-angular-excel";
-import { WorksheetCellComment } from "igniteui-angular-excel";
-import { FormattedString } from "igniteui-angular-excel";
-```
-
-## セルと領域を参照
-
-<ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="Worksheet" member="getCell" label="GetCell" /> または <ApiLink type="Worksheet" member="getRegion" label="GetRegion" /> メソッドを呼び出して <ApiLink type="WorksheetCell" /> オブジェクト または <ApiLink type="WorksheetRegion" /> オブジェクトへアクセスできます。両メソッドはセルを参照する文字列パラメーターを許容します。書式設定を適用する場合または数式とセルのコンテンツで作業する場合にセル参照を取得すると便利です。
-
-以下のコード例では、セルと領域を参照する方法を示します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-//Accessing a single cell
-var cell = worksheet.getCell("E2");
-//Accessing a range of cells
-var region = worksheet.getRegion("G1:G10");
-```
-
-## セルと領域に名前でアクセス
-
-Microsoft Excel では各セルとセル領域に名前が割り当てられています。アドレスの代わりにセルまたは領域の名前を使用してセルまたは領域を参照できます。
-
-Infragistics Angular Excel Library は、<ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="Worksheet" member="getCell" label="GetCell" /> と <ApiLink type="Worksheet" member="getRegion" label="GetRegion" /> メソッドによって、名前によるセルおよび領域の参照をサポートします。そのセルまたは領域を参照する <ApiLink type="NamedReference" /> インスタンスを使用してセルまたは領域を参照します。
-
-以下のコード スニペットは、セルまたは領域の名前の例です。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cell_reference = workbook.namedReferences().add("myCell", "=Sheet1:A1");
-var region_reference = workbook.namedReferences().add("myRegion", "=Sheet1!A1:B2");
-```
-
-以下のコードは、"myCell" と "myRegion" 名前付き参照によって参照されたセルと領域を取得する例です。
-
-```ts
-var cell = worksheet.getCell("myCell");
-var region = worksheet.getRegion("myRegion");
-```
-
-## セルにコメントを追加
-
-コメントによって、エンドユーザーがマウスをセル上にホバーするとセルのヒントまたはメモを表示することができます。コメントはテキストを含むツールチップのような吹き出しとして表示します。Infragistics Angular Excel Library は <ApiLink type="WorksheetCell" /> オブジェクトの <ApiLink type="WorksheetCell" member="comment" label="Comment" /> プロパティでセルにコメントを追加できます。
-
-以下のコード例は、セルにコメントを追加する方法を示します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cellComment = new WorksheetCellComment();
-var commentText = new FormattedString("This cell has a comment.");
-cellComment.text = commentText;
-
-worksheet.rows(0).cells(0).comment = cellComment;
-```
-
-## セルに数式を追加
-
-Infragistics Excel ライブラリは、ワークシートでセルまたはセルのグループに Microsoft Excel の数式を追加できます。<ApiLink type="WorksheetCell" /> オブジェクトの <ApiLink type="WorksheetCell" member="applyFormula" label="ApplyFormula" /> メソッドを使用、または <ApiLink type="WorksheetCell" member="formula" label="Formula" /> オブジェクトを初期化してセルに割り当てることができます。セルに数式を適用する方法に関わらず、<ApiLink type="WorksheetCell" /> オブジェクトのプロパティを使用して <ApiLink type="WorksheetCell" member="formula" label="Formula" /> オブジェクトにアクセスできます。値が必要な場合、セルの <ApiLink type="WorksheetCell" member="value" label="Value" /> プロパティを使用します。
-
-以下のコードは、セルに数式を追加する方法を示します。
-
-```ts
- var workbook = new Workbook();
- var worksheet = workbook.worksheets().add("Sheet1");
- worksheet.rows(5).cells(0).applyFormula("=SUM(A1:A5)");
-
- //Using a Formula object to apply a formula
- var sumFormula = Formula.parse("=SUM(A1:A5)", CellReferenceMode.A1);
- sumFormula.applyTo(worksheet.rows(5).cells(0));
-```
-
-## セル書式のコピー
-セルには背景色、書式文字列、フォント スタイルなどさまざまな書式を持つことができます。以前書式設定したセルと同じ書式を持つようにする場合、<ApiLink type="WorksheetCell" /> オブジェクトの <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティで公開した各オプションを設定する代わりに <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> オブジェクトの <ApiLink type="IWorksheetCellFormat" member="setFormatting" label="SetFormatting" /> メソッドを呼び出して <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> オブジェクトへ渡してコピーします。これによって最初のセルから 2 番目のセルにすべての書式設定をコピーします。行、結合セル領域、または列でも行うことができます。
-
-以下のコードは、2 列目の書式を 4 列目にコピーする方法を示します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-//Format 2nd column
-worksheet.columns(1).cellFormat.fill = CellFill.createSolidFill("Blue");
-worksheet.columns(1).cellFormat.font.bold = true;
-
-//Copy format of 2nd column to 4th column
-worksheet.columns(3).cellFormat.setFormatting(worksheet.columns(1).cellFormat);
-```
-
-## セルの書式設定
-
-Infragistics Angular Excel Library は、セルの外観と動作をカスタマイズすることができます。<ApiLink type="WorksheetCell" />、<ApiLink type="WorksheetRow" />、<ApiLink type="WorksheetColumn" />、または <ApiLink type="WorksheetMergedCellsRegion" /> オブジェクトの <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティで公開したプロパティを設定してセルをカスタマイズできます。
-
-セル外観の各アスペクトをカスタマイズできます。セルのフォント、背景、境界線だけでなくテキストの配列と回転を設定できます。セルのテキストで文字ごとに異なる書式を適用することさえ可能です。
-
-書式文字列を割り当てることによってセル値を書式設定することも可能です。許容可能な書式文字列は .NET の標準書式および書式コードに従います。
-
-以下のコードは、セルの書式設定と数値を通貨として表示する方法を示します。
-
-```ts
-var workbook = new Workbook(format);
-var workbook = workbook.worksheets().add("Sheet1");
-
-worksheet.columns(2).cellFormat.formatString = "\"$\"#,##0.00";
-```
-
-## Excel 2007 カラー モデル
-
-このカラー パレットは Microsoft Excel 2007 UI のカラー ダイアログと似ています。[Excel オプション] => [保存] => [色] からこのカラー ダイアログを開くことができます。
-
-<ApiLink type="CellFill" /> クラスで静的なプロパティおよびメソッドを使用してすべての可能な塗りつぶしタイプを作成できます。以下の通りです:
-
-- `NoColor` - 色なしの塗りつぶしを表すプロパティ。ワークシートの背景画像がある場合は透けて見えます。
-
-- `CreateSolidFill` - Solid のパターン スタイルと、メソッドで指定された <ApiLink type="WorkbookColorInfo" member="color" label="Color" /> または <ApiLink type="WorkbookColorInfo" /> に設定された背景色を持つ <ApiLink type="CellFillPattern" /> インスタンスを返します。
-
-- `CreatePatternFill` - 指定されたパターン スタイルと、背景とパターンの色に指定された <ApiLink type="WorkbookColorInfo" member="color" label="Color" /> または <ApiLink type="WorkbookColorInfo" /> 値がある <ApiLink type="CellFillPattern" /> インスタンスを返します。
-
-- `CreateLinearGradientFill` - 角度とグラデーション境界が指定された <ApiLink type="CellFillLinearGradient" /> インスタンスを返します。
-
-- `CreateRectangularGradientFill` - 内側の長方形とグラデーション境界の左、上、右、下が指定された <ApiLink type="CellFillRectangularGradient" /> インスタンスを返します。内側の四角形値が指定されていない場合、セルの中心が内側の四角形として使用されます。
-
-以下は、作成可能なさまさまな塗りつぶしを表す派生タイプです。
-
-- <ApiLink type="CellFillPattern" /> - 色なし、単色、パターン塗りつぶしのセル塗りつぶしを表すパターン。Excel の [セルの書式設定] ダイアログの [塗りつぶし] タブに、カラー セクションに直接対応する背景色の情報とパターンの色があります。
-
-- <ApiLink type="CellFillLinearGradient" /> - 線状グラデーションの塗りつぶしを表します。角度 (左から右の線状グラデーションの時計回りの角度) と、グラデーションの長さに沿って 2 つ以上の色のトランジションを説明するグラデーション境界コレクションがあります。
-
-- <ApiLink type="CellFillRectangularGradient" /> - 長方形グラデーションの塗りつぶしを表します。相対座標で、グラデーションが開始し、セルの端で終わる内側の四角形を説明する上、左、右、下の値があります。内側の四角形からセルの端までのパスに沿って 2 つ以上の色のトランジションを説明するグラデーション境界コレクションもあります。
-
-以下のコード スニペットは、<ApiLink type="WorksheetCell" /> で単色の塗りつぶしを作成する方法を示します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var cellFill = CellFill.createSolidFill("Blue");
-worksheet.rows(0).cells(0).cellFormat.fill = cellFill;
-```
-
-セルで線状グラデーションと長方形グラデーションを使用して、色 (Excel セルの背景、罫線などの色) を指定できます。これらのグラデーションを付けられたワークブックを .xls ファイル形式で保存して、Excel 2007/2010 で開いたときはグラデーションを表示し、これらのファイルを Microsoft Excel 2003 で開くときは、最初のグラデーション境界からのベタ一色の色でセルが塗りつぶされるようにします。
-
-以下は色を定義する方法です。
-
-- 自動的な色 (WindowText システム カラー)
-
-- 任意のユーザー定義の RGB カラー
-
-- テーマの色
-
-RGB またはテーマの色が使用される場合、色を明るくする、または暗くするためにオプションの濃淡を適用できます。この濃淡は Microsoft Excel 2007 UI では直接設定できませんが、ユーザーに表示されるカラー パレットのさまざまな色が濃淡が適用された実際的なテーマの色になります。
-
-以下は各ワークブックと関連付けされた 12 色のテーマ色です。
-
-- ライト 1
-
-- ライト 2
-
-- ダーク 1
-
-- ダーク 2
-
-- アクセント1
-
-- アクセント2
-
-- アクセント3
-
-- アクセント4
-
-- アクセント5
-
-- アクセント6
-
-- ハイパーリンク
-
-- 表示済みハイパーリンク
-
-- これらはワークブックが作成されるときの既定値で、Excel を介してカスタマイズできます。
-
-色は、シールされた不変クラスである <ApiLink type="WorkbookColorInfo" /> クラスで定義されます。このクラスには静的な `Automatic` プロパティがあり、自動的な色を返します。色またはテーマ値とオプションの濃淡で <ApiLink type="WorkbookColorInfo" /> インスタンスを作成することを可能にするさまざまなコンストラクタがあります。
-
-<ApiLink type="WorkbookColorInfo" /> の <ApiLink type="WorkbookColorInfo" member="getResolvedColor" label="GetResolvedColor" /> メソッドは、Excel でファイルを開く際にユーザーに実際に表示される色を決定することが可能となります。
-
-<ApiLink type="WorkbookColorInfo" /> がテーマの色を表す場合、Workbook インストールをこのメソッドに渡す必要があります。これによってテーマの色の RGB 値をワークブックから取得できます。
-
-.xlsx など新しいファイル形式で保存するときは、より新しい色の情報が直接ファイルに保存されます。xls など古いファイル形式で保存するときは、パレットで最も近い色のインデックスが保存されます。さらに、古い形式には、新しい色の情報を示すために保存できる機能レコードがあります。
-
-古い形式が Microsoft Excel 2003 以前のバージョンで開かれると機能が無視されますが Excel 2007 以降で開かれるとレコードが読み取られて色情報が標準形式レコードから以前読み込まれたインデックス付きの色を上書きします。
-
-## Excel 書式設定のサポート
-
-セルの `cellFormat` プロパティから返された <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> オブジェクトを使用して <ApiLink type="WorksheetCell" /> でさまざまな形式のホストを設定できます。この <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> オブジェクトはさまざまなセルの側面 (境界線、フォント、塗りつぶし、配置) のスタイル設定、セルのサイズ自動調整やロックなどを設定できます。
-
-<ApiLink type="Workbook" /> オブジェクトの <ApiLink type="Workbook" member="styles" label="Styles" /> コレクションを使用して Microsoft Excel 2007 ビルトイン スタイルにアクセスできます。Excel のスタイル リストは、Microsoft Excel 2007 で [ホーム] タブの [セルのスタイル] ギャラリーにあります。
-
-ワークブックの <ApiLink type="Workbook" member="styles" label="Styles" /> コレクションに標準スタイルという特別なタイプのスタイルがあり、コレクションの <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> プロパティによって、または Normal という名前でコレクションにインデックスしてアクセスできます。
-
-<ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> にはワークブックのすべてのセルのデフォルトのプロパティが含まれています。ただし、行、列またはセルで指定されている場合はその限りではありません。<ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> でプロパティを変更すると、ワークブックのすべてのデフォルトのセル書式プロパティが変更されます。ワークブックの既定のフォント以外に変更したい場合などに便利です。
-
-以下のメソッドを使用して <ApiLink type="Workbook" member="styles" label="Styles" /> コレクションのクリア、または <ApiLink type="WorkbookStyleCollection" member="clear" label="Clear" /> や <ApiLink type="WorkbookStyleCollection" member="reset" label="Reset" /> メソッドで定義された状態にリセットすることができます。両メソッドはすべてのユーザー定義スタイルを削除しますが <ApiLink type="WorkbookStyleCollection" member="clear" label="Clear" /> は <ApiLink type="Workbook" member="styles" label="Styles" /> コレクション全体をクリアします。
-
-この機能では、<ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> プロパティが <ApiLink type="IWorksheetCellFormat" /> オブジェクトに追加されています。これは書式の親スタイルを表す、<ApiLink type="WorkbookStyle" /> インターフェイスへの参照です。スタイルの書式では、このプロパティは常に null です。スタイルが親スタイルを持つことができないためです。行、列およびセル書式には、<ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> プロパティが常にデフォルトで <ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> スタイルを返します。
-
-<ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> プロパティを null に設定した場合、<ApiLink type="WorkbookStyleCollection" member="normalStyle" label="NormalStyle" /> スタイルに戻ります。スタイル コレクションで別のスタイルに設定される場合、そのスタイルはセル書式にすべての未設定のプロパティのデフォルトを保持するようになります。
-
-<ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> プロパティをセル書式に設定した場合、<ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> に含まれる書式オプションはセル書式から削除されます。すべてのその他のプロパティはそのまま残されます。たとえば、境界線の書式を含むセルの <ApiLink type="IWorksheetCellFormat" member="style" label="Style" /> を作成してスタイルをセルのスタイルとして設定した場合、セル書式の境界線の書式オプションは削除され、セル書式に塗りつぶしの書式のみ含まれます。
-
-書式オプション フラグが書式から削除されると、すべての関連付けたプロパティは未設定値にリセットされます。したがってセル書式の罫線プロパティはデフォルト/未設定値に暗黙的にリセットされます。
-
-行、列、セルおよび結合セルを表すクラスで、<ApiLink type="WorksheetCell" member="getResolvedCellFormat" label="GetResolvedCellFormat" /> メソッドを使用することで、セルに実際に何が表示されるかを決定できます。
-
-このメソッドは、ベースとなった関連付けられた <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> に参照を返す <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> インスタンスを返します。そのため <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティへの以降の変更は、<ApiLink type="WorksheetCell" member="getResolvedCellFormat" label="GetResolvedCellFormat" /> の呼び出しから返されるインスタンスに反映されます。
-
-## セルの結合
-
-セルの値または書式の設定以外に、2 つ以上のセルをひとつのセルとして表示するためにセルを結合することができます。セルを結合する場合、長方形の領域内にセルがなければなりません。
-
-セルを結合した場合、領域の各セルが同じ値とセル書式になります。結合セルは同じ <ApiLink type="WorksheetMergedCellsRegion" /> オブジェクトに関連付けされ、<ApiLink type="WorksheetCell" member="associatedMergedCellsRegion" label="AssociatedMergedCellsRegion" /> プロパティからアクセスできるようになります。<ApiLink type="WorksheetMergedCellsRegion" /> オブジェクトも結果としてセルと同じ値およびセル書式になります。
-
-領域または領域内の任意のセルの値 (またはセル書式) を設定すると、すべてのセルおよび領域の値を変更します。セルを結合を解除する場合、以前結合したセルすべて結合以前に指定された共有のセル書式を保持します。ただし、領域の左上のセルのみが共有値を保持します。
-
-結合されたセル領域を作成するには、セルの範囲を <ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="Worksheet" member="mergedCellsRegions" label="MergedCellsRegions" /> コレクションに追加する必要があります。このコレクションは、4 つの整数パラメーターを取得する `Add` メソッドを公開します。4 つのパラメーターは、開始する行と列 (左上隅のセル) のインデックス、および終了する行と列 (右下隅のセル) のインデックスを決定します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = workbook.worksheets().add("Sheet1");
-
-// Make some column headers
-worksheet.rows(1).cells(1).value = "Morning";
-worksheet.rows(1).cells(2).value = "Afternoon";
-worksheet.rows(1).cells(3).value = "Evening";
-
-// Create a merged region from column 1 to column 3
-var mergedRegion1 =  ws.mergedCellsRegions().add(0, 1, 0, 3);
-
-// Set the value of the merged region
-mergedRegion1.value = "Day 1";
-
-// Set the cell alignment of the middle cell in the merged region.
-// Since a cell and its merged region shared a cell format, this will ultimately set the format of the merged region
-worksheet.rows(0).cells(2).cellFormat.alignment = HorizontalCellAlignment.Center;
-```
-
-## Excel に表示されるセル テキストを取得
-
-セルに表示されるテキストは、書式文字列やセルが含まれる列幅など実際のセル値以外の複数の要因に依存します。
-
-書式文字列は、セルの値がテキストに変換される方法と、書式設定された値でどのリテラル文字が表示されるのかを決定します。ここで書式コードに関する詳細情報を見つけることができます。
-
-セルで使用可能な水平領域の量は、値がユーザーに表示される方法に大きく影響します。
-
-さまざまな列幅に基づいて表示されるテキストは異なります。
-
-数字を表示して “General” または “@” を含む書式文字列を使用するとき、セルの幅に合った書式設定を見つけるさまざまな書式があります。以下は書式の例です。
-
-- **Normal Value** - スペースに制限がない場合と同じように数字が表示されます。
-
-- **10 進数の削除** - 10 進数は、一致する書式が見つかるまで 1 つづつ削除されます。たとえば、値 12345.6789 値は以下の書式に一致するまで減らされます。12345.679、12345.68、12345.7、12346。最初の有効数字が 1 つだけ残るとこれは停止します。したがって、たとえば 0.0001234567890 のような値は 0.0001 に短縮されます。
-
-- **指数、5 decimal digits** - 数字は 1.23457E+09 または 1.23457E-04 などの 0.00000E+00 の形式で表示されます。
-
-- **指数、4 decimal digits** - 数字は 1.23457E+09 または 1.23457E-04 などの 0.0000E+00 の形式で表示されます。
-
-- **指数、3 decimal digits** - 数字は 1.235E+09 または 1.235E-0 などの 0.000E+00 の形式で表示されます。
-
-- **指数、2 decimal digits** - 数字は 1.23E+09 または 1.23E-04 などの 0.00E+00 の形式で表示されます。
-
-- **指数、1 decimal digits** - 数字は 1.2E+09 または 1.2E-04 などの 0.0E+00 の形式で表示されます。
-
-- **指数、0 decimal digits** - 数字は 1E+09 または 1E-04 などの 0E+00 の形式で表示されます。
-
-- **四捨五入された値** - 最初の有効数字が数の 10 進部分にある場合、値は直近の整数値に丸められます。たとえば、値 0.0001234567890 の場合、0 に四捨五入され、セルに表示されるテキストは 0になります。
-
-- **Hash marks** - 数の凝縮されたバージョンを表示できる場合、ハッシュ (#) がセルの幅一杯繰り返されます。
-
-- **Empty string** - ハッシュ マークでセルを埋められない場合、空の文字列が表示されるセル テキストとして返されます。
-
-数値の書式文字列に General または @ が含まれない場合、以下の段階のサイズ変更しかありません。普通の値、ハッシュ マーク、空の文字列。
-
-テキストがセルで使用される場合、切り取られる、またはセル内にないにかかわらず、セルに表示されるテキストは常にフル値です。
-
-これが該当しない唯一のときは、パディング文字が書式文字列で使用される時です。テキストのために十分な余地がないとき、値はすべてのハッシュ マークとして表示されます。
-
-ワークシートの <ApiLink type="Worksheet" member="displayOptions" label="DisplayOptions" /> の <ApiLink type="DisplayOptions" member="showFormulasInCells" label="ShowFormulasInCells" /> プロパティを設定してセルに結果の代わりに数式を表示できます。書式文字列やセル幅は無視されます。テキスト値は書式文字列が @ であるかのように表示します。整数でない数値は書式文字列が 0.0 であるかのように表示し、整数の数値は書式文字列が 0 のように表示します。
-
-さらに、値が合わない場合、すべてのハッシュとして表示しません。完全に表示できないとしても、表示テキストはセル テキストとしてフル テキストを今まで通り返します。
-
-以下のコード スニペットは、<ApiLink type="WorksheetCell" member="getText" label="GetText" /> メソッドを使用して Excel で表示されるようなテキストを取得する方法を示します。
-
-```ts
-var workbook = new Workbook();
-var worksheet = this.workbook.worksheets().add("Sheet1");
-
-var cellText = worksheet.rows(0).cells(0).getText();
-```
-
-## API リファレンス
-
-<ApiLink type="CellFillLinearGradient" /><br />
-<ApiLink type="CellFillPattern" /><br />
-<ApiLink type="CellFillRectangularGradient" /><br />
-<ApiLink type="CellFill" /><br />
-<ApiLink type="IWorksheetCellFormat" /><br />
-<ApiLink type="Formula" /><br />
-<ApiLink type="WorkbookColorInfo" /><br />
-<ApiLink type="WorkbookStyle" /><br />
-<ApiLink type="Workbook" /><br />
-<ApiLink type="WorksheetCell" /><br />
-<ApiLink type="WorksheetColumn" /><br />
-<ApiLink type="WorksheetRegion" /><br />
-<ApiLink type="WorksheetRow" /><br />
-<ApiLink type="Worksheet" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-using-tables.mdx b/docs/angular/src/content/jp/components/excel-library-using-tables.mdx
deleted file mode 100644
index 338e577eb3..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-using-tables.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
----
-title: "Angular Excel ライブラリ | テーブルの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリのテーブル機能を使用して、行と列のデータを書式設定します。詳細については、Ignite UI for Angular Excel のチュートリアルを参照してください。
-keywords: Excel library, tables, Ignite UI for Angular, Infragistics, Excel ライブラリ, テーブル, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "WorksheetTable", "Worksheet", "SortSettings"]
-_language: ja
-llms:
-  description: "Infragistics Angular Excel Engine の WorksheetTable 機能は、行列のデータを書式設定できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular テーブルの使用
-
-Infragistics Angular Excel Engine の <ApiLink type="WorksheetTable" /> 機能は、行列のデータを書式設定できます。ワークシート テーブルのデータは <ApiLink type="Worksheet" /> の他の行や列のデータから個々に管理できます。
-
-<Sample src="/excel/excel-library/working-with-tables" height={500} alt="Angular Using Tables Example" />
-
-Angular Using Tables Example
-
-## テーブルをワークシートに追加
-Infragistics Angular Excel Engine のワークシート テーブルは <ApiLink type="WorksheetTable" /> オブジェクトによって表され、ワー​​クシートの <ApiLink type="Worksheet" member="tables" label="Tables" /> コレクションに追加されます。テーブルを追加するには、このコレクションの `Add` メソッドを呼び出す必要があります。このメソッドでは、テーブルを追加する領域、テーブルにヘッダーを含めるかどうか、およびオプションで <ApiLink type="WorksheetTableStyle" /> オブジェクトとしてテーブルのスタイルを指定できます。
-
-以下のコード サンプルは、ヘッダーを含むテーブルを <ApiLink type="Worksheet" /> の A1 to G10 (A1 to G1 が列ヘッダー) 領域に追加する方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = this.workbook.worksheets().add("Sheet1");
-
-worksheet.tables().add("A1:G10", true);
-```
-
-テーブルを追加後 <ApiLink type="WorksheetTable" /> で <ApiLink type="WorksheetTable" member="insertColumns" label="InsertColumns" />、<ApiLink type="WorksheetTable" member="insertDataRows" label="InsertDataRows" />、<ApiLink type="WorksheetTable" member="deleteColumns" label="DeleteColumns" />、または <ApiLink type="WorksheetTable" member="deleteDataRows" label="DeleteDataRows" /> メソッドを呼び出して行列を追加または削除して変更できます。テーブルの <ApiLink type="WorksheetTable" member="resize" label="Resize" /> メソッドを使用して新しいテーブル範囲を設定できます。
-
-以下のコード スニペットは、3 つのメソッドの使用方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-//Will add 5 columns at index 1.
-table.insertColumns(1, 5);
-
-//Will add 5 rows at index 0.
-table.insertDataRows(0, 5);
-
-//Will delete 5 columns starting at index 1.
-table.deleteColumns(1, 5);
-
-//Will delete 5 rows starting at index 0.
-table.deleteDataRows(0, 5);
-
-//Will resize the table to be in the region of A1:G15.
-table.resize("A1:G15");
-```
-
-## テーブルのフィルタリング
-<ApiLink type="WorksheetTable" /> の列にフィルターを適用します。フィルターが列で適用されると、テーブルに適用したすべてのフィルター条件と一致する行を決定するために再評価されます。
-
-テーブルのデータを後で変更または行の `Hidden` プロパティを変更した場合、フィルター条件は自動的に再評価されません。テーブルのフィルター条件は、テーブルの列フィルターが追加、削除、変更されたときか、<ApiLink type="WorksheetTable" member="reapplyFilters" label="ReapplyFilters" /> メソッドがテーブルに対して呼び出されたときに限り再適用されます。
-
-以下は、<ApiLink type="WorksheetTable" /> の列で使用できるフィルター タイプです。
-
-- <ApiLink type="AverageFilter" /> - このコードは、列のすべてのセルの平均値の上か下かに基づいてセルをフィルターする方法を示します。
-- <ApiLink type="CustomFilter" /> - 1 つ以上のカスタム条件に基づいてセルをフィルターできます。
-- <ApiLink type="DatePeriodFilter" /> - 年の特定の月または四半期の日付を含むセルのみが表示されます。
-- <ApiLink type="FillFilter" /> - 特定の塗りつぶしを含むセルのみが表示されます。
-- <ApiLink type="FixedValuesFilter" /> - 特定の表示値のみに一致するまたは日付/時間の特定のグループ内に分類されるセルが表示されます。
-- <ApiLink type="FontColorFilter" /> - 特定のフォントの色を含むセルのみが表示されます。
-- <ApiLink type="RelativeDateRangeFilter" /> - フィルターが適用されたときに、以下の日または前の四半期のように日付の相対的な時間の範囲内で発生するかどうかに基づいて、日付値ををフィルターできます。
-- <ApiLink type="TopOrBottomFilter" /> - このフィルターはトップまたはボトム N 値をフィルターします。このフィルターはトップまたはボトム N %値をフィルターします。
-- <ApiLink type="YearToDateFilter" /> - 年の始まりとフィルターが適用される日付の間に発生する場合、日付値を含むYearToDateFilter-をフィルターできます。
-
-以下のコード スニペットは、<ApiLink type="WorksheetTable" /> の最初の列に平均を超えるフィルターを適用する方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-table.columns(0).applyAverageFilter(AverageFilterType.AboveAverage);
-```
-
-## テーブルのソート
-テーブル列でソート条件を設定するとソートが実行されます。ソート条件が列で設定されると、テーブルのセルの順番を決定するためにテーブルのすべてのソート条件が再評価されます。ソートの基準を満たすためにセルを移動させる必要があるとき、テーブルのセルの行全体が 1 つの単位として移動されます。
-
-テーブルのデータが後で変更される場合、ソート条件は自動的に再評価されません。テーブルのソート条件は、ソート条件が追加、削除、変更される時に、または <ApiLink type="WorksheetTable" member="reapplySortConditions" label="ReapplySortConditions" /> メソッドがテーブルで呼び出されるときに限り再適用されます。ソート条件が再評価されると、表示されたセルのみがソートられます。非表示行のすべてのセルは適切に維持されます。
-
-テーブル列からソート条件へアクセスする以外に <ApiLink type="WorksheetTable" /> の <ApiLink type="WorksheetTable" member="sortSettings" label="SortSettings" /> プロパティの <ApiLink type="SortSettings" member="sortConditions" label="SortConditions" /> コレクションからも公開されます。これは、列/ソート条件のペアの順番に並べられたコレクションです。このコレクション内の順序はソートの優先順位です。
-
-列に設定可能なソート条件タイプは以下のとおりです。
-
-- <ApiLink type="OrderedSortCondition" /> - セル値に基づいてセルを昇順または降順にソートします。
-- <ApiLink type="CustomListSortCondition" /> - テキストまたは表示値に基づいて定義された順序でセルをソートします。このソート方法は、日付がカレンダーに表示されるためアルファベット順よりも便利です。
-- <ApiLink type="FillSortCondition" /> - 塗りつぶしが特定のパターン/グラデーションであるかどうかに基づいてセルをソートします。
-- <ApiLink type="FontColorSortCondition" /> - フォントが特定の色であるかどうかによってセルをソートします。
-
-また <ApiLink type="WorksheetTable" /> の <ApiLink type="WorksheetTable" member="sortSettings" label="SortSettings" /> の <ApiLink type="SortSettings" member="caseSensitive" label="CaseSensitive" /> プロパティは、文字列が大文字と小文字を区別してソートできるかどうかを開発者が設定できます。
-
-以下のコード スニペットは、<ApiLink type="WorksheetTable" /> に <ApiLink type="OrderedSortCondition" /> を適用する方法です。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = this.workbook.worksheets().add("Sheet1");
-var table = worksheet.tables().add("A1:G10", true);
-
-table.columns(0).sortCondition = new OrderedSortCondition(SortDirection.Ascending);
-
-//Alternative:
-table.sortSettings.sortConditions().addItem(table.columns(0), new OrderedSortCondition(SortDirection.Ascending));
-```
-
-## API リファレンス
-
-<ApiLink type="WorksheetTableStyle" /><br />
-<ApiLink type="WorksheetTable" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-using-workbooks.mdx b/docs/angular/src/content/jp/components/excel-library-using-workbooks.mdx
deleted file mode 100644
index a68190bf84..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-using-workbooks.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: "Angular Excel ライブラリ | ワークブックの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリを使用してワークブックおよびワークシートを作成し、データを入力して日付を Microsoft® Excel にエクスポートします。詳細については、Ignite UI for Angular Excel のチュートリアルを参照してください。
-keywords: Excel library, workbooks, Ignite UI for Angular, Infragistics, Excel ライブラリ, ワークブック, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook"]
-_language: ja
-llms:
-  description: "Infragistics Angular Excel Engine は、データを Microsoft® Excel® に保存、また Microsoft® Excel® からの読み込みを可能にします。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ワークブックの使用
-
-Infragistics Angular Excel Engine は、データを Microsoft® Excel® に保存、また Microsoft® Excel® からの読み込みを可能にします。ライブラリのさまざまなクラスを使用してワークブックやワークシートを作成、データを入力、データを Excel にエクスポートできます。Infragistics Angular Excel Engine は、Excel スプレッドシートでアプリケーションのデータの表示や Excel からアプリケーションへのデータのインポートが簡単にできます。
-
-## Angular ワークブックの使用の例
-
-<Sample src="/excel/excel-library/operations-on-workbooks" height={500} alt="Angular ワークブックの使用の例" />
-
-## 既定のフォントを変更
-
-<ApiLink type="IWorkbookFont" /> の新しいインスタンスを作成します。<ApiLink type="Workbook" /> の <ApiLink type="Workbook" member="styles" label="Styles" /> コレクションに新しいフォントを追加します。このスタイルにはワークブックのすべてのセルのデフォルトのプロパティが含まれています。ただし、行、列またはセルで指定されている場合はその限りではありません。スタイルのプロパティを変更すると、ワークブックのデフォルトのセル書式プロパティが変更します。
-
-```ts
-var workbook = new Workbook();
-var font: IWorkbookFont;
-font = workbook.styles().normalStyle.styleFormat.font;
-font.name = "Times New Roman";
-font.height = 16 * 20;
-```
-
-## ワークブック プロパティの設定
-
-Microsoft Excel® ドキュメント プロパティは、ドキュメントの整理やトラッキングを改善するための情報を提供します。<ApiLink type="Workbook" /> オブジェクトの <ApiLink type="Workbook" member="documentProperties" label="DocumentProperties" /> プロパティを使用してこれらのプロパティを設定するために、Infragistics Angular Excel Engine を使用できます。使用可能なプロパティは以下のとおりです。
-
-- <ApiLink type="DocumentProperties" member="author" label="Author" />
-
-- <ApiLink type="DocumentProperties" member="title" label="Title" />
-
-- <ApiLink type="DocumentProperties" member="subject" label="Subject" />
-
-- <ApiLink type="DocumentProperties" member="keywords" label="Keywords" />
-
-- <ApiLink type="DocumentProperties" member="category" label="Category" />
-
-- <ApiLink type="DocumentProperties" member="status" label="Status" />
-
-- <ApiLink type="DocumentProperties" member="comments" label="Comments" />
-
-- <ApiLink type="DocumentProperties" member="company" label="Company" />
-
-- <ApiLink type="DocumentProperties" member="manager" label="Manager" />
-
-以下のコードは、ブックを作成し、`title` および `status` ドキュメント プロパティを設定する方法を示します。
-
-```ts
-var workbook = new Workbook();
-workbook.documentProperties.title = "Expense Report";
-workbook.documentProperties.status = "Complete";
-```
-
-## ブックの保護
-
-ブック保護機能は、ブックの構造を保護できます。つまり、ユーザーがそのブック内のワークシートを追加、名前変更、削除、非表示、およびソートができます。
-
-Infragistics Excel Engine のオブジェクト モデルから保護が強制されることはありません。これらの保護設定を履行し、対応する操作の実行をユーザーに許可または制限することは、このオブジェクト モデルを表示する UI の役割です。
-
-保護は、`protect` メソッドを呼び出すことによってブックに適用されます。
-
-<ApiLink type="Workbook" /> がパスワードを使用せずに保護される場合、エンドユーザーは Excel で <ApiLink type="Workbook" /> の保護をパスワードを入力せずに解除できます。<ApiLink type="Workbook" /> の保護をコードで解除するには、`unprotect` メソッドを使用できます。
-
-<ApiLink type="Workbook" /> が保護される場合、この <ApiLink type="Workbook" /> の `protection` プロパティの <ApiLink type="WorkbookProtection" /> インスタンスのプロパティの値は無効な操作を示します。
-
-<ApiLink type="Workbook" member="isProtected" label="IsProtected" /> が既に true の場合、`protect` メソッドは無視されます。
-
-```ts
-var workbook = new Workbook();
-workbook.protect(false, false);
-```
-
-ブックが保護されているかどうかの確認この読み取り専用プロパティは、ワークブックに Protect メソッドのオーバーロードを使用して設定された保護がある場合、true を返します。
-
-```ts
-var workbook = new Workbook();
-var protect = workbook.isProtected;
-```
-
-この読み取り専用プロパティは、保護の各設定を個別に取得するためにプロパティを含む WorkbookProtection 型のオブジェクトを返します。
-
-```ts
-var workbook = new Workbook();
-var protection = workbook.protection;
-```
-
-## API リファレンス
-
-<ApiLink type="DocumentProperties" /><br />
-<ApiLink type="WorkbookProtection" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-using-worksheets.mdx b/docs/angular/src/content/jp/components/excel-library-using-worksheets.mdx
deleted file mode 100644
index 1287445df9..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-using-worksheets.mdx
+++ /dev/null
@@ -1,238 +0,0 @@
----
-title: "Angular Excel ライブラリ | ワークシートの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリを使用してワークシートの行やセルにデータを入力でき、対応する値を設定できます。Ignite UI for Angular Excel からアプリケーションへデータを簡単に転送できます。
-keywords: Excel library, worksheet, Ignite UI for Angular, Infragistics, Excel ライブラリ, ワークシート, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "WorksheetCell", "DisplayOptions", "WorksheetFilterSettings", "IWorksheetCellFormat"]
-_language: ja
-llms:
-  description: "Angular Excel Engine の Worksheet にデータが保存されます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ワークシートの使用
-
-Angular Excel Engine の <ApiLink type="Worksheet" /> にデータが保存されます。Worksheet の行やセルにデータを入力でき、対応する値を設定できます。<ApiLink type="Worksheet" /> は、フィルター、ソート、セル書式のカスタマイズができます。
-
-## Angular ワークシートの使用の例
-
-<Sample src="/excel/excel-library/operations-on-worksheets" height={200} alt="Angular ワークシートの使用の例" />
-
-以下のコードは、以下のコード スニペットを使用するインポートを示します。
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { Worksheet } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { Color } from "igniteui-angular-core";
-
-import { CustomFilterCondition } from "igniteui-angular-excel";
-import { ExcelComparisonOperator } from "igniteui-angular-excel";
-import { FormatConditionTextOperator } from "igniteui-angular-excel";
-import { OrderedSortCondition } from "igniteui-angular-excel";
-import { RelativeIndex } from "igniteui-angular-excel";
-import { SortDirection } from "igniteui-angular-excel";
-import { WorkbookColorInfo } from "igniteui-angular-excel";
-```
-
-## ガイドラインの設定
-グリッド線は、ワークシートでセルを視覚的に分離するために使用されます。グリッド線は表示または非表示にできます。また、色を変更することもできます。
-
-列と行のヘッダーは、ワークシートの <ApiLink type="DisplayOptions" /> の <ApiLink type="DisplayOptions" member="showGridlines" label="ShowGridlines" /> プロパティを使用して、表示と非表示を切り替えることができます。以下のコードは、ワークシートのグリッドラインを非表示にする方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.showGridlines = false;
-```
-
-ワークシートの <ApiLink type="DisplayOptions" /> の <ApiLink type="DisplayOptions" member="gridlineColor" label="GridlineColor" /> プロパティを使用して、グリッド線の色を設定できます。以下のコードは、ワークシートのグリッド線を変更する方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.gridlineColor = "Red";
-```
-
-## ヘッダーの構成
-列ヘッダーと行ヘッダーは、列と行を視覚的に特定するために使用します。また、現在選択されているセルやセル領域をハイライト表示する場合にも使用します。
-
-列と行のヘッダーは、ワークシートの <ApiLink type="DisplayOptions" /> の <ApiLink type="DisplayOptions" member="showRowAndColumnHeaders" label="ShowRowAndColumnHeaders" /> プロパティを使用して、表示と非表示を切り替えることができます。以下のコードは、列と行ヘッダーを非表示にする方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.showRowAndColumnHeaders = false;
-```
-
-## ワークシートの編集を設定
-デフォルトで保存する <ApiLink type="Worksheet" /> オブジェクトが有効です。<ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="Workbook" member="protect" label="Protect" /> メソッドを使用してワークシートを保護することにより、ワークシートの編集を禁止できます。このメソッドは、保護する部分を決定する null 許容型 `bool` 引数が多くあり、オプションの 1 つは編集オブジェクトを許容し、**false** に設定した場合はワークシートの編集を防止します。
-
-以下のコードは、ワークシートで編集を無効にする方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-```
-
-<ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="Workbook" member="protect" label="Protect" /> メソッドを使用して構造変更からワークシートを保護できます。
-
-保護が設定されると、Worksheet オブジェクトの保護をこれらのオブジェクトでオーバーライドするために、<ApiLink type="IWorksheetCellFormat" /> オブジェクトの <ApiLink type="IWorksheetCellFormat" member="locked" label="Locked" /> プロパティを各セル、行、マージされたセル領域、または列で設定することができます。たとえば、1 つの列のセルを除き、ワークシートのすべてのセルを読み取り専用にする必要がある場合、特定の <ApiLink type="WorksheetColumn" /> オブジェクトで <ApiLink type="IWorksheetCellFormat" /> プロパティの <ApiLink type="IWorksheetCellFormat" member="locked" label="Locked" /> を **false** に設定します。これにより、その列内のセルの編集をユーザーに許可し、ワークシートの他のセルの編集は禁止できます。
-
-以下のコードはその方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-worksheet.columns(0).cellFormat.locked = false;
-```
-
-## ワークシート領域のフィルタリング
-フィルタリングは、<ApiLink type="Worksheet" /> オブジェクトの `filterSettings` プロパティから取得できるワークシートの <ApiLink type="WorksheetFilterSettings" /> でフィルター条件を設定できます。フィルター条件は、フィルター条件追加、削除、変更される時に、または <ApiLink type="WorksheetFilterSettings" member="reapplyFilters" label="ReapplyFilters" /> メソッドがワークシートで呼び出されるときに限り再適用されます。フィルターは、領域内で常にデータを評価するわけではありません。
-
-<ApiLink type="WorksheetFilterSettings" /> オブジェクトの <ApiLink type="WorksheetFilterSettings" member="setRegion" label="SetRegion" /> メソッドでフィルターを適用する領域を指定できます。
-
-以下は、フィルターをワークシートに追加するためのメソッド一覧と概要です。
-
-| メソッド | 説明    |
-| -------------|:-------------:|
-|<ApiLink type="WorksheetFilterSettings" member="applyAverageFilter" label="ApplyAverageFilter" />|データ範囲全体の平均を下回るデータであるか上回るデータであるかという条件に基づいてデータを絞り込むことのできるフィルターです。|
-|<ApiLink type="WorksheetFilterSettings" member="applyDatePeriodFilter" label="ApplyDatePeriodFilter" />|月または四半期の日付をフィルターできるフィルターを表します。|
-|<ApiLink type="WorksheetFilterSettings" member="applyFillFilter" label="ApplyFillFilter" />|背景の塗りつぶしに基づいてセルを絞り込むフィルターを表します。このフィルターには CellFill を 1 つ指定します。この塗りつぶしのセルがデータ範囲に表示されることになります。他のセルはすべて非表示になります。|
-|`ApplyFixedValuesFilter`|具体的な指定値に基づいて表示セルを絞り込むことのできるフィルターです。|
-|<ApiLink type="WorksheetFilterSettings" member="applyFontColorFilter" label="ApplyFontColorFilter" />|フォントの色に基づいてセルを絞り込むフィルターを表します。このフィルターには 1 つの色を指定します。この色のフォントのセルがデータ範囲に表示されることになります。他のセルはすべて非表示になります。|
-|<ApiLink type="WorksheetFilterSettings" member="applyIconFilter" label="ApplyIconFilter" />|条件付き書式アイコンに基づいてセルを絞り込むフィルターを表します。|
-|<ApiLink type="WorksheetFilterSettings" member="applyRelativeDateRangeFilter" label="ApplyRelativeDateRangeFilter" />|フィルターの適用日を基点とした相対日付によって日付セルの範囲を絞り込むことのできるフィルターです。|
-|<ApiLink type="WorksheetFilterSettings" member="applyTopOrBottomFilter" label="ApplyTopOrBottomFilter" />|ソートされた値リストの上位または下位にあるセルを表示できるフィルターです。|
-|<ApiLink type="WorksheetFilterSettings" member="applyYearToDateFilter" label="ApplyYearToDateFilter" />|日付セルの範囲を現在の年の開始日からフィルターの評価実施日までの期間に絞り込むことのできるフィルターです。|
-|<ApiLink type="WorksheetFilterSettings" member="applyCustomFilter" label="ApplyCustomFilter" />|1 つ、ないし 2 つのカスタム条件に基づいてデータを絞り込むことのできるフィルターです。この 2 つの絞り込み条件は論理積 (and) または論理和 (or) 演算子と組み合わせて使用できます。|
-
-以下のコード スニペットを使用してフィルターをワークシート領域に追加します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.filterSettings.setRegion("Sheet1!A1:A10");
-worksheet.filterSettings.applyAverageFilter(0, AverageFilterType.AboveAverage);
-```
-
-## ペインの固定と分割
-ペイン固定機能は、行をワークシートの上または列を左にで固定できます。ユーザーがスクロールしている間、固定した行や列は表示されたままになります。固定された行列は、削除できない実線によってワークシートの残りの部分と区切られます。
-
-ペイン固定を有効にするために <ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="DisplayOptions" /> の <ApiLink type="DisplayOptions" member="panesAreFrozen" label="PanesAreFrozen" /> プロパティを **true** に設定する必要があります。表示オプション <ApiLink type="DisplayOptions" member="frozenPaneSettings" label="FrozenPaneSettings" /> の `FrozenRows` と `FrozenColumns` プロパティを使用して固定する行列を指定できます。
-
-また `FirstRowInBottomPane` と `FirstColumnInRightPane` を個々に使用して下ペインの最初の行または右ペインの最初の列を指定できます。
-
-以下のコード スニペットは、ワークシートのペイン機能を固定する方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.panesAreFrozen = true;
-
-worksheet.displayOptions.frozenPaneSettings.frozenRows = 3;
-worksheet.displayOptions.frozenPaneSettings.frozenColumns = 1;
-
-worksheet.displayOptions.frozenPaneSettings.firstColumnInRightPane = 2;
-worksheet.displayOptions.frozenPaneSettings.firstRowInBottomPane = 6;
-```
-
-## ワークシート ズーム レベルの設定
-各ワークシートのズーム レベルは、<ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="DisplayOptions" /> の <ApiLink type="WorksheetDisplayOptions" member="magnificationInNormalView" label="MagnificationInNormalView" /> プロパティを使用して個別に変更できます。このプロパティは、10 から 400 の間の値を取得して適用したいズームのパーセンテージを表します。
-
-以下のコードはその方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.displayOptions.magnificationInNormalView = 300;
-```
-
-## ワークシート レベルのソート
-
-列または行にワークシート レベル オブジェクトでソートの条件を設定することによってソートが実行されます。列または行を昇順または降順にソートすることができます。
-
-これには、シートの <ApiLink type="Worksheet" member="sortSettings" label="SortSettings" /> プロパティを使用して取得できる <ApiLink type="Worksheet" /> オブジェクトの <ApiLink type="WorksheetSortSettings" /> に領域とソートタイプを指定します。
-
-シートのソート条件は、ソート条件が追加、削除、変更される時に、または <ApiLink type="WorksheetFilterSettings" member="reapplySortConditions" label="ReapplySortConditions" /> メソッドがワークシートで呼び出されるときに限り再適用されます。列または行を領域でソートします。'Rows' はデフォルトのソートタイプです。
-
-以下のコード スニペットは、ワークシートのセル領域を適用する方法を示します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.sortSettings.sortConditions().addItem(new RelativeIndex(0), new OrderedSortCondition(SortDirection.Ascending));
-```
-
-## ワークシートの保護
-<ApiLink type="Worksheet" /> オブジェクトで <ApiLink type="Workbook" member="protect" label="Protect" /> メソッドを呼び出してワークシートを保護できます。このメソッドは、以下のユーザー操作を制限または許容する null 許容型 `bool` パラメーターを公開します。
-
-- セルの編集
-- 図形、コメント、チャートなどのオブジェクトやコントロールを編集します。
-- シナリオの編集。
-- データ フィルタリング。
-- セルの書式設定。
-- 列の挿入、削除、書式設定。
-- 行の挿入、削除、書式設定。
-- ハイパーリンクの挿入。
-- データのソート。
-- ピボット テーブルの使用
-
-<ApiLink type="Worksheet" /> オブジェクトで <ApiLink type="Workbook" member="unprotect" label="Unprotect" /> メソッドを呼び出してワークシートの保護を削除できます。
-
-以下のコード スニペットは、上記にリストされたすべてのユーザー操作を保護を有効にします。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-worksheet.protect();
-```
-
-## ワークシートの条件付き書式設定
-
-<ApiLink type="Worksheet" /> の条件付き書式を設定するには、ワークシートの <ApiLink type="Worksheet" member="conditionalFormats" label="ConditionalFormats" /> コレクションで公開される多数の Add メソッドを使用できます。この Add メソッドの最初のパラメーターは条件付き書式に適用する Worksheet の `string` 領域です。
-
-Worksheet に追加可能な条件付き書式にその条件が true の場合に <ApiLink type="WorksheetCell" /> 要素の外観を決定する <ApiLink type="IWorksheetCellFormat" /> プロパティがあります。たとえば、<ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" /> や <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> などのこの <ApiLink type="IWorksheetCellFormat" /> プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。
-
-ワークシート セルの可視化の動作が異なるため、<ApiLink type="IWorksheetCellFormat" /> プロパティがない条件付き書式もあります。この条件付き書式は <ApiLink type="DataBarConditionalFormat" />、<ApiLink type="ColorScaleConditionalFormat" />、<ApiLink type="IconSetConditionalFormat" /> です。
-
-既存の <ApiLink type="Workbook" /> を Excel から読み込む際に、その <ApiLink type="Workbook" /> が読み込まれた場合も書式設定は保持されます。<ApiLink type="Workbook" /> を Excel ファイルに保存する場合も保持されます。
-
-以下のコード例はワークシートの条件付き書式の使用方法を紹介します。
-
-```ts
-var workbook = new Workbook(WorkbookFormat.Excel2007);
-var worksheet = workbook.worksheets().add("Sheet1");
-
-var color = new Color();
-color.colorString = "Red";
-
-var format = worksheet.conditionalFormats().addAverageCondition("A1:A10", FormatConditionAboveBelow.AboveAverage);
-format.cellFormat.font.colorInfo = new WorkbookColorInfo(color);
-```
-
-## API リファレンス
-
-<ApiLink type="IWorksheetCellFormat" /><br />
-<ApiLink type="ColorScaleConditionalFormat" /><br />
-<ApiLink type="DataBarConditionalFormat" /><br />
-<ApiLink type="DisplayOptions" /><br />
-<ApiLink type="Workbook" /><br />
-<ApiLink type="WorksheetCell" /><br />
-<ApiLink type="WorksheetColumn" /><br />
-<ApiLink type="WorksheetFilterSettings" /><br />
-<ApiLink type="WorksheetSortSettings" /><br />
-<ApiLink type="Worksheet" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx b/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx
deleted file mode 100644
index f1d45d8716..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-working-with-charts.mdx
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: "Angular Excel ライブラリ | チャートの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリのチャート機能を使用して、ワークシートのセル領域全体のデータ トレンドをチャートで表示します。Ignite UI for Angular Excel データを 70 種類以上のチャート タイプで可視化できます。
-keywords: Excel library, charts, Ignite UI for Angular, Infragistics, Excel ライブラリ, チャート, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet"]
-_language: ja
-
-llms:
-  description: "Infragistics Angular Excel Engine の WorksheetChart 機能は、ワークシートのセル領域全体のデータ トレンドをチャートで表示します。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular チャートの使用
-
-Infragistics Angular Excel Engine の <ApiLink type="WorksheetChart" /> 機能は、ワークシートのセル領域全体のデータ トレンドをチャートで表示します。たとえば Excel データを縦棒チャートや折れ線チャートで可視化する場合に便利です。
-
-## Angular チャートの使用の例
-
-<Sample src="/excel/excel-library/working-with-charts" height={500} alt="Angular チャートの使用の例" />
-
-<DocsAside type="info" title="情報">
-XLSX 形式が必要です。他の形式は現在サポートされていません。
-</DocsAside>
-
-## 使用方法
-ワークシートを追加するには、ワークシートの Shapes コレクションの <ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> メソッドを使用します。このメソッドは、チャート タイプと表示位置を左上のセル、右下のセル、それらのセルのパーセンテージで指定できます。
-
-<ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> メソッドはワークシートに追加されるワークシート チャート要素を返します。次にチャートの <ApiLink type="WorksheetChart" member="setSourceData" label="SetSourceData" /> メソッドを使用してデータ ソースとして使用するワークシート セル領域のセルのセル アドレスを設定できます。同様に行列のマッピングを Y と X 軸に切り替えることもできます。
-
-`Line`、`Area`、<ApiLink type="Column" />、`Pie` を含む 70 タイプ以上のチャート タイプがサポートされます。
-
-以下のコードは、Excel チャート機能を有効にする方法を示します。以下のスニペットは、ワークシートの最初の行の最初のセルと 13 番目のセル間に縦棒チャートを追加します。ソースデータは A2:M6 領域のデータに設定します。縦棒チャートの  X と Y 軸の列と行のマッピングを切り替えます。
-
-```ts
-var chart = ws.shapes().addChart(ChartType.ColumnClustered,
-      ws.rows(0).cells(0), { x: 0, y: 0 },
-      ws.rows(0).cells(12), { x: 100, y: 100 });
-
-chart.setSourceData("A2:M6", true);
-```
-
-## API リファレンス
-
-<ApiLink type="WorksheetChart" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-working-with-grids.mdx b/docs/angular/src/content/jp/components/excel-library-working-with-grids.mdx
deleted file mode 100644
index 88f0fbb002..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-working-with-grids.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: "Angular Excel ライブラリ | データ スプレッドシート | インフラジスティックス"
-description: Excel ライブラリは、Microsoft Excel 機能を使用したスプレッドシート データで作業が可能になります。Excel からアプリケーションへデータを簡単に転送できます。
-keywords: Excel library, Ignite UI for Angular, Infragistics, Excel ライブラリ, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook"]
-_language: ja
-llms:
-  description: "Excel ライブラリは、Microsoft Excel 機能を使用したスプレッドシート データで作業が可能になります。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular グリッドと Excel ライブラリ
-
-TODO
-
-## Angular グリッドと Excel ライブラリの例
-
-<Sample src="/excel/excel-library/working-with-grids" height={500} alt="Angular グリッドと Excel ライブラリの例" />
-
-## 使用方法
-
-以下のコードはその方法を示しています。TODO
-
-```ts
-TODO
-```
-
-## API リファレンス
-
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library-working-with-sparklines.mdx b/docs/angular/src/content/jp/components/excel-library-working-with-sparklines.mdx
deleted file mode 100644
index 7a128ce212..0000000000
--- a/docs/angular/src/content/jp/components/excel-library-working-with-sparklines.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: "Angular Excel ライブラリ | スパークラインの使用 | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリのスパークライン チャートを使用して、ワークシートのセル領域全体のデータ トレンドを視覚化します。Ignite UI for Angular Excel エンジン チュートリアルを是非お試しください!
-keywords: Excel library, sparkline chart, Ignite UI for Angular, Infragistics, Excel ライブラリ, スパークライン チャート, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook"]
-_language: ja
-llms:
-  description: "Infragistics Angular Excel Library は、Excel ワークシートにスパークラインを追加する機能があります。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular スパークラインを使用した作業
-
-Infragistics Angular Excel Library は、Excel ワークシートにスパークラインを追加する機能があります。これらを使用して、ワークシートのデータ セルの領域全体のデータの傾向を簡単に視覚的に表現することができます。たとえば、特定のセル領域の Excel データを単純な縦棒チャートまたは折れ線チャートとして視覚化したい場合は、この機能を使用すると役立ちます。
-
-## Angular スパークラインを使用した作業の例
-
-<Sample src="/excel/excel-library/working-with-sparklines" height={500} alt="Angular スパークラインを使用した作業の例" />
-
-## サポートされるスパークライン
-以下はサポートされる定義済スパークラインのタイプです。
-
-- 折れ線チャート
-- 列
-- 積層 (Win/Loss)
-
-以下のコードは、sparklineGroups コレクションを使用してスパークラインをワークシートへ追加する方法を示します。
-
-```ts
-var workbook: Workbook;
-var sheet1 = workbook.worksheets().add("Sparklines");
-var sheet2 = workbook.worksheets().add("Data");
-sheet1.sparklineGroups().add(SparklineType.Line, "Sparklines!A1:A1", "Data!A2:A11");
-sheet1.sparklineGroups().add(SparklineType.Column, "Sparklines!B1:B1", "Data!A2:A11");
-workbook.save(workbook, "Sparklines.xlsx");
-```
-
-## API リファレンス
-
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/excel-library.mdx b/docs/angular/src/content/jp/components/excel-library.mdx
deleted file mode 100644
index f22bbffb97..0000000000
--- a/docs/angular/src/content/jp/components/excel-library.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: "Angular Excel ライブラリ | データ スプレッドシートとテーブル | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリは、Microsoft Excel 機能を使用してスプレッドシート データを使用した作業が可能になります。Ignite UI for Angular Excel ライブラリを使用して Excel からアプリケーションにデータを簡単に転送できる方法について説明します。
-keywords: Excel library, Ignite UI for Angular, Infragistics, workbook, Excel ライブラリ, ワークブック, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "Worksheet", "Cell", "Formula"]
-_language: ja
-llms:
-  description: "Infragistics Angular Excel ライブラリは、Workbook、Worksheet、Cell、Formula などの人気の Microsoft® Excel® スプレッドシート オブジェクトを使用してスプレッドシート データで作業をすることができます。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Excel ライブラリの概要
-
-Infragistics Angular Excel ライブラリは、<ApiLink type="Workbook" />、<ApiLink type="Worksheet" />、<ApiLink type="WorksheetCell" label="Cell" />、<ApiLink type="Formula" /> などの人気の Microsoft® Excel® スプレッドシート オブジェクトを使用してスプレッドシート データで作業をすることができます。Infragistics Angular Excel ライブラリによって Excel スプレッドシートでアプリケーションのデータを表示するだけでなく、Excel からアプリケーションへのデータの転送も簡単になります。
-
-## Angular Excel ライブラリの例
-
-<Sample src="/excel/excel-library/overview" height={100} alt="Angular Excel ライブラリの例" />
-
-## 依存関係
-excel パッケージをインストールするときに core パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-excel
-```
-
-## モジュールの要件
-
-Angular Excel ライブラリを作成するには、以下のモジュールが必要です。
-
-```ts
-// app.module.ts
-import { IgxExcelModule } from 'igniteui-angular-excel';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxExcelModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## モジュールの実装
-
-Excel ライブラリには、アプリのバンドル サイズを制限するために使用できる 5 つのモジュールが含まれています。
-
-- **IgxExcelCoreModule** – オブジェクトモデルを含み、Excel の基盤となります。
-- **IgxExcelFunctionsModule** – Sum、Average、Min、Max、SumIfs、Ifs など、数式評価のほとんどのカスタム関数を含み、このモジュールがなくても数式が計算 ( “=SUM(A1:A5 などの数式を適用するなど) されてセルの Value を要求する場合は数式の解析で問題を発生しません。(注: 例外のスローではありません。数式の結果がエラーとなるため特定のエラーを表すオブジェクト)。
-- **IgxExcelXlsModule** – xls (および関連する) タイプ ファイルのロジックの読み込みと保存を含みます。これは Excel97to2003 関連の WorkbookFormats です。
-- **IgxExcelXlsxModule** – xlsx (および関連する) タイプ ファイルのロジックの読み込みと保存を含みます。これは Excel2007 関連および StrictOpenXml ANDWorkbookFormats です。
-- **IgxExcelModule** – 他の 4 つのモジュールの参照ですべての機能の読み込み/使用を可能にします。
-
-## サポートされるバージョンの Microsoft Excel
-以下は Excel のサポートされるバージョンのリストです。
-
-- Microsoft Excel 97
-
-- Microsoft Excel 2000
-
-- Microsoft Excel 2002
-
-- Microsoft Excel 2003
-
-- Microsoft Excel 2007
-
-- Microsoft Excel 2010
-
-- Microsoft Excel 2013
-
-- Microsoft Excel 2016
-
-<DocsAside type="info" title="情報">
-Excel ライブラリ は Excel Binary Workbook (.xlsb) フォーマットを現時点ではサポートしていません。
-</DocsAside>
-
-## ワークブックの読み込みと保存
-注: Excel ライブラリ モジュールをインポートした後、ワークブックを読み込みます。
-
-次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Worksheet" member="workbook" label="Workbook" /> を保存およびロードしています。
-
-<ApiLink type="Worksheet" member="workbook" label="Workbook" /> オブジェクトを読み込んで保存するために、実際の <ApiLink type="Worksheet" member="workbook" label="Workbook" /> の保存メソッドや static な `Load` メソッドを使用できます。
-
-```ts
-import { Workbook } from "igniteui-angular-excel";
-import { WorkbookSaveOptions } from "igniteui-angular-excel";
-import { WorkbookFormat } from "igniteui-angular-excel";
-import { ExcelUtility } from "ExcelUtility";
-
-var workbook = ExcelUtility.load(file);
-ExcelUtility.save(workbook, "fileName");
-```
-
-## Managing Heap
-
-Due to the size of the Excel Library, it's recommended to disable the source map generation.
-
-Modify `angular.json` by setting the `vendorSourceMap` option under architect => build => options and under serve => options:
-
-```ts
-    "architect": {
-        "build": {
-          "builder": "...",
-          "options": {
-            "vendorSourceMap": false,
-            "outputPath": "dist",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "tsConfig": "src/tsconfig.app.json",
-                  // ...
-          },
-              // ...
-        },
-        "serve": {
-          "builder": "...",
-          "options": {
-            "vendorSourceMap": false,
-            "browserTarget": "my-app:build"
-          },
-              // ...
-        },
-        // ...
-      }
-```
-
-## API References
-<ApiLink type="Worksheet" />
-<ApiLink type="Workbook" />
diff --git a/docs/angular/src/content/jp/components/excel-utility.mdx b/docs/angular/src/content/jp/components/excel-utility.mdx
deleted file mode 100644
index bb6b0ba285..0000000000
--- a/docs/angular/src/content/jp/components/excel-utility.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
----
-title: "Angular Excel ライブラリ | Excel ユーティリティ | インフラジスティックス"
-description: インフラジスティックスの Angular Excel ライブラリは、Microsoft Excel 機能を使用してスプレッドシート データを使用した作業が可能になります。Ignite UI for Angular Excel ライブラリを使用して Excel からアプリケーションにデータを簡単に転送できる方法について説明します。
-keywords: excel library, Ignite UI for Angular, Infragistics, saving files, loading files, WorkbookFormat, Excel ライブラリ, ファイルの保存, ファイルの読み込み, インフラジスティックス
-license: commercial
-mentionedTypes: ["Workbook", "WorkbookFormat", "WorkbookSaveOptions"]
-_language: ja
-llms:
-  description: "Excel ライブラリには、Microsoft Excel ファイルの読み込みや保存が可能なユーティリティ関数があります。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Excel ユーティリティ
-
-[Excel ライブラリ](excel-library.md)には、Microsoft Excel ファイルの読み込みや保存が可能なユーティリティ関数があります。
-
-```ts
-import { saveAs } from "file-saver"; // npm package: "file-saver": "^1.3.8"
-import { Workbook } from 'igniteui-angular-excel';
-import { WorkbookFormat } from 'igniteui-angular-excel';
-import { WorkbookSaveOptions } from 'igniteui-angular-excel';
-
-export class ExcelUtility {
-    public static getExtension(format: WorkbookFormat) {
-        switch (format) {
-            case WorkbookFormat.StrictOpenXml:
-            case WorkbookFormat.Excel2007:
-                return ".xlsx";
-            case WorkbookFormat.Excel2007MacroEnabled:
-                return ".xlsm";
-            case WorkbookFormat.Excel2007MacroEnabledTemplate:
-                return ".xltm";
-            case WorkbookFormat.Excel2007Template:
-                return ".xltx";
-            case WorkbookFormat.Excel97To2003:
-                return ".xls";
-            case WorkbookFormat.Excel97To2003Template:
-                return ".xlt";
-        }
-    }
-
-    public static load(file: File): Promise<Workbook> {
-        return new Promise<Workbook>((resolve, reject) => {
-            ExcelUtility.readFileAsUint8Array(file).then((a) => {
-                Workbook.load(a, null, (w) => {
-                    resolve(w);
-                }, (e) => {
-                    reject(e);
-                });
-            }, (e) => {
-                reject(e);
-            });
-        });
-    }
-
-    public static loadFromUrl(url: string): Promise<Workbook> {
-        return new Promise<Workbook>((resolve, reject) => {
-            const req = new XMLHttpRequest();
-            req.open("GET", url, true);
-            req.responseType = "arraybuffer";
-            req.onload = (d) => {
-                const data = new Uint8Array(req.response);
-                Workbook.load(data, null, (w) => {
-                    resolve(w);
-                }, (e) => {
-                    reject(e);
-                });
-            };
-            req.send();
-        });
-    }
-
-    public static save(workbook: Workbook, fileNameWithoutExtension: string): Promise<string> {
-        return new Promise<string>((resolve, reject) => {
-            const opt = new WorkbookSaveOptions();
-            opt.type = "blob";
-
-            workbook.save(opt, (d) => {
-                const fileExt = ExcelUtility.getExtension(workbook.currentFormat);
-                const fileName = fileNameWithoutExtension + fileExt;
-                saveAs(d as Blob, fileName);
-                resolve(fileName);
-            }, (e) => {
-                reject(e);
-            });
-        });
-    }
-
-    private static readFileAsUint8Array(file: File): Promise<Uint8Array> {
-        return new Promise<Uint8Array>((resolve, reject) => {
-            const fr = new FileReader();
-            fr.onerror = (e) => {
-                reject(fr.error);
-            };
-
-            if (fr.readAsBinaryString) {
-                fr.onload = (e) => {
-                    const rs = (fr as any).resultString;
-                    const str: string = rs != null ? rs : fr.result;
-                    const result = new Uint8Array(str.length);
-                    for (let i = 0; i < str.length; i++) {
-                        result[i] = str.charCodeAt(i);
-                    }
-                    resolve(result);
-                };
-                fr.readAsBinaryString(file);
-            } else {
-                fr.onload = (e) => {
-                    resolve(new Uint8Array(fr.result as ArrayBuffer));
-                };
-                fr.readAsArrayBuffer(file);
-            }
-        });
-    }
-}
-
-```
-
-## API リファレンス
-
-<ApiLink type="WorkbookFormat" /><br />
-<ApiLink type="WorkbookSaveOptions" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/general-changelog-dv.mdx b/docs/angular/src/content/jp/components/general-changelog-dv.mdx
deleted file mode 100644
index 075ee5500b..0000000000
--- a/docs/angular/src/content/jp/components/general-changelog-dv.mdx
+++ /dev/null
@@ -1,603 +0,0 @@
----
-title: "Angular 新機能 | Ignite UI for Angular | インフラジスティックス"
-description: "Ignite UI for Angular の新機能について学んでください。"
-keywords: Changelog, What's New, Ignite UI for Angular, Infragistics, 変更ログ, 新機能, インフラジスティックス
-mentionedTypes: ["SeriesViewer", "XYChart", "DomainChart", "DataChart", "Toolbar", "GeographicMap", "DatePicker", "DataPieChart", "MultiColumnComboBox", "CategoryChart", "CrosshairLayer", "FinalValueLayer", "CalloutLayer", "DataLegend", "RadialGauge", "RadialChart", "Toolbar"]
-namespace: Infragistics.Controls.Charts
-_language: ja
-llms:
-  description: "このトピックでは、igniteui-angular パッケージに含まれていないコンポーネントの変更についてのみ説明します。"
----
-
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import { Image } from 'astro:assets';
-import dataChartUserAnnotationCreate from '@xplat-images/charts/data-chart-user-annotation-create.gif';
-import chartdefaults1 from '@xplat-images/chartDefaults1.png';
-import chartdefaults2 from '@xplat-images/chartDefaults2.png';
-import chartdefaults3 from '@xplat-images/chartDefaults3.png';
-import chartdefaults4 from '@xplat-images/chartDefaults4.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Ignite UI for Angular 変更ログ
-
-Ignite UI for Angular の各バージョンのすべての重要な変更は、このページに記載されています。
-
-<DocsAside type="info" title="情報">
-このトピックでは、igniteui-angular パッケージに含まれていないコンポーネントの変更についてのみ説明します。
-igniteui-angular コンポーネントに固有の変更については CHANGELOG.MD を参照してください。
-</DocsAside>
-
-- [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master)
-
-## **21.0.1 (March 2026)**
-
-### 機能拡張
-
-#### igniteui-angular-charts
-
-- `MarkerType` 列挙型に `Checkmark` オプションが追加されました。シリーズで `MarkerType.Checkmark` を使用すると、円の中に V 字型のチェックマーク アイコンを表示できます。新しい `MarkerAutomaticBehavior.Checkmark` 列挙値でチャート内のすべてのシリーズにチェックマーク形状を適用でき、`SeriesViewer.CheckmarkMarkerTemplate` プロパティでテンプレートをカスタマイズできます。
-- マーカーをサポートするチャート シリーズで `MarkerSize` がサポートされ、デバイス非依存ピクセル単位でマーカー サイズを制御できるようになりました。`NaN` に設定するとテンプレート ベースの既定サイズに戻ります。
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明 |
-|------------|---------|-------------|
-| 2189 | IgxDataChart | ラベルがない場合に DataChart が軸のレンダリングをスキップする。 |
-| 3055 | IgxDataPieChart | Others スライスのスタイル プロパティが不足している。 |
-| 38668 | IgxDataTooltipLayer | チャートの TitleTextColor を使用すると TitleTextColor がオーバーライドされる。 |
-| 40238 | Excel | Excel 数式パーサーを修正 - Workbook.Load() が Excel.FormulaParseException をスローする。 |
-| 41167 | Excel | オブジェクトの数式がラウンドトリップされない - カメラ ツールのラウンドトリップの Excel サポートを追加。 |
-| 41419 | Excel | VBA 署名付き Excel ファイルの保存時に署名/証明書が保持されない。 |
-| 41594 | IgxDataChart | AssigningCategoryStyle の args.GetItems が null であるか、フラグメント シリーズのアイテム更新に機能しない。 |
-
-### 機能拡張
-
-### igniteui-angular-charts
-- `IgxDataChart` での水平方向の範囲レンダリングをサポートする `RangeBarSeries` が追加されました。
-
-## **21.0.0 (January 2026)**
-
-### 機能拡張
-
-### igniteui-angular-charts
-
-DataPieChart および ProportionalCategoryAngleAxis に OthersCategoryBrush と OthersCategoryOutline を追加しました。
-
-### 一般
-
-- Angular 21 のサポート。
-
-## **20.2.1 (December 2025)**
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明      |
-|------------|---------|-------------|
-|33808|IgxDataChart|TimeAxisInterval の IntervalType Ticks に設定されたスケールが表示されない。|
-|34255|IgxDataChart|0.00001 スケールの目盛りが重なって表示される。|
-|38510|IgxDataChart|Stacked シリーズの AssigningCategoryStyle イベント サポート。|
-
-### 機能拡張
-
-#### チャート
-
-- TimeXAxisLabelFormat に LabelFormatOverride イベントが追加され、TimeXAxis のすべての時間形式レベルでイベントを使用して書式設定をオーバーライドできるようになりました。
-
-- プロパティの有効な値を見つけやすくするために、より多くの項目を考慮するようにスキーマ生成を調整しました。
-
-## **20.2.0 (November 2025)**
-
-### igniteui-angular-charts (チャート)
-
-#### <Badge variant="preview" /> ユーザー注釈
-
-Ignite UI for Angular では、ユーザー注釈機能により、実行時に <ApiLink type="DataChart" /> にスライス注釈、ストリップ注釈、ポイント注釈を追加できるようになりました。これにより、エンドユーザーは、スライス注釈を使用して会社の四半期レポートなどの単一の重要イベントを強調したり、ストリップ注釈を使用して期間を持つイベントを示したりすることで、プロットに詳細を追加できます。ポイント注釈またはこれら 3 つの任意の組み合わせを使用して、プロットされたシリーズ上の個々のポイントを呼び出すこともできます。
-
-これは、<ApiLink type="Toolbar" /> のデフォルトのツールと統合されています。
-
-<Image src={dataChartUserAnnotationCreate} alt="Angular user-annotation-create" class="responsive-img" />
-
-#### <Badge variant="preview" /> 軸注釈の衝突検出
-
-軸注釈が自動で衝突を検出し、適切に収まるよう切り詰めます。この機能を有効にするには、次のプロパティを設定します:
-
-- <ApiLink type="TimeXAxis" member="shouldAvoidAnnotationCollisions" label="ShouldAvoidAnnotationCollisions" />
-- <ApiLink type="TimeXAxis" member="shouldAutoTruncateAnnotations" label="ShouldAutoTruncateAnnotations" />
-
-### igniteui-angular-maps (地理マップ)
-
-- Azure Map Imagery は RTM になりました。
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明      |
-|------------|---------|-------------|
-|40136|Excel Library|Excel ワークブック読み込み時に FormulaParseException 例外が発生する。
-|40262|IgxSpreadsheet|警告がある場合に #Circularity! が表示される。Excel との一致を要求 — 値 (例: 0) を表示するように改善。
-|40458|IgxSpreadsheet|Arial フォント使用時、igx-spreadsheet がセル内のテキストを切り捨てる。
-|40490|IgxDatePicker|Autofill による入力は日付ピッカーに反映されない。
-
-## **20.1.0 (September 2025)**
-
-### igniteui-angular-maps (地理マップ)
-
-#### <Badge variant="preview" /> Azure マップ画像のサポート
-
-<ApiLink type="IgxGeographicMap" /> は、 Azure ベースのマップ画像をサポートし、開発者は複数のアプリケーション タイプにわたって詳細かつ動的なマップを表示できるようになりました。複数のマップ レイヤーを組み合わせて地理データを視覚化し、インタラクティブなマッピング エクスペリエンスを簡単に作成できます。
-
-注: Bing マップ画像のサポートは段階的に廃止されます。既存のエンタープライズ キーは引き続き Bing Maps にアクセスするために利用できるため、Azure Maps へ移行する間も現在のアプリケーションをそのまま利用可能です。
-
-公開されている Azure Maps の一部は[こちら](https://azure.microsoft.com/ja-jp/products/azure-maps)をご覧ください。
-
-### igniteui-angular-charts (チャート)
-
-#### <Badge variant="preview" /> 新しい軸ラベル イベント
-
-軸ラベルに対するさまざまな操作を検出できるように、次のイベントが <ApiLink type="IgxDataChart" /> に追加されました。
-
-- `LabelMouseDown`
-- `LabelMouseUp`
-- `LabelMouseEnter`
-- `LabelMouseLeave`
-- `LabelMouseMove`
-- `LabelMouseClick`
-
-#### <Badge variant="preview" /> 対応軸
-
-X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸を簡単に複製できるようになりました。<ApiLink type="TimeXAxis" member="companionAxisEnabled" label="CompanionAxisEnabled" /> プロパティを有効にすると、複製された軸はチャートの反対側に配置され、そこから各軸プロパティを設定できます。
-
-#### <Badge variant="preview" /> RadialPieSeries インセット アウトライン
-
-<ApiLink type="RadialPieSeries" /> のアウトライン レンダリング方法を制御するために <ApiLink type="DataPieChart" member="useInsetOutlines" label="UseInsetOutlines" /> プロパティが追加されました。**true** に設定すると、アウトラインがスライス形状の内側に描画され、**false** (既定値) に設定すると、アウトラインはスライス形状の端に半分内側・半分外側で描画されます。
-
-**重大な変更**
-
-- <ApiLink type="ChartMouseEventArgs" /> クラスの <ApiLink type="ChartMouseEventArgs" member="plotAreaPosition" label="PlotAreaPosition" /> プロパティと <ApiLink type="ChartMouseEventArgs" member="chartPosition" label="ChartPosition" /> プロパティが逆になっている問題が修正されました。これにより、<ApiLink type="ChartMouseEventArgs" member="plotAreaPosition" label="PlotAreaPosition" /> と <ApiLink type="ChartMouseEventArgs" member="chartPosition" label="ChartPosition" /> が返す値が変更されます。
-
-### 機能拡張
-
-#### IgxBulletGraph
-
-- <Badge variant="preview" /> 新しい `LabelsVisible` プロパティが追加されました。
-
-#### チャート
-
-- DataToolTipLayer、ItemToolTipLayer、CategoryToolTipLayer にスタイル設定用の新しいプロパティが追加されました: `ToolTipBackground`、`ToolTipBorderBrush`、および `ToolTipBorderThickness`。
-
-- DataLegend にスタイル設定用の新しいプロパティが追加されました: <ApiLink type="DataLegend" member="contentBackground" label="ContentBackground" />、<ApiLink type="DataLegend" member="contentBorderBrush" label="ContentBorderBrush" />、および <ApiLink type="DataLegend" member="contentBorderThickness" label="ContentBorderThickness" />。<ApiLink type="DataLegend" member="contentBorderBrush" label="ContentBorderBrush" /> と <ApiLink type="DataLegend" member="contentBorderThickness" label="ContentBorderThickness" /> はそれぞれ既定で transparent と 0 に設定されているため、境界線を表示するにはこれらのプロパティを設定する必要があります。
-
-- マウスのワールド相対位置を提供する <ApiLink type="ChartMouseEventArgs" member="worldPosition" label="WorldPosition" /> という新しいプロパティが <ApiLink type="ChartMouseEventArgs" /> に追加されました。この位置は、軸空間内の X 軸と Y 軸の両方に対して 0 から 1 の間の値になります。
-
-- <ApiLink type="SeriesViewer" /> と <ApiLink type="DomainChart" /> に <ApiLink type="SeriesViewer" member="highlightingFadeOpacity" label="HighlightingFadeOpacity" /> が追加されました。ハイライト表示されたシリーズに適用される不透明度を設定できます。
-
-- ドメイン チャートの `CalloutLabelUpdating` イベントを公開しました。
-
-#### IgxLinearGauge
-
-- <Badge variant="preview" /> 新しい `LabelsVisible` プロパティが追加されました。
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明 |
-|------------|---------|-------------|
-|31624 | <ApiLink type="IgxCategoryChart" /> | <ApiLink type="IgxCategoryChart" /> を含むウィンドウをリサイズすると、チャートがシリーズをレンダリングできなくなる。|
-|27304 | <ApiLink type="IgxDataChart" /> | ズーム長方形が背景長方形と同じ位置に配置されない。|
-|37930 | <ApiLink type="IgxDataChart" /> | Data Annotation Overlay のテキスト色が機能しない。|
-|30600 | <ApiLink type="IgxDoughnutChart" /> | チャートやシリーズに textStyle プロパティが存在しない (円チャートにはある)。|
-|38231 | `IgxGrid` | 非ピン固定列は、非表示が存在する場合に元の位置に戻らない。|
-|33861 | Excel Library | 折れ線チャートを追加すると、ドイツ語カルチャで Excel ファイルが破損する。|
-
-## **20.0.1 (August 2025)**
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明      |
-|------------|---------|------------------|
-|36448 | <ApiLink type="IgxRadialGauge" /> | ラジアル ラベルの書式設定プロパティ (例: Title、SubTitles) が機能しない。|
-
-### igniteui-angular-charts (チャート)
-
-- 軸ラベルに使用できる <Badge variant="new" /> `MaximumExtent` および `MaximumExtentPercentage` プロパティを追加しました。
-
-## **20.0.0 (June 2025)**
-
-- Angular 20 のサポート。
-
-## **19.0.1 (February 2025)**
-
-### igniteui-angular-maps 地理マップ
-
-<DocsAside type="info" title="情報">
-2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。
-詳細は以下をご覧ください:
-</DocsAside>
-
-[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-### igniteui-angular-charts (チャート)
-
-- <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)レイヤーを追加しました:
-  - データ注釈バンド レイヤー
-  - データ注釈ライン レイヤー
-  - データ注釈矩形レイヤー
-  - データ注釈スライス レイヤー
-  - データ注釈ストリップ レイヤー
-
-- [データ ツールチップ](charts/features/chart-data-tooltip.md)と[データ 凡例](charts/features/chart-data-legend.md)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティが公開されています。
-
-- <Badge variant="preview" /> チャートの <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> プロパティが更新され、新しい列挙体 `DragSelect` が含まれるようになりました。これにより、ドラッグされたプレビュー Rect は、その中に含まれるポイントを選択します。 (ベータ版)
-
-- <Badge variant="preview" /> [ValueOverlay と ValueLayer](charts/features/chart-overlays.md) は、上記にリストした <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)
-
-- <Badge variant="new" /> [トレンドライン レイヤー](charts/features/chart-trendlines.md) シリーズ タイプを使用すると、トレンド ライン レイヤーごとに 1 つのトレンド ラインを特定のシリーズに適用できます。これにより、チャートに複数の [TrendlineLayer](charts/features/chart-overlays.md) シリーズ タイプを使用できるため、単一のシリーズで複数のトレンド ラインを使用できるようになります。
-
-### igniteui-angular-dashboards (ダッシュボード)
-
-- <ApiLink type="IgxDashboardTile" /> では、ソート、グループ化、フィルタリング、選択などの集計を DataGrid ビューからチャート視覚化に伝播できるようになりました。これは現在、<ApiLink type="IgxDashboardTile" /> の <ApiLink type="DataSource" /> を `IgxLocalDataSource` のインスタンスにバインドすることによってサポートされています。
-
-### igniteui-angular
-
-**重大な変更**
-
-- 'igniteui-angular-grids' パッケージの名前が 'igniteui-angular-data-grids' に変更されました。
-
-### 機能拡張
-
-#### Toolbar
-- ツールバーから追加された値レイヤーが凡例に表示されるようになりました。
-- ズーム リセット ツールはズーム ドロップダウンに移動されました。
-
-#### Data Pie Chart
-- チャートは `GetOthersContext()` メソッドを公開するようになりました。これにより、Others (その他) スライスのコンテンツが返されます。
-
-### バグ修正
-
-| バグ番号 | コントロール | 説明      |
-|------------|---------|------------------|
-|37023 | <ApiLink type="IgxDataChart" /> | overflow: hidden が設定されている場合にツールチップが切り取られたり画面外に表示されたりする。|
-|37685 | <ApiLink type="IgxSpreadsheet" /> | Arial フォントで書式設定された数値が正しく描画されない。|
-|37244 | Excel Library | カスタム データ検証が機能しない。|
-
-## **19.0.1 (February 2025)**
-
-### 機能拡張
-
-#### Toolbar
-
-- <ApiLink type="Toolbar" /> と <ApiLink type="ToolPanel" /> に新しい `GroupHeaderTextStyle` プロパティを追加しました。設定されている場合、すべての <ApiLink type="ToolActionGroupHeader" /> アクションに適用されます。
-- タイトル テキストの水平方向の配置を制御する <ApiLink type="SeriesViewer" member="titleHorizontalAlignment" label="TitleHorizontalAlignment" /> という新しいプロパティを <ApiLink type="ToolAction" /> に追加しました。
-- <ApiLink type="ToolActionSubPanel" /> に、パネル内の項目間の間隔を制御する <ApiLink type="ToolPanel" member="itemSpacing" label="ItemSpacing" /> という新しいプロパティを追加しました。
-
-### バグ修正
-
-次の表は、このリリースの Ignite UI for Angular ツールセットに対して行われたバグ修正を示しています。
-
-| バグ番号 | コントロール | 説明      |
-|------------|---------|------------------|
-|30286 | <ApiLink type="IgxDataChart" /> | バブルをクリックすると、Bubble Series のツールチップが近くのバブル データの内容に切り替わる。|
-|32906 | <ApiLink type="IgxDataChart" /> | <ApiLink type="IgxDataChart" /> は上部に 2 つの xAxis を表示している。|
-|33605 | <ApiLink type="IgxDataChart" /> | 凡例に ScatterLineSeries の線の色が正しく表示されない。|
-|35498 | <ApiLink type="IgxDataChart" /> | IncludedSeries で指定されたシリーズのツールチップは表示されない。|
-|34776 | <ApiLink type="IgxDataChart" /> | <ApiLink type="IgxDataChart" /> を繰り返し表示したり非表示にしたりすると、JS ヒープでメモリ リークが発生する。|
-|34053 | <ApiLink type="IgxRadialGauge" /> | スケール ラベルの位置がずれる。|
-|35496 | <ApiLink type="IgxSpreadsheet" /> | Excel に画像付きでスタイルを設定すると エラーが発生する。|
-|36176 | Excel Library | LET 関数を含む Excel ブックを読み込むと、例外が発生する。|
-|36379 | Excel Library | Excel ワークブック内のアルファ チャネルを含む色は読み込まれない。|
-|26218 | Excel Library | Excel ファイルを読み込むだけで、チャートのプロット領域の右マージンが狭くなり、塗りつぶしパターンと前景の塗りつぶしが消える。|
-|35495 | Excel Library | テンプレート ファイルを読み込むと、セル内の画像が失われる。|
-|34083 | Excel Library | テンプレート Excel ファイルのテキストに 「=」 が含まれている場合、TextOperatorConditionalFormat が正しく読み込まれない/保存されない。|
-
-## **19.0.0 (January 2025)**
-
-- Angular 19 のサポート。
-
-## **18.2.0 (December 2024)**
-
-### igniteui-angular-charts (チャート)
-
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
-
-### igniteui-angular-charts (入力)
-
-- <Badge variant="preview" />[カラー エディター](inputs/color-editor.md)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](menus/toolbar.md) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
-
-## **18.1.0 (September 2024)**
-
-- [データ円チャート](charts/types/data-pie-chart.md) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。
-
-- <Badge variant="new" /> [比例カテゴリ角度軸](charts/types/radial-chart.md) - スライスをプロットするための、<ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。
-
-- <ApiLink type="Toolbar" />
-
-  - 新しい ToolActionCheckboxList
-        選択用のチェックボックスを備えた項目のコレクションを表示する新しい CheckboxList ToolAction。ToolAction CheckboxList 内のグリッドの高さは 5 項目まで大きくなり、その後スクロールバーが表示されます。
-        IgxCheckboxListModule を登録する必要があります。
-
-  - 新しいフィルタリングのサポート
-
-  - 軸フィールドの変更
-        CategoryChart をターゲットにする場合のツールバーの新しいデフォルトの IconMenu。
-        ラベル フィールドは X 軸にマップされ、値フィールドは Y 軸にマップされます。
-        ターゲット チャートは、行われた変更にリアルタイムで反応します。チャートに ItemsSource が設定されていない場合、IconMenu は非表示になります。
-
-## **18.0.0 (June 2024)**
-
-- Angular 18 のサポート。
-
-### igniteui-angular-charts (チャート)
-
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#angular-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#angular-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
-
-- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
-複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
-
-- [ツリーマップのハイライト表示](charts/types/treemap-chart.md#angular-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、<ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> プロパティを使用して制御できます。
-
-- [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#angular-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" /> を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。<ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> で切り替えることができ、`FillBrushes` でスタイルを設定できます。
-
-- <ApiLink type="Toolbar" /> - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> オプション。
-
-### igniteui-angular-gauges (ゲージ)
-
-- <ApiLink type="RadialGauge" />
-  - ハイライト針の新しいラベル。<ApiLink type="RadialGauge" member="highlightLabelText" label="HighlightLabelText" /> と <ApiLink type="RadialGauge" member="highlightLabelSnapsToNeedlePivot" label="HighlightLabelSnapsToNeedlePivot" /> および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。
-
-## **18.0.0 (June 2024)**
-
-### igniteui-angular-charts (チャート)
-
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#angular-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#angular-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
-
-- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
-複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
-
-### igniteui-angular-gauges (ゲージ)
-
-- <ApiLink type="RadialGauge" />
-  - ハイライト針の新しいラベル。<ApiLink type="RadialGauge" member="highlightLabelText" label="HighlightLabelText" /> と <ApiLink type="RadialGauge" member="highlightLabelSnapsToNeedlePivot" label="HighlightLabelSnapsToNeedlePivot" /> および、その他の HighlightLabel の多くのスタイル関連プロパティが追加されました。
-
-## **17.3.0 (March 2024)**
-
-### igniteui-angular-charts
-
-- <ApiLink type="XYChart" member="initialFilter" label="InitialFilter" /> プロパティによる新しいデータ フィルタリング。フィルター式を適用して、チャート データをレコードのサブセットにフィルターします。大規模なデータのドリルダウンに使用できます。
-
-## igniteui-angular-gauges
-
-### **17.2.0 (January 2024)**
-
-- Save tool action has been added to save the chart to an image via the clipboard.
-- Vertical orientation has been added via the toolbar's <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
-- Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
-
-## igniteui-angular-charts (チャート)
-
-### **17.0.0 (November 2023)**
-
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
-
-### igniteui-angular - Toolbar - <Badge variant="preview" />
-
-- クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。
-- ツールバーの <ApiLink type="Toolbar" member="orientation" label="Orientation" /> プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。
-- ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。
-
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#angular-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#angular-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#angular-chart-trendlines-dash-array-example) of the series plotted in the chart.
-
-## **16.1.0 (June 2023)**
-- Angular 16 support.
-
-## 新しいコンポーネント
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
-
-## igniteui-angular-charts (チャート)
-
-- [ValueLayer](charts/features/chart-overlays.md#angular-value-layer) - <ApiLink type="ValueLayer" /> という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、<ApiLink type="CategoryChart" /> と <ApiLink type="FinancialChart" /> に適用されます。
-
-- **ダッシュ配列**を <ApiLink type="DataChart" /> のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#angular-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#angular-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#angular-チャート-トレンドラインのダッシュ配列の例)に適用できます。
-
-<DocsAside type="info" title="情報">
-The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
-</DocsAside>
-## **16.0.0 (May 2023)**
-### **15.0.0 (December 2022)**
-
-- Angular 15 のサポート。
-
-## **14.2.0 (November 2022)**
-
-デフォルトの動作を大幅に改善し、カテゴリ チャート API を改良して使いやすくしました。これらの新しいチャートの改善点は次のとおりです:
-
-### **13.2.0 (June 2022)**
-
-This release introduces a few improvements and simplifications to visual design and configuration options for the geographic map and all chart components.
-
-- Changed <ApiLink type="XYChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> property's type to **YAxisLabelLocation** from **AxisLabelLocation** in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Changed <ApiLink type="XYChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property's type to **XAxisLabelLocation** from **AxisLabelLocation** in <ApiLink type="FinancialChart" />
-- Added <ApiLink type="XYChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property to <ApiLink type="CategoryChart" />
-- Added support for representing geographic series of <ApiLink type="GeographicMap" /> in a legend
-- Added crosshair lines by default in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Added crosshair annotations by default in <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" />
-- Added final value annotation by default in <ApiLink type="FinancialChart" />
-- Added new properties in Category Chart and Financial Chart:
-  - <ApiLink type="XYChart" member="crosshairsLineThickness" label="CrosshairsLineThickness" /> and other properties for customizing crosshairs lines
-  - <ApiLink type="XYChart" member="crosshairsAnnotationXAxisBackground" label="CrosshairsAnnotationXAxisBackground" /> and other properties for customizing crosshairs annotations
-  - <ApiLink type="XYChart" member="finalValueAnnotationsBackground" label="FinalValueAnnotationsBackground" /> and other properties for customizing final value annotations
-  - <ApiLink type="XYChart" member="areaFillOpacity" label="AreaFillOpacity" /> that allow changing opacity of series fill (e.g. Area chart)
-  - <ApiLink type="XYChart" member="markerThickness" label="MarkerThickness" /> that allows changing thickness of markers
-- Added new properties in Category Chart, Financial Chart, Data Chart, and Geographic Map:
-  - <ApiLink type="SeriesViewer" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> that allows which marker type is assigned to multiple series in the same chart
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> for setting badge shape of all series represented in a legend
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> for setting badge complexity on all series in a legend
-- Added new properties in Series in Data Chart and Geographic Map:
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeShape" label="LegendItemBadgeShape" /> for setting badge shape on specific series represented in a legend
-  - <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> for setting badge complexity on specific series in a legend
-- Changed default vertical crosshair line stroke from <span style="color:#000000">#000000</span> to <span style="color:#BBBBBB">#BBBBBB</span> in category chart and series
-- Changed shape of markers to circle for all series plotted in the same chart. This can be reverted by setting chart's <ApiLink type="SeriesViewer" member="markerAutomaticBehavior" label="MarkerAutomaticBehavior" /> property to `SmartIndexed` enum value
-- Simplified shapes of series in chart's legend to display only circle, line, or square. This can be reverted by setting chart's <ApiLink type="SeriesViewer" member="legendItemBadgeMode" label="LegendItemBadgeMode" /> property to `MatchSeries` enum value
-- Changed color palette of series and markers displayed in all charts to improve accessibility
-
-| Old brushes/outlines | New outline/brushes |
-| -------------------- | ------------------- |
-| <span style="color:#8BDC5C">#8BDC5C</span> <br /><span style="color:#8B5BB1">#8B5BB1</span> <br /><span style="color:#6DB1FF">#6DB1FF</span> <br /><span style="color:#F8A15F">#F8A15F</span> <br /><span style="color:#EE5879">#EE5879</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#F7D262">#F7D262</span> <br /><span style="color:#8CE7D9">#8CE7D9</span> <br /><span style="color:#E051A9">#E051A9</span> <br /><span style="color:#A8A8B7">#A8A8B7</span> | <span style="color:#8BDC5C">#8BDC5C</span> <br /><span style="color:#8961A9">#8961A9</span> <br /><span style="color:#6DB1FF">#6DB1FF</span> <br /><span style="color:#82E9D9">#82E9D9</span> <br /><span style="color:#EA3C63">#EA3C63</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#F8CE4F">#F8CE4F</span> <br /><span style="color:#A8A8B7">#A8A8B7</span> <br /><span style="color:#E051A9">#E051A9</span> <br /><span style="color:#FF903B">#FF903B</span> <br /> |
-
-## igniteui-angular-charts (チャート)
-### **13.1.0 (November 2021)**
-
-<DocsAside type="info" title="情報">
-パッケージ「lit-html」を確認してください。最適な互換性のために、「^2.0.0」以降がプロジェクトに追加されます。
-</DocsAside>
-
-- Changed Bar/Column/Waterfall series to have square corners instead of rounded corners
-- Changed Scatter High Density series’ colors for heat min property from <span style="color:#8a5bb1">#8a5bb1</span> to <span style="color:#000000">#000000</span>
-- Changed Scatter High Density series’ colors for heat max property from <span style="color:#ee5879">#ee5879</span> to <span style="color:#ee5879">#ee5879</span>
-- Changed Financial/Waterfall series’ `NegativeBrush` and `NegativeOutline` properties from <span style="color:#C62828">#C62828</span> to <span style="color:#ee5879">#ee5879</span>
-- Changed marker's thickness to 2px from 1px
-- Changed marker's fill to match the marker's outline for <ApiLink type="PointSeries" />, <ApiLink type="BubbleSeries" />, <ApiLink type="ScatterSeries" />, <ApiLink type="PolarScatterSeries" />. You can use set <ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> property to Normal to undo this change
-- Compressed labelling for the <ApiLink type="TimeXAxis" /> and <ApiLink type="OrdinalTimeXAxis" />
-- New Marker Properties:
-  - series.<ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> - Can be set to `MatchMarkerOutline` so the marker depends on the outline
-  - series.<ApiLink type="XYChart" member="markerFillOpacity" label="MarkerFillOpacity" /> - Can be set to a value 0 to 1
-  - series.<ApiLink type="XYChart" member="markerOutlineMode" label="MarkerOutlineMode" /> - Can be set to `MatchMarkerBrush` so the marker's outline depends on the fill brush color
-- New Series Property:
-  - series.<ApiLink type="XYChart" member="outlineMode" label="OutlineMode" /> - Can be set to toggle the series outline visibility. Note, for Data Chart, the property is on the series
-- New chart properties that define bleed over area introduced into the viewport when the chart is at the default zoom level. A common use case is to provide space between the axes and first/last data points. Note, the <ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" />, listed below, will automatically set the margin when markers are enabled. The others are designed to specify a `Double` to represent the thickness, where PlotAreaMarginLeft etc. adjusts the space to all four sides of the chart:
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginLeft" label="PlotAreaMarginLeft" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginTop" label="PlotAreaMarginTop" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginRight" label="PlotAreaMarginRight" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginBottom" label="PlotAreaMarginBottom" />
-  - chart.<ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" />
-- New Highlighting Properties
-  - chart.<ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> - Sets whether hovered or non-hovered series to fade, brighten
-  - chart.<ApiLink type="SeriesViewer" member="highlightingBehavior" label="HighlightingBehavior" /> - Sets whether the series highlights depending on mouse position e.g. directly over or nearest item
-  - Note, in previous releases the highlighting was limited to fade on hover.
-- Added Highlighting Stacked, Scatter, Polar, Radial, and Shape series:
-- Added Annotation layers to Stacked, Scatter, Polar, Radial, and Shape series:
-- Added support for overriding the data source of individual stack fragments within a stacked series
-- Added custom style events to Stacked, Scatter, Range, Polar, Radial, and Shape series
-- Added support to automatically sync the vertical zoom to the series content
-- Added support to automatically expanding the horizontal margins of the chart based on the initial labels displayed
-- Redesigned color palette of series and markers:
-
-| Old brushes/outlines | New outline/brushes |
-| -------------------- | ------------------- |
-| <span style="color:#7446B9">#7446B9</span> <br /><span style="color:#9FB328">#9FB328</span> <br /><span style="color:#F96232">#F96232</span> <br /><span style="color:#2E9CA6">#2E9CA6</span> <br /><span style="color:#DC3F76">#DC3F76</span> <br /><span style="color:#FF9800">#FF9800</span> <br /><span style="color:#3F51B5">#3F51B5</span> <br /><span style="color:#439C47">#439C47</span> <br /><span style="color:#795548">#795548</span> <br /><span style="color:#9A9A9A">#9A9A9A</span> | <span style="color:#8bdc5c">#8bdc5c</span> <br /><span style="color:#8b5bb1">#8b5bb1</span> <br /><span style="color:#6db1ff">#6db1ff</span> <br /><span style="color:#f8a15f">#f8a15f</span> <br /><span style="color:#ee5879">#ee5879</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#f7d262">#f7d262</span> <br /><span style="color:#8ce7d9">#8ce7d9</span> <br /><span style="color:#e051a9">#e051a9</span> <br /><span style="color:#a8a8b7">#a8a8b7</span> <br /> |
-
-for example:
-
-|   |   |
-|---|---|
-| <Image src={chartdefaults1} alt="chartDefaults1" class="responsive-img" /> | <Image src={chartdefaults2} alt="chartDefaults2" class="responsive-img" /> |
-| <Image src={chartdefaults3} alt="chartDefaults3" class="responsive-img" /> | <Image src={chartdefaults4} alt="chartDefaults4" class="responsive-img" /> |
-
-#### igniteui-angular-charts (チャート)
-
-このリリースでは、地理マップとすべてのチャート コンポーネントのビジュアル デザインと構成オプションにいくつかの改善と簡素化が導入されています。
-
-### **11.2.0 (April 2021)**
-
-<DocsAside type="info" title="情報">
-These features are CTP
-</DocsAside>
-
-- Added support for wrap around display of the map (scroll infinitely horizontally)
-- Added support for shifting display of some map series while wrapping around the coordinate origin
-- Added support for highlighting of the shape series
-- Added support for some annotation layers for the shape series
-
-## igniteui-angular-charts (チャート)
-
-このリリースでは、すべてのチャート コンポーネントに、いくつかの新しく改善されたビジュアル デザインと構成オプションが導入されています。例えば、<ApiLink type="DataChart" />、<ApiLink type="CategoryChart" />、および <ApiLink type="FinancialChart" />。
-
-- 棒/縦棒/ウォーターフォール シリーズを、角丸ではなく角が四角になるように変更しました。
-- heat min プロパティの 散布高密度シリーズの色を <span style="color:#8a5bb1">#8a5bb1</span> から <span style="color:#000000">#000000</span> に変更しました。
-- heat max プロパティの 散布高密度シリーズの色を <span style="color:#ee5879">#ee5879</span> から <span style="color:#ee5879">#ee5879</span> に変更しました。
-- ファイナンシャル/ウォーターフォール シリーズの `NegativeBrush` および `NegativeOutline` プロパティを <span style="color:#C62828">#C62828</span> から <span style="color:#ee5879">#ee5879</span> に変更しました。
-- マーカーの厚さを 1px から 2px に変更しました。
-- <ApiLink type="PointSeries" />、<ApiLink type="BubbleSeries" />、<ApiLink type="ScatterSeries" />、<ApiLink type="PolarScatterSeries" /> のマーカーのアウトラインに一致するようにマーカーの塗りつぶしを変更しました。<ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> プロパティを Normal に設定すると、この変更を元に戻すことができます。
-- <ApiLink type="TimeXAxis" /> および <ApiLink type="OrdinalTimeXAxis" /> のラベリングを圧縮しました。
-- 新しいマーカー プロパティ:
-  - series.<ApiLink type="XYChart" member="markerFillMode" label="MarkerFillMode" /> - マーカーがアウトラインに依存するように、`MatchMarkerOutline` に設定できます。
-  - series.<ApiLink type="XYChart" member="markerFillOpacity" label="MarkerFillOpacity" /> - 0〜1 の値に設定できます。
-  - series.<ApiLink type="XYChart" member="markerOutlineMode" label="MarkerOutlineMode" /> - マーカーのアウトラインが塗りブラシの色に依存するように、`MatchMarkerBrush` に設定できます。
-- 新シリーズプロパティ:
-  - series.<ApiLink type="XYChart" member="outlineMode" label="OutlineMode" /> - シリーズ アウトラインの表示を切り替えるように設定できます。データ チャートの場合、プロパティはシリーズ上にあることに注意してください。
-  - チャートがデフォルトのズーム レベルにあるときにビューポートに導入されるブリード オーバー領域を定義する新しいチャート プロパティを追加しました。一般的な使用例では、軸と最初/最後のデータ ポイントの間にスペースを提供します。以下にリストされている <ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" /> は、マーカーが有効になっているときに自動的にマージンを設定することに注意してください。その他は、厚さを表す `Double` を指定するように設計されており、PlotAreaMarginLeft などがチャートの 4 辺すべてにスペースを調整します:
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginLeft" label="PlotAreaMarginLeft" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginTop" label="PlotAreaMarginTop" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginRight" label="PlotAreaMarginRight" />
-  - chart.<ApiLink type="XYChart" member="plotAreaMarginBottom" label="PlotAreaMarginBottom" />
-  - chart.<ApiLink type="XYChart" member="computedPlotAreaMarginMode" label="ComputedPlotAreaMarginMode" />
-- 新しいハイライト表示プロパティ:
-  - chart.<ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> - ホバーされたシリーズとホバーされていないシリーズをフェードまたは明るくするかを設定します。
-  - chart.<ApiLink type="SeriesViewer" member="highlightingBehavior" label="HighlightingBehavior" /> - 真上または最も近い項目など、マウスの位置に応じてシリーズをハイライト表示するかどうかを設定します。
-  - 以前のリリースでは、ハイライト表示はホバー時にフェードするように制限されていたことに注意してください。
-- 積層型、散布図、極座標、ラジアル、図形シリーズにハイライト表示を追加しました。
-- 積層型、散布図、極座標、ラジアル、図形注釈レイヤーを追加しました。
-- 積層型シリーズ内の個々の積層フラグメントのデータ ソースをオーバーライドするためのサポートが追加されました。
-- 積層型、散布、範囲、極座標、ラジアル、シェイプ シリーズにカスタム スタイルのイベントを追加しました。
-- 垂直ズームをシリーズ コンテンツに自動的に同期するサポートが追加されました。
-- 表示された最初のラベルに基づいてチャートの水平マージンを自動的に拡張するサポートが追加されました。
-- シリーズとマーカーの再設計されたカラー パレット:
-
-| 古いのブラシ/アウトライン | 新のアウトライン/ブラシ |
-| -------------------- | ------------------- |
-| <span style="color:#7446B9">#7446B9</span> <br /><span style="color:#9FB328">#9FB328</span> <br /><span style="color:#F96232">#F96232</span> <br /><span style="color:#2E9CA6">#2E9CA6</span> <br /><span style="color:#DC3F76">#DC3F76</span> <br /><span style="color:#FF9800">#FF9800</span> <br /><span style="color:#3F51B5">#3F51B5</span> <br /><span style="color:#439C47">#439C47</span> <br /><span style="color:#795548">#795548</span> <br /><span style="color:#9A9A9A">#9A9A9A</span> | <span style="color:#8bdc5c">#8bdc5c</span> <br /><span style="color:#8b5bb1">#8b5bb1</span> <br /><span style="color:#6db1ff">#6db1ff</span> <br /><span style="color:#f8a15f">#f8a15f</span> <br /><span style="color:#ee5879">#ee5879</span> <br /><span style="color:#735656">#735656</span> <br /><span style="color:#f7d262">#f7d262</span> <br /><span style="color:#8ce7d9">#8ce7d9</span> <br /><span style="color:#e051a9">#e051a9</span> <br /><span style="color:#a8a8b7">#a8a8b7</span> <br /> |
-
-例:
-
-|   |   |
-|---|---|
-| <Image src={chartdefaults1} alt="chartDefaults1" class="responsive-img" /> | <Image src={chartdefaults2} alt="chartDefaults2" class="responsive-img" /> |
-| <Image src={chartdefaults3} alt="chartDefaults3" class="responsive-img" /> | <Image src={chartdefaults4} alt="chartDefaults4" class="responsive-img" /> |
-
-Now, you need to use just package names instead of full paths to API classes and enums.
-
-Please also note that the name of the Data Grid component and its corresponding modules have also changed.
-
-```ts
-// gauges:
-import { IgxLinearGauge } from "igniteui-angular-gauges";
-import { IgxLinearGaugeModule } from "igniteui-angular-gauges";
-import { IgxLinearGraphRange } from "igniteui-angular-gauges";
-import { IgxRadialGauge } from 'igniteui-angular-gauges}';
-import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
-import { IgxRadialGaugeRange } from 'igniteui-angular-gauges';
-import { SweepDirection } from 'igniteui-angular-core';
-// charts:
-import { IgxFinancialChartComponent } from "igniteui-angular-charts";
-import { IgxFinancialChartModule } from "igniteui-angular-charts";
-import { IgxDataChartComponent } from "igniteui-angular-charts";
-import { IgxDataChartCoreModule } from "igniteui-angular-charts";
-// maps:
-import { IgxGeographicMapComponent } from "igniteui-angular-maps";
-import { IgxGeographicMapModule } from "igniteui-angular-maps";
-```
-
-- Code Before Changes
-
-Before, you had to import using full paths to API classes and enums:
-
-```ts
-// gauges:
-import { IgxLinearGaugeComponent } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-component';
-import { IgxLinearGaugeModule } from 'igniteui-angular-gauges/ES5/igx-linear-gauge-module';
-import { IgxLinearGraphRange } from 'igniteui-angular-gauges/ES5/igx-linear-graph-range';
-
-import { IgxRadialGaugeComponent } from "igniteui-angular-gauges/ES5/igx-radial-gauge-component";
-import { IgxRadialGaugeModule } from "igniteui-angular-gauges/ES5/igx-radial-gauge-module";
-import { IgxRadialGaugeRange } from "igniteui-angular-gauges/ES5/igx-radial-gauge-range";
-import { SweepDirection } from "igniteui-angular-core/ES5/SweepDirection";
-
-// charts:
-import { IgxFinancialChartComponent } from "igniteui-angular-charts/ES5/igx-financial-chart-component";
-import { IgxFinancialChartModule } from "igniteui-angular-charts/ES5/igx-financial-chart-module";
-import { IgxDataChartComponent } from "igniteui-angular-charts/ES5/igx-data-chart-component";
-import { IgxDataChartCoreModule } from "igniteui-angular-charts/ES5/igx-data-chart-core-module";
-
-// maps:
-import { IgxGeographicMapComponent } from "igniteui-angular-maps/ES5/igx-geographic-map-component";
-import { IgxGeographicMapModule } from "igniteui-angular-maps/ES5/igx-geographic-map-module";
-```
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
deleted file mode 100644
index 83ab8f7b74..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-data-csv.mdx
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | CSV データのバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップを使用して、ビュー モデルの地理的位置や CSV ファイルからロードされた地理的位置を含むデータの表示方法について説明します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, plot data, Ignite UI for Angular, Infragistics, data binding, Angular マップ, プロット データ, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicHighDensityScatterSeries"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "Ignite UI for Angular Map コンポーネントを使用すると、さまざまな種類のファイルからロードされた地理データをプロットできます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular CSV ファイルを地理的な場所にバインド
-
-Ignite UI for Angular Map コンポーネントを使用すると、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、カンマ区切り値 (CSV) ファイルから地理的な場所を読み込むことができます。
-
-## Angular CSV ファイルを地理的な場所にバインドの例
-
-<Sample src="/maps/geo-map/binding-data-csv" height={500} alt="Angular CSV ファイルを地理的な場所にバインドの例" />
-
-## データ例
-CSV ファイルからのデータの例:
-
-```ts
-City,Lat,Lon,State,Code,County,Density,Population
-New York,40.7856,-74.0093,New Jersey,NJ,Hudson,21057,54227
-Dundee,42.5236,-76.9775,New York,NY,Yates,579,1650
-```
-
-## コード スニペット
-以下のコードは、マップコンポーネント内の <ApiLink type="GeographicHighDensityScatterSeries" /> を、ロードされた CSV ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。
-
-```html
-<div className="sampleRoot" >
-<igx-geographic-map #map
-    width="700px"
-    height="500px"
-    zoomable="true" >
-</igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            County: {{item.county}}
-        </span>
-    <br/>
-        <span>
-            Population: {{item.density}} K
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxGeographicHighDensityScatterSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-geographic-csv_files",
-  styleUrls: ["./map-binding-geographic-csv_files.component.scss"],
-  templateUrl: "./map-binding-geographic-csv_files.component.html"
-})
-
-export class MapBindingDataCsvComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.componentDidMount();
-    }
-
-    public componentDidMount() {
-        // fetching JSON data with geographic locations from public folder
-        fetch("assets/Data/UsaCities.csv")
-            .then((response) => response.text())
-            .then((data) => this.onDataLoaded(data));
-    }
-
-    public onDataLoaded(csvData: string) {
-        const csvLines = csvData.split("\n");
-
-        // parsing CSV data and creating geographic locations
-        const geoLocations: any[] = [];
-        for (let i = 1; i < csvLines.length; i++) {
-            const columns = csvLines[i].split(",");
-            const location = {
-                code: columns[4],
-                county: columns[5],
-                density: Number(columns[6]),
-                latitude:  Number(columns[1]),
-                longitude: Number(columns[2]),
-                name:  columns[0],
-                population: Number(columns[7]),
-                state: columns[3]
-            };
-            geoLocations.push(location);
-        }
-
-        // creating HD series with loaded data
-        const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
-        geoSeries.dataSource = geoLocations;
-        geoSeries.latitudeMemberPath  = "latitude";
-        geoSeries.longitudeMemberPath = "longitude";
-        geoSeries.heatMaximumColor = "Red";
-        geoSeries.heatMinimumColor = "Black";
-        geoSeries.heatMinimum = 0;
-        geoSeries.heatMaximum = 5;
-        geoSeries.pointExtent = 1;
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.mouseOverEnabled = true;
-
-        // adding symbol series to the geographic amp
-        this.map.series.add(geoSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicHighDensityScatterSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx
deleted file mode 100644
index 073a1480d8..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-data-json-points.mdx
+++ /dev/null
@@ -1,125 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | JSON ファイルのバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップを使用して、ビュー モデルの地理的位置や JSON ファイルからロードされた地理的位置を含むデータの表示方法について説明します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, JSON files, Ignite UI for Angular, Infragistics, data binding, Angular マップ, JSON ファイル, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "Ignite UI for Angular Map マップは、さまざまな種類のファイルからロードされた地理データをプロットできます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular JSON ファイルを地理的な場所にバインド
-
-Ignite UI for Angular Map マップは、さまざまな種類のファイルからロードされた地理データをプロットできます。たとえば、JavaScript Object Notation (JSON) ファイルから地理的位置をロードできます。
-
-## Angular JSON ファイルを地理的な場所にバインドの例
-
-<Sample src="/maps/geo-map/binding-data-json-points" height={500} alt="Angular JSON ファイルを地理的な場所にバインドの例" />
-
-## データ例
-JSON ファイルからのデータの例:
-
-```json
-[
-   { "name": "Sydney Island", "lat": -16.68972, "lon": 139.45917 },
-   { "name": "Sydney Creek",  "lat": -16.3,     "lon": 128.95 },
-   { "name": "Mount Sydney",  "lat": -21.39864, "lon": 121.193 },
- // ...
-]
-```
-
-## コード スニペット
-以下のコードは、マップコンポーネント内の <ApiLink type="GeographicHighDensityScatterSeries" /> を、ロードされた JSON ファイルから作成された地理的位置を含むオブジェクトの配列にバインドします。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-        <div>
-            <span>{{item.city}}</span>
-        </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-geographic-json-files",
-  styleUrls: ["./map-binding-geographic-json-files.component.scss"],
-  templateUrl: "./map-binding-geographic-json-files.component.html"
-})
-
-export class MapBindingDataJsonPointsComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.componentDidMount();
-    }
-
-    public componentDidMount() {
-        // fetching JSON data with geographic locations from public folder
-        fetch("assets/Data/WorldCities.json")
-            .then((response) => response.json())
-            .then((data) => this.onDataLoaded(data));
-    }
-
-    public onDataLoaded(jsonData: any[]) {
-        const geoLocations: any[] = [];
-        // parsing JSON data and using only cities that are capitals
-        for (const jsonItem of jsonData) {
-            if (jsonItem.cap) {
-                const location = {
-                    city: jsonItem.name,
-                    country: jsonItem.country,
-                    latitude: jsonItem.lat,
-                    longitude: jsonItem.lon,
-                    population: jsonItem.pop
-                };
-                geoLocations.push(location);
-            }
-        }
-
-        // creating symbol series with loaded data
-        const geoSeries = new IgxGeographicSymbolSeriesComponent();
-        geoSeries.dataSource = geoLocations;
-        geoSeries.markerType = MarkerType.Circle;
-        geoSeries.latitudeMemberPath  = "latitude";
-        geoSeries.longitudeMemberPath = "longitude";
-        geoSeries.markerBrush = "LightGray";
-        geoSeries.markerOutline = "Black";
-        geoSeries.tooltipTemplate = this.tooltip;
-
-        // adding symbol series to the geographic amp
-        this.map.series.add(geoSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicHighDensityScatterSeries" />
-<ApiLink type="GeographicSymbolSeries" />
-<ApiLink type="GeographicMap" />
-<ApiLink type="GeographicMap" member="dataSource" label="DataSource" />
-<ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-<ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx
deleted file mode 100644
index 7032e16bbb..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-data-model.mdx
+++ /dev/null
@@ -1,172 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 地理的データ モデルのバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップを使用して、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, binding data models, Ignite UI for Angular, Infragistics, data binding, Angular マップ, データ モデルのバインディング, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicScatterAreaSeries", "GeographicHighDensityScatterSeries", "GeographicProportionalSymbolSeries", "GeographicScatterAreaSeries", "GeographicContourLineSeries", "GeographicShapeSeries", "GeographicPolylineSeries", "Series", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップ コンポーネントは、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示するように設計されています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理的データ モデルのバインディング
-
-Ignite UI for Angular マップ コンポーネントは、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示するように設計されています。地理的シリーズの <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティは、データ モデルへのバインディングのために使用されます。このプロパティは、カスタム オブジェクトの配列にバインドできます。
-
-## Angular 地理的データ モデルのバインディングの例
-
-<Sample src="/maps/geo-map/binding-data-model" height={500} alt="Angular 地理的データ モデルのバインディングの例" />
-
-以下の表で、地理的シリーズのタイプごとに必要となるデータ構造を簡単に説明します。
-
-| Geographic シリーズ  | プロパティ   | 概要   |
-|--------------|---------------| ---------------|
-| <ApiLink type="GeographicSymbolSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />   | 2 つの数値の経度と緯度座標の名前を指定します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />   | 2 つの数値の経度と緯度座標の名前を指定します。 |
-| <ApiLink type="GeographicProportionalSymbolSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />、<ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />   | 2 つの経度座標と緯度座標の名前と、シンボルのサイズ/半径の数字列を 1 列指定します。 |
-| <ApiLink type="GeographicScatterAreaSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />   | 数値の三角測量のために、2 つの経度と緯度座標および数値列を 1 列指定します。 |
-| <ApiLink type="GeographicContourLineSeries" /> | <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />、<ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />   | 数値の三角測量のために、2 つの経度と緯度座標および数値列を 1 列指定します。 |
-|<ApiLink type="GeographicShapeSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|図形の地理的ポイントを含む <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> 項目のデータ列の名前を指定します。このプロパティは、x プロパティと y プロパティを持つオブジェクトの配列の配列にマップする必要があります。 |
-|<ApiLink type="GeographicPolylineSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|線の地理的座標を含む <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> 項目のデータ列の名前を指定します。このプロパティは、x プロパティと y プロパティを持つオブジェクトの配列の配列にマップする必要があります。 |
-
-## コード スニペット
-以下のコードは、<ApiLink type="GeographicSymbolSeries" /> を、経度と緯度の座標を使用して格納された世界の一部の都市の地理的位置を含むカスタム データ モデルにバインドする方法を示します。また、[WorldUtility](geo-map-resources-world-util.md) を使用してこれらの場所間の最短の地理的経路をプロットするために <ApiLink type="GeographicPolylineSeries" /> を使用します。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #pointSeriesTemplate>
-        <div>
-            <span [style.color]="series.brush">
-                {{item.country}}
-            </span>
-        </div>
-</ng-template>
-
-<ng-template let-series="series" let-item="item" #polylineSeriesTooltipTemplate>
-    <div>
-        <span [style.color]="series.brush">
-            Departure: {{item.origin.country}}
-        </span>
-        <br/>
-        <span [style.color]="series.brush">
-            Arrival: {{item.dest.country}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { WorldUtils } from "../../utilities/WorldUtils";
-
-@Component({
-  selector: "app-map-binding-geographic-data-models",
-  styleUrls: ["./map-binding-geographic-data-models.component.scss"],
-  templateUrl: "./map-binding-geographic-data-models.component.html"
-})
-
-export class MapBindingDataModelComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("pointSeriesTemplate")
-    public pointSeriesTemplate: TemplateRef<object>;
-    @ViewChild("polylineSeriesTooltipTemplate")
-    public polylineSeriesTooltipTemplate: TemplateRef<object>;
-    public flights: any[];
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        const cityDAL = { lat:  32.763, lon: -96.663, country: "US", name: "Dallas" };
-        const citySYD = { lat: -33.889, lon: 151.028, country: "Australia", name: "Sydney" };
-        const cityNZL = { lat: -36.848, lon: 174.763, country: "New Zealand", name: "Auckland" };
-        const cityQTR = { lat: 25.285, lon:  51.531,  country: "Qatar", name: "Doha" };
-        const cityPAN = { lat:  8.949, lon: -79.400,  country: "Panama", name: "Panama" };
-        const cityCHL = { lat: -33.475, lon: -70.647, country: "Chile", name: "Santiago" };
-        const cityJAP = { lat:  35.683, lon: 139.809, country: "Japan", name: "Tokyo" };
-        const cityALT = { lat: 33.795,  lon: -84.349, country: "US", name: "Atlanta" };
-        const cityJOH = { lat: -26.178, lon: 28.004,  country: "South Africa", name: "Johannesburg" };
-        const cityNYC = { lat: 40.750, lon: -74.0999, country: "US", name: "New York" };
-        const citySNG = { lat:  1.229, lon: 104.177,  country: "Singapore", name: "Singapore" };
-        const cityMOS = { lat: 55.750, lon:  37.700,  country: "Russia", name: "Moscow" };
-        const cityROM = { lat:  41.880, lon: 12.520,  country: "Italy", name: "Roma" };
-        const cityLAX = { lat: 34.000, lon: -118.25,  country: "US", name: "Los Angeles" };
-
-        this.flights = [
-            { origin: cityDAL, dest: citySNG, color: "Green" },
-            { origin: cityMOS, dest: cityNZL, color: "Red" },
-            { origin: cityCHL, dest: cityJAP, color: "Blue" },
-            { origin: cityPAN, dest: cityROM, color: "Orange" },
-            { origin: cityALT, dest: cityJOH, color: "Black" },
-            { origin: cityNYC, dest: cityQTR, color: "Purple" },
-            { origin: cityLAX, dest: citySYD, color: "Gray" }
-        ];
-
-        for (const flight of this.flights) {
-            this.createPolylineSeries(flight);
-            this.createSymbolSeries(flight);
-        }
-    }
-
-    public createSymbolSeries(flight: any) {
-        const geoLocations = [flight.origin, flight.dest ];
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = geoLocations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush  = "White";
-        symbolSeries.markerOutline = flight.color;
-        symbolSeries.thickness = 1;
-        symbolSeries.tooltipTemplate = this.pointSeriesTemplate;
-
-        this.map.series.add(symbolSeries);
-    }
-
-    public createPolylineSeries(flight: any) {
-        const geoPath = WorldUtils.calcPaths(flight.origin, flight.dest);
-        const geoDistance = WorldUtils.calcDistance(flight.origin, flight.dest);
-        const geoRoutes = [
-            {
-              dest: flight.dest,
-              distance: geoDistance,
-              origin: flight.origin,
-              points: geoPath,
-              time: geoDistance / 850
-        }];
-
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = geoRoutes;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeStrokeThickness = 9;
-        lineSeries.shapeOpacity = 0.5;
-        lineSeries.shapeStroke = flight.color;
-        lineSeries.tooltipTemplate = this.polylineSeriesTooltipTemplate;
-        this.map.series.add(lineSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicContourLineSeries" /><br />
-<ApiLink type="GeographicHighDensityScatterSeries" /><br />
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicProportionalSymbolSeries" /><br />
-<ApiLink type="GeographicScatterAreaSeries" /><br />
-<ApiLink type="GeographicSymbolSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/jp/components/geo-map-binding-data-overview.mdx
deleted file mode 100644
index 0928d2841c..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-data-overview.mdx
+++ /dev/null
@@ -1,29 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップ コンポーネントを使用して、ビュー モデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, geo-spatial data, Ignite UI for Angular, Infragistics, data binding, Angular マップ, 地理空間のデータ, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップ コンポーネントは、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示するように設計されています。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular データ バインド
-
-Ignite UI for Angular マップ コンポーネントは、シェイプ ファイルからの地理空間データやデータ モデルからの地理的位置を地理的画像マップに表示するように設計されています。地理的シリーズの <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティは、データ モデルへのバインディングのために使用されます。
-
-## データ ソースの種類
-以下のセクションでは、ジオグラフィック マップ コンポーネントにバインドできるいくつかのデータ ソースをリストします。
-
-- [シェープ ファイルのバインド](geo-map-binding-shp-file.md)
-- [JSON ファイルのバインド](geo-map-binding-data-json-points.md)
-- [CSV ファイルのバインド](geo-map-binding-data-csv.md)
-- [データ モデルのバインド](geo-map-binding-data-model.md)
-- [複数ソースのバインド](geo-map-binding-multiple-sources.md)
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
deleted file mode 100644
index 4f06b1457f..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
+++ /dev/null
@@ -1,524 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 複数のデータ図形のバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular を使用して、複数の地理的シリーズオブジェクトを追加し、いくつかのシェープファイルを地理空間データとオーバーレイすることができます。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, data binding, Angular マップ, シェープ ファイル, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップでは、複数の地理的シリーズオブジェクトを追加して、複数のシェープファイルを地理空間データでオーバーレイすることができます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 複数のシェイプ ファイルのバインドとオーバーレイ
-
-Ignite UI for Angular マップでは、複数の地理的シリーズオブジェクトを追加して、複数のシェープファイルを地理空間データでオーバーレイすることができます。たとえば、港湾の地理的位置をプロットするための <ApiLink type="GeographicSymbolSeries" />、港湾間のルートをプロットするための <ApiLink type="GeographicPolylineSeries" />、国の形状をプロットするための <ApiLink type="GeographicShapeSeries" /> などがあります。
-
-## Angular 複数のシェイプ ファイルのバインドとオーバーレイの例
-
-<Sample src="/maps/geo-map/binding-multiple-shapes" height={500} alt="Angular 複数のシェイプ ファイルのバインドとオーバーレイの例" />
-
-このトピックでは、マップ コンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、<ApiLink type="ShapefileRecord" /> クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。<ApiLink type="ShapefileRecord" /> オブジェクトの詳細については、[シェープ ファイルのバインディング](geo-map-binding-shp-file.md)のトピックを参照してください。
-
-- <ApiLink type="GeographicSymbolSeries" /> – 主要都市の場所を表示します。
-- <ApiLink type="GeographicPolylineSeries" /> – 主要ポート間のルートを表示します。
-- <ApiLink type="GeographicShapeSeries" /> – 世界の国々の形を表示します。
-
-目的のデータをプロットするために、地理的シリーズを上記の組み合わせまたは他の組み合わせで使用できます。
-
-## コンポーネントのインポート
-
-まず、必要なコンポーネントとモジュールをインポートします。
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-```
-
-## シリーズの作成
-
-次に、後で異なるタイプのシェープ ファイルをロードする地理的シリーズでマップを作成します。
-
-```html
-<div className="sampleRoot">
-    <div className="map" >
-        <igx-geographic-map
-            #map
-            width="700px"
-            height="500px"
-            zoomable="true" >
-            <igx-geographic-shape-series #shapeSeries
-                name="polygonSeries"
-                shapeMemberPath="points"
-                shapeFill="rgb(150, 150, 150)"
-                shapeStroke="Black"
-                shapeStrokeThickness={1.0} >
-            </igx-geographic-shape-series>
-            <igx-geographic-polyline-series  #polylineSeries
-            [tooltipTemplate]="polylineTooltipTemplate"
-                  name="polylineSeries"
-                 shapeMemberPath="points"
-                 shapeStroke="rgba(147, 15, 180, 0.5)"
-                 thickness={3.0} >
-            </igx-geographic-polyline-series>
-            <igx-geographic-symbol-series  #symbolSeries
-                name="symbolSeries"
-                longitudeMemberPath="longitude"
-                latitudeMemberPath="latitude"
-                markerType="Circle"
-                markerOutline="rgb(2, 102, 196)"
-                markerBrush="White" >
-            </igx-geographic-symbol-series>
-        </igx-geographic-map>
-    </div>
-</div>
-
-<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
-        <div>
-            <span>{{item.capacity}}</span><br />
-            <span>Distance: {{item.distance}}</span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #shapeTooltipTemplate>
-        <div>
-            <span>{{item.name}}</span><br />
-            <span>Population: {{item.population}}</span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
-        <div>
-            <span [style.color]="series.brush">City: {{item.city}}</span>
-        </div>
-    </ng-template>
-```
-
-## シェープファイルの読み込み
-
-次に、ページのコンストラクターで、地理マップコンポーネントに表示する各シェープファイルの <ApiLink type="ShapefileRecord" /> を追加します。
-
-```ts
-const sdsPolygons = new IgxShapeDataSource();
-sdsPolygons.importCompleted = this.onPolygonsLoaded;
-sdsPolygons.shapefileSource = url + "/shapes/WorldCountries.shp";
-sdsPolygons.databaseSource  = url + "/shapes/WorldCountries.dbf";
-sdsPolygons.dataBind();
-const sdsPolylines = new IgxShapeDataSource();
-sdsPolylines.importCompleted = this.onPolylinesLoaded;
-sdsPolylines.shapefileSource = url + "/shapes/WorldConnections.shp";
-sdsPolylines.databaseSource  = url + "/shapes/WorldConnections.dbf";
-sdsPolylines.dataBind();
-const sdsLocations = new IgxShapeDataSource();
-sdsLocations.importCompleted = this.onPointsLoaded;
-sdsLocations.shapefileSource = url + "/Shapes/WorldCities.shp";
-sdsLocations.databaseSource  = url + "/Shapes/WorldCities.dbf";
-sdsLocations.dataBind();
-```
-
-## ポリゴンの処理
-
-世界の国々の <ApiLink type="ShapefileRecord" /> に読み込まれた形状データを処理し、<ApiLink type="GeographicShapeSeries" /> オブジェクトに割り当てます。
-
-```ts
-import { IgrGeographicShapeSeries } from 'igniteui-react-maps';
-import { IgrShapeDataSource } from 'igniteui-react-core';
-// ...
-public onPolygonsLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-
-    const shapeSeries = this.geoMap.series[0] as IgrGeographicShapeSeries;
-    shapeSeries.dataSource = geoPolygons;
-}
-```
-
-```ts
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-
-    const shapeSeries = this.geoMap.series[0] as IgxGeographicShapeSeries;
-    shapeSeries.dataSource = geoPolygons;
-}
-```
-
-```ts
-import { IgcGeographicShapeSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPolygonsLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoPolygons: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const country = {
-            points: record.points,
-            name: record.fieldValues.NAME,
-            gdp: record.fieldValues.GDP,
-            population: record.fieldValues.POPULATION
-        };
-        geoPolygons.push(country);
-    };
-    let polygonSeries = (document.getElementById("polygonSeries") as IgcGeographicShapeSeriesComponent);
-    polygonSeries.dataSource = geoPolygons;
-    polygonSeries.renderSeries(false);
-}
-```
-
-## ポリラインの処理
-
-<ApiLink type="ShapefileRecord" /> に読み込まれた形状データを処理し、主要都市間の通信ルートを使用して、<ApiLink type="GeographicPolylineSeries" /> オブジェクトに割り当てます。
-
-```ts
-import { IgrGeographicPolylineSeries } from 'igniteui-react-maps';
-import { IgrShapeDataSource } from 'igniteui-react-core';
-// ...
-public onPolylinesLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-    const lineSeries = this.geoMap.series[1] as IgrGeographicPolylineSeries;
-    lineSeries.dataSource = geoPolylines;
-}
-```
-
-```ts
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-    const lineSeries = this.geoMap.series[1] as IgxGeographicPolylineSeries;
-    lineSeries.dataSource = geoPolylines;
-}
-```
-
-```ts
-import { IgcGeographicPolylineSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPolylinesLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoPolylines: any[] = [];
-    // parsing shapefile data and creating geo-polygons
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        // using field/column names from .DBF file
-        const route = {
-            points: record.points,
-            name: record.fieldValues.Name,
-            capacity: record.fieldValues.CapacityG,
-            distance: record.fieldValues.DistanceKM,
-            isOverLand: record.fieldValues.OverLand === 0,
-            isActive: record.fieldValues.NotLive !== 0,
-            service: record.fieldValues.InService
-        };
-        geoPolylines.push(route);
-    }
-
-    let lineSeries = (document.getElementById("lineSeries") as IgcGeographicPolylineSeriesComponent);
-    lineSeries.dataSource = geoPolylines;
-    lineSeries.renderSeries(false);
-}
-```
-
-## ポイントの処理
-
-<ApiLink type="ShapefileRecord" /> に読み込まれた世界各国の形状データを処理し、<ApiLink type="GeographicSymbolSeries" /> オブジェクトに割り当てます。
-
-```ts
-import { IgrGeographicSymbolSeries } from 'igniteui-react-maps';
-import { MarkerType } from 'igniteui-react-charts';
-// ...
-public onPointsLoaded(sds: IgrShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    const symbolSeries = this.geoMap.series[2] as IgrGeographicSymbolSeries;
-    symbolSeries.dataSource = geoLocations;
-}
-```
-
-```ts
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-// ...
-public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    const symbolSeries = this.geoMap.series[2] as IgxGeographicSymbolSeries;
-    symbolSeries.dataSource = geoLocations;
-}
-```
-
-```ts
-import { IgcGeographicSymbolSeriesComponent } from 'igniteui-webcomponents-maps';
-import { IgcShapeDataSource } from 'igniteui-webcomponents-core';
-// ...
-public onPointsLoaded(sds: IgcShapeDataSource, e: any) {
-    const geoLocations: any[] = [];
-    // parsing shapefile data and creating geo-locations
-    let pointData = sds.getPointData();
-    for ( let i = 0; i < pointData.length; i++ ) {
-        let record = pointData[i];
-        const pop = record.fieldValues.POPULATION;
-        if (pop > 0) {
-            // each shapefile record has just one point
-            const location = {
-                latitude: record.points[0][0].y,
-                longitude: record.points[0][0].x,
-                city: record.fieldValues.NAME,
-                population: pop
-            };
-            geoLocations.push(location);
-        }
-    }
-    let symbolSeries = (document.getElementById("symbolSeries") as IgcGeographicSymbolSeriesComponent);
-    symbolSeries.dataSource = geoLocations;
-    symbolSeries.renderSeries(false);
-}
-```
-
-## マップ背景
-
-また形状ファイルがアプリケーションのために十分な地理的文脈 (国の形状など) を提供した際に、地図背景コンテンツで地理的画像を非表示にしたい場合があります。
-
-```ts
-public geoMap: IgxGeographicMapComponent;
-// ...
-
-this.geoMap.backgroundContent = {};
-```
-
-## 概要
-
-上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-multiple-shapes-files",
-  styleUrls: ["./map-binding-multiple-shapes-files.component.scss"],
-  templateUrl: "./map-binding-multiple-shapes-files.component.html"
-})
-
-export class MapBindingMultipleShapesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild ("shapeSeries")
-    public shapeSeries: IgxGeographicShapeSeriesComponent;
-
-    @ViewChild ("polylineSeries")
-    public polylineSeries: IgxGeographicPolylineSeriesComponent;
-
-    @ViewChild ("symbolSeries")
-    public symbolSeries: IgxGeographicSymbolSeriesComponent;
-
-    @ViewChild("polylineTooltipTemplate")
-    public polylineTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("shapeTooltipTemplate")
-    public shapeTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("pointTooltipTemplate")
-    public pointTooltipTemplate: TemplateRef<object>;
-
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-
-        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.6, height: 0.6 };
-
-        // loading a shapefile with geographic polygons
-        const sdsPolygons = new IgxShapeDataSource();
-        sdsPolygons.importCompleted.subscribe(() => this.onPolygonsLoaded(sdsPolygons, ""));
-        sdsPolygons.shapefileSource = "assets/Shapes/WorldCountries.shp";
-        sdsPolygons.databaseSource  = "assets/Shapes/WorldCountries.dbf";
-        sdsPolygons.dataBind();
-        // loading a shapefile with geographic polylines at runtime.
-        const sdsPolylines = new IgxShapeDataSource();
-        sdsPolylines.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
-        sdsPolylines.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
-        sdsPolylines.dataBind();
-        sdsPolylines.importCompleted.subscribe(() => this.onPolylinesLoaded(sdsPolylines, ""));
-
-        // loading a shapefile with geographic points
-        const sdsPoints = new IgxShapeDataSource();
-        sdsPoints.importCompleted.subscribe(() => this.onPointsLoaded(sdsPoints, ""));
-        sdsPoints.shapefileSource = "assets/Shapes/WorldCities.shp";
-        sdsPoints.databaseSource  = "assets/Shapes/WorldCities.dbf";
-        sdsPoints.dataBind();
-    }
-
-    public onPointsLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoLocations: any[] = [];
-        // parsing shapefile data and creating geo-locations
-        for (const record of sds.getPointData()) {
-            const pop = record.fieldValues["POPULATION"];
-            if (pop > 0) {
-                // each shapefile record has just one point
-                const location = {
-                    city: record.fieldValues["NAME"],
-                    latitude: record.points[0][0].y,
-                    longitude: record.points[0][0].x,
-                    population: pop
-                };
-                geoLocations.push(location);
-            }
-        }
-        this.symbolSeries.dataSource = geoLocations;
-        this.symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
-    }
-
-    public onPolylinesLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoPolylines: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        for (const record of sds.getPointData()) {
-            // using field/column names from .DBF file
-            const route = {
-                capacity: record.fieldValues["CapacityG"],
-                distance: record.fieldValues["DistanceKM"],
-                isActive: record.fieldValues["NotLive"] !== 0,
-                isOverLand: record.fieldValues["OverLand"] === 0,
-                name: record.fieldValues["Name"],
-                points: record.points,
-                service: record.fieldValues["InService"]
-            };
-            geoPolylines.push(route);
-        }
-        this.polylineSeries.dataSource = geoPolylines;
-        this.polylineSeries.shapeMemberPath = "points";
-        this.polylineSeries.shapeFilterResolution = 2.0;
-        this.polylineSeries.shapeStrokeThickness = 2;
-        this.polylineSeries.shapeStroke = "rgba(252, 32, 32, 0.9)";
-        this.polylineSeries.tooltipTemplate = this.polylineTooltipTemplate;
-    }
-
-    public onPolygonsLoaded(sds: IgxShapeDataSource, e: any) {
-        const geoPolygons: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        sds.getPointData().forEach((record) => {
-            // using field/column names from .DBF file
-            const country = {
-                gdp: record.fieldValues["GDP"],
-                name: record.fieldValues["NAME"],
-                points: record.points,
-                population: record.fieldValues["POPULATION"]
-            };
-            geoPolygons.push(country);
-        });
-        this.shapeSeries.dataSource = geoPolygons;
-        this.shapeSeries.tooltipTemplate = this.shapeTooltipTemplate;
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="GeographicSymbolSeries" /><br />
-<ApiLink type="ShapefileRecord" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx
deleted file mode 100644
index 14274f227d..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-multiple-sources.mdx
+++ /dev/null
@@ -1,206 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 複数のデータ ソースのバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップを使用して、複数の地理的シリーズオブジェクトを追加し、カスタム データ ソースを地理空間データとオーバーレイすることができます。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, geographic series, Ignite UI for Angular, Infragistics, data binding, Angular マップ, 地理的シリーズ, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "SeriesViewer", "Series", "GeographicShapeSeriesBase"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップでは、カスタム データ ソースを地理空間データとオーバーレイするために複数の地理的シリーズ オブジェクトを追加できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 複数データ ソースのバインド
-
-Ignite UI for Angular マップでは、カスタム データ ソースを地理空間データとオーバーレイするために複数の地理的シリーズ オブジェクトを追加できます。たとえば、空港の地理的位置をプロットするための <ApiLink type="GeographicSymbolSeries" />、空港間のフライトをプロットするための <ApiLink type="GeographicPolylineSeries" />、主要な地理座標のグリッド線をプロットするための別の <ApiLink type="GeographicPolylineSeries" /> などです。
-
-## Angular 複数データ ソースのバインドの例
-
-<Sample src="/maps/geo-map/binding-multiple-sources" height={500} alt="Angular 複数データ ソースのバインドの例" />
-
-このトピックでは、以下の地理空間データをプロットする複数の地理的シリーズを表示するための手順を説明します。
-
-- <ApiLink type="GeographicSymbolSeries" /> – 主要空港の場所を表示します。
-- <ApiLink type="GeographicPolylineSeries" /> – 空港間のフライトを表示します。
-- <ApiLink type="GeographicPolylineSeries" /> – 主座標のグリッド線を表示します。
-
-目的のデータをプロットするために、地理的シリーズをこの組み合わせまたは他の組み合わせでも使用できます。
-
-## データ ソースの作成
-
-Ignite UI for Angular マップに表示するすべての地理的シリーズのデータ​​ソースを作成します。たとえば、[WorldConnections](geo-map-resources-world-connections.md) スクリプトを使用できます。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #polylineTooltipTemplate>
-        <div>
-            <span>
-            Arrival: {{item.origin.country}}
-            </span>
-            <br/>
-            <span>
-            Destination: {{item.dest.country}}
-            </span>
-            <br/>
-            <span>
-            Distance: {{item.distance}} miles
-            </span>
-        </div>
-    </ng-template>
-
-    <ng-template let-series="series" let-item="item" #pointTooltipTemplate>
-            <div>
-                <span>
-                {{item?.country}}
-                </span>
-                <br />
-                <span>
-                {{item?.name}}
-                </span>
-                <br />
-                <span>
-                Population: {{item.pop}} M
-                </span>
-                <br/>
-                <span>
-                Flights: {{item.flights}}
-                </span>
-            </div>
-        </ng-template>
-```
-
-## フライトのオーバーレイ
-
-主要空港間のフライト接続を持つ最初の <ApiLink type="GeographicPolylineSeries" /> オブジェクトを作成し、Ignite UI for Angular マップの Series コレクションに追加します。
-
-```html
-<igx-geographic-polyline-series  #polylineSeries
-        [tooltipTemplate]="polylineTooltipTemplate"
-                name="polylineSeries"
-                shapeMemberPath="points"
-                shapeStroke="rgba(147, 15, 180, 0.5)"
-                thickness={3.0} >
-</igx-geographic-polyline-series>
-```
-
-## グリッド線のオーバーレイ
-
-地理グリッド線を使用して2番目の <ApiLink type="GeographicPolylineSeries" /> オブジェクトを作成し、それを GeographicMap の Series コレクションに追加します。
-
-```html
-  <igx-geographic-polyline-series  #polylineSeries
-            [tooltipTemplate]="polylineTooltipTemplate"
-                 datasource = worldFlights
-                 name="polylineSeries"
-                 shapeMemberPath="points"
-                 shapeStroke="rgba(196, 14, 14,0.05)"
-                 thickness={3.0} >
-    </igx-geographic-polyline-series>
-```
-
-## 空港のオーバーレイ
-
-空港ポイントを使用して <ApiLink type="GeographicSymbolSeries" /> オブジェクトを作成し、それを Ignite UI for Angular 地理マップの Series コレクションに追加します。
-
-```html
-<igx-geographic-symbol-series  #symbolSeries
-    name="symbolSeries"
-    longitudeMemberPath="longitude"
-    latitudeMemberPath="latitude"
-    markerType="Circle"
-    markerOutline="rgb(73, 73, 73)"
-    markerBrush="White" >
-</igx-geographic-symbol-series>
-```
-
-## まとめ
-
-上記すべてのコード スニペットを以下のコード ブロックにまとめて、プロジェクトに簡単にコピーできます。
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from "igniteui-angular-maps";
-import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
-import { WorldConnections } from "../../utilities/WorldConnections";
-
-@Component({
-  selector: "app-map-binding-multiple-data-sources",
-  styleUrls: ["./map-binding-multiple-data-sources.component.scss"],
-  templateUrl: "./map-binding-multiple--data-sources.component.html"
-})
-
-export class MapBindingMultipleSourcesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("polylineTooltipTemplate")
-    public polylineTooltipTemplate: TemplateRef<object>;
-
-    @ViewChild("pointTooltipTemplate")
-    public pointTooltipTemplate: TemplateRef<object>;
-
-    public data: any;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      this.map.windowRect = { left: 0.195, top: 0.1, width: 0.5, height: 0.5 };
-
-      const worldFlights = WorldConnections.getFlights();
-      const worldAirports = WorldConnections.getAirports();
-      const worldGridlines = WorldConnections.getGridlines();
-
-      this.addPolylineSeriesWith(worldFlights);
-      this.addGridlineSeriesWith(worldGridlines);
-      this.addSymbolSeriesWith(worldAirports);
-    }
-
-    public addGridlineSeriesWith(data: any[]) {
-        const gridSeries = new IgxGeographicPolylineSeriesComponent();
-        gridSeries.dataSource = data;
-        gridSeries.shapeMemberPath = "points";
-        gridSeries.shapeStroke = "Gray";
-        gridSeries.shapeStrokeThickness = 1;
-        this.map.series.add(gridSeries);
-    }
-
-    public addPolylineSeriesWith(data: any[]) {
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = data;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeStroke = "rgba(196, 14, 14,0.05)";
-        lineSeries.shapeStrokeThickness = 4;
-        lineSeries.tooltipTemplate = this.polylineTooltipTemplate;
-        this.map.series.add(lineSeries);
-    }
-
-    public addSymbolSeriesWith(data: any[]) {
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = data;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush = "#aad3df";
-        symbolSeries.markerOutline = "rgb(73, 73, 73)";
-        symbolSeries.thickness = 1;
-        symbolSeries.tooltipTemplate = this.pointTooltipTemplate;
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicSymbolSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx b/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx
deleted file mode 100644
index 3555583e39..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-binding-shp-file.mdx
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 地理的シェープ ファイルのバインディング | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップを使用して、シェイプ ファイルから地理空間データを読み込みます。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, shapefiles, Ignite UI for Angular, Infragistics, data binding, Angular マップ, シェープファイル, データ バインディング, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular Map コンポーネントの ShapefileRecord クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを ShapefileRecord オブジェクトのコレクションに変換します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular シェープ ファイルを地理的データにバインディング
-
-Ignite UI for Angular Map コンポーネントの <ApiLink type="ShapefileRecord" /> クラスは、形状ファイルから地理空間データ (ポイント/位置、ポリライン、ポリゴン) を読み込み、それを <ApiLink type="ShapefileRecord" /> オブジェクトのコレクションに変換します。
-
-## Angular シェープ ファイルを地理的データにバインディングの例
-
-<Sample src="/maps/geo-map/binding-shp-polylines" height={500} alt="Angular シェープ ファイルを地理的データにバインディングの例" />
-
-以下の表は、シェイプ ファイルを読み込むための <ApiLink type="ShapefileRecord" /> クラスのプロパティを説明します。
-
-| プロパティ | 型 | 概要   |
-|----------|------|---------------|
-| <ApiLink type="ShapefileConverter" member="shapefileSource" label="ShapefileSource" /> | string |シェイプ ファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。|
-|<ApiLink type="ShapefileConverter" member="databaseSource" label="DatabaseSource" /> | string |たとえば、シェープファイルで日本は、以下でポイント オブジェクト リストのリストとして表されます。|
-
-両方のソース プロパティが null 以外の値に設定されると、<ApiLink type="ShapefileRecord" /> オブジェクトの ImportAsync メソッドが起動し、シェイプ ファイルを取得して読み込み、最終的に変換を実行します。この操作が完了すると、<ApiLink type="ShapefileRecord" /> は <ApiLink type="ShapefileRecord" /> オブジェクトで生成され、シェイプ ファイルから地理空間データを読み込んで変換するプロセスが完了したことを通知するために、`ImportCompleted` イベントが起動されます。
-
-## シェープファイルの読み込み
-以下のコードは、世界の主要都市の場所を含むシェイプ ファイルを読み込むための <ApiLink type="ShapefileRecord" /> オブジェクトのインスタンスを作成します。また、xamGeographicMap コントロールにデータをバインドするための前提条件として `ImportCompleted` イベントを処理する方法も示します。
-
-## シェープファイルをバインド
-Map コンポーネントでは、Geographic Series は、シェイプ ファイルから読み込まれる地理的データを表示するために使用されます。すべてのタイプの地理的シリーズには、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。<ApiLink type="ShapefileRecord" /> は <ApiLink type="ShapefileRecord" /> オブジェクトのリストを含むため、このような配列の例です。
-
-<ApiLink type="ShapefileRecord" /> クラスは、以下の表にリストする地理的データを保存するためのプロパティを提供します。
-
-| プロパティ     | 概要   |
-|--------------|---------------|
-|`Points`|シェイプ ファイル(.shp) から読み込まれた 1 つの地理空間シェープにすべてのポイントが含まれます。たとえば、シェープファイルで日本は、以下でポイント オブジェクト リストのリストとして表されます。<ul><li>ポイントの最初のリストは北海道のシェイプを表します。</li><li>ポイントの 2 番目のリストは本州のシェイプを表します。</li><li>ポイントの 3 番目のリストは九州のシェイプを表します。</li><li>ポイントの 4 番目のリストは四国のシェイプを表します。</li></ul>|
-| `Fields` |列名でキーが付けられたシェイプ データベース ファイル (.dbf) からのデータ行を含みます。たとえば、日本についてのデータには、人口、地域、首都名などが含まれます。|
-
-このデータ構造は、適切なデータ列がマップされている限り、ほとんどの地理的シリーズでの使用に適しています。
-
-## コード スニペット
-このコード例は、シェープ ファイルが <ApiLink type="ShapefileRecord" /> を使用して読み込まれたことを前提としています。
-以下のコードは、マップ コンポーネント内の <ApiLink type="GeographicPolylineSeries" /> を <ApiLink type="ShapefileRecord" /> にバインドし、すべての <ApiLink type="ShapefileRecord" /> オブジェクトの `Points` プロパティをマップします。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-            <div>
-                <span>
-                Airline: {{item.name}}
-                </span>
-                <br />
-                <span>
-                Length: {{item.distance}} miles
-                </span>
-            </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-binding-shape-files",
-  styleUrls: ["./map-binding-shape-files.component.scss"],
-  templateUrl: "./map-binding-shape-files.component.html"
-})
-export class MapBindingShapefilePolylinesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() { }
-
-    public ngAfterViewInit() {
-    // loading a shapefile with geographic polygons
-    const sds = new IgxShapeDataSource();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    sds.shapefileSource = "assets/Shapes/WorldCableRoutes.shp";
-    sds.databaseSource  = "assets/Shapes/WorldCableRoutes.dbf";
-    sds.dataBind();
-    }
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-        const geoPolylines: any[] = [];
-        // parsing shapefile data and creating geo-polygons
-        for (const record of shapeRecords) {
-            // using field/column names from .DBF file
-            const route = {
-                capacity: record.fieldValues["CapacityG"],
-                distance: record.fieldValues["DistanceKM"],
-                isActive: record.fieldValues["NotLive"] !== 0,
-                isOverLand: record.fieldValues["OverLand"] === 0,
-                name: record.fieldValues["Name"],
-                points: record.points,
-                service: record.fieldValues["InService"]
-            };
-            geoPolylines.push(route);
-        }
-
-        const geoSeries = new IgxGeographicPolylineSeriesComponent();
-        geoSeries.dataSource = geoPolylines;
-        geoSeries.shapeMemberPath = "points";
-        geoSeries.shapeFilterResolution = 0.0;
-        geoSeries.shapeStrokeThickness = 3;
-        geoSeries.shapeStroke = "rgb(82, 82, 82, 0.4)";
-        geoSeries.tooltipTemplate = this.tooltipTemplate;
-
-        this.map.series.add(geoSeries);
-        }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicPolylineSeries" />
-<ApiLink type="ShapefileRecord" />
-<ApiLink type="ShapefileRecord" member="fields" label="Fields" />
-<ApiLink type="ShapefileRecord" member="importCompleted" label="ImportCompleted" />
-<ApiLink type="GeographicMap" member="dataSource" label="DataSource" />
-<ApiLink type="ShapefileRecord" member="points" label="Points" />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx
deleted file mode 100644
index 7cedd59c40..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-azure-imagery.mdx
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | Azure 画像の表示 | インフラジスティックス"
-description: Infragistics の Angular を使用して Microsoft Azure Maps からの画像を表示します。Angular マップのチュートリアルを是非お試しください!
-keywords: "Angular map, azure maps, Ignite UI for Angular, Infragistics, imagery tile source, map background, Angular マップ, azure マップ, インフラジスティックス, 画像タイル ソース, マップ背景"
-license: commercial
-mentionedTypes: ["GeographicMap", "AzureMapsImagery", "GeographicTileSeries"]
-_language: ja
-llms:
-  description: "Angular AzureMapsImagery は、Microsoft® が提供する地理的画像マッピング サービスです。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import azuremapsimagery from '@xplat-images/general/AzureMapsImagery.png';
-import azureTrafficTileSeriesWithBackground from '@xplat-images/general/Azure_Traffic_Tile_Series_With_Background.png';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-
-# Angular Azure Maps からの画像 <Badge variant="preview" />
-
-Angular <ApiLink type="AzureMapsImagery" /> は、Microsoft® が提供する地理的画像マッピング サービスです。
-世界の地理的画像タイルを複数のスタイルで供します。この地理的画像サービスは、<a href="https://azure.microsoft.com/ja-jp/products/azure-maps" target="_blank">www.azure.microsoft.com</a> ウェブサイトから直接アクセスできます。Ignite UI for Angular Map コンポーネントは、<ApiLink type="AzureMapsImagery" /> クラスを使用して、地図の背景コンテンツに Azure Maps の地理的画像を表示します。
-
-## Angular Azure Maps からの画像の表示 - 概要
-
-<Image src={azuremapsimagery} alt="AzureMapsImagery" />
-
-<Sample src="/maps/geo-map/display-azure-imagery" height={600} alt="Angular Azure Maps からの画像の表示例" />
-
-## Angular Azure Maps からの画像の表示 - コード例
-以下のコード スニペットは、<ApiLink type="AzureMapsImagery" /> クラスを使用して Angular <ApiLink type="AzureMapsImagery" member="geographicMap" label="GeographicMap" /> で Azure Maps からの地理的画像タイルを表示する方法を示します。
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxAzureMapsImagery } from 'igniteui-angular-maps';
-// ...
-const tileSource = new IgxAzureMapsImagery();
-tileSource.apiKey = "YOUR_Azure_MAPS_API_KEY";
-tileSource.imageryStyle = AzureMapsImageryStyle.Satellite; // or
-tileSource.imageryStyle = AzureMapsImageryStyle.TerraOverlay; // or
-tileSource.imageryStyle = AzureMapsImageryStyle.Road; //or Traffic & Weather etc.
-
-this.map.backgroundContent = tileSource;
-```
-
-## Azure Maps からの画像オーバーレイ - 概要
-
-<ApiLink type="GeographicTileSeries" /> を使用する際には、**ベース マップ スタイル** (例: **Satellite**, **Road**, **DarkGrey**) の上に**オーバーレイ** (交通情報、天気、ラベル) を重ね合わせることができます。例えば **Satellite** と **TerraOverlay** を組み合わせることで、地形を視覚化できます。
-
-- **ベース スタイル**: Satellite、Road、Terra、DarkGrey がコアとなる背景タイルを提供します。
-- **オーバーレイ スタイル**: 交通情報や天気の画像 (<ApiLink type="AzureMapsImageryStyle" member="TrafficRelativeOverlay" label="TrafficRelativeOverlay" />、<ApiLink type="AzureMapsImageryStyle" member="WeatherRadarOverlay" label="WeatherRadarOverlay" /> など) は、タイル シリーズに割り当てることでベース スタイル上に重ねられるよう設計されています。
-- **ハイブリッド スタイル**: <ApiLink type="AzureMapsImageryStyle" member="HybridRoadOverlay" label="HybridRoadOverlay" /> や <ApiLink type="AzureMapsImageryStyle" member="HybridDarkGreyOverlay" label="HybridDarkGreyOverlay" /> などのバリエーションは、ベース スタイルにラベルや道路などのオーバーレイをあらかじめ組み合わせているため、複数のレイヤーを手動で管理する必要はありません。
-
-この設計により、より豊かなマップ表現が可能になります。例えば:
-- **Satellite** 画像に **TrafficOverlay** を重ねて、実際の地図上に渋滞状況をハイライト表示。
-- **Terra** に **WeatherRadarOverlay** を組み合わせて、地形と降水を同時に視覚化。
-- **DarkGrey** と **LabelsRoadOverlay** を適用し、ダッシュボードに適したコントラストの高いビューを実現。
-
-<Image src={azureTrafficTileSeriesWithBackground} alt="Azure Traffic Tile Series With Background" />
-
-## Azure Maps からの画像オーバーレイ - コード例
-次のコード スニペットは、<ApiLink type="AzureMapsImagery" /> クラスと <ApiLink type="GeographicTileSeries" /> クラスを使用して、Angular <ApiLink type="AzureMapsImagery" member="geographicMap" label="GeographicMap" /> の交通情報と濃い灰色のマップを結合した背景画像の上に地理画像タイルを表示する方法を示しています。
-
-```html
-<igx-geographic-map #map height="100%" width="100%" zoomable="true">
-  <igx-geographic-tile-series #tileSeries></igx-geographic-tile-series>
-</igx-geographic-map>
-```
-
-```ts
-export class AppComponent implements AfterViewInit {
-  @ViewChild('map', { static: true }) public map!: IgxGeographicMapComponent;
-  @ViewChild('tileSeries', { static: true }) public tileSeries!: IgxGeographicTileSeriesComponent;
-
-  public azureImagery!: IgxAzureMapsImagery;
-  public azureKey: string = "<YOUR_KEY_HERE>";
-
-  ngAfterViewInit(): void {
-    // Update TileSeries
-    const overlay = new IgxAzureMapsImagery();
-    overlay.apiKey = this.azureKey;
-    overlay.imageryStyle = AzureMapsImageryStyle.TrafficAbsoluteOverlay;
-    this.tileSeries.tileImagery = overlay;
-
-    // Update Map Background
-    this.azureImagery = new IgxAzureMapsImagery();
-    this.azureImagery.apiKey = this.azureKey;
-    this.azureImagery.imageryStyle = AzureMapsImageryStyle.DarkGrey;
-    this.map.backgroundContent = this.azureImagery;
-  }
-}
-```
-
-## プロパティ
-以下の表で、<ApiLink type="AzureMapsImagery" /> クラスのプロパティを説明します。
-
-| プロパティ名  | プロパティ タイプ   | 説明   |
-|----------------|-----------------|---------------|
-|<ApiLink type="AzureMapsImagery" member="apiKey" label="ApiKey" />|string|Azure Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは <a href="https://azure.microsoft.com/ja-jp/products/azure-maps" target="_blank">azure.microsoft.com</a> ウェブサイトから取得してください。|
-|<ApiLink type="AzureMapsImagery" member="imageryStyle" label="ImageryStyle" />|<ApiLink type="AzureMapsImageryStyle" />|Azure Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の <ApiLink type="AzureMapsImageryStyle" /> 列挙値に設定できます。<ul><li>Satellite - 道路またはラベルのオーバーレイなしの衛星地図スタイルを指定します。</li><li>Road - 道路およびラベル付きの衛星地図スタイルを指定します。</li><li>DarkGrey - コントラストやオーバーレイのハイライト表示に適したダーク グレーのベース マップ スタイルを指定します。</li><li>TerraOverlay - 標高や地形の特徴をハイライト表示する陰影起伏付きの地形マップ スタイルを指定します。</li><li>LabelsRoadOverlay - 航空写真オーバーレイなしで都市ラベルを表示する複数のオーバーレイの 1 つです。</li><li>HybridRoadOverlay - 衛星画像の背景に道路とラベルのオーバーレイを組み合わせます。</li><li>HybridDarkGreyOverlay - 衛星画像の背景にダーク グレーのラベル オーバーレイを組み合わせます。</li><li>LabelsDarkGreyOverlay - ダーク グレーのベース マップ上に都市ラベルを表示する複数のオーバーレイの 1 つです。</li><li>TrafficDelayOverlay - 交通遅延や渋滞エリアをリアルタイムで表示します。</li><li>TrafficAbsoluteOverlay - 現在の交通速度を絶対値で表示します。</li><li>TrafficReducedOverlay - 減少した交通流を光ベースの視覚化で表示します。</li><li>TrafficRelativeOverlay - 通常の状況に対する相対的な交通速度を表示します。</li><li>TrafficRelativeDarkOverlay - 通常時と比較した交通速度をダーク ベースマップ上に表示し、コントラストを強調します。</li><li>WeatherRadarOverlay - 降水のほぼリアルタイムのレーダー画像を表示します。</li><li>WeatherInfraredOverlay - 雲量の赤外線衛星画像を表示します。</li></ul> |
-
-## API リファレンス
-
-<ApiLink type="AzureMapsImagery" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx
deleted file mode 100644
index bd5d121c6d..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-bing-imagery.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | Bing 画像の表示 | インフラジスティックス"
-description: インフラジスティックスの Angular を使用して Microsoft Bing Maps からの画像を表示します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, bing maps, Ignite UI for Angular, Infragistics, imagery tile source, map background, Angular マップ, bing マップ, インフラジスティックス, 画像タイル ソース, マップ背景"
-license: commercial
-mentionedTypes: ["GeographicMap", "BingMapsMapImagery"]
-_language: ja
-llms:
-  description: "注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。"
----
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-import { Image } from 'astro:assets';
-import bingmapsimagery from '@xplat-images/general/BingMapsImagery.png';
-
-# Angular Bing Maps 画像の表示
-
-注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。
-
-詳細は以下をご覧ください:
-
-[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-<ApiLink type="BingMapsMapImagery" /> は、Microsoft® 社が提供する地理的画像マッピング サービスです。世界の地理的画像タイルを 3 以上提供します。この地理的画像サービスは、<a href="http://www.bing.com/maps" target="_blank">www.bing.com/maps</a> に直接アクセスして利用できます。Ignite UI for Angular マップ コンポーネントは、<ApiLink type="BingMapsMapImagery" /> クラスを使用して、地図の背景コンテンツに Bing Maps の地理的画像を表示します。
-
-## Angular Bing Maps 画像の表示の例
-
-{/*<Sample src="/maps/geo-map/display-bing-imagery" height="500" alt="Angular Displaying Imagery from Bing Maps Example" />*/}
-<Image src={bingmapsimagery} alt="Angular Bing Maps Imagery" />
-
-## コード スニペット
-以下のコード スニペットは、<ApiLink type="BingMapsMapImagery" /> を使用して Angular <ApiLink type="BingMapsMapImagery" member="geographicMap" label="GeographicMap" /> で Bing Maps からの地理的画像を表示する方法を示します。
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxBingMapsMapImagery } from 'igniteui-angular-maps';
-// ...
-const tileSource = new IgxBingMapsMapImagery();
-tileSource.apiKey = "YOUR_BING_MAPS_API_KEY";
-tileSource.imageryStyle = BingMapsImageryStyle.AerialWithLabels; // or
-tileSource.imageryStyle = BingMapsImageryStyle.Aerial; // or
-tileSource.imageryStyle = BingMapsImageryStyle.Road;
-
-// resolving BingMaps uri based on HTTP protocol of hosting website
-let tileUri = tileSource.actualBingImageryRestUri;
-const isHttpSecured = window.location.toString().startsWith("https:");
-if (isHttpSecured) {
-    tileUri = tileUri.replace("http:", "https:");
-} else {
-    tileUri = tileUri.replace("https:", "http:");
-}
-tileSource.bingImageryRestUri = tileUri;
-
-this.map.backgroundContent = tileSource;
-```
-
-## プロパティ
-以下の表で、<ApiLink type="BingMapsMapImagery" /> クラスのプロパティを説明します。
-
-| プロパティ名  | プロパティ型   | 概要   |
-|----------------|-----------------|---------------|
-|<ApiLink type="BingMapsMapImagery" member="apiKey" label="ApiKey" />|文字列|Bing Maps 画像サービスで必要となる API キーを設定するためのプロパティを表します。このキーは <a href="http://www.bingmapsportal.coms" target="_blank">www.bingmapsportal.com</a> ウェブサイトから取得してください。|
-|<ApiLink type="BingMapsMapImagery" member="imageryStyle" label="ImageryStyle" />|<ApiLink type="BingMapsImageryStyle" />|Bing Maps 画像タイルのマップ スタイルを設定するプロパティを表します。このプロパティは、以下の <ApiLink type="BingMapsImageryStyle" /> 列挙値に設定できます。Aerial - 道路またはラベルオーバーレイなしの Aerial マップ スタイルを指定します。<ul><li> Aerial - 道路およびラベル付きの衛星地図スタイルを指定します。</li> <li> AerialWithLabels - 道路およびラベル付きの衛星地図スタイルを指定します。</li><li> Road - 衛星オーバーレイなしの道路地図スタイルを指定します。</li></ul>|
-|<ApiLink type="BingMapsMapImagery" member="bingImageryRestUri" label="BingImageryRestUri" />|文字列|TilePath と SubDomain の位置を指定する Bing Imagery REST URI を設定するためのプロパティを表します。これはオプションのプロパティです。指定されていない場合、デフォルトの REST URI を使用します。|
-|<ApiLink type="BingMapsMapImagery" member="cultureName" label="CultureName" />|文字列|タイル ソースのカルチャ名を設定するためのプロパティを表します。|
-|<ApiLink type="BingMapsMapImagery" member="isDeferredLoad" label="IsDeferredLoad" />|ブール値|Bing Maps サービスが有効なプロパティ値の割り当てで自動初期化するかどうかを指定するプロパティを表します。|
-|<ApiLink type="BingMapsMapImagery" member="isInitialized" label="IsInitialized" />|ブール値|True に設定されているプロパティは、Bing Maps サービスからの地理的画像タイルが初期化され、マップ コンポーネントでのレンダリングの準備ができたときに発生することを表します。|
-|<ApiLink type="BingMapsMapImagery" member="subDomains" label="SubDomains" />|<ApiLink type="SubDomainsCollection" />|URI サブ ドメインの画像コレクションを表します。|
-|<ApiLink type="BingMapsMapImagery" member="tilePath" label="TilePath" />|文字列|マップ タイル画像 URI を設定するプロパティを表します。これは Bing Maps の実際の位置です。|
-
-## API リファレンス
-
-<ApiLink type="BingMapsImageryStyle" /><br />
-<ApiLink type="BingMapsMapImagery" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx
deleted file mode 100644
index d0161917c0..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-esri-imagery.mdx
+++ /dev/null
@@ -1,64 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | ESRI 画像の表示 | インフラジスティックス"
-description: インフラジスティックスの Angular を使用して ESRI Maps からの画像を表示します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, ESRI, Ignite UI for Angular, Infragistics, imagery tile source, map background, Angular マップ, ESRI, インフラジスティックス, 画像タイル ソース, マップ背景"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "ArcGISOnlineMapImagery は、Esri によって作成された無料の地理的画像マッピング サービスです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Esri Maps から地理的画像を表示
-
-<ApiLink type="ArcGISOnlineMapImagery" /> は、<a href="https://www.esri.com/" target="_blank">Esri</a> によって作成された無料の地理的画像マッピング サービスです。世界の地理的画像タイルの 40 スタイル以上を提供します。この地理的画像サービスは、<a href="https://services.arcgisonline.com/ArcGIS/rest/services" target="_blank">www.arcgisonline.com</a> に直接アクセスして利用できます。
-
-## Angular Esri Maps から地理的画像を表示の例
-
-<Sample src="/maps/geo-map/display-esri-imagery" height={500} alt="Angular Esri Maps から地理的画像を表示の例" />
-
-## コード スニペット
-以下のコード スニペットは、<ApiLink type="ArcGISOnlineMapImagery" /> クラスを使用して <ApiLink type="ArcGISOnlineMapImagery" member="geographicMap" label="GeographicMap" /> で Esri 画像サーバーからの Angular 地理的画像タイルを表示する方法を示します。
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
-// ...
-public geoMap: IgxGeographicMapComponent;
-
-const tileSource = new IgxArcGISOnlineMapImagery();
-tileSource.mapServerUri = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer";
-
-this.geoMap.backgroundContent = tileSource;
-```
-
-## Esri ユーティリティ
-また、Esri 画像サーバーのすべてのスタイルを定義する [EsriUtility](geo-map-resources-esri.md) を使用することもできます。
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxArcGISOnlineMapImagery } from 'igniteui-angular-maps';
-import { EsriUtility, EsriStyle } from './EsriUtility';
-// ...
-public geoMap: IgxGeographicMapComponent;
-
-const tileSource = new IgxArcGISOnlineMapImagery();
-tileSource.mapServerUri = EsriUtility.getUri(EsriStyle.WorldOceansMap);
-
-this.geoMap.backgroundContent = tileSource;
-```
-
-## API リファレンス
-
-<ApiLink type="ArcGISOnlineMapImagery" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx
deleted file mode 100644
index bfbda16da2..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-heat-imagery.mdx
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップを使用してヒートマップ画像を表示します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, heat map imagery, Ignite UI for Angular, Infragistics, Angular マップ, ヒートマップ画像, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "HeatTileGenerator", "GeographicTileSeries"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、ShapefileRecord によって生成される ShapeFileRecord を使用して、ヒートマップ画像を表示する機能があります。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ヒート画像の表示
-
-Ignite UI for Angular マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、<ApiLink type="ShapefileRecord" /> によって生成される `ShapeFileRecord` を使用して、ヒートマップ画像を表示する機能があります。
-
-このトピックを読み進めるための前提条件として、[シェープ ファイルを地理的データにバインディング](geo-map-binding-shp-file.md)をお読みください。
-
-## Angular ヒート画像の表示の例
-
-<Sample src="/maps/geo-map/display-heat-imagery" height={500} alt="Angular ヒート画像の表示の例" />
-
-<ApiLink type="ShapefileRecord" /> がそのシェイプ ファイルを読み込むと、そのデータを <ApiLink type="ShapefileRecord" /> オブジェクトに変換します。これらのオブジェクトは、<ApiLink type="ShapefileRecord" /> の `GetPointData()` メソッドから取得でき、
-<ApiLink type="TileGeneratorMapImagery" member="tileGenerator" label="TileGenerator" />
-プロパティに割り当てられた <ApiLink type="HeatTileGenerator" /> で <ApiLink type="TileGeneratorMapImagery" /> オブジェクトを使用してヒートマップを作成するために使用できます。この <ApiLink type="TileGeneratorMapImagery" /> は、<ApiLink type="GeographicTileSeries" member="tileImagery" label="TileImagery" /> ソースとして <ApiLink type="GeographicTileSeries" /> で使用できます。
-
-<ApiLink type="HeatTileGenerator" /> オブジェクトは、<ApiLink type="HeatTileGenerator" member="xValues" label="XValues" />、<ApiLink type="HeatTileGenerator" member="yValues" label="YValues" />、<ApiLink type="HeatTileGenerator" member="values" label="Values" /> の 3 つの値パスを持つように機能します。これらの使用方法の例として、人口に関する情報を持つ形状ファイルの場合、<ApiLink type="HeatTileGenerator" member="xValues" label="XValues" /> を経度、<ApiLink type="HeatTileGenerator" member="yValues" label="YValues" /> を緯度、<ApiLink type="HeatTileGenerator" member="values" label="Values" /> を人口データとみなすことができます。これらの各プロパティは、`number[]` を取得します。
-
-ヒートマップ機能を使用する際の地理的タイルシリーズの表示は、<ApiLink type="HeatTileGenerator" member="minimumColor" label="MinimumColor" /> プロパティと <ApiLink type="HeatTileGenerator" member="maximumColor" label="MaximumColor" /> プロパティを <ApiLink type="HeatTileGenerator" /> の <ApiLink type="HeatTileGenerator" member="values" label="Values" /> プロパティに割り当てるコレクションの最小値と最大値に対応する色を記述する「rgba」文字列に設定することでカスタマイズできます。これをさらにカスタマイズするには、ジェネレーターの <ApiLink type="HeatTileGenerator" member="scaleColors" label="ScaleColors" /> プロパティを設定して、色を説明する文字列のコレクションを含めます。これにより、<ApiLink type="HeatTileGenerator" /> に、マップに表示される値に使用する色がわかります。<ApiLink type="HeatTileGenerator" member="blurRadius" label="BlurRadius" />、<ApiLink type="HeatTileGenerator" member="maxBlurRadius" label="MaxBlurRadius" />、<ApiLink type="HeatTileGenerator" member="useBlurRadiusAdjustedForZoom" label="UseBlurRadiusAdjustedForZoom" /> プロパティを使用して、<ApiLink type="HeatTileGenerator" member="scaleColors" label="ScaleColors" /> コレクション内の色が一緒にぼやける方法をカスタマイズすることもできます。
-
-<ApiLink type="HeatTileGenerator" /> は対数スケールも使用できます。これを使用する場合は、<ApiLink type="HeatTileGenerator" member="useLogarithmicScale" label="UseLogarithmicScale" /> プロパティを **true** に設定できます。
-
-## Web Worker
-
-また、<ApiLink type="HeatTileGenerator" /> は、Web Worker が、別のスレッドでシェイプ ファイルからタイル イメージをロードする際の重いリフティングをサポートしています。これにより、ヒートマップ機能を使用する際に地理マップのパフォーマンスが大幅に向上します。ジェネレーターでWebワーカーを使用するには、<ApiLink type="HeatTileGenerator" member="useWebWorkers" label="UseWebWorkers" /> プロパティを **true** に設定し、<ApiLink type="HeatTileGenerator" member="webWorkerInstance" label="WebWorkerInstance" /> プロパティを Web Worker のインスタンスに設定できます。
-
-```ts
-// heatworker.worker.ts
-import { HeatTileGeneratorWebWorker } from 'igniteui-angular-core';
-
-const worker: Worker = self as any;
-worker.onmessage = HeatTileGeneratorWebWorker.onmessage;
-HeatTileGeneratorWebWorker.postmessage = heatWorkerPostMessage;
-function heatWorkerPostMessage() {
-  (self as any).postMessage.apply(self, Array.prototype.slice.call(arguments));
-}
-HeatTileGeneratorWebWorker.start();
-export default {} as typeof Worker & (new () => Worker);
-
-```
-
-```ts
-import { IgxHeatTileGenerator } from 'igniteui-angular-core';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxTileGeneratorMapImagery } from 'igniteui-angular-maps';
-```
-
-## ヒートマップの作成
-
-以下のコード スニペットは、人口ベースのヒートマップを Ignite UI for Angular マップ コンポーネントに表示する方法を示しています。
-
-```html
-<igx-geographic-map #map width="100%" height="calc(100% - 60px)">
-    <igx-geographic-tile-series name="heatTiles" [tileImagery]="tileImagery"></igx-geographic-tile-series>
-</igx-geographic-map>
-```
-
-```ts
-@ViewChild("map", { static: true })
-public map: IgxGeographicMapComponent;
-public data: any[];
-public tileImagery: IgxTileGeneratorMapImagery;
-// ...
-constructor() {
-    this.data = this.initData();
-
-    this.tileImagery = new IgxTileGeneratorMapImagery();
-
-    const con: IgxShapeDataSource = new IgxShapeDataSource();
-    con.importCompleted.subscribe((s, e) => {
-        const data = con.getPointData();
-        const lat: number[] = [];
-        const lon: number[] = [];
-        const val: number[] = [];
-        for (let i = 0; i < data.length; i++) {
-            const item = data[i];
-            for (let j = 0; j < item.points.length; j++) {
-                const pointsList = item.points[j];
-                for (let k = 0; k < pointsList.length; k++) {
-                    lat.push(pointsList[k].y);
-                    lon.push(pointsList[k].x);
-                }
-            }
-            const value = item.fieldValues["POP_2010"];
-            if (value >= 0) {
-                val.push(value);
-            } else {
-                val.push(0);
-            }
-        }
-
-        const gen = new IgxHeatTileGenerator();
-        gen.xValues = lon;
-        gen.yValues = lat;
-        gen.values = val;
-        gen.blurRadius = 6;
-        gen.maxBlurRadius = 20;
-        gen.useBlurRadiusAdjustedForZoom = true;
-        gen.minimumColor = "rgba(100,255, 0, 0.3922)";
-        gen.maximumColor = "rgba(255, 255, 0, 0.9412)";
-        gen.useGlobalMinMax = true;
-        gen.useGlobalMinMaxAdjustedForZoom = true;
-        gen.useLogarithmicScale = true;
-        gen.useWebWorkers = true;
-        gen.webWorkerInstance = new Worker("../heatworker.worker", { type: "module" });
-        gen.scaleColors = [
-            "rgba(0, 0, 255, 64)",
-            "rgba(0, 255, 255, 96)",
-            "rgba(0, 255, 0, 160)",
-            "rgba(255, 255, 0, 180)",
-            "rgba(255, 0, 0, 200)"
-        ];
-
-        this.tileImagery.tileGenerator = gen;
-    });
-    con.shapefileSource = "assets/Shapes/AmericanCities.shp";
-    con.databaseSource  = "assets/Shapes/AmericanCities.dbf";
-    con.dataBind();
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicTileSeries" /><br />
-<ApiLink type="HeatTileGenerator" /><br />
-<ApiLink type="ShapefileRecord" /><br />
-<ApiLink type="ShapefileRecord" /><br />
-<ApiLink type="TileGeneratorMapImagery" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-imagery-types.mdx b/docs/angular/src/content/jp/components/geo-map-display-imagery-types.mdx
deleted file mode 100644
index 00ea286ca2..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-imagery-types.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 地理的画像 | インフラジスティックス"
-description: このマップを使用すると、ビュー モデルからの地理的位置を含むデータ、またはシェープ ファイルから地理的画像マップにロードされた地理空間データを表示できます。詳細については、サンプル、依存関係、使用法、ツールバーをご覧ください。
-keywords: "Angular map, Geographic Imagery, tiles, Ignite UI for Angular, Infragistics, Angular マップ, 地理的画像, タイル, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "Angular 地理的画像は、上空から見た世界の詳細な表現です。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理的画像
-
-Angular 地理的画像は、上空から見た世界の詳細な表現です。マルチ スケール画像タイル構造の航空衛星地図または道路地図で構成できます。地理的なマップ構成要素は、エンドユーザーに豊かでインタラクティブな世界地図や地理空間データのための地理的状況を提供するために地理的画像を表示できます。
-
-## 地理的画像のタイプ
-マップ コンポーネントは、サポートされている 3 つのマッピング サービスまたはアプリケーションに簡単に実装できる他のマッピング サービスからの地理的画像タイルを表示できます。
-
-以下の表は、マップ コンポーネントでサポートされているカスタムの地理的画像ソースをまとめたものです。
-
-| 画像                    |説明   |
-|----------------------------| --------------|
-| Open Street Maps | 1 色のテーマで道路地図スタイルだけを表示するためのオプションで、Open Street Maps サービスから地理的画像を提供します。 |
-| Bing Maps | Bing Maps サービスの地理的画像に、以下の地図スタイルを表示するための設定可能なオプションがあります。<ul><li> 衛星地図のスタイル</li><li> ラベル付きの衛星地図のスタイル</li><li> ロードマップ スタイル</li></ul>|
-
-## マップ背景コンテンツ
-マップ コンポーネントの BackgroundContent プロパティは、サポートされているすべての種類の地理的画像ソースを表示するために使用されます。画像ソースごとに、対応する地理的画像タイルのレンダリングに使用される画像クラスがあります。
-
-以下の表は、xamGeographicMap  コントロールによって提供される画像クラスを簡単に説明します。
-
-| 画像クラス | 説明   |
-|---------------|---------------|
-|<ApiLink type="GeographicMapImagery" />|サポートされている地理的画像タイルのすべてのタイプを表示するすべての画像クラスの基本コントロールを表します。このクラスは、Map Quest マッピング サービスなどの他の地理的画像ソースから地理的画像タイルのサポートを実装する目的のために拡張できます。|
-|<ApiLink type="OpenStreetMapImagery" />|Open Street Maps サービスから地理的画像タイルを表示するためのマルチスケール画像コントロールを表します。|
-
-デフォルトでは、<ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> プロパティは <ApiLink type="OpenStreetMapImagery" /> オブジェクトに設定され、マップコンポーネントは Open Street Maps サービスからの地理的画像タイルを表示します。さまざまな種類の地理的画像タイルを表示するには、マップ コンポーネントを再設定する必要があります。
-
-さらに、<ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> プロパティは、このクラスを継承するオブジェクトに設定できます。ただし、<ApiLink type="GeographicMapImagery" /> クラスを継承するオブジェクトだけが、マップ背景コンテンツのパンおよびズームができます。
-
-マップ コンポーネントでは、マップの背景コンテンツは常にすべての地理的シリーズの背後にレンダリングされます。つまり、地理的画像タイルは常に最初にレンダリングされ、マップ コンポーネントの Series プロパティ内の地理的シリーズは地理的画像タイルの上にレンダリングされます。地理的画像タイルはマップ ビューにすばやく埋め込まれるため、これは、マップ コンポーネントの同じプロット領域に複数の地理的シリーズを表示する場合に特に重要です。
-
-## コード スニペット
-
-このコード例では、マップコンポーネントの <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> を、Open Street Maps の地理的画像タイルを提供する <ApiLink type="OpenStreetMapImagery" /> オブジェクトに明示的に設定しています。
-
-```html
- TODO - ADD CODE SNIPPET
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /><br />
-<ApiLink type="GeographicMapImagery" /><br />
-<ApiLink type="OpenStreetMapImagery" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx b/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx
deleted file mode 100644
index d6d485c508..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-display-osm-imagery.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | Open Street Maps 画像の表示 | インフラジスティックス"
-description: インフラジスティックスの Angular を使用して OSM Maps からの画像を表示します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, OSM, Ignite UI for Angular, Infragistics, imagery tile source, map background, Angular マップ, インフラジスティックス, 画像タイル ソース, マップ背景"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "Angular OpenStreetMapImagery は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular オープン ストリート マップ画像の表示
-
-Angular <ApiLink type="OpenStreetMapImagery" /> は、世界中の OpenStreetMap© のコントリビューターが共同で作成した無料の地理的画像マッピングサービスです。これは、構成オプションなしで、道路地図スタイル限定で世界の地理的画像を提供します。この地理的画像サービスは、<a href="http://www.openstreetmap.org" target="_blank">www.OpenStreetMap.org</a> に直接アクセスして利用できます。
-デフォルトでは、Ignite UI for Angular マップ コンポーネントには、Open Street Maps の地理的画像が既に表示されています。したがって、Open Street Maps から地理的画像を表示するように、コントロールを構成する必要はありません。
-
-## Angular オープン ストリート マップ画像の表示の例
-
-<Sample src="/maps/geo-map/display-osm-imagery" height={500} alt="Angular オープン ストリート マップ画像の表示の例" />
-
-## コード スニペット
-このコード例では、マップ コンポーネントの <ApiLink type="GeographicMap" member="backgroundContent" label="BackgroundContent" /> を OpenStreetMap© コントリビューターの地理画像を提供する <ApiLink type="OpenStreetMapImagery" /> オブジェクトに明示的に設定します。
-
-```html
-<igx-geographic-map #map
-    width="100%"
-    height="100%"
-    zoomable="true" >
-</igx-geographic-map>
-```
-
-```ts
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxOpenStreetMapImagery } from 'igniteui-angular-maps';
-// ...
-public map: IgxGeographicMapComponent;
-
-const tileSource = new IgxOpenStreetMapImagery();
-this.map.backgroundContent = tileSource;
-```
-
-## API リファレンス
-
-<ApiLink type="OpenStreetMapImagery" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-navigation.mdx b/docs/angular/src/content/jp/components/geo-map-navigation.mdx
deleted file mode 100644
index fa1025dc4b..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-navigation.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | マップ ナビゲーション | インフラジスティックス"
-description: インフラジスティックスの Angular マップをナビゲートするには、マウスまたはタッチを使用して左右にパンニングし、水平および垂直にズームします。Ignite UI for Angular マップのナビゲーション機能について説明します。
-keywords: "Angular map, navigation, Ignite UI for Angular, Infragistics, Angular マップ, ナビゲーション, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-
-llms:
-  description: "GeographicMap コントロールのナビゲーションは、既定では有効にされており、マップ コンテンツのズームとパンが可能です。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular コンテンツのナビゲーション
-
-<ApiLink type="GeographicMap" /> コントロールのナビゲーションは、既定では有効にされており、マップ コンテンツのズームとパンが可能です。ただし、この動作は <ApiLink type="GeographicMap" member="Zoomable" label="Zoomable" /> プロパティを使用して変更できます。マップでは同期ズームのみが許可されていること、つまり、アスペクト比を維持したままマップコンテンツをスケーリングすることを知っておくことが重要です。結果として、マップコンテンツを水平方向にスケーリングせずに垂直方向にスケーリングすることはできません。
-
-## Angular コンテンツのナビゲーションの例
-
-<Sample src="/maps/geo-map/navigation" height={500} alt="Angular コンテンツのナビゲーションの例" />
-
-## 地理座標
-
-これらの座標で囲まれた地理的領域内の地図コンテンツをナビゲートします。
-- 水平方向に 180°E (マイナス) から 180°W (プラス) の経度
-- 垂直方向に 85°S (マイナス) から 85°N (プラス) の緯度
-
-このコード スニペットは、地理座標を使用してマップをナビゲートする方法を示しています。
-
-## ウィンドウ座標
-
-また、これらの相対座標で区切られたウィンドウ長方形内でマップ コンテンツをナビゲーションできます。
-- 水平方向に 0.0 から 1.0 の値
-- 垂直方向に 0.0 から 1.0 の値
-
-このコード スニペットは、相対ウィンドウ座標を使用してマップをナビゲートする方法を示しています。
-
-## プロパティ
-以下の表は <ApiLink type="GeographicMap" /> コントロールのナビゲーションで使用できるプロパティをまとめたものです。
-
-| プロパティ名  | プロパティ型   | 概要   |
-|----------------|-----------------|---------------|
-|<ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" />| Rect | 地図コンテンツの表示領域にナビゲーション ウィンドウの新しい位置とサイズを設定します。0、0、1、1 の値で長方形を指定すると、ナビゲーション ウィンドウのマップ コンテンツ全体がズームアウトされます。 |
-|<ApiLink type="GeographicMap" member="windowScale" label="WindowScale" />| number | マップ コントロールのナビゲーション ウィンドウの新しいサイズを設定します。<ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> プロパティに格納されている Width または Height の最小値です。 |
-|<ApiLink type="SeriesViewer" member="windowPositionHorizontal" label="WindowPositionHorizontal" />| number | マップ コントロールの左端からのナビゲーション ウィンドウのアンカー ポイントの新しい水平位置を設定します。これは <ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> プロパティの Left に保存された値と等しくなります。 |
-|<ApiLink type="SeriesViewer" member="windowPositionVertical" label="WindowPositionVertical" />| number | ナビゲーション ウィンドウのアンカー ポイントの、地図コントロールの上端からの新しい垂直位置を設定します。これは <ApiLink type="GeographicMap" member="WindowRect" label="WindowRect" /> プロパティの Top に保存された値と等しくなります。 |
-|<ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" />| Rect | マップ コンテンツの表示領域内のナビゲーション ウィンドウの現在の位置とサイズを示します。0、0、1、1の値で長方形を指定すると、ナビゲーション ウィンドウにマップ コンテンツ全体が表示されます。  |
-|<ApiLink type="GeographicMap" member="actualWindowScale" label="ActualWindowScale" />| number | マップ コントロールのナビゲーション ウィンドウの現在のサイズを示します。<ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> プロパティに格納されている Width または Height の最小値と同じです。 |
-|<ApiLink type="SeriesViewer" member="actualWindowPositionHorizontal" label="ActualWindowPositionHorizontal" />| number | マップ コントロールの左端からのナビゲーション ウィンドウのアンカー ポイントの現在の水平位置を示します。<ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> プロパティの Left に保存された値と等しくなります。 |
-|<ApiLink type="SeriesViewer" member="actualWindowPositionVertical" label="ActualWindowPositionVertical" />| number | マップコントロールの上端からのナビゲーションウィンドウのアンカーポイントの垂直位置を示します。<ApiLink type="SeriesViewer" member="actualWindowRect" label="ActualWindowRect" /> プロパティの Top に保存された値と等しくなります。 |
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx b/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx
deleted file mode 100644
index f96ce9c5ff..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-resources-esri.mdx
+++ /dev/null
@@ -1,89 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | ESRI マップのリソース | インフラジスティックス"
-description: インフラジスティックスの Angular を使用して ESRI Maps からの画像を表示します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, ESRI, Ignite UI for Angular, Infragistics, imagery tile source, map background, Angular マップ, ESRI, インフラジスティックス, 画像タイル ソース, マップ背景"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "リソース トピックは、Esri Maps が GeographicMap で提供する ArcGISOnlineMapImagery の使用に役立つユーティリティの実装を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Esri ユーティリティ
-
-リソース トピックは、Esri Maps が <ApiLink type="ArcGISOnlineMapImagery" member="geographicMap" label="GeographicMap" /> で提供する <ApiLink type="ArcGISOnlineMapImagery" /> の使用に役立つユーティリティの実装を提供します。
-
-## コード スニペット
-
-```ts
-
-export class EsriUtility {
-
-    public static getUri(style: EsriStyle): string {
-        let isHttpSecured = window.location.toString().startsWith("https:");
-        // resolving Esri Server uri based on hosting website
-        let uri: string = style;
-        if (!isHttpSecured) {
-            uri = uri.replace("https:", "http:");
-        }
-        return uri;
-    }
-}
-
-/**
- * Describes available links to imagery tile sources on public ArcGIS/Esri servers.
- * You can find up-to-date list on https://services.arcgisonline.com/arcgis/rest/services
- */
-export enum EsriStyle {
-
-    // these Esri maps show geographic tiles for the whole of world
-    WorldStreetMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
-    WorldTopographicMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",
-    WorldImageryMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
-    WorldOceansMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer",
-    WorldNationalGeoMap = "https://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",
-    WorldTerrainMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",
-    WorldDeLormesMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",
-    WorldLightGrayMap = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer",
-    WorldShadedReliefMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Shaded_Relief/MapServer",
-    WorldPhysicalMap = "https://services.arcgisonline.com/ArcGIS/rest/services/World_Physical_Map/MapServer",
-
-    // these Esri maps show geographic tiles for the whole of world without contours of continents
-    // therefore the Map should also load a shapefile of continents when using them
-    WorldAdminOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
-    WorldTransportationOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
-    WorldBoundariesDarkOverlay ="https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer",
-    WorldBoundariesLightOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places_Alternate/MapServer",
-    WorldLabelsLightGrayOverlay = "https://services.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Reference/MapServer",
-
-    // these Esri maps show only geographic tiles for the USA
-    // therefore the Map should be zoomed in to geographic bounds of USA when using them
-    UsaOwnerOccupiedHousing = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Owner_Occupied_Housing/MapServer",
-    UsaSoilSurvey = "https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
-    UsaPopulationOlderThanAge64 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Over_64/MapServer",
-    UsaPopulationYoungerThan18 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Percent_Under_18/MapServer",
-    UsaPopulationGrowth2015 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Projected_Population_Change/MapServer",
-    UsaUnemploymentRate = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Unemployment_Rate/MapServer",
-    UsaSocialVulnerability = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Social_Vulnerability_Index/MapServer",
-    UsaRetailSpendingPotential = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Retail_Spending_Potential/MapServer",
-    UsaPopulationChange2010 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Recent_Population_Change/MapServer",
-    UsaPopulationChange2000 = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_1990-2000_Population_Change/MapServer",
-    UsaPopulationDensity = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_Density/MapServer",
-    UsaPopulationByGender = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Population_by_Sex/MapServer",
-    UsaMedianHouseholdIncome = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Household_Income/MapServer",
-    UsaMedianNetWorth = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Net_Worth/MapServer",
-    UsaMedianHomeValue = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Home_Value/MapServer",
-    UsaMedianAge = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Median_Age/MapServer",
-    UsaLaborForceParticipation = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Labor_Force_Participation_Rate/MapServer",
-    UsaAverageHouseholdSize = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Average_Household_Size/MapServer",
-    UsaDiversityIndex = "https://services.arcgisonline.com/ArcGIS/rest/services/Demographics/USA_Diversity_Index/MapServer",
-    UsaRailNetwork = "https://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer",
-
-}
-```
-
-## API リファレンス
-
-<ApiLink type="ArcGISOnlineMapImagery" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx b/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx
deleted file mode 100644
index b8732a3c11..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-resources-shape-styling-utility.mdx
+++ /dev/null
@@ -1,261 +0,0 @@
----
-title: "Angular マップ | シェープ マップのリソース | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップを使用して、シェイプ ファイルから地理空間データを読み込みます。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, shape styling, conditional formatting, Ignite UI for Angular, Infragistics, Angular マップ, 図形スタイル, 条件付き書式, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "リソース トピックは、Angular GeographicMap コンポーネントで GeographicShapeSeries の UI 要素のスタイリングに役立つユーティリティの実装を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular シェイプ スタイリング ユーティリティ
-
-リソース トピックは、Angular <ApiLink type="GeographicMap" /> コンポーネントで <ApiLink type="GeographicShapeSeries" /> の UI 要素のスタイリングに役立つユーティリティの実装を提供します。
-
-## 必要なインポート
-
-```ts
-import { IgxGeographicShapeSeries } from 'igniteui-angular-maps';
-import { Style } from 'igniteui-angular-core';
-```
-
-## ユーティリティ実装
-
-```ts
-export abstract class ShapeStyling {
-  public defaultStroke = 'black';
-  public defaultFill = 'gray';
-  public defaultThickness = 0.5;
-  public defaultOpacity = 1.0;
-  public defaultStyle = new Style();
-
-  constructor() {
-    this.defaultStyle = new Style();
-    this.defaultStyle.stroke = this.defaultStroke;
-    this.defaultStyle.fill = this.defaultFill;
-    this.defaultStyle.opacity = this.defaultOpacity;
-    this.defaultStyle.strokeThickness = this.defaultThickness;
-  }
-
-  public abstract generate(record: any): Style;
-
-  public getValue(itemMemberPath: string, item: any): any {
-    let itemValue = null;
-
-    if (item.fieldValues !== undefined) { // .hasOwnProperty("fieldValues")) {
-      if (item.fieldsNames.indexOf(itemMemberPath) >= 0) {
-        itemValue = item.fieldValues[itemMemberPath];
-      } else {
-        console.log('WARNING: ShapefileRecord does not have ' + itemMemberPath + ' in fieldValues property');
-      }
-    } else if (item.hasOwnProperty(itemMemberPath)) {
-      itemValue = item[itemMemberPath];
-    } else {
-      console.log('WARNING: Shape data item does not have ' + itemMemberPath + ' property');
-    }
-    return itemValue;
-  }
-}
-
-export class ShapeRandomStyling extends ShapeStyling {
-
-  public shapeThickness = 0.5;
-  public shapeOpacity = 1.0;
-  public shapeStrokeColors = ['black'];
-  public shapeFillColors   = ['red', 'orange', 'yellow'];
-
-  public styleMappings = new Map<string, Style>();
-
-  public generate(record: any): Style {
-    const id = record.fieldValues.Name || this.getRandomValue(0, 1000);
-
-    if (this.styleMappings.has(id)) {
-      return this.styleMappings.get(id);
-    } else {
-      const randStroke = this.getRandomItem(this.shapeStrokeColors);
-      const randFill = this.getRandomItem(this.shapeFillColors);
-      const shapeStyle = new Style();
-      shapeStyle.stroke = this.shapeStrokeColors[randStroke];
-      shapeStyle.fill = this.shapeFillColors[randFill];
-      shapeStyle.opacity = this.shapeOpacity;
-      shapeStyle.strokeThickness = this.shapeThickness;
-      this.styleMappings.set(id, shapeStyle);
-      return shapeStyle;
-    }
-  }
-
-  public getRandomValue(min: number, max: number): number {
-      return Math.round(min + (Math.random() * (max - min)));
-  }
-  public getRandomItem(array: any[]): any {
-    return this.getRandomValue(0, array.length - 1);
-  }
-}
-
-export class ShapeRangeStyling extends ShapeStyling {
-
-  public itemMemberPath = '';
-  public ranges: ShapeRange[] = [];
-
-  constructor() {
-    super();
-    this.ranges.push({ minimum: 0, maximum: 50, fill: 'yellow'} );
-    this.ranges.push({ minimum: 0, maximum: 100, fill: 'red'} );
-  }
-
-  public generate(record: any): Style {
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null) {
-      return this.defaultStyle;
-    }
-
-    for (const range of this.ranges) {
-      if (range.minimum <= itemValue && itemValue < range.maximum) {
-        const shapeStyle = new Style();
-        shapeStyle.opacity = range.opacity || this.defaultOpacity;
-        shapeStyle.fill    = range.fill || this.defaultFill;
-        shapeStyle.stroke  = range.stroke || this.defaultStroke;
-        shapeStyle.strokeThickness = range.strokeThickness || this.defaultThickness;
-        return shapeStyle;
-      }
-    }
-    return this.defaultStyle;
-  }
-}
-
-export class ShapeRange {
-
-  public minimum: number;
-  public maximum: number;
-
-  public opacity?: number;
-  public fill: string;
-  public stroke?: string;
-  public strokeThickness?: number;
-}
-
-export class ShapeScaleStyling extends ShapeStyling {
-
-  public shapeThickness = 0.5;
-  public shapeOpacity = 1.0;
-  public shapeStrokeColors = ['black'];
-  public shapeFillColors   = ['red', 'orange', 'yellow'];
-
-  public itemMemberPath = '';
-  public itemMinimumValue = 0;
-  public itemMaximumValue = 1000;
-
-  public isLogarithmic = true;
-
-  public generate(record: any): Style {
-
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null) {
-      return this.defaultStyle;
-    }
-
-    let fillColor = this.defaultFill;
-    let strokeColor = this.defaultStroke;
-    let scaleValue = this.getScaledValue(itemValue);
-
-    if (!Number.isNaN(scaleValue)) {
-      let fillIndex = Math.round(scaleValue * (this.shapeFillColors.length - 1));
-      let strokeIndex = Math.round(scaleValue * (this.shapeStrokeColors.length - 1));
-      fillColor = this.shapeFillColors[fillIndex];
-      strokeColor = this.shapeStrokeColors[strokeIndex];
-    }
-
-    const shapeStyle = new Style();
-    shapeStyle.fill = fillColor;
-    shapeStyle.stroke  = strokeColor;
-    shapeStyle.strokeThickness = this.shapeThickness;
-    shapeStyle.opacity = this.shapeOpacity;
-    return shapeStyle;
-  }
-
-  public getScaledValue(value: number): number {
-
-      if (!Number.isFinite(value) || Number.isNaN(value)) { return Number.NaN; }
-
-      let min = !Number.isFinite(this.itemMinimumValue) || Number.isNaN(this.itemMinimumValue) ? 0 : this.itemMinimumValue;
-      let max = !Number.isFinite(this.itemMaximumValue) || Number.isNaN(this.itemMaximumValue) ? 1000 : this.itemMaximumValue;
-
-      if (value < min || value > max) { return Number.NaN; }
-
-      if (this.isLogarithmic) {
-        return this.getLogarithmicValue(min, max, value);
-      } else {
-        return this.getLinearValue(min, max, value);
-      }
-  }
-
-  public getLogarithmicValue(min: number, max: number, value: number) {
-      if (!Number.isFinite(value)) { return Number.NaN; }
-
-      let newMin = Math.log10(min);
-      let newMax = Math.log10(max);
-      let newVal = Math.log10(value);
-
-      if (!Number.isFinite(newMin)) { newMin = 0.0; }
-      if (!Number.isFinite(newMax)) { newMax = 1000; }
-
-      if (newVal < 0) { newVal = 0.0; }
-
-      return this.getLinearValue(newMin, newMax, newVal);
-  }
-
-  public getLinearValue(min: number, max: number, value: number) {
-
-      if (!Number.isFinite(value)) { return Number.NaN; }
-
-      // if the value is outside the range
-      if (value < min || value > max) { return Number.NaN; }
-
-      let scaledValue = (value - min) / (max - min);
-      return scaledValue;
-  }
-}
-
-export class ShapeComparisonStyling extends ShapeStyling {
-
-  public itemMemberPath = '';
-  public itemMappings: ShapeComparison[] = [];
-
-  public generate(record: any): Style {
-
-    let itemValue = this.getValue(this.itemMemberPath, record);
-    if (itemValue === null || itemValue === "") {
-      return this.defaultStyle;
-    }
-
-    for (const mapping of this.itemMappings) {
-      if (mapping.itemValue === itemValue) {
-        const shapeStyle = new Style();
-        shapeStyle.opacity = mapping.opacity || this.defaultOpacity;
-        shapeStyle.fill    = mapping.fill || this.defaultFill;
-        shapeStyle.stroke  = mapping.stroke || this.defaultStroke;
-        shapeStyle.strokeThickness = mapping.strokeThickness || this.defaultThickness;
-        return shapeStyle;
-      }
-    }
-
-    return this.defaultStyle;
-  }
-}
-
-export class ShapeComparison {
-  public itemValue: string;
-
-  public opacity?: number;
-  public fill: string;
-  public stroke?: string;
-  public strokeThickness?: number;
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-resources-world-connections.mdx b/docs/angular/src/content/jp/components/geo-map-resources-world-connections.mdx
deleted file mode 100644
index 2d80657a43..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-resources-world-connections.mdx
+++ /dev/null
@@ -1,148 +0,0 @@
----
-title: "Angular マップ | ワールド コネクション | データ ソース | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップ データ ユーティリティを使用して、空港の位置、飛行経路、および地理的なグリッド線を生成します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics, Angular マップ, マップ データ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "リソース トピックは、空港の位置、飛行経路、および地理的なグリッド線を生成するためのデータユーティリティの実装を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ワールド コネクション
-
-リソース トピックは、空港の位置、飛行経路、および地理的なグリッド線を生成するためのデータユーティリティの実装を提供します。これらのデータ ソースを独自の地理データを作成するための参照点として使用できます。このユーティリティは [WorldUtil](geo-map-resources-world-util.md) と [WorldLocations](geo-map-resources-world-locations.md) スクリプトに依存していることに注意してください。
-
-## コード スニペット
-
-```ts
-import WorldLocations from "./WorldLocations";
-import WorldUtils from "./WorldUtils"
-
-export default class WorldConnections {
-
-    private static airports: any[] = [];
-    private static airportsLookup = new Map<string, any>();
-
-    private static flights: any[] = [];
-    private static flightsLookup: string[] = [];
-
-    public static getFlights(): any[] {
-        if (this.flights.length == 0) this.init();
-        return this.flights;
-    }
-
-    public static getAirports(): any[] {
-        if (this.airports.length == 0) this.init();
-        return this.airports;
-    }
-
-    public static comparePopulation(a: any, b: any): number {
-        if (a.pop < b.pop) {
-            return 1;
-        }
-        if (a.pop > b.pop) {
-            return -1;
-        }
-        return 0;
-    }
-
-    public static init() {
-
-        const cities: any[] = WorldLocations.getAll();
-        cities.sort(this.comparePopulation);
-        let count = cities.length;
-        let minDistance = 200;
-        let maxDistance = 9000;
-        let flightsLimit = 1500;
-        let flightsCount  = 0;
-
-        for (let i = 0; i < count; i++) {
-            let origin = cities[i];
-            let connectionsCount = 0;
-            let connectionsMax = Math.min(20, Math.round(origin.pop * 4));
-
-            for (let ii = 0; ii < count; ii++)
-            {
-                let dest = cities[ii];
-                if (origin.name != dest.name)
-                {
-                    let route = [origin.name, dest.name].sort().join('-');
-                    let routeIsValid = this.flightsLookup.indexOf(route) == -1;
-                    let distance = Math.round(WorldUtils.calcDistance(origin, dest));
-                    let distanceIsValid = distance > minDistance && distance < maxDistance;
-                    let pass = Math.round((Math.random() * 200)) + 150;
-                    let time = distance / 800;
-                    let trafficIsValid = origin.pop > 3 && dest.pop > 1.0;
-
-                    if (routeIsValid && distanceIsValid && trafficIsValid) {
-                         this.flightsLookup.push(route);
-
-                        let paths = WorldUtils.calcPaths(origin, dest);
-                        flightsCount++;
-                        connectionsCount++;
-                        let id = origin.name.substring(0,3).toUpperCase() + "-" + flightsCount;
-                        let flight = { id: id, origin: origin, dest: dest, time: time, passengers: pass, distance: distance, points: paths };
-                        this.flights.push(flight);
-                    }
-                    if (connectionsCount > connectionsMax) {
-                        break;
-                    }
-                }
-            }
-            if (flightsCount > flightsLimit)  {
-                break;
-            }
-        }
-
-        for (const flight of this.flights) {
-            this.addAirport(flight.origin);
-            this.addAirport(flight.dest);
-        }
-
-        this.airports = Array.from(this.airportsLookup.values());
-    }
-
-    private static addAirport(city: any) {
-        if (this.airportsLookup.has(city.name)) {
-            this.airportsLookup.get(city.name).flights += 1;
-        } else {
-            let airport = Object.assign({flights: 1}, city );
-            this.airportsLookup.set(city.name, airport);
-        }
-    }
-
-    public static getGridlines(): any[] {
-        let gridlines = [];
-        // longitude lines
-        for (let lon = -180; lon <= 180; lon += 30) {
-
-            let line: any[] = [{x: lon, y: -90}, {x: lon, y: 90}];
-            let points: any[] = [line];
-
-            let coordinateLine = {points: points,
-                degree: lon,
-                direction: lon > 0 ? "E" : "W"
-              };
-              gridlines.push(coordinateLine);
-        }
-        // latitude lines
-        for (let lat = -90; lat <= 90; lat += 30) {
-
-            let line: any[] = [{x: -180, y: lat}, {x: 180, y: lat}];
-            let points: any[] = [line];
-            let coordinateLine = {points: points,
-                degree: lat,
-                direction: lat > 0 ? "N" : "S"
-              };
-              gridlines.push(coordinateLine);
-        }
-        return gridlines;
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-resources-world-locations.mdx b/docs/angular/src/content/jp/components/geo-map-resources-world-locations.mdx
deleted file mode 100644
index bc649c24e4..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-resources-world-locations.mdx
+++ /dev/null
@@ -1,664 +0,0 @@
----
-title: "Angular マップ | 世界の場所 | データ ソース | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップ データ ユーティリティを使用して、都市の地理的位置と国の首都を生成します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics, Angular マップ, マップ データ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "インフラジスティックスの Angular JavaScript マップ データ ユーティリティを使用して、都市の地理的位置と国の首都を生成します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 世界の場所
-
-リソース トピックでは、都市の地理的位置と国の首都を生成するためのデータ ユーティリティの実装を提供します。
-
-## コード スニペット
-
-```ts
-export default class WorldLocations {
-
-    private static locations: any[] = [];
-    private static capitals: any[] = [];
-    private static cities: any[] = [];
-
-    // get location of cities and capitals
-    public static getAll(): any[] {
-        if (this.locations.length == 0) this.init();
-        return this.locations;
-    }
-
-    // get location of cities
-    public static getCities(): any[] {
-        if (this.cities.length == 0) this.init();
-        return this.cities;
-    }
-
-    // get location of capitals
-    public static getCapitals(): any[] {
-        if (this.capitals.length == 0) this.init();
-        return this.capitals;
-    }
-
-    public static init() {
-        // console.log("WorldLocations init");
-        this.locations = [
-            { cap: false, pop:  0.468, lat: 68.9635467529297, lon: 33.0860404968262, country: "Russia", name: "Murmansk" },
-            { cap: false, pop:  0.416, lat: 64.5206680297852, lon: 40.6461601257324, country: "Russia", name: "Arkhangelsk" },
-            { cap: false, pop:  5.825, lat: 59.9518890380859, lon: 30.4533271789551, country: "Russia", name: "Saint Petersburg" },
-            { cap: false, pop:  0.152, lat: 59.5709991455078, lon: 150.780014038086, country: "Russia", name: "Magadan" },
-            { cap: false, pop:  1.160, lat: 58.0002365112305, lon: 56.2324638366699, country: "Russia", name: "Perm'" },
-            { cap: false, pop:  1.620, lat: 56.8465423583984, lon: 60.6101303100586, country: "Russia", name: "Yekaterinburg" },
-            { cap: false, pop:  2.025, lat: 56.2896766662598, lon: 43.9406700134277, country: "Russia", name: "Nizhniy Novgorod" },
-            { cap: false, pop:  1.800, lat: 55.8628082275391, lon: -4.26994752883911, country: "UK", name: "Glasgow" },
-            { cap: false, pop:  1.140, lat: 55.7330055236816, lon: 49.1454658508301, country: "Russia", name: "Kazan'" },
-            { cap: false, pop:  1.325, lat: 55.1450004577637, lon: 61.3926124572754, country: "Russia", name: "Chelyabinsk" },
-            { cap: false, pop:  1.175, lat: 55.063304901123, lon: 73.2502899169922, country: "Russia", name: "Omsk" },
-            { cap: false, pop:  1.600, lat: 55.0321006774902, lon: 82.9428482055664, country: "Russia", name: "Novosibirsk" },
-            { cap: false, pop:  1.100, lat: 54.8217353820801, lon: 56.0961265563965, country: "Russia", name: "Ufa" },
-            { cap: true,  pop:  0.582, lat: 54.6885681152344, lon: 25.2759666442871, country: "Lithuania", name: "Vilnius" },
-            { cap: false, pop:  0.685, lat: 54.5869255065918, lon: -5.90966033935547, country: "UK", name: "Belfast" },
-            { cap: false, pop:  0.909, lat: 54.3662033081055, lon: 18.624942779541, country: "Poland", name: "Gdansk" },
-            { cap: true,  pop:  1.650, lat: 53.8999366760254, lon: 27.5755672454834, country: "Byelarus", name: "Minsk" },
-            { cap: false, pop:  1.540, lat: 53.8087120056152, lon: -1.49752748012543, country: "UK", name: "Leeds" },
-            { cap: false, pop:  2.225, lat: 53.5711212158203, lon: 10.027606010437, country: "Germany", name: "Hamburg" },
-            { cap: false, pop:  2.775, lat: 53.479663848877, lon: -2.26177859306335, country: "UK", name: "Manchester" },
-            { cap: false, pop:  0.710, lat: 53.3740425109863, lon: -1.46298921108246, country: "UK", name: "Sheffield" },
-            { cap: true,  pop:  1.140, lat: 53.3415603637695, lon: -6.25734663009644, country: "Ireland", name: "Dublin" },
-            { cap: false, pop:  1.505, lat: 53.1385955810547, lon: 50.0961799621582, country: "Russia", name: "Samara" },
-            { cap: false, pop:  0.800, lat: 53.0801048278809, lon: 8.85762596130371, country: "Germany", name: "Bremen" },
-            { cap: true,  pop:  5.061, lat: 52.5162734985352, lon: 13.3275728225708, country: "Germany", name: "Berlin" },
-            { cap: false, pop:  2.675, lat: 52.4927520751953, lon: -1.86334776878357, country: "UK", name: "Birmingham" },
-            { cap: true,  pop:  1.860, lat: 52.3730430603027, lon: 4.89483308792114, country: "Netherlands", name: "Amsterdam" },
-            { cap: false, pop:  0.626, lat: 52.3174324035645, lon: 104.247833251953, country: "Russia", name: "Irkutsk" },
-            { cap: true,  pop:  2.323, lat: 52.244945526123, lon: 21.0118789672852, country: "Poland", name: "Warsaw" },
-            { cap: false, pop:  1.110, lat: 51.925594329834, lon: 4.48515224456787, country: "Netherlands", name: "Rotterdam" },
-            { cap: false, pop:  1.061, lat: 51.7779083251953, lon: 19.4764404296875, country: "Poland", name: "Lodz" },
-            { cap: false, pop:  0.568, lat: 51.5138130187988, lon: 7.46641826629639, country: "Germany", name: "Dortmund" },
-            { cap: false, pop:  0.515, lat: 51.4893379211426, lon: 6.77530431747437, country: "Germany", name: "Duisburg" },
-            { cap: true,  pop: 11.100, lat: 51.4879112243652, lon: -0.177998125553131, country: "UK", name: "london" },
-            { cap: false, pop:  3.867, lat: 51.3540420532227, lon: 7.12243509292603, country: "Germany", name: "Essen" },
-            { cap: false, pop:  0.700, lat: 51.3493309020996, lon: 12.3980741500854, country: "Germany", name: "Leipzig" },
-            { cap: false, pop:  1.100, lat: 51.207347869873, lon: 4.42605447769165, country: "Belgium", name: "Antwerpen" },
-            { cap: false, pop:  0.640, lat: 51.1218185424805, lon: 17.0381278991699, country: "Poland", name: "Wroclaw" },
-            { cap: false, pop:  0.465, lat: 51.0475540161133, lon: 3.73629117012024, country: "Belgium", name: "Gent" },
-            { cap: false, pop:  0.670, lat: 51.0456809997559, lon: 13.7053575515747, country: "Germany", name: "Dresden" },
-            { cap: false, pop:  0.671, lat: 51.0299987792969, lon: -114.050003051758, country: "Canada", name: "Calgary" },
-            { cap: false, pop:  1.760, lat: 50.9423446655273, lon: 6.93487167358398, country: "Germany", name: "Koln" },
-            { cap: true,  pop:  2.385, lat: 50.8370475769043, lon: 4.36761236190796, country: "Belgium", name: "Bruxelles" },
-            { cap: false, pop:  0.570, lat: 50.7345581054688, lon: 7.09981870651245, country: "Germany", name: "Bonn" },
-            { cap: false, pop:  1.020, lat: 50.6320838928223, lon: 3.06290125846863, country: "France", name: "Lille" },
-            { cap: false, pop:  0.750, lat: 50.6225280761719, lon: 5.56943559646606, country: "Belgium", name: "Liege" },
-            { cap: true,  pop:  2.900, lat: 50.4481582641602, lon: 30.5021114349365, country: "Ukraine", name: "Kiev" },
-            { cap: false, pop:  1.855, lat: 50.129997253418, lon: 8.66816711425781, country: "Germany", name: "Frankfurt am Main" },
-            { cap: true,  pop:  1.325, lat: 50.1058959960938, lon: 14.4565200805664, country: "Czech Repub", name: "Prague" },
-            { cap: false, pop:  0.828, lat: 50.0622406005859, lon: 19.9450569152832, country: "Poland", name: "Krakow" },
-            { cap: false, pop:  0.625, lat: 49.9211692810059, lon: -97.1244430541992, country: "Canada", name: "Winnipeg" },
-            { cap: false, pop:  0.614, lat: 49.879207611084, lon: 73.20263671875, country: "Kazakhstan", name: "Karaganda" },
-            { cap: false, pop:  0.790, lat: 49.8373107910156, lon: 24.0345211029053, country: "Ukraine", name: "Lvov" },
-            { cap: false, pop:  0.450, lat: 49.2029800415039, lon: 16.6162452697754, country: "Czech Repub", name: "Brno" },
-            { cap: true,  pop:  9.775, lat: 48.8815536499023, lon: 2.43283271789551, country: "France", name: "Paris" },
-            { cap: false, pop:  1.360, lat: 48.7102470397949, lon: 44.4836311340332, country: "Russia", name: "Volgograd" },
-            { cap: false, pop:  0.400, lat: 48.5834350585938, lon: 7.76799440383911, country: "France", name: "Strasbourg" },
-            { cap: false, pop:  0.335, lat: 48.2975959777832, lon: 14.2939014434814, country: "Austria", name: "Linz" },
-            { cap: true,  pop:  1.875, lat: 48.2021179199219, lon: 16.3209857940674, country: "Austria", name: "Vienna" },
-            { cap: false, pop:  1.955, lat: 48.1409759521484, lon: 11.5429534912109, country: "Germany", name: "Munchen" },
-            { cap: false, pop:  2.200, lat: 48.0401458740234, lon: 37.7370529174805, country: "Ukraine", name: "Donets'k" },
-            { cap: true,  pop:  0.548, lat: 47.928596496582, lon: 106.912353515625, country: "Mongolia", name: "Ulaanbaatar" },
-            { cap: true,  pop:  2.565, lat: 47.5146255493164, lon: 19.0942497253418, country: "Hungary", name: "Budapest" },
-            { cap: false, pop:  1.150, lat: 47.3440055847168, lon: 123.964965820313, country: "China", name: "Qiqihar" },
-            { cap: false, pop:  0.185, lat: 47.2654609680176, lon: 11.3499822616577, country: "Austria", name: "Innsbruck" },
-            { cap: false, pop:  1.165, lat: 47.2320976257324, lon: 39.6880378723145, country: "Russia", name: "Rostov-na-Donu" },
-            { cap: false, pop:  0.465, lat: 47.2194328308105, lon: -1.56156122684479, country: "France", name: "Nantes" },
-            { cap: false, pop:  0.325, lat: 47.0649223327637, lon: 15.4311008453369, country: "Austria", name: "Graz" },
-            { cap: true,  pop:  0.299, lat: 46.9482078552246, lon: 7.44573640823364, country: "Switzerland", name: "Bern" },
-            { cap: false, pop:  0.603, lat: 46.802074432373, lon: -71.2449340820313, country: "Canada", name: "Quebec" },
-            { cap: false, pop:  1.185, lat: 46.5722007751465, lon: 30.6839370727539, country: "Ukraine", name: "Odessa" },
-            { cap: false, pop:  2.670, lat: 45.7552185058594, lon: 126.622634887695, country: "China", name: "Harbin" },
-            { cap: false, pop:  1.275, lat: 45.7470817565918, lon: 4.85540056228638, country: "France", name: "Lyon" },
-            { cap: false, pop:  2.921, lat: 45.541015625, lon: -73.6535339355469, country: "Canada", name: "Montreal" },
-            { cap: false, pop:  3.750, lat: 45.4733810424805, lon: 9.19046401977539, country: "Italy", name: "Milano" },
-            { cap: false, pop:  0.420, lat: 45.4247741699219, lon: 12.370719909668, country: "Italy", name: "Venezia" },
-            { cap: true,  pop:  0.819, lat: 45.3742179870605, lon: -75.650749206543, country: "Canada", name: "Ottawa" },
-            { cap: false, pop:  1.550, lat: 45.0748748779297, lon: 7.66642618179321, country: "Italy", name: "Torino" },
-            { cap: false, pop:  2.012, lat: 44.924186706543, lon: -93.3077926635742, country: "US", name: "Minneapolis" },
-            { cap: false, pop:  0.640, lat: 44.8414726257324, lon: -0.599498748779297, country: "France", name: "Bordeaux" },
-            { cap: true,  pop:  1.400, lat: 44.7996826171875, lon: 20.4125556945801, country: "Serbia", name: "Beograd" },
-            { cap: true,  pop:  2.250, lat: 44.4304847717285, lon: 26.1229763031006, country: "Romania", name: "Bucuresti" },
-            { cap: false, pop:  1.740, lat: 43.8813171386719, lon: 125.312652587891, country: "China", name: "Changchung" },
-            { cap: false, pop:  1.170, lat: 43.8502159118652, lon: 126.56706237793, country: "China", name: "Jilin" },
-            { cap: false, pop:  1.040, lat: 43.7826652526855, lon: 87.5865173339844, country: "China", name: "Urumqi" },
-            { cap: false, pop:  0.640, lat: 43.7815742492676, lon: 11.207745552063, country: "Italy", name: "Firenze" },
-            { cap: false, pop:  3.427, lat: 43.7207679748535, lon: -79.4126358032227, country: "Canada", name: "Toronto" },
-            { cap: false, pop:  0.541, lat: 43.5999603271484, lon: 1.43798303604126, country: "France", name: "Toulouse" },
-            { cap: false, pop:  0.985, lat: 43.2821578979492, lon: -2.97378325462341, country: "Spain", name: "Bilbao" },
-            { cap: true,  pop:  1.190, lat: 43.2550621032715, lon: 76.9126281738281, country: "Kazakhstan", name: "Almaty" },
-            { cap: false, pop:  0.816, lat: 43.2104644775391, lon: -77.635612487793, country: "US", name: "Rochester" },
-            { cap: false, pop:  1.375, lat: 43.0679473876953, lon: -87.9907379150391, country: "US", name: "Milwaukee" },
-            { cap: false, pop:  1.900, lat: 43.0552520751953, lon: 141.345474243164, country: "Japan", name: "Sapporo" },
-            { cap: false, pop:  1.483, lat: 42.8986625671387, lon: -78.8484344482422, country: "US", name: "Buffalo" },
-            { cap: true,  pop:  1.205, lat: 42.7072639465332, lon: 23.3318710327148, country: "Bulgaria", name: "Sofia" },
-            { cap: false, pop:  4.692, lat: 42.3943138122559, lon: -83.0789260864258, country: "US", name: "Detroit" },
-            { cap: false, pop:  3.972, lat: 42.3752975463867, lon: -71.1025848388672, country: "US", name: "Boston" },
-            { cap: false, pop:  1.270, lat: 41.8591575622559, lon: 123.905570983887, country: "China", name: "Fushun" },
-            { cap: false, pop:  7.717, lat: 41.826545715332, lon: -87.6413040161133, country: "US", name: "Chicago" },
-            { cap: false, pop:  3.840, lat: 41.8021621704102, lon: 123.383056640625, country: "China", name: "Shenyang" },
-            { cap: true,  pop:  1.460, lat: 41.721809387207, lon: 44.7831268310547, country: "Georgia", name: "Tbilisi" },
-            { cap: false, pop:  0.575, lat: 41.6512641906738, lon: -0.878205060958862, country: "Spain", name: "Zaragoza" },
-            { cap: false, pop:  2.218, lat: 41.3907165527344, lon: -81.7275085449219, country: "US", name: "Cleveland" },
-            { cap: true,  pop:  0.211, lat: 41.3316535949707, lon: 19.8318042755127, country: "Albania", name: "Tirane" },
-            { cap: false, pop:  1.300, lat: 41.1152458190918, lon: 122.977012634277, country: "China", name: "Anshan" },
-            { cap: false, pop:  5.750, lat: 41.0659561157227, lon: 29.0060691833496, country: "Turkey", name: "Istanbul" },
-            { cap: false, pop:  0.682, lat: 40.693920135498, lon: -111.89217376709, country: "US", name: "Salt Lake City" },
-            { cap: false, pop:  2.219, lat: 40.4972038269043, lon: -79.9970855712891, country: "US", name: "Pittsburgh" },
-            { cap: true,  pop:  4.650, lat: 40.4422187805176, lon: -3.69096946716309, country: "Spain", name: "Madrid" },
-            { cap: true,  pop:  2.020, lat: 40.3242988586426, lon: 49.8162384033203, country: "Azerbaijan", name: "Baku" },
-            { cap: true,  pop:  1.315, lat: 40.2080230712891, lon: 44.5326690673828, country: "Armenia", name: "Yerevan" },
-            { cap: false, pop:  0.964, lat: 40.0446434020996, lon: -82.9927062988281, country: "US", name: "Columbus" },
-            { cap: true,  pop:  2.400, lat: 39.929328918457, lon: 32.853271484375, country: "Turkey", name: "Ankara" },
-            { cap: false, pop:  5.209, lat: 39.9275512695313, lon: -75.2182235717773, country: "US", name: "Philadelphia" },
-            { cap: true,  pop:  6.450, lat: 39.906192779541, lon: 116.388038635254, country: "China", name: "Beijing" },
-            { cap: false, pop:  0.246, lat: 39.9044532775879, lon: 41.2918243408203, country: "Turkey", name: "Erzurum" },
-            { cap: false, pop:  0.366, lat: 39.6575813293457, lon: 66.9476013183594, country: "Uzbekistan", name: "Samarkand" },
-            { cap: false, pop:  1.060, lat: 39.6154441833496, lon: 118.180213928223, country: "China", name: "Tangshan" },
-            { cap: false, pop:  1.270, lat: 39.4709167480469, lon: -0.367400944232941, country: "Spain", name: "Valencia" },
-            { cap: false, pop:  1.960, lat: 39.3218841552734, lon: -76.6183776855469, country: "US", name: "Baltimore" },
-            { cap: false, pop:  0.305, lat: 39.2251434326172, lon: 9.10890960693359, country: "Italy", name: "Cagliari" },
-            { cap: false, pop:  1.480, lat: 39.1480102539063, lon: -84.4770202636719, country: "US", name: "Cincinnati" },
-            { cap: false, pop:  4.880, lat: 39.1284141540527, lon: 117.18522644043, country: "China", name: "Tianjin" },
-            { cap: true,  pop:  1.600, lat: 39.0285148620605, lon: 125.757514953613, country: "Korea D P Rp", name: "Pyongyang" },
-            { cap: false, pop:  1.272, lat: 38.9941177368164, lon: -94.6265640258789, country: "US", name: "Kansas City" },
-            { cap: true,  pop:  3.221, lat: 38.8909111022949, lon: -76.9538345336914, country: "US", name: "Washington D.C." },
-            { cap: false, pop:  2.203, lat: 38.6388854980469, lon: -90.3419799804688, country: "US", name: "St. Louis" },
-            { cap: false, pop:  0.866, lat: 38.5670166015625, lon: -121.422706604004, country: "US", name: "Sacramento" },
-            { cap: false, pop:  0.971, lat: 38.0809783935547, lon: 46.2901191711426, country: "Iran", name: "Tabriz" },
-            { cap: false, pop:  1.190, lat: 38.0770950317383, lon: 114.559707641602, country: "China", name: "Shijiazhuang" },
-            { cap: true,  pop:  0.398, lat: 37.9504203796387, lon: 58.3901329040527, country: "Turkmenistan", name: "Ashkhabad" },
-            { cap: false, pop:  1.660, lat: 37.8930549621582, lon: 112.551704406738, country: "China", name: "Taiyuan" },
-            { cap: true,  pop: 15.850, lat: 37.542350769043, lon: 126.935249328613, country: "Korea Rep", name: "Seoul" },
-            { cap: false, pop:  0.945, lat: 37.3726463317871, lon: -5.97083187103271, country: "Spain", name: "Sevilla" },
-            { cap: false, pop:  0.778, lat: 36.9999809265137, lon: 35.3243637084961, country: "Turkey", name: "Adana" },
-            { cap: false, pop:  0.796, lat: 36.8792915344238, lon: -76.2685699462891, country: "US", name: "Norfolk" },
-            { cap: true,  pop:  1.225, lat: 36.8188133239746, lon: 10.1659603118896, country: "Tunisia", name: "Tunis" },
-            { cap: false, pop:  0.830, lat: 36.7914962768555, lon: 118.062042236328, country: "China", name: "Zibo" },
-            { cap: false, pop:  1.460, lat: 36.6555366516113, lon: 116.967056274414, country: "China", name: "Jinan" },
-            { cap: false, pop:  0.571, lat: 36.3355674743652, lon: 43.1371269226074, country: "Iraq", name: "Mosul" },
-            { cap: false, pop:  1.464, lat: 36.2900695800781, lon: 59.596851348877, country: "Iran", name: "Mashhad" },
-            { cap: false, pop:  1.216, lat: 36.2155456542969, lon: 37.1592826843262, country: "Syria", name: "Aleppo" },
-            { cap: false, pop:  1.270, lat: 36.1134300231934, lon: 103.599594116211, country: "China", name: "Lanzhou" },
-            { cap: false, pop:  2.206, lat: 35.8635368347168, lon: 128.591384887695, country: "Korea Rep", name: "Taegu" },
-            { cap: true,  pop:  6.400, lat: 35.7744750976563, lon: 51.4476509094238, country: "Iran", name: "Tehran" },
-            { cap: true,  pop: 23.620, lat: 35.6830558776855, lon: 139.809188842773, country: "Japan", name: "Tokyo" },
-            { cap: false, pop:  1.089, lat: 35.5045700073242, lon: 139.72721862793, country: "Japan", name: "Kawasaki" },
-            { cap: false, pop:  0.742, lat: 35.4895896911621, lon: -97.5302963256836, country: "US", name: "Oklahoma City" },
-            { cap: false, pop:  2.993, lat: 35.437385559082, lon: 139.619659423828, country: "Japan", name: "Yokohama" },
-            { cap: false, pop:  0.479, lat: 35.2058143615723, lon: -80.8356857299805, country: "US", name: "Charlotte" },
-            { cap: false, pop:  3.800, lat: 35.1578674316406, lon: 129.0546875, country: "Korea Rep", name: "Pusan" },
-            { cap: false, pop:  4.800, lat: 35.1549224853516, lon: 136.920593261719, country: "Japan", name: "Nagoya" },
-            { cap: false, pop:  0.853, lat: 35.1147270202637, lon: -90.0003280639648, country: "US", name: "Memphis" },
-            { cap: false, pop:  1.479, lat: 35.0091285705566, lon: 135.754821777344, country: "Japan", name: "Kyoto" },
-            { cap: false, pop:  1.170, lat: 34.757682800293, lon: 113.641777038574, country: "China", name: "Zhengzhou" },
-            { cap: false, pop:  0.431, lat: 34.7338752746582, lon: 36.7181739807129, country: "Syria", name: "Homs" },
-            { cap: false, pop:  0.740, lat: 34.6713485717773, lon: 112.361236572266, country: "China", name: "Luoyang" },
-            { cap: false, pop: 15.040, lat: 34.6355285644531, lon: 135.519119262695, country: "Japan", name: "Osaka" },
-            { cap: true,  pop:  1.179, lat: 34.5309066772461, lon: 69.1367568969727, country: "Afghanistan", name: "Kabul" },
-            { cap: false, pop:  1.575, lat: 34.377555847168, lon: 132.444778442383, country: "Japan", name: "Hiroshima" },
-            { cap: false, pop:  2.050, lat: 34.265697479248, lon: 108.883361816406, country: "China", name: "Xian" },
-            { cap: false, pop:  0.535, lat: 34.0435676574707, lon: -4.99554777145386, country: "Morocco", name: "Fes" },
-            { cap: false, pop:  1.963, lat: 33.7957000732422, lon: -84.3492279052734, country: "US", name: "Atlanta" },
-            { cap: true,  pop:  0.204, lat: 33.7181510925293, lon: 73.060546875, country: "Pakistan", name: "Islamabad" },
-            { cap: false, pop:  0.836, lat: 33.6058044433594, lon: 73.0437469482422, country: "Pakistan", name: "Rawalpindi" },
-            { cap: true,  pop:  1.850, lat: 33.5193023681641, lon: 36.3134536743164, country: "Syria", name: "Damascus" },
-            { cap: false, pop:  1.482, lat: 33.5090217590332, lon: -112.110260009766, country: "US", name: "Phoenix" },
-            { cap: true,  pop:  3.841, lat: 33.3340377807617, lon: 44.397834777832, country: "Iraq", name: "Baghdad" },
-            { cap: false, pop:  2.727, lat: 32.763729095459, lon: -96.663688659668, country: "US", name: "Dallas" },
-            { cap: false, pop:  0.987, lat: 32.6513900756836, lon: 51.6791877746582, country: "Iran", name: "Esfahan" },
-            { cap: false, pop:  2.290, lat: 32.0483665466309, lon: 118.768905639648, country: "China", name: "Nanjing" },
-            { cap: true,  pop:  1.250, lat: 31.9493827819824, lon: 35.9329071044922, country: "Jordan", name: "Amman" },
-            { cap: false, pop:  0.595, lat: 31.6308898925781, lon: 74.8715515136719, country: "India", name: "Amritsar" },
-            { cap: false, pop:  3.025, lat: 31.5450534820557, lon: 74.3406753540039, country: "Pakistan", name: "Lahore" },
-            { cap: false, pop:  1.104, lat: 31.4089508056641, lon: 73.0834579467773, country: "Pakistan", name: "Faisalabad" },
-            { cap: false, pop:  9.300, lat: 31.2478694915771, lon: 121.47265625, country: "China", name: "Shanghai" },
-            { cap: false, pop:  1.810, lat: 30.6700687408447, lon: 104.071273803711, country: "China", name: "Chengdu" },
-            { cap: false, pop:  3.490, lat: 30.5724983215332, lon: 114.279220581055, country: "China", name: "Wuhan" },
-            { cap: false, pop:  0.617, lat: 30.503490447998, lon: 47.7608642578125, country: "Iraq", name: "Al Basra" },
-            { cap: false, pop:  1.270, lat: 30.2526245117188, lon: 120.165077209473, country: "China", name: "Hangzhou" },
-            { cap: true,  pop:  9.300, lat: 30.0779113769531, lon: 31.2507972717285, country: "Egypt", name: "Cairo" },
-            { cap: false, pop:  1.185, lat: 29.9563789367676, lon: -90.0986862182617, country: "US", name: "New Orleans" },
-            { cap: false, pop:  2.755, lat: 29.7718296051025, lon: -95.407112121582, country: "US", name: "Houston" },
-            { cap: false, pop:  0.084, lat: 29.6507034301758, lon: 91.1320877075195, country: "China", name: "Lhasa" },
-            { cap: false, pop:  2.450, lat: 29.5441036224365, lon: 106.522689819336, country: "China", name: "Chongqing" },
-            { cap: false, pop:  0.968, lat: 29.4299221038818, lon: -98.5245742797852, country: "US", name: "San Antonio" },
-            { cap: false, pop:  1.030, lat: 28.6712398529053, lon: 115.88941192627, country: "China", name: "Nanchang" },
-            { cap: true,  pop:  0.273, lat: 28.5687255859375, lon: 77.2167510986328, country: "India", name: "New Delhi" },
-            { cap: false, pop:  7.200, lat: 28.5264587402344, lon: 77.2243728637695, country: "India", name: "Delhi" },
-            { cap: false, pop:  1.190, lat: 28.1976413726807, lon: 112.968482971191, country: "China", name: "Changsha" },
-            { cap: true,  pop:  0.320, lat: 27.7120170593262, lon: 85.3129501342773, country: "Nepal", name: "Kathmandu" },
-            { cap: true,  pop:  0.012, lat: 27.44260597229, lon: 89.6673278808594, country: "Bhutan", name: "Thimbu" },
-            { cap: false, pop:  1.025, lat: 26.9051132202148, lon: 75.8012771606445, country: "India", name: "Jaipur" },
-            { cap: false, pop:  1.060, lat: 26.8494281768799, lon: 80.9197235107422, country: "India", name: "Lucknow" },
-            { cap: false, pop:  1.010, lat: 26.5719413757324, lon: 106.700302124023, country: "China", name: "Guiyang" },
-            { cap: false, pop:  1.875, lat: 26.4578304290771, lon: 80.3178634643555, country: "India", name: "Kanpur" },
-            { cap: false, pop:  0.890, lat: 26.0710163116455, lon: 119.303520202637, country: "China", name: "Fuzhou" },
-            { cap: false, pop:  2.827, lat: 25.8321304321289, lon: -80.2702178955078, country: "US", name: "Miami" },
-            { cap: false, pop:  2.015, lat: 25.6773529052734, lon: -100.317085266113, country: "Mexico", name: "Monterrey" },
-            { cap: false, pop:  1.025, lat: 25.6138973236084, lon: 85.1353454589844, country: "India", name: "Patna" },
-            { cap: false, pop:  0.800, lat: 25.3801860809326, lon: 68.3664703369141, country: "Pakistan", name: "Hyderabad" },
-            { cap: false, pop:  0.925, lat: 25.2820110321045, lon: 82.9563369750977, country: "India", name: "Benares" },
-            { cap: true,  pop:  0.310, lat: 25.2036418914795, lon: 51.4972343444824, country: "Qatar", name: "Doha" },
-            { cap: false, pop:  1.280, lat: 25.0510330200195, lon: 102.702125549316, country: "China", name: "Kunming" },
-            { cap: true,  pop:  6.130, lat: 25.0350914001465, lon: 121.506729125977, country: "Taiwan", name: "Taipei" },
-            { cap: false, pop:  0.715, lat: 24.1436424255371, lon: 120.670280456543, country: "Taiwan", name: "T`ai-chung" },
-            { cap: true,  pop:  3.430, lat: 23.7099189758301, lon: 90.4071426391602, country: "Bangladesh", name: "Dhaka" },
-            { cap: false, pop:  3.050, lat: 23.0961952209473, lon: 113.293609619141, country: "China", name: "Guangzhou" },
-            { cap: false, pop:  2.400, lat: 23.0397911071777, lon: 72.5668640136719, country: "India", name: "Ahmadabad" },
-            { cap: false, pop:  0.648, lat: 22.8426475524902, lon: 89.5582427978516, country: "Bangladesh", name: "Khulna" },
-            { cap: false, pop: 11.100, lat: 22.5435371398926, lon: 88.3342208862305, country: "India", name: "Calcutta" },
-            { cap: false, pop:  0.435, lat: 22.2432346343994, lon: -97.8426284790039, country: "Mexico", name: "Tampico" },
-            { cap: false, pop:  0.533, lat: 21.975944519043, lon: 96.0841522216797, country: "Burma", name: "Mandalay" },
-            { cap: false, pop:  0.550, lat: 21.4273815155029, lon: 39.8148384094238, country: "Saudi Arabia", name: "Mecca" },
-            { cap: false, pop:  1.302, lat: 21.1557579040527, lon: 79.089111328125, country: "India", name: "Nagpur" },
-            { cap: true,  pop:  1.500, lat: 21.0319480895996, lon: 105.81990814209, country: "Vietnam", name: "Hanoi" },
-            { cap: false, pop:  0.385, lat: 20.8613586425781, lon: 106.679794311523, country: "Vietnam", name: "Haiphong" },
-            { cap: false, pop:  0.400, lat: 20.8218688964844, lon: -89.552864074707, country: "Mexico", name: "Merida" },
-            { cap: false, pop:  2.325, lat: 20.6735916137695, lon: -103.343795776367, country: "Mexico", name: "Guadalajara" },
-            { cap: false, pop:  0.207, lat: 19.6157131195068, lon: 37.2196884155273, country: "Sudan", name: "Bur Sudan" },
-            { cap: true,  pop: 14.100, lat: 19.4270458221436, lon: -99.127571105957, country: "Mexico", name: "Mexico City" },
-            { cap: false, pop:  1.055, lat: 19.0486316680908, lon: -98.1929473876953, country: "Mexico", name: "Puebla de Zaragoza" },
-            { cap: false, pop:  1.775, lat: 18.5357475280762, lon: 73.8522720336914, country: "India", name: "Pune" },
-            { cap: true,  pop:  0.880, lat: 18.5266170501709, lon: -72.3431091308594, country: "Haiti", name: "Port-au-Prince" },
-            { cap: true,  pop:  1.775, lat: 18.4006156921387, lon: -66.0817565917969, country: "Puerto Rico", name: "San Juan" },
-            { cap: true,  pop:  0.770, lat: 18.0157127380371, lon: -76.7973022460938, country: "Jamaica", name: "Kingston" },
-            { cap: false, pop:  2.750, lat: 17.3945465087891, lon: 78.4850311279297, country: "India", name: "Hyderabad" },
-            { cap: true,  pop:  2.800, lat: 16.8722229003906, lon: 96.1248931884766, country: "Burma", name: "Rangoon" },
-            { cap: true,  pop:  0.427, lat: 15.3614444732666, lon: 44.2095031738281, country: "Yemen", name: "Sanaa" },
-            { cap: true,  pop:  1.400, lat: 14.6180076599121, lon: -90.52490234375, country: "Guatemala", name: "Guatemala" },
-            { cap: true,  pop:  0.552, lat: 14.0990505218506, lon: -87.2030944824219, country: "Honduras", name: "Tegucigalpa" },
-            { cap: true,  pop:  6.450, lat: 13.7455711364746, lon: 100.552665710449, country: "Thailand", name: "Bangkok" },
-            { cap: true,  pop:  0.920, lat: 13.7014122009277, lon: -89.2002334594727, country: "El Salvador", name: "San Salvador" },
-            { cap: true,  pop:  0.398, lat: 13.6045436859131, lon: 2.08344984054565, country: "Niger", name: "Niamey" },
-            { cap: false, pop:  4.475, lat: 13.0615034103394, lon: 80.2478256225586, country: "India", name: "Madras" },
-            { cap: false, pop:  2.950, lat: 12.9747505187988, lon: 77.5877304077148, country: "India", name: "Bangalore" },
-            { cap: true,  pop:  0.646, lat: 12.6529502868652, lon: -7.98648166656494, country: "Mali", name: "Bamako" },
-            { cap: true,  pop:  0.682, lat: 12.1514730453491, lon: -86.2730331420898, country: "Nicaragua", name: "Managua" },
-            { cap: true,  pop:  0.700, lat: 11.564736366272, lon: 104.913192749023, country: "Cambodia", name: "Phnom Penh" },
-            { cap: false, pop:  3.100, lat: 10.7591819763184, lon: 106.662452697754, country: "Vietnam", name: "Ho Chi Minh City" },
-            { cap: false, pop:  0.891, lat: 10.6450433731079, lon: -71.6371459960938, country: "Venezuela", name: "Maracaibo" },
-            { cap: true,  pop:  3.600, lat: 10.4960489273071, lon: -66.8982849121094, country: "Venezuela", name: "Caracas" },
-            { cap: false, pop:  0.498, lat: 10.0656652450562, lon: -69.3391952514648, country: "Venezuela", name: "Barquisimeto" },
-            { cap: true,  pop:  0.670, lat: 9.93047618865967, lon: -84.07861328125, country: "Costa Rica", name: "San Jose" },
-            { cap: false, pop:  0.960, lat: 9.91398620605469, lon: 78.1217269897461, country: "India", name: "Madurai" },
-            { cap: false, pop:  1.144, lat: 7.37884044647217, lon: 3.8952784538269, country: "Nigeria", name: "Ibadan" },
-            { cap: false, pop:  0.409, lat: 7.08008003234863, lon: 125.613677978516, country: "Philippines", name: "Davao" },
-            { cap: false, pop:  0.253, lat: 6.45053863525391, lon: 7.4920802116394, country: "Nigeria", name: "Enugu" },
-            { cap: false, pop:  2.095, lat: 6.24114656448364, lon: -75.5920333862305, country: "Colombia", name: "Medellin" },
-            { cap: true,  pop:  1.250, lat: 5.55856275558472, lon: -0.200923636555672, country: "Ghana", name: "Accra" },
-            { cap: true,  pop:  1.950, lat: 5.32485723495483, lon: -4.02188682556152, country: "Ivory Coast", name: "Abidjan" },
-            { cap: true,  pop:  4.260, lat: 4.63021993637085, lon: -74.0805130004883, country: "Colombia", name: "Bogota" },
-            { cap: true,  pop:  0.474, lat: 4.3658561706543, lon: 18.5623416900635, country: "Cent Af Rep", name: "Bangui" },
-            { cap: true,  pop:  0.654, lat: 3.86512303352356, lon: 11.5136413574219, country: "Cameroon", name: "Yaounde" },
-            { cap: false, pop:  1.374, lat: 3.58524203300476, lon: 98.6755981445313, country: "Indonesia", name: "Medan" },
-            { cap: false, pop:  1.400, lat: 3.45685529708862, lon: -76.5224380493164, country: "Colombia", name: "Cali" },
-            { cap: true,  pop:  1.475, lat: 3.1502103805542, lon: 101.707672119141, country: "Malaysia", name: "Kuala Lumpur" },
-            { cap: true,  pop:  0.600, lat: 2.04117751121521, lon: 45.3441429138184, country: "Somalia", name: "Muqdisho" },
-            { cap: false, pop:  0.283, lat: 0.519284904003143, lon: 25.1961479187012, country: "Zaire", name: "Kisangani" },
-            { cap: true,  pop:  1.050, lat: -0.229498133063316, lon: -78.524284362793, country: "Ecuador", name: "Quito" },
-            { cap: false, pop:  0.179, lat: -3.75289535522461, lon: -73.1914901733398, country: "Peru", name: "Iquitos" },
-            { cap: false, pop:  1.825, lat: -3.78332185745239, lon: -38.5889015197754, country: "Brazil", name: "Fortaleza" },
-            { cap: true,  pop:  0.586, lat: -4.28518676757813, lon: 15.2851486206055, country: "Congo", name: "Brazzaville" },
-            { cap: false, pop:  0.291, lat: -5.89221096038818, lon: 22.4027786254883, country: "Zaire", name: "Kananga" },
-            { cap: true,  pop:  1.300, lat: -6.81735897064209, lon: 39.2533493041992, country: "Tanzania", name: "Dar es Salaam" },
-            { cap: false, pop:  1.800, lat: -6.91243028640747, lon: 107.606903076172, country: "Indonesia", name: "Bandung" },
-            { cap: false, pop:  2.625, lat: -8.08516788482666, lon: -34.9146385192871, country: "Brazil", name: "Recife" },
-            { cap: false, pop:  0.155, lat: -12.7177352905273, lon: 13.464879989624, country: "Angola", name: "Benguela" },
-            { cap: true,  pop:  1.568, lat: -15.7921094894409, lon: -47.8977470397949, country: "Brazil", name: "Brasilia" },
-            { cap: false, pop:  0.447, lat: -16.3975391387939, lon: -71.5227432250977, country: "Peru", name: "Arequipa" },
-            { cap: true,  pop:  0.993, lat: -16.4990062713623, lon: -68.1462478637695, country: "Bolivia", name: "La Paz" },
-            { cap: false, pop:  0.990, lat: -16.7266998291016, lon: -49.254810333252, country: "Brazil", name: "Goiania" },
-            { cap: false, pop:  0.442, lat: -17.7887916564941, lon: -63.1974182128906, country: "Bolivia", name: "Santa Cruz de La Sierra" },
-            { cap: false, pop:  0.087, lat: -19.0421352386475, lon: -65.2558822631836, country: "Bolivia", name: "Sucre" },
-            { cap: false, pop:  2.950, lat: -19.8517208099365, lon: -43.9090690612793, country: "Brazil", name: "Belo Horizonte" },
-            { cap: false, pop: 10.150, lat: -22.7215728759766, lon: -43.4551773071289, country: "Brazil", name: "Rio de Janeiro" },
-            { cap: false, pop: 15.175, lat: -23.5813045501709, lon: -46.6228981018066, country: "Brazil", name: "Sao Paulo" },
-            { cap: false, pop:  1.065, lat: -23.9547004699707, lon: -46.3094940185547, country: "Brazil", name: "Santos" },
-            { cap: true,  pop:  0.095, lat: -24.6614418029785, lon: 25.7948017120361, country: "Botswana", name: "Gaborone" },
-            { cap: false, pop:  1.700, lat: -25.4304790496826, lon: -49.2845077514648, country: "Brazil", name: "Curitiba" },
-            { cap: true,  pop:  0.960, lat: -25.7313461303711, lon: 28.2183723449707, country: "South Africa", name: "Pretoria" },
-            { cap: true,  pop:  1.070, lat: -25.9621543884277, lon: 32.5736923217773, country: "Mozambique", name: "Maputo" },
-            { cap: false, pop:  3.650, lat: -26.1789569854736, lon: 28.0043087005615, country: "South Africa", name: "Johannesburg" },
-            { cap: false, pop:  1.149, lat: -27.4539127349854, lon: 153.026489257813, country: "Australia", name: "Brisbane" },
-            { cap: false, pop:  1.550, lat: -29.8363723754883, lon: 30.9421882629395, country: "South Africa", name: "Durban" },
-            { cap: false, pop:  2.600, lat: -30.0395336151123, lon: -51.2079887390137, country: "Brazil", name: "Porto Alegre" },
-            { cap: false, pop:  1.070, lat: -31.3162784576416, lon: -64.1798553466797, country: "Argentina", name: "Cordoba" },
-            { cap: false, pop:  0.292, lat: -31.6168975830078, lon: -60.6978416442871, country: "Argentina", name: "Santa Fe" },
-            { cap: false, pop:  0.650, lat: -32.8974380493164, lon: -68.8297348022461, country: "Argentina", name: "Mendoza" },
-            { cap: false, pop:  1.045, lat: -32.9377365112305, lon: -60.6639404296875, country: "Argentina", name: "Rosario" },
-            { cap: true,  pop:  4.100, lat: -33.475025177002, lon: -70.6475143432617, country: "Chile", name: "Santiago" },
-            { cap: false, pop:  0.690, lat: -33.8815765380859, lon: 25.4842987060547, country: "South Africa", name: "Port Elizabeth" },
-            { cap: false, pop:  3.365, lat: -33.8897743225098, lon: 151.028198242188, country: "Australia", name: "Sydney" },
-            { cap: true,  pop: 10.750, lat: -34.6654014587402, lon: -58.4095916748047, country: "Argentina", name: "Buenos Aires" },
-            { cap: true,  pop:  0.271, lat: -35.349925994873, lon: 149.041625976563, country: "Australia", name: "Canberra" },
-            { cap: false, pop:  0.850, lat: -36.893253326416, lon: 174.801055908203, country: "New Zealand", name: "Auckland" },
-            { cap: false, pop:  2.833, lat: -37.8529586791992, lon: 145.075103759766, country: "Australia", name: "Melbourne" },
-            { cap: false, pop:  0.224, lat: -38.7252731323242, lon: -62.2740669250488, country: "Argentina", name: "Bahia Blanca" },
-            { cap: false, pop:  0.320, lat: -43.5489158630371, lon: 172.683654785156, country: "New Zealand", name: "Christchurch" },
-            { cap: true,  pop:  0.900, lat: 60.1964225769043, lon: 24.9766998291016, country: "Finland", name: "Helsinki" },
-            { cap: false, pop:  0.310, lat: 34.745231628418, lon: 10.7592582702637, country: "Tunisia", name: "Sfax" },
-            { cap: false, pop:  1.411, lat: 34.6638412475586, lon: 135.181838989258, country: "Japan", name: "Kobe" },
-            { cap: false, pop:  0.490, lat: 31.7737464904785, lon: 35.2252197265625, country: "Israel", name: "Jerusalem" },
-            { cap: false, pop:  0.616, lat: 10.1782207489014, lon: -68.0031127929688, country: "Venezuela", name: "Valencia" },
-            { cap: false, pop:  1.255, lat: -2.20381617546082, lon: -79.9093933105469, country: "Ecuador", name: "Guayaquil" },
-            { cap: false, pop:  4.054, lat: 37.7275123596191, lon: -122.308815002441, country: "US", name: "San Francisco" },
-            { cap: false, pop:  0.630, lat: 55.8752517700195, lon: -3.29878330230713, country: "UK", name: "Edinburgh" },
-            { cap: false, pop:  0.239, lat: 45.7002830505371, lon: 13.9328374862671, country: "Italy", name: "Trieste" },
-            { cap: false, pop:  1.750, lat: 33.3099060058594, lon: 130.317184448242, country: "Japan", name: "Fukuoka" },
-            { cap: false, pop:  1.525, lat: 33.6818656921387, lon: 130.797454833984, country: "Japan", name: "Kita Kyushu" },
-            { cap: true,  pop:  0.303, lat: 12.1041393280029, lon: 15.2408237457275, country: "Chad", name: "N'Djamena" },
-            { cap: true,  pop:  0.991, lat: 32.7516174316406, lon: 13.2118225097656, country: "Libya", name: "Tripoli" },
-            { cap: false, pop:  1.550, lat: 38.4389190673828, lon: 27.2057685852051, country: "Turkey", name: "Izmir" },
-            { cap: true,  pop:  3.000, lat: -4.38867473602295, lon: 15.4692935943604, country: "Zaire", name: "Kinshasa" },
-            { cap: false, pop:  0.978, lat: -34.9185371398926, lon: 138.870681762695, country: "Australia", name: "Adelaide" },
-            { cap: true,  pop:  8.600, lat: -6.29390430450439, lon: 106.762466430664, country: "Indonesia", name: "Jakarta" },
-            { cap: false, pop:  1.025, lat: -7.02784442901611, lon: 110.444259643555, country: "Indonesia", name: "Semarang" },
-            { cap: false, pop:  0.264, lat: -12.0435400009155, lon: -76.8356323242188, country: "Peru", name: "Callao" },
-            { cap: false, pop:  1.200, lat: -1.60532903671265, lon: -48.316276550293, country: "Brazil", name: "Belem" },
-            { cap: false, pop:  1.270, lat: 36.1483535766602, lon: 120.434127807617, country: "China", name: "Qingdao" },
-            { cap: true,  pop:  0.377, lat: 18.0017318725586, lon: 102.680236816406, country: "Laos", name: "Vientiane" },
-            { cap: false, pop:  0.220, lat: 47.8011703491211, lon: 13.0908985137939, country: "Austria", name: "Salzburg" },
-            { cap: true,  pop:  0.698, lat: 45.8070755004883, lon: 15.9643859863281, country: "Croatia", name: "Zagreb" },
-            { cap: true,  pop:  0.273, lat: -3.26908373832703, lon: 29.5335865020752, country: "Burundi", name: "Bujumbura" },
-            { cap: true,  pop:  0.185, lat: 35.1650695800781, lon: 33.3851623535156, country: "Cyprus", name: "Nicosia" },
-            { cap: true,  pop:  0.182, lat: -2.11793518066406, lon: 29.9914855957031, country: "Rwanda", name: "Kigali" },
-            { cap: true,  pop:  0.233, lat: 46.068302154541, lon: 14.639612197876, country: "Slovenia", name: "Ljubljana" },
-            { cap: true,  pop:  0.109, lat: -29.2567100524902, lon: 27.8903884887695, country: "Lesotho", name: "Maseru" },
-            { cap: true,  pop:  0.133, lat: 49.740406036377, lon: 6.27325582504272, country: "Luxembourg", name: "Luxembourg" },
-            { cap: false, pop:  0.770, lat: 51.903621673584, lon: 4.30062437057495, country: "Netherlands", name: "The Hague" },
-            { cap: true,  pop:  0.435, lat: 48.2745094299316, lon: 17.2698059082031, country: "Slovakia", name: "Bratislava" },
-            { cap: false, pop:  0.201, lat: 52.1100006103516, lon: -106.629997253418, country: "Canada", name: "Saskatoon" },
-            { cap: false, pop:  0.187, lat: 50.4099998474121, lon: -104.650001525879, country: "Canada", name: "Regina" },
-            { cap: false, pop:  1.038, lat: 31.7800006866455, lon: -106.449996948242, country: "US", name: "El Paso" },
-            { cap: false, pop:  0.636, lat: 30.3299999237061, lon: -81.6600036621094, country: "US", name: "Jacksonville" },
-            { cap: false, pop:  0.002, lat: 51.3300018310547, lon: -80.7300033569336, country: "Canada", name: "Moosonee" },
-            { cap: false, pop:  0.002, lat: 54.8600006103516, lon: -67.0100021362305, country: "Canada", name: "Schefferville" },
-            { cap: false, pop:  0.008, lat: 53.310001373291, lon: -60.5499992370605, country: "Canada", name: "Goose Bay" },
-            { cap: false, pop:  0.202, lat: -8.75, lon: -63.9000015258789, country: "Brazil", name: "Porto Velho" },
-            { cap: false, pop:  0.185, lat: -13.6000003814697, lon: -71.8600006103516, country: "Peru", name: "Cuzco" },
-            { cap: false, pop:  0.280, lat: -15.5500001907349, lon: -56.0499992370605, country: "Brazil", name: "Cuiaba" },
-            { cap: false, pop:  0.220, lat: -27.3999996185303, lon: -58.9000015258789, country: "Argentina", name: "Resistencia" },
-            { cap: false, pop:  0.032, lat: 16.7600002288818, lon: -3.00999999046326, country: "Mali", name: "Tombouctoo" },
-            { cap: false, pop:  0.255, lat: 11.8800001144409, lon: 13.2600002288818, country: "Niger", name: "Maiduguri" },
-            { cap: false, pop:  0.145, lat: -5.80999994277954, lon: 13.4499998092651, country: "Zaire", name: "Matadi" },
-            { cap: false, pop:  0.203, lat: -12.7299995422363, lon: 15.7799997329712, country: "Angola", name: "Huambo" },
-            { cap: false, pop:  0.145, lat: -28.6599998474121, lon: 24.8299999237061, country: "South Africa", name: "Kimberley" },
-            { cap: false, pop:  0.320, lat: -33.0299987792969, lon: 27.8999996185303, country: "South Africa", name: "East london" },
-            { cap: false, pop:  0.247, lat: -7.32999992370605, lon: 19, country: "Zaire", name: "Kahemba" },
-            { cap: false, pop:  0.054, lat: -6.17999982833862, lon: 35.75, country: "Tanzania", name: "Dodoma" },
-            { cap: false, pop:  0.019, lat: 68.3499984741211, lon: 17.2999992370605, country: "Norway", name: "Narvik" },
-            { cap: false, pop:  0.160, lat: 34.4599990844727, lon: 62.2099990844727, country: "Afghanistan", name: "Herat" },
-            { cap: false, pop:  0.006, lat: 55.8800010681152, lon: 37.75, country: "Russia", name: "Druzba" },
-            { cap: false, pop:  0.146, lat: 39.4799995422363, lon: 76, country: "China", name: "Kashi" },
-            { cap: false, pop:  9.415, lat: 24.9799995422363, lon: 121.529998779297, country: "Taiwan", name: "Chingmei" },
-            { cap: false, pop:  0.166, lat: 16.4599990844727, lon: 107.699996948242, country: "Vietnam", name: "Hue" },
-            { cap: false, pop:  0.073, lat: 1.5, lon: 110.430000305176, country: "Malaysia", name: "Kuching" },
-            { cap: false, pop:  0.208, lat: -1.21000003814697, lon: 116.860000610352, country: "Indonesia", name: "Balikpapan" },
-            { cap: false, pop:  0.168, lat: 50.3300018310547, lon: 110.75, country: "Russia", name: "Chatanga" },
-            { cap: false, pop:  0.006, lat: 52.0499992370605, lon: 113.580001831055, country: "Russia", name: "Chita" },
-            { cap: false, pop:  0.001, lat: 67.5800018310547, lon: 133.410003662109, country: "Russia", name: "Verkhoyansk" },
-            { cap: false, pop:  0.187, lat: 62.0099983215332, lon: 129.830001831055, country: "Russia", name: "Yakutsk" },
-            { cap: false, pop:  0.006, lat: 59.3300018310547, lon: 143.25, country: "Russia", name: "Okhotsk" },
-            { cap: false, pop:  0.000, lat: 50.0800018310547, lon: 45.5299987792969, country: "Russia", name: "Nikolayevsk" },
-            { cap: false, pop:  0.000, lat: 46.9599990844727, lon: 142.75, country: "Russia", name: "Yuzhno-Sakhalinsk" },
-            { cap: false, pop:  0.000, lat: -23.6299991607666, lon: 133.929992675781, country: "Australia", name: "Alice Springs" },
-            { cap: false, pop:  0.039, lat: -16.8500003814697, lon: 145.710006713867, country: "Australia", name: "Cairns" },
-            { cap: false, pop:  0.106, lat: -19.2999992370605, lon: 146.830001831055, country: "Australia", name: "Townsville" },
-            { cap: false, pop:  0.059, lat: -23.4300003051758, lon: 150.479995727539, country: "Australia", name: "Rockhampton" },
-            { cap: false, pop:  0.405, lat: -33, lon: 151.910003662109, country: "Australia", name: "Newcastle" },
-            { cap: false, pop:  0.175, lat: -43, lon: 147.5, country: "Australia", name: "Hobart" },
-            { cap: false, pop:  0.109, lat: -45.8600006103516, lon: 170.5, country: "New Zealand", name: "Dunedin" },
-            { cap: false, pop:  0.256, lat: 48.6545677185059, lon: -123.569107055664, country: "Canada", name: "Victoria" },
-            { cap: true,  pop:  0.164, lat: 6.60109615325928, lon: 2.63250279426575, country: "Benin", name: "Porto Novo" },
-            { cap: false, pop:  1.030, lat: 4.13665008544922, lon: 9.706374168396, country: "Cameroon", name: "Douala" },
-            { cap: false, pop:  0.708, lat: -5.19043016433716, lon: 119.722793579102, country: "Indonesia", name: "Vjuag Padang" },
-            { cap: false, pop:  0.112, lat: -3.3865532875061, lon: 129.312927246094, country: "Indonesia", name: "Ambon" },
-            { cap: false, pop:  1.604, lat: 37.5894508361816, lon: 126.767440795898, country: "Korea Rep", name: "Inch`on" },
-            { cap: false, pop:  1.680, lat: 39.0317153930664, lon: 121.598197937012, country: "China", name: "Dalian" },
-            { cap: false, pop:  1.227, lat: 45.4421310424805, lon: -122.641677856445, country: "US", name: "Portland" },
-            { cap: false, pop:  0.810, lat: -3.12230491638184, lon: -60.0146179199219, country: "Brazil", name: "Manaus" },
-            { cap: false, pop:  0.227, lat: -2.46000003814697, lon: -54.6100006103516, country: "Brazil", name: "Santarem" },
-            { cap: false, pop:  0.053, lat: -46.4099998474121, lon: 168.449996948242, country: "New Zealand", name: "Invercargill" },
-            { cap: false, pop:  0.049, lat: -10.2600002288818, lon: 40.1800003051758, country: "Tanzania", name: "Mtwara" },
-            { cap: false, pop:  0.100, lat: -18.2299995422363, lon: 49.4099998474121, country: "Madagascar", name: "Toamasina" },
-            { cap: false, pop:  0.235, lat: -29.1499996185303, lon: 26.2600002288818, country: "South Africa", name: "Bloemfontein" },
-            { cap: false, pop:  0.414, lat: -20.2000007629395, lon: 28.7099990844727, country: "Zimbabwe", name: "Bulawayo" },
-            { cap: false, pop:  0.061, lat: -17.8299999237061, lon: 25.8799991607666, country: "Zambia", name: "Livingstone" },
-            { cap: false, pop:  0.290, lat: 24.4300003051758, lon: 39.7000007629395, country: "Saudi Arabia", name: "Al Madinah" },
-            { cap: false, pop:  0.000, lat: 21.7600002288818, lon: 31.2800006866455, country: "Sudan", name: "Wadi Halfa" },
-            { cap: false, pop:  0.191, lat: 24.0799999237061, lon: 32.9500007629395, country: "Egypt", name: "Aswan" },
-            { cap: false, pop:  0.000, lat: 25.9099998474121, lon: 13.9099998474121, country: "Libya", name: "Murzuq" },
-            { cap: false, pop:  0.000, lat: 27.7000007629395, lon: -8.15999984741211, country: "Algeria", name: "Tindouf" },
-            { cap: false, pop:  0.050, lat: 16.9599990844727, lon: 7.98000001907349, country: "Niger", name: "Agadez" },
-            { cap: false, pop:  0.140, lat: 13.1800003051758, lon: 30.1599998474121, country: "Sudan", name: "El Obeid" },
-            { cap: false, pop:  0.125, lat: 0.0500000007450581, lon: 18.4599990844727, country: "Zaire", name: "Mbandaka" },
-            { cap: false, pop:  0.015, lat: 60.6500015258789, lon: -135.009994506836, country: "Canada", name: "Whitehorse" },
-            { cap: false, pop:  0.095, lat: -53.1500015258789, lon: -70.8000030517578, country: "Chile", name: "Punte Arenas" },
-            { cap: false, pop:  0.084, lat: -41.4799995422363, lon: -73, country: "Chile", name: "Puerto Montt" },
-            { cap: false, pop:  0.000, lat: -51.7099990844727, lon: -69.4100036621094, country: "Argentina", name: "Rio Gallegos" },
-            { cap: false, pop:  0.097, lat: -45.8300018310547, lon: -67.5, country: "Argentina", name: "Comodoro Rivadavia" },
-            { cap: false, pop:  0.327, lat: 29.9599990844727, lon: 32.560001373291, country: "Egypt", name: "Suez" },
-            { cap: false, pop:  3.350, lat: 31.0746040344238, lon: 29.9778099060059, country: "Egypt", name: "Alexandria" },
-            { cap: false, pop:  0.000, lat: -15.0500001907349, lon: 40.7000007629395, country: "Mozambique", name: "Mocambique" },
-            { cap: false, pop:  9.950, lat: 19.0453472137451, lon: 73.1723480224609, country: "India", name: "Bombay" },
-            { cap: true,  pop:  2.548, lat: 36.596492767334, lon: 2.99369311332703, country: "Algeria", name: "Algiers" },
-            { cap: false, pop:  1.940, lat: 49.989673614502, lon: 36.2083129882813, country: "Ukraine", name: "Kharkov" },
-            { cap: false, pop:  1.600, lat: 48.4228897094727, lon: 35.1378936767578, country: "Ukraine", name: "Dnepropetrovsk" },
-            { cap: true,  pop:  0.482, lat: 59.2775726318359, lon: 24.7520561218262, country: "Estonia", name: "Tallinn" },
-            { cap: false, pop:  0.000, lat: 47.810001373291, lon: 97, country: "Mongolia", name: "Uliastay" },
-            { cap: true,  pop:  1.313, lat: 18.4997291564941, lon: -69.9104919433594, country: "Dominican Rp", name: "Santo Domingo" },
-            { cap: true,  pop:  0.064, lat: 4.93300008773804, lon: 114.967002868652, country: "Brunei", name: "Bandar Seri Begawan" },
-            { cap: true,  pop:  0.095, lat: 13.4452724456787, lon: -16.4946155548096, country: "Gambia", name: "Banjul" },
-            { cap: true,  pop:  0.370, lat: 10.6397342681885, lon: -61.490062713623, country: "Trinidad", name: "Port of Spain" },
-            { cap: false, pop:  0.302, lat: 16.97438621521, lon: -99.9314956665039, country: "Mexico", name: "Acapulco" },
-            { cap: false, pop:  0.000, lat: 64.4001617431641, lon: 177.130187988281, country: "Russia", name: "Anadyr" },
-            { cap: false, pop:  0.003, lat: 65.6699981689453, lon: -37.3118667602539, country: "Greenland", name: "Angmagssalik" },
-            { cap: false, pop:  0.185, lat: -23.8325366973877, lon: -70.2254486083984, country: "Chile", name: "Antofagasta" },
-            { cap: false, pop:  0.294, lat: 40.75, lon: 140.669998168945, country: "Japan", name: "Aomori" },
-            { cap: false, pop:  0.436, lat: 32.0430526733398, lon: 20.3086757659912, country: "Libya", name: "Banghazi" },
-            { cap: false, pop:  0.000, lat: -15.75, lon: 133.220001220703, country: "Australia", name: "Birdum" },
-            { cap: false, pop:  0.000, lat: 2.75, lon: -60.5, country: "Brazil", name: "Boa Vista" },
-            { cap: false, pop:  0.280, lat: -6.61999988555908, lon: -79.8300018310547, country: "Peru", name: "Chiclayo" },
-            { cap: false, pop:  0.223, lat: -8.930100440979, lon: -78.4531478881836, country: "Peru", name: "Chimbote" },
-            { cap: false, pop:  0.001, lat: 58.710765838623, lon: -94.1800003051758, country: "Canada", name: "Churchill" },
-            { cap: false, pop:  0.686, lat: 9.98798847198486, lon: 76.5217819213867, country: "India", name: "Cochin" },
-            { cap: false, pop:  0.675, lat: -36.8832969665527, lon: -72.8516387939453, country: "Chile", name: "Concepcion" },
-            { cap: false, pop:  0.062, lat: -31, lon: -71.0199966430664, country: "Chile", name: "Coquimbo" },
-            { cap: false, pop:  0.073, lat: -12.7014999389648, lon: 130.994552612305, country: "Australia", name: "Darwin" },
-            { cap: true,  pop:  0.120, lat: 11.5, lon: 43.0999984741211, country: "Djibouti", name: "Djibouti" },
-            { cap: false, pop:  0.022, lat: -32.0441665649414, lon: 115.9345703125, country: "Australia", name: "Fremantle" },
-            { cap: false, pop:  0.495, lat: 5.34999990463257, lon: 100.547142028809, country: "Malaysia", name: "George Town" },
-            { cap: false, pop:  0.001, lat: 69.3831405639648, lon: -53.6300010681152, country: "Greenland", name: "Godhavn" },
-            { cap: true,  pop:  0.012, lat: 64.2711868286133, lon: -51.5800018310547, country: "Greenland", name: "Godthab" },
-            { cap: false, pop:  0.296, lat: 44.6300010681152, lon: -63.5800018310547, country: "Canada", name: "Halifax" },
-            { cap: false, pop:  0.007, lat: 70.3913269042969, lon: 23.9063415527344, country: "Norway", name: "Hammerfest" },
-            { cap: false, pop:  0.000, lat: 67.3499984741211, lon: 86.5500030517578, country: "Russia", name: "Igarka" },
-            { cap: false, pop:  0.019, lat: 27.2000007629395, lon: 2.52999997138977, country: "Algeria", name: "In Salah" },
-            { cap: false, pop:  0.003, lat: 68.2699966430664, lon: -133.669998168945, country: "Canada", name: "Inuvik" },
-            { cap: false, pop:  0.050, lat: -4.94999980926514, lon: 30, country: "Tanzania", name: "Kigoma" },
-            { cap: false, pop:  0.069, lat: 61.1500015258789, lon: 47, country: "Russia", name: "Kotlas" },
-            { cap: false, pop:  0.094, lat: 27, lon: -13.1800003051758, country: "W Sahara", name: "Laayoune" },
-            { cap: false, pop:  0.217, lat: 1.420086145401, lon: 124.884239196777, country: "Indonesia", name: "Manado" },
-            { cap: false, pop:  0.306, lat: 12.9499998092651, lon: 75.1608810424805, country: "India", name: "Mangalore" },
-            { cap: false, pop:  0.535, lat: 31.1499996185303, lon: -8, country: "Morocco", name: "Marrakech" },
-            { cap: true,  pop:  0.038, lat: -26.3033809661865, lon: 31.1912975311279, country: "Swaziland", name: "Mbabne" },
-            { cap: false, pop:  0.449, lat: 32.8827476501465, lon: 129.857467651367, country: "Japan", name: "Nagasaki" },
-            { cap: false, pop:  0.510, lat: -5.78000020980835, lon: -35.25, country: "Brazil", name: "Natal" },
-            { cap: false, pop:  0.033, lat: -41.2999992370605, lon: 173.270004272461, country: "New Zealand", name: "Nelson" },
-            { cap: false, pop:  0.004, lat: 64.5862808227539, lon: -165.270004272461, country: "US", name: "Nome" },
-            { cap: false, pop:  0.174, lat: 69.3300018310547, lon: 88.0999984741211, country: "Russia", name: "Noril`sk" },
-            { cap: false, pop:  0.022, lat: 20.8999996185303, lon: -16.825647354126, country: "Mauritania", name: "Nouadnibou" },
-            { cap: false, pop:  0.600, lat: 53.7000007629395, lon: 87.1699981689453, country: "Russia", name: "Novokuznetsk" },
-            { cap: false, pop:  0.097, lat: 46.9199981689453, lon: -122.879997253418, country: "US", name: "Olympia" },
-            { cap: false, pop:  0.297, lat: -0.917578816413879, lon: 100.475059509277, country: "Indonesia", name: "Padang" },
-            { cap: false, pop:  0.787, lat: -3, lon: 104.830001831055, country: "Indonesia", name: "Palembang" },
-            { cap: false, pop:  0.155, lat: 38.1412391662598, lon: 21.8831691741943, country: "Greece", name: "Patras" },
-            { cap: false, pop:  0.269, lat: 53.2000007629395, lon: 158.720001220703, country: "Russia", name: "Petropavloski-Kamchatskiy" },
-            { cap: true,  pop:  0.083, lat: 42.5, lon: 19.3999996185303, country: "Montenegro", name: "Podgorica" },
-            { cap: false, pop:  0.294, lat: -4.63870811462402, lon: 12.0580930709839, country: "Congo", name: "Pointe Noire" },
-            { cap: false, pop:  0.124, lat: -0.819999992847443, lon: 9.15334415435791, country: "Gabon", name: "Port Gentil" },
-            { cap: false, pop:  0.016, lat: 54.420280456543, lon: -130.048080444336, country: "Canada", name: "Prince Rupert" },
-            { cap: false, pop:  0.121, lat: 45.338134765625, lon: -65.6499481201172, country: "Canada", name: "Saint John" },
-            { cap: false, pop:  0.091, lat: 15.9512100219727, lon: -16.2978382110596, country: "Senegal", name: "Saint Louis" },
-            { cap: false, pop:  0.000, lat: 66.5699996948242, lon: 66.5800018310547, country: "Russia", name: "Salekhard" },
-            { cap: false, pop:  0.241, lat: 41.3199996948242, lon: 36.3699989318848, country: "Turkey", name: "Samsun" },
-            { cap: false, pop:  0.600, lat: -2.5, lon: -44.4300575256348, country: "Brazil", name: "Sao Luis" },
-            { cap: true,  pop:  0.341, lat: 43.8699989318848, lon: 18.4300003051758, country: "Bosnia/Herz", name: "Sarajevo" },
-            { cap: false, pop:  0.000, lat: 70.5285720825195, lon: -22.9963226318359, country: "Greenland", name: "Scoresbyund" },
-            { cap: false, pop:  0.029, lat: 50.2825469970703, lon: -66.4025421142578, country: "Canada", name: "Sept-Iles" },
-            { cap: false, pop:  0.003, lat: 60.1199989318848, lon: -149.449996948242, country: "US", name: "Seward" },
-            { cap: true,  pop:  0.445, lat: 42, lon: 21.5300006866455, country: "Macedonia", name: "Skopje" },
-            { cap: false, pop:  0.000, lat: 22.8299999237061, lon: 5.55000019073486, country: "Algeria", name: "Tamanrasset" },
-            { cap: false, pop:  0.000, lat: 77.6699981689453, lon: -69, country: "Greenland", name: "Thule" },
-            { cap: false, pop:  0.000, lat: 71.6999969482422, lon: 128.75, country: "Russia", name: "Tiksi" },
-            { cap: false, pop:  0.055, lat: -23.2901554107666, lon: 44.0190925598145, country: "Madagascar", name: "Toliara" },
-            { cap: false, pop:  0.354, lat: -7.92999982833862, lon: -79, country: "Peru", name: "Trujillo" },
-            { cap: false, pop:  0.604, lat: 17.75, lon: 83.3300018310547, country: "India", name: "Vishakhapatnam" },
-            { cap: false, pop:  0.116, lat: 67.8000030517578, lon: 64.3300018310547, country: "Russia", name: "Vorkuta" },
-            { cap: false, pop:  0.230, lat: 31.9699993133545, lon: 54.4500007629395, country: "Iran", name: "Yazd" },
-            { cap: false, pop:  0.282, lat: 29.6000003814697, lon: 60.8300018310547, country: "Iran", name: "Zahedan" },
-            { cap: false, pop:  0.318, lat: 12.861159324646, lon: 45.1800003051758, country: "Yemen", name: "Aden" },
-            { cap: true,  pop:  1.500, lat: 9.02999973297119, lon: 38.7000007629395, country: "Ethiopia", name: "Adis Abeba" },
-            { cap: true,  pop:  1.375, lat: 29.1949901580811, lon: 48.0027770996094, country: "Kuwait", name: "Al Kuwayt" },
-            { cap: true,  pop:  0.663, lat: -18.8700008392334, lon: 47.5, country: "Madagascar", name: "Antananarivo" },
-            { cap: true,  pop:  1.250, lat: 24.6499996185303, lon: 46.7700004577637, country: "Saudi Arabia", name: "Ar Riyad" },
-            { cap: true,  pop:  0.275, lat: 15.3299999237061, lon: 38.9700012207031, country: "Eritrea", name: "Asmara" },
-            { cap: true,  pop:  0.700, lat: -25.2199993133545, lon: -57.6699981689453, country: "Paraguay", name: "Asuncion" },
-            { cap: true,  pop:  3.027, lat: 38.1216011047363, lon: 23.6548633575439, country: "Greece", name: "Athens" },
-            { cap: false, pop:  1.120, lat: 40.6500015258789, lon: 109.980003356934, country: "China", name: "Baotou" },
-            { cap: false, pop:  4.040, lat: 41.5299987792969, lon: 2.17000007629395, country: "Spain", name: "Barcelona" },
-            { cap: false, pop:  1.140, lat: 11.0142946243286, lon: -74.6800003051758, country: "Colombia", name: "Barranquilla" },
-            { cap: false, pop:  0.292, lat: -19.7692832946777, lon: 35.0231704711914, country: "Mozambique", name: "Beira" },
-            { cap: true,  pop:  1.675, lat: 33.7799987792969, lon: 35.6579437255859, country: "Lebanon", name: "Beirut" },
-            { cap: true,  pop:  0.005, lat: 17.1200008392334, lon: -88.8000030517578, country: "Belize", name: "Belmopan" },
-            { cap: false, pop:  0.239, lat: 60.3499984741211, lon: 5.49067831039429, country: "Norway", name: "Bergen" },
-            { cap: true,  pop:  0.109, lat: 11.9109897613525, lon: -15.6499996185303, country: "GuineaBissau", name: "Bissau" },
-            { cap: false, pop:  1.790, lat: -33.8040084838867, lon: 18.6904315948486, country: "South Africa", name: "cape Town" },
-            { cap: false, pop:  0.625, lat: 51.5, lon: -3.15000009536743, country: "UK", name: "Cardiff" },
-            { cap: false, pop:  2.475, lat: 33.5444107055664, lon: -7.53409194946289, country: "Morocco", name: "Casablanca" },
-            { cap: true,  pop:  0.038, lat: 4.92000007629395, lon: -52.4000015258789, country: "Fr Guiana", name: "Cayenne" },
-            { cap: false, pop:  1.392, lat: 22.4799995422363, lon: 91.8327941894531, country: "Bangladesh", name: "Chittagong" },
-            { cap: true,  pop:  2.050, lat: 7.01999998092651, lon: 80.0883331298828, country: "Sri Lanka", name: "Colombo" },
-            { cap: true,  pop:  0.800, lat: 9.52000045776367, lon: -12.8000001907349, country: "Guinea", name: "Conakry" },
-            { cap: true,  pop:  1.428, lat: 14.6300001144409, lon: -16.8480949401855, country: "Senegal", name: "Dakar" },
-            { cap: false, pop:  1.405, lat: 39.75, lon: -105.069999694824, country: "US", name: "Denver" },
-            { cap: true,  pop:  0.595, lat: 38.6300010681152, lon: 68.9000015258789, country: "Tajikistan", name: "Dushanfe" },
-            { cap: false, pop:  0.785, lat: 53.5699996948242, lon: -113.269996643066, country: "Canada", name: "Edmonton" },
-            { cap: false, pop:  1.871, lat: 30.4699993133545, lon: 30.8500003814697, country: "Egypt", name: "Giza" },
-            { cap: true,  pop:  0.525, lat: 8.38277053833008, lon: -12.9102764129639, country: "Sierra Leone", name: "Freetown" },
-            { cap: true,  pop:  0.616, lat: 42.8800010681152, lon: 74.7699966430664, country: "Kyrgyzstan", name: "Frunze" },
-            { cap: false, pop:  0.805, lat: 44.4550895690918, lon: 8.92229557037354, country: "Italy", name: "Genova" },
-            { cap: true,  pop:  0.188, lat: 6.76999998092651, lon: -58.1699981689453, country: "Guyana", name: "Georgetown" },
-            { cap: false, pop:  0.711, lat: 57.75, lon: 12, country: "Sweden", name: "Goteborg" },
-            { cap: true,  pop:  0.890, lat: -17.8299999237061, lon: 31.0200004577637, country: "Zimbabwe", name: "Harare" },
-            { cap: true,  pop:  2.125, lat: 23.0489521026611, lon: -82.4164505004883, country: "Cuba", name: "Havana" },
-            { cap: false, pop:  1.300, lat: 21.6200008392334, lon: 39.3733062744141, country: "Saudi Arabia", name: "Jiddah" },
-            { cap: true,  pop:  0.460, lat: 0.319999992847443, lon: 32.5800018310547, country: "Uganda", name: "Kampala" },
-            { cap: false, pop:  0.538, lat: 11.9200000762939, lon: 8.52000045776367, country: "Nigeria", name: "Kano" },
-            { cap: false, pop:  1.845, lat: 22.6734161376953, lon: 120.341484069824, country: "Taiwan", name: "Kao-Hsiung" },
-            { cap: false, pop:  5.300, lat: 24.8500003814697, lon: 67.0299987792969, country: "Pakistan", name: "Karachi" },
-            { cap: false, pop:  0.601, lat: 48.5299987792969, lon: 135.070007324219, country: "Russia", name: "Khabarovsk" },
-            { cap: true,  pop:  0.924, lat: 15.5500001907349, lon: 32.5299987792969, country: "Sudan", name: "Khartoum" },
-            { cap: true,  pop:  0.665, lat: 47, lon: 28.8299999237061, country: "Moldova", name: "Kishinev" },
-            { cap: true,  pop:  1.685, lat: 55.7200012207031, lon: 12.5500001907349, country: "Denmark", name: "Kobenhavn" },
-            { cap: true,  pop:  3.800, lat: 6.44999980926514, lon: 3.29999995231628, country: "Nigeria", name: "Lagos" },
-            { cap: false, pop:  0.255, lat: 49.3240203857422, lon: 0.219999998807907, country: "France", name: "Le Havre" },
-            { cap: true,  pop:  0.236, lat: -0.504144549369812, lon: 9.49045658111572, country: "Gabon", name: "Libreville" },
-            { cap: true,  pop:  0.234, lat: -13.9200000762939, lon: 33.8199996948242, country: "Malawi", name: "Lilongwe" },
-            { cap: true,  pop:  4.344, lat: -12.0679960250854, lon: -76.8235549926758, country: "Peru", name: "Lima" },
-            { cap: true,  pop:  2.250, lat: 38.7299995422363, lon: -9.13000011444092, country: "Portugal", name: "Lisboa" },
-            { cap: false, pop:  1.525, lat: 53.4226875305176, lon: -2.76683640480042, country: "UK", name: "Liverpool" },
-            { cap: true,  pop:  0.400, lat: 6.28000020980835, lon: 1.35000002384186, country: "Togo", name: "Lome" },
-            { cap: false, pop:  9.764, lat: 34, lon: -118.25, country: "US", name: "Los Angeles" },
-            { cap: true,  pop:  1.460, lat: -9, lon: 13.4617786407471, country: "Angola", name: "Luanda" },
-            { cap: false, pop:  0.543, lat: -11.6800003051758, lon: 27.5499992370605, country: "Zaire", name: "Lumumbashi" },
-            { cap: true,  pop:  0.536, lat: -15.4300003051758, lon: 28.1700000762939, country: "Zambia", name: "Lusaka" },
-            { cap: true,  pop:  0.031, lat: 3.64468479156494, lon: 8.81999969482422, country: "Eq Guinea", name: "Malabo" },
-            { cap: true,  pop:  5.474, lat: 14.5500001907349, lon: 121.173408508301, country: "Philippines", name: "Manila" },
-            { cap: false, pop:  1.225, lat: 43.2999992370605, lon: 5.38000011444092, country: "France", name: "Marseille" },
-            { cap: true,  pop:  0.050, lat: 23.5166397094727, lon: 58.6274795532227, country: "Oman", name: "Masqat" },
-            { cap: false, pop:  0.200, lat: 23.3615112304688, lon: -106.269996643066, country: "Mexico", name: "Mazatlan" },
-            { cap: false, pop:  0.442, lat: -4.01999998092651, lon: 39.6699981689453, country: "Kenya", name: "Mombasa" },
-            { cap: true,  pop:  0.465, lat: 6.51743936538696, lon: -10.7700004577637, country: "Liberia", name: "Monrovia" },
-            { cap: true,  pop:  1.550, lat: -34.9199981689453, lon: -56.1699981689453, country: "Uruguay", name: "Montevideo" },
-            { cap: true,  pop: 13.100, lat: 55.75, lon: 37.7000007629395, country: "Russia", name: "Moscow" },
-            { cap: true,  pop:  1.286, lat: -1.16999995708466, lon: 36.8300018310547, country: "Kenya", name: "Nairobi" },
-            { cap: false, pop:  2.875, lat: 40.8300018310547, lon: 14.2700004577637, country: "Italy", name: "Napoli" },
-            { cap: false, pop: 16.472, lat: 40.75, lon: -74.0999984741211, country: "US", name: "New York" },
-            { cap: false, pop:  0.329, lat: 40.7200012207031, lon: -74.1999969482422, country: "US", name: "Newark" },
-            { cap: true,  pop:  0.285, lat: 18.0300006866455, lon: -15.7828607559204, country: "Mauritania", name: "Nouakchott" },
-            { cap: false, pop:  0.138, lat: 55.574535369873, lon: 9.90299892425537, country: "Denmark", name: "Odense" },
-            { cap: false, pop:  0.526, lat: 15.6199998855591, lon: 32.4799995422363, country: "Sudan", name: "Omdurman" },
-            { cap: false, pop:  0.629, lat: 35.75, lon: -0.519999980926514, country: "Algeria", name: "Oran" },
-            { cap: true,  pop:  0.720, lat: 59.9300003051758, lon: 10.7200002670288, country: "Norway", name: "Oslo" },
-            { cap: true,  pop:  0.442, lat: 12.4799995422363, lon: -1.66999995708466, country: "Burkina Faso", name: "Ouagadouou" },
-            { cap: false, pop:  0.724, lat: 38.1300010681152, lon: 13.3999996185303, country: "Italy", name: "Palermo" },
-            { cap: true,  pop:  0.625, lat: 8.94999980926514, lon: -79.4000015258789, country: "Panama", name: "Panama" },
-            { cap: true,  pop:  0.241, lat: 5.92999982833862, lon: -55.2299995422363, country: "Suriname", name: "Paramaribo" },
-            { cap: false, pop:  0.994, lat: -31.9758644104004, lon: 115.923370361328, country: "Australia", name: "Perth" },
-            { cap: true,  pop:  0.152, lat: -9.55000019073486, lon: 147.414520263672, country: "Papua N Guin", name: "Port Moresby" },
-            { cap: false, pop:  1.225, lat: 41.1500015258789, lon: -8.48794841766357, country: "Portugal", name: "Porto" },
-            { cap: false, pop:  0.203, lat: 31.6000003814697, lon: 65.5, country: "Afghanistan", name: "Qandahar" },
-            { cap: false, pop:  1.326, lat: 14.6499996185303, lon: 121.029998779297, country: "Philippines", name: "Quezon City" },
-            { cap: true,  pop:  0.980, lat: 33.9201965332031, lon: -6.74804067611694, country: "Morocco", name: "Rabat" },
-            { cap: true,  pop:  0.138, lat: 64.3132629394531, lon: -21.336820602417, country: "Iceland", name: "Reykjavik" },
-            { cap: true,  pop:  1.005, lat: 56.8800010681152, lon: 24.0499992370605, country: "latvia", name: "Riga" },
-            { cap: true,  pop:  3.175, lat: 41.8800010681152, lon: 12.5200004577637, country: "Italy", name: "Roma" },
-            { cap: false, pop:  2.050, lat: -12.6002569198608, lon: -38.4799995422363, country: "Brazil", name: "Salvador" },
-            { cap: false, pop:  0.848, lat: 29.6299991607666, lon: 52.5699996948242, country: "Iran", name: "Shiraz" },
-            { cap: true,  pop:  1.450, lat: 59.2446327209473, lon: 18.0842685699463, country: "Sweden", name: "Stockholm" },
-            { cap: false, pop:  2.028, lat: -7.40000009536743, lon: 112.684371948242, country: "Indonesia", name: "Surabaja" },
-            { cap: false, pop:  0.657, lat: 23.1700000762939, lon: 120.230003356934, country: "Taiwan", name: "T`ai-nan" },
-            { cap: false, pop:  0.595, lat: 27.9973583221436, lon: -82.5930252075195, country: "US", name: "Tampa" },
-            { cap: true,  pop:  1.670, lat: 31.9171981811523, lon: 34.8568344116211, country: "Israel", name: "Tel Aviv-Yafo" },
-            { cap: false, pop:  0.706, lat: 40.6300010681152, lon: 22.7999992370605, country: "Greece", name: "Thessaloniki" },
-            { cap: true,  pop:  2.325, lat: 41.247932434082, lon: 69.3498687744141, country: "Uzbekistan", name: "Toshkent" },
-            { cap: false, pop:  0.198, lat: 34.3437576293945, lon: 36.0070686340332, country: "Lebanon", name: "Tripoli" },
-            { cap: false, pop:  0.675, lat: -32.9000015258789, lon: -71.2993392944336, country: "Chile", name: "Valparaiso" },
-            { cap: false, pop:  1.381, lat: 49.274299621582, lon: -122.963066101074, country: "Canada", name: "Vancouver" },
-            { cap: false, pop:  0.648, lat: 43.1300010681152, lon: 131.960433959961, country: "Russia", name: "Vladivostok" },
-            { cap: false, pop:  0.017, lat: -23.1018676757813, lon: 14.6171045303345, country: "Namibia", name: "Walvis Bay" },
-            { cap: true,  pop:  0.115, lat: -22.5699996948242, lon: 17.1000003814697, country: "Namibia", name: "Windhoek" },
-            { cap: true,  pop:  0.350, lat: -41.2103958129883, lon: 175.144943237305, country: "New Zealand", name: "Wellington" },
-            { cap: false, pop:  2.077, lat: 47.5885543823242, lon: -122.316650390625, country: "US", name: "Seattle" },
-            { cap: false, pop:  2.099, lat: 32.7614593505859, lon: -117.125495910645, country: "US", name: "San Diego" },
-            { cap: false, pop:  0.110, lat: -20.2600002288818, lon: -69.9132614135742, country: "Chile", name: "Iquique" },
-            { cap: true,  pop:  0.243, lat: 24.2360076904297, lon: 54.619270324707, country: "Untd Arab Em", name: "Abu Zaby" },
-            { cap: false, pop:  0.199, lat: 7.57660102844238, lon: -72.0054550170898, country: "Venezuela", name: "San Cristobal" },
-            { cap: false, pop:  0.509, lat: 46.25, lon: 48, country: "Russia", name: "Astrakhan" },
-            { cap: false, pop:  0.000, lat: 30.1386032104492, lon: 9.81835079193115, country: "Libya", name: "Ghadamis" },
-            { cap: false, pop:  0.077, lat: -31.3051528930664, lon: -57.7087745666504, country: "Uruguay", name: "Salto" },
-            { cap: false, pop:  0.012, lat: 62.5206146240234, lon: -114.061363220215, country: "Canada", name: "Yellowknife" },
-            { cap: false, pop:  0.043, lat: 19.7148151397705, lon: -155.067291259766, country: "US", name: "Hilo" },
-            { cap: false, pop:  0.763, lat: 21.3211765289307, lon: -157.806182861328, country: "US", name: "Honolulu" },
-            { cap: false, pop:  0.184, lat: 61.188648223877, lon: -149.172973632813, country: "US", name: "Anchorage" },
-            { cap: false, pop:  0.040, lat: 64.8387451171875, lon: -147.651184082031, country: "US", name: "Fairbanks" },
-            { cap: false, pop:  0.020, lat: 58.3910064697266, lon: -134.132476806641, country: "US", name: "Juneau" },
-            { cap: false, pop:  0.629, lat: 37.30810546875, lon: -121.847457885742, country: "US", name: "San Jose" },
-            { cap: false, pop:  0.386, lat: 28.5581398010254, lon: -105.966636657715, country: "Mexico", name: "Chihuaha" },
-            { cap: false, pop:  0.385, lat: 19.0096759796143, lon: -96.0840606689453, country: "Mexico", name: "Veracruz" },
-            { cap: false, pop:  0.154, lat: 16.9209060668945, lon: -96.9420394897461, country: "Mexico", name: "Oaxaca" },
-            { cap: false, pop:  0.000, lat: 78.1999969482422, lon: 15.6599998474121, country: "Norway", name: "longyearbyen" },
-            { cap: true,  pop:  5.396, lat: 22.4284057617188, lon: 114.145706176758, country: "UK", name: "Hong Kong" },
-            { cap: false, pop:  0.775, lat: 22.3798961639404, lon: 114.230117797852, country: "UK", name: "Kowloon" },
-            { cap: false, pop:  3.025, lat: 1.22979354858398, lon: 104.177116394043, country: "Singapore", name: "Singapore" },
-        ];
-
-        this.capitals = this.locations.filter(city => city.cap);
-        this.cities = this.locations.filter(city => !city.cap);
-        return this.locations
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-resources-world-util.mdx b/docs/angular/src/content/jp/components/geo-map-resources-world-util.mdx
deleted file mode 100644
index 8c48795df5..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-resources-world-util.mdx
+++ /dev/null
@@ -1,202 +0,0 @@
----
-title: "Angular マップ | ワールド ユーティリティ | データ ソース | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップ データ ユーティリティを使用して、地理的データを生成します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, map data, Ignite UI for Angular, Infragistics, Angular マップ, マップ データ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap"]
-_language: ja
-llms:
-  description: "インフラジスティックスの Angular JavaScript マップ データ ユーティリティを使用して、地理的データを生成します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ワールド ユーティリティ
-
-リソース トピックは、Angular 地理データの生成に役立つユーティリティの実装です。
-
-## コード スニペット
-
-```ts
-export default class WorldUtils {
-
-    // calculate geo-paths between two locations using great circle formula
-    public static calcPaths(origin: any, dest: any): any[] {
-        let interval = 200;
-        let paths: any[] = [[]];
-        let pathID = 0;
-        let distance = this.calcDistance(origin, dest);
-        if (distance <= interval) {
-            paths[pathID].push({ x: origin.lon, y: origin.lat });
-            paths[pathID].push({ x: dest.lon, y: dest.lat });
-        } else {
-            let current = origin;
-            let previous = origin;
-
-            for (let dist = interval; dist <= distance; dist += interval)
-            {
-                previous = current
-                paths[pathID].push({ x: current.lon, y: current.lat });
-
-                let bearing = this.calcBearing(current, dest);
-                current = this.calcDestination(current, bearing, interval);
-                // ensure geo-path wrap around the world through the new date-line
-                if (previous.lon > 150 && current.lon < -150) {
-                    paths[pathID].push({ x: 180, y: current.lat });
-                    paths.push([]);
-                    pathID++
-                    current = { lon: -180, lat: current.lat }
-                } else if (previous.lon < -150 && current.lon > 150) {
-                    paths[pathID].push({ x: -180, y: current.lat });
-                    paths.push([]);
-                    pathID++
-                    current = { lon: 180, lat: current.lat }
-                }
-            }
-            paths[pathID].push({ x: dest.lon, y: dest.lat });
-        }
-        return paths;
-    }
-
-    // calculate bearing angle between two locations
-    public static calcBearing(origin: any, dest: any) : number
-    {
-        origin = this.toRadianLocation(origin);
-        dest = this.toRadianLocation(dest);
-        let range = (dest.lon - origin.lon);
-        let y = Math.sin(range) * Math.cos(dest.lat);
-        let x = Math.cos(origin.lat) * Math.sin(dest.lat) -
-                Math.sin(origin.lat) * Math.cos(dest.lat) * Math.cos(range);
-        let angle = Math.atan2(y, x);
-        return this.toDegreesNormalized(angle);
-    }
-
-    // calculate destination for origin location and travel distance
-    public static calcDestination(origin: any, bearing: number, distance: number): any {
-        let radius = 6371.0;
-        origin = this.toRadianLocation(origin);
-        bearing = this.toRadians(bearing);
-        distance = distance / radius; // angular distance in radians
-
-        let lat = Math.asin(Math.sin(origin.lat) * Math.cos(distance) +
-                       Math.cos(origin.lat) * Math.sin(distance) * Math.cos(bearing));
-        let x = Math.sin(bearing) * Math.sin(distance) * Math.cos(origin.lat);
-        let y = Math.cos(distance) - Math.sin(origin.lat) * Math.sin(origin.lat);
-        let lon = origin.lon + Math.atan2(x, y);
-        // normalize lon to coordinate between -180º and +180º
-        lon = (lon + 3 * Math.PI) % (2 * Math.PI) - Math.PI;
-
-        lon = this.toDegrees(lon);
-        lat = this.toDegrees(lat);
-
-        return { lon: lon, lat: lat };
-    }
-
-    // calculate distance between two locations
-    public static calcDistance(origin: any, dest: any) : number {
-        origin = this.toRadianLocation(origin);
-        dest = this.toRadianLocation(dest);
-        let sinProd = Math.sin(origin.lat) * Math.sin(dest.lat);
-        let cosProd = Math.cos(origin.lat) * Math.cos(dest.lat);
-        let lonDelta = (dest.lon - origin.lon);
-
-        let angle = Math.acos(sinProd + cosProd * Math.cos(lonDelta));
-        let distance = angle * 6371.0;
-        return distance; // * 6371.0; // in km
-    }
-
-    public static toRadianLocation(geoPoint: any) : any {
-        let x = this.toRadians(geoPoint.lon);
-        let y = this.toRadians(geoPoint.lat);
-        return { lon: x, lat: y };
-    }
-
-    public static toRadians(degrees: number) : number
-    {
-        return degrees * Math.PI / 180;
-    }
-
-    public static toDegrees(radians: number) : number {
-        return (radians * 180.0 / Math.PI);
-    }
-
-    public static toDegreesNormalized(radians: number) : number
-    {
-        let degrees = this.toDegrees(radians);
-        degrees = (degrees + 360) % 360;
-        return degrees;
-    }
-
-    // converts latitude coordinate to a string
-    public static toStringLat(latitude: number) : string {
-        let str = Math.abs(latitude).toFixed(1) + "°";
-        return latitude > 0 ? str + "N" : str + "S";
-    }
-
-    // converts longitude coordinate to a string
-    public static toStringLon(coordinate: number) : string {
-        let val = Math.abs(coordinate);
-        let str = val < 100 ? val.toFixed(1) : val.toFixed(0);
-        return coordinate > 0 ? str + "°E" : str + "°W";
-    }
-
-    public static toStringAbbr(value: number) : string {
-        if (value > 1000000000000) {
-            return (value / 1000000000000).toFixed(1) + " T"
-        } else if (value > 1000000000) {
-            return (value / 1000000000).toFixed(1) + " B"
-        } else if (value > 1000000) {
-            return (value / 1000000).toFixed(1) + " M"
-        } else if (value > 1000) {
-            return (value / 1000).toFixed(1) + " K"
-        }
-        return value.toFixed(0);
-    }
-
-    public static getLongitude(location: any) : number {
-        if (location.x) return location.x;
-        if (location.lon) return location.lon;
-        if (location.longitude) return location.longitude;
-        return Number.NaN;
-    }
-
-    public static getLatitude(location: any) : number {
-        if (location.y) return location.y;
-        if (location.lat) return location.lat;
-        if (location.latitude) return location.latitude;
-        return Number.NaN;
-    }
-
-    public static getBounds(locations: any[]) : any {
-        let minLat = 90;
-        let maxLat = -90;
-        let minLon = 180;
-        let maxLon = -180;
-
-        for (const location of locations) {
-            const crrLon = this.getLongitude(location);
-            if (!Number.isNaN(crrLon)) {
-                minLon = Math.min(minLon, crrLon);
-                maxLon = Math.max(maxLon, crrLon);
-            }
-
-            const crrLat = this.getLatitude(location);
-            if (!Number.isNaN(crrLat)) {
-                minLat = Math.min(minLat, crrLat);
-                maxLat = Math.max(maxLat, crrLat);
-            }
-        }
-
-        const geoBounds = {
-            left: minLon,
-            top: minLat,
-            width: Math.abs(maxLon - minLon),
-            height: Math.abs(maxLat - minLat)
-        };
-        return geoBounds;
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx
deleted file mode 100644
index fd011874d7..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-shape-files-reference.mdx
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | シェープ ファイル リファレンス | シェープ ファイルの編集 | インフラジスティックス"
-description: インフラジスティックスの Angular マップで使用するシェープ ファイル形式について説明します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, shape files, Ignite UI for Angular, Infragistics, shape editing, Angular マップ, シェープ ファイル, シェイプの編集, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicShapeSeriesBase", "Series"]
-_language: ja
-llms:
-  description: "このトピックでは、マップおよび関連する地理的素材についてのリソースおよびシェープ ファイルの情報を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular シェープ ファイルの参照
-
-## 目的
-
-このトピックでは、マップおよび関連する地理的素材についてのリソースおよびシェープ ファイルの情報を提供します。これらのリソースを使用して、Ignite UI for Angular マップ コンポーネント™ コントロールに地理空間データをバインドする前に編集で使用するツールおよびシェープ ファイルを取得します。
-
-## リソース
-
-## 地理空間の概要
-
-以下はコントロールで地理空間データをプロットする際に役立つマップおよび地理空間データについての一般的な情報を提供します (英語)。
-
-- [Wikipedia - マップ製作法](http://en.wikipedia.org/wiki/Cartography)
-
-- [米国国勢地図 - 地理的位置](http://nationalatlas.gov/articles/mapping/a_latlong.html)
-
-- [米国国勢地図 - マップ プロジェクション](http://nationalatlas.gov/articles/mapping/a_projections.html)
-
-- [米国地質調査所](http://www.usgs.gov/)
-
-- [Wikipedia – マップ プロジェクション](http://en.wikipedia.org/wiki/Map_projection)
-
-- [コロラド大学 – マップ プロジェクション](http://www.colorado.edu/geography/gcraft/notes/mapproj/mapproj_f.html)
-
-- [CSISS – マップ プロジェクション](http://www.csiss.org/map-projections/index.html)
-
-## シェイプ ファイルのフォーマット
-
-Angular <ApiLink type="GeographicMap" /> コントロールは、地理空間データのソースとして人気の高い[シェープ ファイル (英語)](http://en.wikipedia.org/wiki/Shapefile#Overview) フォーマットを使用します。シェープ ファイルは他のファイル タイプと一緒に配布されます。一般的なファイルには、*.shp*、*.shx*、および *.dbf* の拡張子が付いています。
-
-以下の表は、シェープ ファイルの各タイプの基本情報および目的を提供しています。
-
-| ファイルの拡張子 | 説明 |
-| ---------------|------------ |
-| `.shp` | シェープ ファイルは、ポイント、ポリライン、および多角形を記述する地理空間ベクトルのデータ項目を含みます。このファイルでは、ポイントは都市、ポリラインは道路、多角形は地理的コンテキストの国々の図形 / 境界線を表します。 |
-| `.shx` | シェイプ インデックス ファイルには、地理空間ベクトルのデータ項目を素早く検索するためのインデックスが含まれます。 |
-| `.dbf` | シェイプ データベース ファイルには、シェイプ (.shp) ファイルからの各地理空間のデータ項目に行が対応するテーブルが含まれます。シェイプ データベース ファイルでは、文字列の列は、文字列 (国、地域、都市の名前) と数値列 (国々の人口、都市の場所) などの地理空間のデータ項目の属性を表します。 |
-
-地理空間データがシェープ ファイルでどのように保存されるかについての情報と仕様は、以下のリソースを参照してください。
-
-- [シェープファイル技術解説 (英語)](http://www.esri.com/library/whitepapers/pdfs/shapefile.pdf)
-
-- [Wikipedia - シェープファイル概要](http://ja.wikipedia.org/wiki/シェープファイル#概要)
-
-## シェイプ ファイルのツール
-
-以下のリストは、シェープ ファイルを編集するためのリソース ツールを提供しています。(英語)
-
-- [MapWindow – Shape (.shp) および Database (.dbf) ファイル エディター](http://www.mapwindow.org/)
-
-- [Open Office – Database (.dbf) ファイル エディター](http://openoffice.org/)
-
-- [DBF Editor - Database (.dbf) ファイル エディター](http://dbfeditor.com/)
-
-- [DBF View - Database (.dbf) ファイル エディター](http://dbfview.com/view-dbf-file.html)
-
-- [Satellite Signals – 地理空間の計算機](http://www.satsig.net/degrees-minutes-seconds-calculator.htm)
-
-- [RITA – NORTAD ファイル-シェイプ ファイルのコンバーター](http://www.bts.gov/publications/north_american_transportation_atlas_data/html/data_converter.html)
-
-## シェイプ ファイル データ ソース (英語)
-
-以下のリストは、シェープ ファイルを取得するためのリソースを提供しています。また、<ApiLink type="GeographicMap" /> コントロールのサンプルは、シェープ ファイルの良い情報源になります。これらのシェープ ファイルは、Samples Browser のインストーラーに含まれています。
-
-- [ESRI - 世界地図データ](http://www.esri.com/data/download/basemap/index.html)
-
-## その他リソース
-
-このトピックに関連する追加情報については、以下のトピックを参照してください。
-
-- [シェープファイルのバインディング](geo-map-binding-shp-file.md)
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="ShapefileRecord" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx b/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx
deleted file mode 100644
index 0bde22a43d..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-shape-styling.mdx
+++ /dev/null
@@ -1,171 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | シェイプ スタイリング | 条件付き書式 | インフラジスティックス"
-description: インフラジスティックスの Angular マップのシェイプ シリーズにカスタム スタイルを適用する方法について説明します。Ignite UI for Angular マップ チュートリアルを是非お試しください!
-keywords: "Angular map, custom styling, Ignite UI for Angular, Infragistics, conditional formatting, shape styling, Angular マップ, カスタム スタイル設定, インフラジスティックス, 条件付き書式, シェイプ スタイリング"
-license: commercial
-mentionedTypes: ["GeographicMap", "GeographicShapeSeries", "Series"]
-_language: ja
-llms:
-  description: "このトピックでは、Angular GeographicMap で GeographicShapeSeries にカスタム スタイリングを適用する方法を説明します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理シェイプ シリーズのスタイル設定
-
-このトピックでは、Angular <ApiLink type="GeographicMap" /> で <ApiLink type="GeographicShapeSeries" /> にカスタム スタイリングを適用する方法を説明します。
-
-## Angular 地理シェイプ シリーズのスタイル設定の例
-
-<Sample src="/maps/geo-map/shape-styling" height={500} alt="Angular 地理シェイプ シリーズのスタイル設定の例" />
-
-## 必要なインポート
-
-シェイプ スタイリングでは、次のクラスをインポートする必要があります。
-
-```ts
-import { IgxGeographicShapeSeries } from 'igniteui-angular-maps';
-import { IgxStyleShapeEventArgs } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxShapefileRecord } from 'igniteui-angular-core';
-```
-
-次のコード例は、シェイプ スタイリングを設定する 4 つの異なる方法を提供する[シェイプ スタイリング ユーティリティ](geo-map-resources-shape-styling-utility.md) ファイルを使用していることに注意してください。
-- [シェイプ比較スタイリング](#シェイプ比較スタイリング)
-- [シェイプ ランダム スタイリング](#シェイプ-ランダム-スタイリング)
-- [シェイプ範囲スタイリング](#シェイプ範囲スタイリング)
-- [シェイプ スケール スタイリング](#シェイプ-スケール-スタイリング)
-
-## シェイプ ランダム スタイリング
-
-このコード スニペットは、**ShapeRandomStyling** のインスタンスを作成して、塗りつぶし色をランダムに世界の国に割り当てます。
-
-```ts
-import { ShapeRandomStyling } from './ShapeStylingUtility';
-// ...
-
-this.shapeRandomStyling = new ShapeRandomStyling();
-this.shapeRandomStyling.shapeStrokeColors = ['Black'];
-this.shapeRandomStyling.shapeFillColors = ['#8C23D1', '#0E9759', '#B4D336', '#F2A464', '#D74545', 'DodgerBlue'];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.ShapeRandomStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## シェイプ スケール スタイリング
-
-このコード スニペットは、**ShapeScaleStyling** のインスタンスを作成して、対数スケールでスケーリングされた母集団に基づいて塗りつぶし色を国に割り当てます。
-
-```ts
-import { ShapeScaleStyling } from './ShapeStylingUtility';
-// ...
-this.shapeScaleStyling = new ShapeScaleStyling();
-this.shapeScaleStyling.itemMinimumValue = 5000;
-this.shapeScaleStyling.itemMaximumValue = 2000000000; // 2 Billions
-this.shapeScaleStyling.itemMemberPath = 'Population';
-this.shapeScaleStyling.isLogarithmic = true;
-this.shapeScaleStyling.defaultFill = 'Gray';
-this.shapeScaleStyling.shapeStrokeColors = ['Black'];
-this.shapeScaleStyling.shapeFillColors = ['DodgerBlue', 'yellow', '#c2f542', '#e8c902', '#e8b602', '#e87902', 'brown'];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeScaleStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## シェイプ範囲スタイリング
-
-このコード スニペットは、**ShapeRangeStyling** のインスタンスを作成して、人口の範囲に基づいて国に色を割り当てます。
-
-```ts
-import { ShapeRangeStyling } from './ShapeStylingUtility';
-// ...
-this.shapeRangeStyling = new ShapeRangeStyling();
-this.shapeRangeStyling.defaultFill = 'Gray';
-this.shapeRangeStyling.itemMemberPath = 'Population';
-this.shapeRangeStyling.ranges = [
-    { fill: 'yellow', minimum: 5000, maximum: 10000000, },        // 5 K - 10 M
-    { fill: 'orange', minimum: 10000000, maximum: 100000000, },   // 10 M - 100 M
-    { fill: 'red',    minimum: 100000000, maximum: 500000000, },  // 100 M - 500 M
-    { fill: 'brown',  minimum: 500000000, maximum: 2000000000, }, // 500 M - 2 B
-];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeRangeStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## シェイプ比較スタイリング
-
-このコード スニペットは、**ShapeComparisonStyling** のインスタンスを作成して、世界の地域名に基づいて国に色を割り当てます。
-
-```ts
-import { ShapeComparisonStyling } from './ShapeStylingUtility';
-this.shapeComparisonStyling = new ShapeComparisonStyling();
-this.shapeComparisonStyling.defaultFill = 'Gray';
-this.shapeComparisonStyling.itemMemberPath = 'Region';
-this.shapeComparisonStyling.itemMappings = [
-    { fill: 'Red', itemValue: 'Eastern Europe' },
-    { fill: 'Red', itemValue: 'Central Asia' },
-    { fill: 'Red', itemValue: 'Eastern Asia' },
-    { fill: 'Orange', itemValue: 'Southern Asia' },
-    { fill: 'Orange', itemValue: 'Middle East' },
-    { fill: 'Orange', itemValue: 'Northern Africa' },
-    { fill: 'Yellow', itemValue: 'Eastern Africa' },
-    { fill: 'Yellow', itemValue: 'Western Africa' },
-    { fill: 'Yellow', itemValue: 'Middle Africa' },
-    { fill: 'Yellow', itemValue: 'Southern Africa' },
-    { fill: 'DodgerBlue', itemValue: 'Central America' },
-    { fill: 'DodgerBlue', itemValue: 'Northern America' },
-    { fill: 'DodgerBlue', itemValue: 'Western Europe' },
-    { fill: 'DodgerBlue', itemValue: 'Southern Europe' },
-    { fill: 'DodgerBlue', itemValue: 'Northern Europe' },
-    { fill: '#22c928', itemValue: 'South America' },
-    { fill: '#b64fff', itemValue: 'Melanesia' },
-    { fill: '#b64fff', itemValue: 'Micronesia' },
-    { fill: '#b64fff', itemValue: 'Polynesia' },
-    { fill: '#b64fff', itemValue: 'Australia' },
-];
-
-this.geoSeries = new IgxGeographicShapeSeries();
-this.geoSeries.styleShape = this.onStylingShape;
-// ...
-public onStylingShape(s: IgxGeographicShapeSeries, args: IgxStyleShapeEventArgs) {
-    const itemRecord = args.item as IgxShapefileRecord;
-    const shapeStyle = this.shapeComparisonStyling.getStyle(itemRecord);
-    args.shapeOpacity = shapeStyle.opacity;
-    args.shapeFill = shapeStyle.fill;
-    args.shapeStroke = shapeStyle.stroke;
-    args.shapeStrokeThickness = shapeStyle.strokeThickness;
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx
deleted file mode 100644
index ab88681ed5..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-scatter-area-series.mdx
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 散布エリア シリーズ | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular 散布エリア シリーズを使用して、各ポイントに割り当てられた数値を使い、経度および緯度データの三角測量に基づいて、色付きのエリア サーフェスを描画します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, scatter area series, Ignite UI for Angular, Infragistics, Angular マップ, 散布エリア シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap","GeographicScatterAreaSeries","CustomPaletteColorScale", "Series"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicScatterAreaSeries を使用して、各ポイントに割り当てられた数値を持つ経度と緯度のデータの三角形分割に基づいて、地理的背景で色付きの表面を描画できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理エリア マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicScatterAreaSeries" /> を使用して、各ポイントに割り当てられた数値を持つ経度と緯度のデータの三角形分割に基づいて、地理的背景で色付きの表面を描画できます。このタイプの地理的シリーズは、気象温度、降水量、人口分布、大気汚染などの地理的位置によって定義される散乱データのレンダリングに使用できます。
-
-## Angular 地理エリア マップの例
-
-<Sample src="/maps/geo-map/type-scatter-area-series" height={500} alt="Angular 散布エリア シリーズの使用の例" />
-
-<ApiLink type="GeographicScatterAreaSeries" /> は <ApiLink type="GeographicContourLineSeries" /> と同様ですが、同じ値を持つデータポイントを接続する等線の置換に補完で色つきサーフェス エリアとしてデータを表します。
-
-## データ要件
-マップコンポーネントの他の種類の地理的シリーズと同様に、<ApiLink type="GeographicScatterAreaSeries" /> には、オブジェクトの配列にバインドできる <ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" /> プロパティがあります。さらに、項目ソースの各項目にはデータ列が 3 つあり、2 つは地理的な経度および緯度座標を保管し、1 つのデータ列は地理的位置に関連した値を保管します。地理的シリーズの <ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> および <ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" /> プロパティはこれらのデータ列を識別します。
-<ApiLink type="GeographicScatterAreaSeries" /> は、三角測量が <ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> プロパティに設定されていない場合、ItemsSource の項目で組み込みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために TriangulationSource を指定すると、ランタイム パフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。
-
-## データ バインディング
-以下の表に、データ バインドに使用される GeographicScatterAreaSeries のプロパティをまとめています。
-
-| プロパティ名  | プロパティ型   | 説明   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" />|任意|<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> プロパティが三角測量データを提供しない場合に三角測量を実行するデータ項目のソースです。|
-|<ApiLink type="GeographicScatterAreaSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|文字列|<ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" /> にバインドされているすべての項目の経度を含むプロパティの名前。|
-|<ApiLink type="GeographicScatterAreaSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|文字列|<ApiLink type="GeographicScatterAreaSeries" member="triangulationDataSource" label="ItemsSource" /> にバインドされているすべての項目の Latitude を含むプロパティの名前。|
-|<ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />|文字列|各データ項目の緯度および経度座標の値を含むプロパティの名前。<ApiLink type="GeographicScatterAreaSeries" member="colorScale" label="ColorScale" /> プロパティが設定されている場合、この数値は色に変換されます。|
-|<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" />|任意|三角測量データのソース。`TriangulationSource` オブジェクトの Triangles をこのプロパティに設定すると、ランタイム パフォーマンスと地理的シリーズの描画の両方が改善します。|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath1" label="TriangleVertexMemberPath1" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath2" label="TriangleVertexMemberPath2" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-|<ApiLink type="GeographicScatterAreaSeries" member="triangleVertexMemberPath3" label="TriangleVertexMemberPath3" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、<ApiLink type="GeographicScatterAreaSeries" member="trianglesSource" label="TrianglesSource" /> 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-
-## カラー スケール
-<ApiLink type="GeographicScatterAreaSeries" /> の ColorScale プロパティを使用して、ポイントの色の値を解決し、地理的シリーズの面を塗りつぶします。色は、ピクセル単位の三角ラスタライザーを三角測量データに適用することによって、サーフェスの図形の周りをなめらかに補間します。サーフェスの描画がピクセル単位であるため、カラー スケールはブラシではなく色を使用します。
-提供される <ApiLink type="CustomPaletteColorScale" /> クラスはほとんどのカラーリングのニーズを満たすはずですが、ColorScale ベースのクラスはカスタムのカラリング ロジックのアプリケーションによって継承できます。
-
-以下の表は GeographicScatterAreaSeries の面のカラリングに影響する <ApiLink type="CustomPaletteColorScale" /> プロパティをリストします。
-
-| Property Name  | Property Type   | Description   |
-|--------------|---------------| ---------------|
-|<ApiLink type="CustomPaletteColorScale" member="palette" label="Palette" />| `ObservableCollection<Color>` |Gets or sets the collection of colors to select from or to interpolate between.|
-|<ApiLink type="CustomPaletteColorScale" member="interpolationMode" label="InterpolationMode" />|<ApiLink type="ColorScaleInterpolationMode" />|Gets or sets the method getting a color from the Palette.|
-|<ApiLink type="CustomPaletteColorScale" member="maximumValue" label="MaximumValue" />|double|The highest value to assign a color. Any given value greater than this value will be Transparent.|
-|<ApiLink type="CustomPaletteColorScale" member="minimumValue" label="MinimumValue" />|double|The lowest value to assign a color. Any given value less than this value will be Transparent.|
-
-## コード スニペット
-以下のコードは、<ApiLink type="GeographicScatterAreaSeries" /> を世界の表面温度を表す三角測量データにバインドする方法を示しています。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            Degrees: {{item.value}} "°F"
-        </span>
-        <br/>
-        <span>
-                Longitude: {{item.lon}}
-        </span>
-        <br/>
-        <span>
-                Latitude: {{item.lat}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxCustomPaletteColorScaleComponent } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicScatterAreaSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-scatter-area-series",
-  styleUrls: ["./map-geographic-scatter-area-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-area-series.component.html"
-})
-export class MapTypeScatterAreaSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild ("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-    sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-}
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    const contourPoints: any[] = [];
-    for (const record of shapeRecords) {
-        const temp = record.fieldValues.Contour;
-        // using only major contours (every 10th degrees Celsius)
-        if (temp % 10 === 0 && temp >= 0) {
-            for (const shapes of record.points) {
-                for (let i = 0; i < shapes.length; i++) {
-                if (i % 5 === 0) {
-                    const p = shapes[i];
-                    const item = { lon: p.x, lat: p.y, value: temp};
-                    contourPoints.push(item);
-                }
-                }
-            }
-        }
-    }
-    this.createContourSeries(contourPoints);
-}
-
-    public createContourSeries(data: any[]) {
-    const brushes = [
-        "rgba(32, 146, 252, 0.5)", // semi-transparent blue
-        "rgba(14, 194, 14, 0.5)",  // semi-transparent green
-        "rgba(252, 120, 32, 0.5)", // semi-transparent orange
-        "rgba(252, 32, 32, 0.5)"  // semi-transparent red
-    ];
-
-    const colorScale = new IgxCustomPaletteColorScaleComponent();
-    colorScale.palette = brushes;
-    colorScale.minimumValue = 0;
-    colorScale.maximumValue = 30;
-
-    const areaSeries = new IgxGeographicScatterAreaSeriesComponent();
-    areaSeries.dataSource = data;
-    areaSeries.longitudeMemberPath = "lon";
-    areaSeries.latitudeMemberPath = "lat";
-    areaSeries.colorMemberPath = "value";
-    areaSeries.colorScale = colorScale;
-    areaSeries.tooltipTemplate = this.tooltipTemplate;
-    areaSeries.thickness = 4;
-
-    this.map.series.add(areaSeries);
-}
-}
-```
-
-## API リファレンス
-
-<ApiLink type="ColorScale" /><br />
-<ApiLink type="CustomPaletteColorScale" /><br />
-<ApiLink type="GeographicContourLineSeries" /><br />
-<ApiLink type="GeographicScatterAreaSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx
deleted file mode 100644
index d5413e1734..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-scatter-bubble-series.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 散布図比例シリーズ | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップの散布図比例シリーズを使用して、アプリケーション内のデータで指定された地理的な地点のマーカーをプロットします。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, scatter proportional series, Ignite UI for Angular, Infragistics, Angular マップ, 散布図比例シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicProportionalSymbolSeries を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理バブル マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicProportionalSymbolSeries" /> を使用して、アプリケーションのデータで指定された地理的位置にバブルまたは相対マーカーをプロットできます。このマップ シリーズは、百貨店、倉庫、オフィスなど、特定のビジネス ケースに応じたポイントをハイライト表示する場合に役立ちます。また、動的な車両追跡のためにフリート管理システムまたは GPS システムでこの地図シリーズを使用することができます。
-
-## Angular 地理バブル マップの例
-
-<Sample src="/maps/geo-map/type-scatter-bubble-series" height={500} alt="Angular 散布図比の使用の例" />
-
-上記のデモは、<ApiLink type="GeographicProportionalSymbolSeries" /> シリーズと、シリーズのデータ​​バインディングオプションを指定する方法を示しています。予定表連動マーカー選択は、マーカー競合回避ロジックと合わせて構成され、マーカー アウトラインと塗りつぶしの色も指定されます。
-
-## 構成の概要
- マップコントロールの他のタイプの散布シリーズと同様に、<ApiLink type="GeographicProportionalSymbolSeries" /> シリーズには、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。<ApiLink type="GeographicProportionalSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> と <ApiLink type="GeographicProportionalSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> プロパティを使用してこのデータ列をマップします。<ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" /> と <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" /> は、バブルの半径を設定します。
-
-以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
-
-| プロパティ|タイプ|概要 |
-| ---|---|--- |
-| <ApiLink type="GeographicMap" member="dataSource" label="DataSource" />|any|項目のソースを取得または設定します |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|string|DataSource プロパティを使用して、割り当てられた商品の経度の値の場所を特定します。 |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|DataSource プロパティを使用して、割り当てられた商品の緯度値の場所を決定します。 |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />|string|シリーズの半径値を取得するために使用するパスを設定します。 |
-| <ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" />|<ApiLink type="SizeScale" />|現在のバブル シリーズの半径スケール プロパティを取得または設定します。 |
-| <ApiLink type="SizeScale" member="minimumValue" label="MinimumValue" />|any|値のサブ範囲を計算するための最小値を設定します。 |
-| <ApiLink type="SizeScale" member="maximumValue" label="MaximumValue" />|any|値のサブ範囲を計算するための最大値を設定します。 |
-
-## コード スニペット
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            {{item.name}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxSizeScaleComponent } from 'igniteui-angular-charts';
-import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
-import { IgxDataContext } from 'igniteui-angular-core';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicProportionalSymbolSeriesComponent } from 'igniteui-angular-maps';
-import { MarkerType } from 'igniteui-angular-charts';
-import { WorldLocations } from "../../utilities/WorldLocations";
-
-@Component({
-  selector: "app-map-geographic-scatter-proportional-series",
-  styleUrls: ["./map-geographic-scatter-proportional-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-proportional-series.component.html"
-})
-export class MapTypeScatterBubbleSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild ("template")
-    public tooltipTemplate: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-    sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-}
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    console.log("loaded contour shapes: " + shapeRecords.length + " from /Shapes/WorldTemperatures.shp");
-
-    const contourPoints: any[] = [];
-    for (const record of shapeRecords) {
-        const temp = record.fieldValues.Contour;
-        // using only major contours (every 10th degrees Celsius)
-        if (temp % 10 === 0 && temp >= 0) {
-            for (const shapes of record.points) {
-                 for (let i = 0; i < shapes.length; i++) {
-                    if (i % 5 === 0) {
-                        const p = shapes[i];
-                        const item = { lon: p.x, lat: p.y, value: temp};
-                        contourPoints.push(item);
-                    }
-                 }
-            }
-        }
-    }
-
-    console.log("loaded contour points: " + contourPoints.length);
-    this.addSeriesWith(WorldLocations.getAll());
-}
-
-    public addSeriesWith(locations: any[]) {
-        const sizeScale = new IgxSizeScaleComponent();
-        sizeScale.minimumValue = 4;
-        sizeScale.maximumValue = 60;
-
-        const brushes = [
-            "rgba(14, 194, 14, 0.4)",  // semi-transparent green
-            "rgba(252, 170, 32, 0.4)", // semi-transparent orange
-            "rgba(252, 32, 32, 0.4)"  // semi-transparent red
-        ];
-
-        const brushScale = new IgxValueBrushScaleComponent();
-        brushScale.brushes = brushes;
-        brushScale.minimumValue = 0;
-        brushScale.maximumValue = 30;
-
-        const symbolSeries = new IgxGeographicProportionalSymbolSeriesComponent();
-        symbolSeries.dataSource = locations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.radiusScale = sizeScale;
-        symbolSeries.fillScale = brushScale;
-        symbolSeries.fillMemberPath = "pop";
-        symbolSeries.radiusMemberPath = "pop";
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerOutline = "rgba(0,0,0,0.3)";
-        symbolSeries.tooltipTemplate = this.tooltipTemplate;
-
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicProportionalSymbolSeries" /><br />
-<ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx
deleted file mode 100644
index c0b2cd9228..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-scatter-contour-series.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 散布等高線シリーズ | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップの散布等高線シリーズを使用して、各点に数値が割り当てられた経度および緯度データの三角測量に基づいて、地理的なコンテキストで色付きの等高線を描画します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, scatter contour series, Ignite UI for Angular, Infragistics, Angular マップ, 散布等高線シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap","GeographicContourLineSeries","CustomPaletteColorScale", "Series"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicContourLineSeries を使用して、各点に数値が割り当てられた経度および緯度データの三角測量に基づいて、地理的なコンテキストで色付きの等高線を描画できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理等高線マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicContourLineSeries" /> を使用して、各点に数値が割り当てられた経度および緯度データの三角測量に基づいて、地理的なコンテキストで色付きの等高線を描画できます。このタイプの地理的シリーズは、天気の気温、気圧、降水量、人口分布、地形データなどの地理的位置によって定義される散在データをレンダリングするのに役立ちます。
-
-## Angular 地理等高線マップの例
-
-<Sample src="/maps/geo-map/type-scatter-contour-series" height={500} alt="Angular 散布等高線シリーズの使用の例" />
-
-<ApiLink type="GeographicContourLineSeries" /> は <ApiLink type="GeographicScatterAreaSeries" /> とよく似ていますが、塗りつぶしスケールを使用して色付けされた等高線としてデータを表し、地理散布エリア シリーズはカラースケールを使用して補間された面としてデータを表します。
-
-## データ要件
-マップコンポーネントの他の種類の地理的シリーズと同様に、<ApiLink type="GeographicContourLineSeries" /> には、オブジェクトの配列にバインドできる <ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" /> プロパティがあります。さらに、項目ソースの各項目にはデータ列が 3 つあり、2 つは地理的位置 (経度および緯度座標) を保管し、1 つのデータ列は地理的位置に関連した値を保管します。これらのデータ列は、地理的シリーズの <ApiLink type="GeographicContourLineSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />、<ApiLink type="GeographicContourLineSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> および <ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" /> プロパティによって識別されます。
-<ApiLink type="GeographicContourLineSeries" /> は、三角測量が <ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" /> プロパティに設定されていない場合、ItemsSource の項目で定義済みのデータ三角測量を自動的に実行します。ただし、三角測量の計算は非常に時間のかかるプロセスであるため、このプロパティのために `TriangulationSource` を指定すると、ランタイム パフォーマンスがよくなります。特にデータ項目が多数ある場合には顕著です。
-
-## データ バインディング
-以下の表は、データ バインドに使用される <ApiLink type="GeographicContourLineSeries" /> プロパティの概要です。
-
-| プロパティ名  | プロパティ型   | 概要   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" />|任意|<ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" /> プロパティが三角測量データを提供しない場合に三角測量を実行するデータ項目のソースです。|
-|<ApiLink type="GeographicContourLineSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|文字列|<ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" /> にバインドされているすべての項目の経度を含むプロパティの名前。|
-|<ApiLink type="GeographicContourLineSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|文字列|<ApiLink type="GeographicContourLineSeries" member="triangulationDataSource" label="ItemsSource" /> にバインドされているすべての項目の Latitude を含むプロパティの名前。|
-|<ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />|文字列|各データ項目の緯度および経度座標の値を含むプロパティの名前。<ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /> プロパティが設定されている場合、この数値は色に変換されます。|
-|<ApiLink type="GeographicContourLineSeries" member="trianglesSource" label="TrianglesSource" />|任意|三角測量データのソースを取得または設定します。TriangulationSource オブジェクトの Triangles をこのプロパティに設定すると、ランタイムパフォーマンスと地理的シリーズレンダリングの両方が向上します。|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath1" label="TriangleVertexMemberPath1" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath2" label="TriangleVertexMemberPath2" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-|<ApiLink type="GeographicContourLineSeries" member="triangleVertexMemberPath3" label="TriangleVertexMemberPath3" />|文字列|各三角形に対して ItemsSource の最初の頂点のインデックスを含む、TrianglesSource 項目のプロパティ名。このプロパティを設定することは義務ではありません。カスタムの三角測量ロジックが提供されない場合はデフォルトで取得されます。|
-
-## 等高線の塗りつぶしスケール
-<ApiLink type="GeographicContourLineSeries" /> の <ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /> を使用して地理的シリーズの等高線の塗りブラシを解決します。
-ValueBrushScale クラスは、ユーザーの色分けのニーズもほとんどを満たすはずですが、カスタムの色分けロジックのアプリケーションで ValueBrushScale クラスを継承できます。
-以下の表は、GeographicContourLineSeries のサーフェス カラーリングに影響を与える CustomPaletteColorScale のプロパティの一覧です。
-
-| プロパティ名  | プロパティ型   | 概要   |
-|--------------|---------------| ---------------|
-|<ApiLink type="GeographicMap" member="brushes" label="Brushes" />|BrushCollection|<ApiLink type="GeographicContourLineSeries" /> の輪郭を塗りつぶすためのブラシのコレクションを取得または設定します。|
-|<ApiLink type="CustomPaletteColorScale" member="maximumValue" label="MaximumValue" />|double|塗りつぶしスケールでブラシを割り当てるための最高値。|
-|<ApiLink type="CustomPaletteColorScale" member="minimumValue" label="MinimumValue" />|double|塗りつぶしスケールでブラシを割り当てるための最低値。|
-
-## コード スニペット
-
-以下のコードは、<ApiLink type="GeographicContourLineSeries" /> を世界の表面温度を表す三角測量データにバインドする方法を示しています。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <span [style.color]="series.brush">
-        {{item | number: 2}} "°C"
-    </span>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxValueBrushScaleComponent } from 'igniteui-angular-charts';
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicContourLineSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-scatter-contour-series",
-  styleUrls: ["./map-geographic-scatter-contour-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-contour-series.component.html"
-})
-
-export class MapTypeScatterContourSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild ("template")
-    public tooltip: TemplateRef<object>;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        const sds = new IgxShapeDataSource();
-        sds.shapefileSource = "assets/Shapes/WorldTemperatures.shp";
-        sds.databaseSource  = "assets/Shapes/WorldTemperatures.dbf";
-        sds.dataBind();
-        sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-
-        const contourPoints: any[] = [];
-        for (const record of shapeRecords) {
-            const temp = record.fieldValues.Contour;
-            // using only major contours (every 10th degrees Celsius)
-            if (temp % 10 === 0 && temp >= 0) {
-                for (const shapes of record.points) {
-                     for (let i = 0; i < shapes.length; i++) {
-                        if (i % 5 === 0) {
-                            const p = shapes[i];
-                            const item = { lon: p.x, lat: p.y, value: temp};
-                            contourPoints.push(item);
-                        }
-                     }
-                }
-            }
-        }
-
-        this.createContourSeries(contourPoints);
-    }
-
-    public createContourSeries(data: any[]) {
-        const brushes = [
-            "rgba(32, 146, 252, 0.5)", // semi-transparent blue
-            "rgba(14, 194, 14, 0.5)",  // semi-transparent green
-            "rgba(252, 120, 32, 0.5)", // semi-transparent orange
-            "rgba(252, 32, 32, 0.5)"  // semi-transparent red
-        ];
-
-        const brushScale = new IgxValueBrushScaleComponent();
-        brushScale.brushes = brushes;
-        brushScale.minimumValue = 0;
-        brushScale.maximumValue = 30;
-
-        const contourSeries = new IgxGeographicContourLineSeriesComponent();
-        contourSeries.dataSource = data;
-        contourSeries.longitudeMemberPath = "lon";
-        contourSeries.latitudeMemberPath = "lat";
-        contourSeries.valueMemberPath = "value";
-        contourSeries.fillScale = brushScale;
-        contourSeries.tooltipTemplate = this.tooltip;
-        contourSeries.thickness = 4;
-
-        this.map.series.add(contourSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicContourLineSeries" member="fillScale" label="FillScale" /><br />
-<ApiLink type="GeographicContourLineSeries" /><br />
-<ApiLink type="GeographicScatterAreaSeries" /><br />
-<ApiLink type="ValueBrushScale" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx
deleted file mode 100644
index ff3f261c3d..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-scatter-density-series.mdx
+++ /dev/null
@@ -1,130 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 散布高密度シリーズ | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップの散布高密度シリーズを使用して、数百から数百万のデータ ポイントから構成される散布図データを最短のロード時間でバインドして表示できます。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, scatter high density series, Ignite UI for Angular, Infragistics, Angular マップ, 散布高密度シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicHighDensityScatterSeries を使用して、非常に少ないロード時間で、数百から数百万のデータ ポイントを持つ散布図データをバインドして表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理高密度マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicHighDensityScatterSeries" /> を使用して、非常に少ないロード時間で、数百から数百万のデータ ポイントを持つ散布図データをバインドして表示できます。
-
-## Angular 地理高密度マップの例
-
-<Sample src="/maps/geo-map/type-scatter-density-series" height={400} alt="Angular 散布高密度シリーズの使用の例" />
-
-上記のサンプルは、オーストラリアの人口密度を表す何百、何千ものデータ ポイントにバインドされた <ApiLink type="GeographicHighDensityScatterSeries" /> シリーズをマップ コンポーネントで示しています。大量のデータ ポイントを含むマップのプロット領域は凝縮された赤色のピクセルによって表します。少量のデータ ポイントを含む領域は青色のピクセルによって表します。
-
-相当数のデータ ポイントがあるため、シリーズではフルサイズのマーカーに対して散布データを小さな点として表示し、領域にはデータ ポイントの集合を表す高い色密度を使用した大半のデータを表示します。
-
-## データ要件
-マップ コントロールの他のタイプの散布図シリーズと同様に、<ApiLink type="GeographicHighDensityScatterSeries" /> シリーズには、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。また、項目ソースの各項目は、地理経度および緯度を表す 2 つのデータ列があります。<ApiLink type="GeographicHighDensityScatterSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> と <ApiLink type="GeographicHighDensityScatterSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> プロパティを使用してこのデータ列をマップします。
-
-### データ バインディング
-以下の表に、データ バインドに使用される GeographicHighDensityScatterSeries シリーズのプロパティをまとめています。
-
-| プロパティ|タイプ|概要 |
-| ---|---|--- |
-| <ApiLink type="GeographicMap" member="dataSource" label="DataSource" />|any|項目ソースを取得または設定します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />|経度値が割り当てられた項目上の位置を決定するには DataSource プロパティを使用します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />|string|緯度値が割り当てられた項目上の位置を決定するには DataSource プロパティを使用します。 |
-
-## 熱色スケール
-熱色スケールは、シリーズ内のカラー パターンを決定するオプションの機能です。以下の表は、カラー スケールを決定するために使用するプロパティをまとめたものです。
-
-| プロパティ|タイプ|概要 |
-| ---|---|--- |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimum" label="HeatMinimum" />|カラー スケールの最小端を表す double 値を定義します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximum" label="HeatMaximum" />|カラー スケールの最大端を表す double 値を定義します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" />|Color|カラー スケールの下端で使用するポイント密度カラーを定義します。 |
-| <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" />|Color|カラー スケールの上端で使用するポイント密度カラーを定義します。 |
-
-## コード例
-
-以下のコードは、<ApiLink type="GeographicHighDensityScatterSeries" /> の <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" /> と <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" /> プロパティを設定する方法を示します。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <span>
-            {{item.n}}
-        </span>
-    </div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicHighDensityScatterSeriesComponent } from 'igniteui-angular-maps';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { WorldUtils } from "../../utilities/WorldUtils";
-
-@Component({
-  selector: "app-map-geographic-scatter-density-series",
-  styleUrls: ["./map-geographic-scatter-density-series.component.scss"],
-  templateUrl: ".map-geographic-scatter-density-series.component.html"
-})
-
-export class MapTypeScatterDensitySeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    public geoLocations;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-         // fetching geographic locations from public JSON folder
-         fetch("assets/Data/AusPlaces.json")
-         .then((response) => response.json())
-         .then((data) => this.onDataLoaded(data, ""));
-      }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        this.geoLocations = sds;
-        // creating HD series with loaded data
-        const geoSeries = new IgxGeographicHighDensityScatterSeriesComponent();
-        geoSeries.dataSource = sds;
-        geoSeries.longitudeMemberPath = "x";
-        geoSeries.latitudeMemberPath = "y";
-        geoSeries.heatMaximumColor = "Red";
-        geoSeries.heatMinimumColor = "Black";
-        geoSeries.heatMinimum = 0;
-        geoSeries.heatMaximum = 5;
-        geoSeries.pointExtent = 1;
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.mouseOverEnabled = true;
-
-        // adding HD series to the geographic amp
-        this.map.series.add(geoSeries);
-
-        // zooming to bound of all geographic locations
-        const geoBounds = WorldUtils.getBounds(this.geoLocations);
-        geoBounds.top = 0;
-        geoBounds.height = -50;
-        this.map.zoomToGeographic(geoBounds);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicHighDensityScatterSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx
deleted file mode 100644
index ae4c0cfdf0..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-scatter-symbol-series.mdx
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 散布図記号シリーズ | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular マップの散布図記号シリーズを使用して、地理的コンテキストでポイントまたはマーカーを使用し、地理空間データを表示します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, scatter symbol series, Ignite UI for Angular, Infragistics, Angular マップ, 散布図記号シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicSymbolSeries を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理記号マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicSymbolSeries" /> を使用して、地理的コンテキストでポイントまたはマーカーを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市、空港、地震または興味のあるポイントなどの地理的位置のコレクションを描画するためにしばしば使用されます。
-
-## Angular 地理記号マップの例
-
-<Sample src="/maps/geo-map/type-scatter-symbol-series" height={500} alt="Angular 散布図記号シリーズの使用の例" />
-
-## データ要件
-マップコンポーネントの他の種類の地理的シリーズと同様に、<ApiLink type="GeographicSymbolSeries" /> には、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。さらに、このオブジェクトの各データ項目は、地理的位置 (経度と緯度) を保存する 2 つの数値データ列を持つ必要があります。これらのデータ列は、<ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" /> および <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" /> プロパティにマップされます。<ApiLink type="GeographicSymbolSeries" /> は、これらのマップされたデータ列の値を使用して、地理マップコンポーネントにシンボル要素をプロットします。
-
-## コード スニペット
-以下のコードは、<ApiLink type="ShapefileRecord" /> を使用してシェイプ ファイルからロードした都市の場所に <ApiLink type="GeographicSymbolSeries" /> をバインドする方法を示します。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-        <div>
-            <div *ngIf="item.org;then hasOrg; else notOrg" ></div>
-            <span [style.color]="series.brush">
-                {{item.name}}
-            </span>
-            <br/>
-            <span>
-                Population {{item.pop}} M
-            </span>
-        </div>
-        <ng-template #hasOrg>
-            <span>
-                Population {{item.pop}} M
-            </span>
-            <br />
-        </ng-template>
-         <ng-template #notOrg>
-            <span>
-            </span>
-         </ng-template>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { MarkerType } from 'igniteui-angular-charts';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicSymbolSeriesComponent } from "igniteui-angular-maps";
-import { WorldLocations } from "../../utilities/WorldLocations";
-
-@Component({
-  selector: "app-map-geographic-scatter-symbol-series",
-  styleUrls: ["./map-geographic-scatter-symbol-series.component.scss"],
-  templateUrl: "./map-geographic-scatter-symbol-series.component.html"
-})
-
-export class MapTypeScatterSymbolSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      this.addSeriesWith(WorldLocations.getCities(), "Gray");
-      this.addSeriesWith(WorldLocations.getCapitals(), "rgb(32, 146, 252)");
-    }
-
-    public addSeriesWith(locations: any[], brush: string) {
-        const symbolSeries = new IgxGeographicSymbolSeriesComponent ();
-        symbolSeries.dataSource = locations;
-        symbolSeries.markerType = MarkerType.Circle;
-        symbolSeries.latitudeMemberPath = "lat";
-        symbolSeries.longitudeMemberPath = "lon";
-        symbolSeries.markerBrush  = "White";
-        symbolSeries.markerOutline = brush;
-        symbolSeries.tooltipTemplate = this.tooltip;
-        this.map.series.add(symbolSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicSymbolSeries" /><br />
-<ApiLink type="ShapefileRecord" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-series.mdx
deleted file mode 100644
index 70432b9e79..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-series.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | 地理的シリーズ タイプ | インフラジスティックス"
-description: インフラジスティックスの Angular マップ シリーズを使用して、地理的なデータをポイント (都市の位置など)、ポリライン (道路の接続など)、またはポリゴン (国の形状) として地理的コンテキストで表示します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, geographic series, Ignite UI for Angular, Infragistics, Angular マップ, 地理的シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular マップ コンポーネントでは、地理的シリーズは、地理的なデータをポイント (都市の位置など)、ポリライン (道路の接続など)、またはポリゴン (国の形状) として地理的コンテキストで表示する地図の視覚的要素です。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理的シリーズの概要
-
-Ignite UI for Angular マップ コンポーネントでは、地理的シリーズは、地理的なデータをポイント (都市の位置など)、ポリライン (道路の接続など)、またはポリゴン (国の形状) として地理的コンテキストで表示する地図の視覚的要素です。
-マップ コンポーネントの Series プロパティは、地理的なシリーズオブジェクトのコレクションです。このプロパティは、同じプロット領域に無制限の地理的系列を描画するのをサポートするために使用されます。複数の地理的シリーズ オブジェクトが Series プロパティに追加される場合、それぞれの連続するシリーズは、先頭から最後のシリーズに向かって開始する前のシリーズの上にレイヤーされます。したがって、地理的シリーズは、互いの上および地理的画像 (またはそのいずれか) の上に積み重ねることができる地図として理解できます。
-
-地理的シリーズのすべてのタイプは、常に地理的画像タイルの上に描画されます。ただし、場合によっては地理的シリーズ (たとえば、世界の詳細なシェイプ ファイルがある) は、アプリケーションで十分な地理的コンテキストを提供しており、地理的画像は Map コントロールで必要とはされません。
-
-## 地理的シリーズのタイプ
-
-Angular 地理マップ コンポーネントは、以下の種類の地理的シリーズをサポートします。
-
-- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
-- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
-- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
-- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
-- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
-- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
-- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx
deleted file mode 100644
index 1ff43480bd..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-shape-polygon-series.mdx
+++ /dev/null
@@ -1,150 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | シェイプ ポリゴン シリーズ | インフラジスティックス"
-description: インフラジスティックスの Angular マップのシェイプ ポリゴン シリーズを使用して、地理的位置によって定義される国または地域の図形を描画します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, shape polygon series, Ignite UI for Angular, Infragistics, Angular マップ, シェイプ ポリゴン シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicShapeSeries を使用して、地理的コンテキストで形状ポリゴンを使用して地理空間データを表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理ポリゴン マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicShapeSeries" /> を使用して、地理的コンテキストで形状ポリゴンを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、地理的位置で定義される国々または領域の図形を描画するためにしばしば使用されます。
-
-## Angular 地理ポリゴン マップの例
-
-<Sample src="/maps/geo-map/type-shape-polygon-series" height={500} alt="Angular シェイプ ポリゴン シリーズの使用の例" />
-
-<ApiLink type="GeographicShapeSeries" /> は、地理空間データがポリラインではなくポリゴンでレンダリングされる以外、<ApiLink type="GeographicPolylineSeries" /> とほとんど同じです。
-
-## データ要件
-マップコントロールの他の種類の地理的シリーズと同様に、<ApiLink type="GeographicShapeSeries" /> には、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、<ApiLink type="GeographicShapeSeriesBase" member="shapeMemberPath" label="ShapeMemberPath" /> プロパティにマップされます。<ApiLink type="GeographicShapeSeries" /> は、マップされたデータ列の点を使用してマップコントロールにポリゴンをプロットします。
-
-## コード スニペット
-以下のコードは、<ApiLink type="ShapefileRecord" /> を使用してシェイプ ファイルからロードした世界の国々の図形に <ApiLink type="GeographicShapeSeries" /> をバインドする方法を示します。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-  </div>
-
-<ng-template let-series="series" let-item="item" #template>
-    <div>
-        <div *ngIf="item.org;then hasOrg; else notOrg" ></div>
-        <span [style.color]="series.brush">
-            {{item.name}}
-        </span>
-        <br/>
-        <span>
-            Population {{item.pop}} M
-        </span>
-    </div>
-    <ng-template #hasOrg>
-        <span>
-            Population {{item.pop}} M
-        </span>
-        <br />
-    </ng-template>
-        <ng-template #notOrg>
-        <span>
-        </span>
-        </ng-template>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, TemplateRef, ViewChild } from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicShapeSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-shape-polygon-series",
-  styleUrls: ["./map-geographic-shape-polygon-series.component.scss"],
-  templateUrl: "./map-geographic-shape-polygon-series.component.html"
-})
-export class MapTypeShapePolygonSeriesComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-
-    @ViewChild("template")
-    public tooltip: TemplateRef<object>;
-
-    public data: any;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-      const sds = new IgxShapeDataSource();
-      sds.shapefileSource = "assets/Shapes/WorldCountries.shp";
-      sds.databaseSource  = "assets/Shapes/WorldCountries.dbf";
-      sds.dataBind();
-      sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-    }
-
-    public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-        const shapeRecords = sds.getPointData();
-        console.log("loaded /Shapes/WorldCountries.shp " + shapeRecords.length);
-
-        const countriesNATO: any[] = [];
-        const countriesSCO: any[] = [];
-        const countriesARAB: any[] = [];
-        const countriesOther: any[] = [];
-
-        for (const record of shapeRecords) {
-            // using field/column names from .DBF file
-            const country = {
-                name: record.fieldValues.NAME,
-                org: record.fieldValues.ALLIANCE,
-                points: record.points,
-                pop: record.fieldValues.POPULATION
-            };
-
-            const group = record.fieldValues.ALLIANCE;
-            if (group === "NATO") {
-                countriesNATO.push(country);
-            } else if (group === "SCO") {
-                countriesSCO.push(country);
-            } else if (group === "ARAB LEAGUE") {
-                countriesARAB.push(country);
-            } else {
-                countriesOther.push(country);
-            }
-        }
-
-        this.addSeriesWith(countriesNATO, "rgb(32, 146, 252)", "NATO");
-        this.addSeriesWith(countriesSCO, "rgb(252, 32, 32)", "SCO");
-        this.addSeriesWith(countriesARAB, "rgb(14, 194, 14)", "AL");
-        this.addSeriesWith(countriesOther, "rgb(146, 146, 146)", "Other");
-  }
-
-    public addSeriesWith(shapeData: any[], shapeBrush: string, shapeTitle: string) {
-        const seriesName = shapeTitle + "series";
-        const geoSeries = new IgxGeographicShapeSeriesComponent();
-        geoSeries.dataSource = shapeData;
-        geoSeries.shapeMemberPath = "points";
-        geoSeries.brush = shapeBrush;
-        geoSeries.outline = "Black";
-        geoSeries.tooltipTemplate = this.tooltip;
-        geoSeries.thickness = 1;
-        geoSeries.title = shapeTitle;
-
-        this.map.series.add(geoSeries);
-  }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="ShapefileRecord" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx b/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
deleted file mode 100644
index d00e6288c1..0000000000
--- a/docs/angular/src/content/jp/components/geo-map-type-shape-polyline-series.mdx
+++ /dev/null
@@ -1,139 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | シェイプ ポリライン シリーズ | インフラジスティックス"
-description: インフラジスティックスの Angular マップのシェイプ ポリライン シリーズを使用して、都市または空港などの地理的位置間の道路または接続を描画します。Ignite UI for Angular マップ シーリズについての詳細を表示します。
-keywords: "Angular map, Ignite UI for Angular, shape polyline series, Infragistics, Angular マップ, シェイプ ポリライン シリーズ, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "ShapefileConverter", "Series", "GeographicShapeSeriesBase"]
-_language: ja
-llms:
-  description: "Angular マップ コンポーネントでは、GeographicPolylineSeries を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理ポリライン マップ
-
-Angular マップ コンポーネントでは、<ApiLink type="GeographicPolylineSeries" /> を使用して、地理的コンテキストでポリラインを使用して地理空間データを表示できます。地理的シリーズのこのタイプは、都市または空港などの地理的位置間の道路または接続を描画するためにしばしば使用されます。
-
-## Angular 地理ポリライン マップの例
-
-<Sample src="/maps/geo-map/type-shape-polyline-series" height={500} alt="Angular シェイプ ポリライン シリーズの使用の例" />
-
-<ApiLink type="GeographicPolylineSeries" /> は、<ApiLink type="GeographicShapeSeries" /> とよく似ていますが、地理空間データがポリゴンではなくポリラインでレンダリングされる点が異なります。
-
-## データ要件
-コントロール内の他の種類の地理的シリーズと同様に、<ApiLink type="GeographicPolylineSeries" /> には、オブジェクトの配列にバインドできる <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> プロパティがあります。さらに、このオブジェクトの各データ項目には、地理的位置を表す x 値と y 値を持つオブジェクトの配列の配列を使用して単一または複数の形状を格納する 1 つのデータ列が必要です。このデータ列は、ShapeMemberPath プロパティにマップされます。<ApiLink type="GeographicPolylineSeries" /> は、コントロールで多角形をプロットするために、このマップされたデータ列のポイントを使用します。
-
-## コード スニペット
-以下のコードは、<ApiLink type="ShapefileRecord" /> を使用してシェイプ ファイルからロードした都市の場所に <ApiLink type="GeographicPolylineSeries" /> をバインドする方法を示します。
-
-```html
-<div className="sampleRoot" >
-
-        <igx-geographic-map #map
-            width="700px"
-            height="500px"
-            zoomable="true"
-            >
-        </igx-geographic-map>
-</div>
-<ng-template let-series="series" let-item="item" #template>
-<div>
-    <span>
-    {{item.country}} {{item.type}}
-    </span>
-    <br />
-    <span>
-    Length: {{item.length}} miles
-    </span>
-</div>
-</ng-template>
-```
-
-```ts
-import { AfterViewInit, Component, EmbeddedViewRef, TemplateRef, ViewChild} from "@angular/core";
-import { IgxShapeDataSource } from 'igniteui-angular-core';
-import { IgxIgxGeographicMapComponent } from 'igniteui-angular-maps';
-import { IgxGeographicPolylineSeriesComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-geographic-shape-polyline-series",
-  styleUrls: ["./map-geographic-shape-polyline-series.component.scss"],
-  templateUrl: "./map-geographic-shape-polyline-series.component.html"
-})
-
-export class MapTypeShapePolylineSeriesComponent implements AfterViewInit {
-
-  @ViewChild ("map")
-  public map: IgxGeographicMapComponent;
-
-  @ViewChild("template")
-  public tooltip: TemplateRef<object>;
-
-  constructor() {
-  }
-
-  public ngAfterViewInit(): void {
-    this.map.windowRect = { left: 0.195, top: 0.325, width: 0.2, height: 0.1 };
-
-    const sds = new IgxShapeDataSource();
-    sds.shapefileSource = "/assets/Shapes/AmericanRoads.shp";
-    sds.databaseSource  = "/assets/Shapes/AmericanRoads.dbf";
-    sds.dataBind();
-    sds.importCompleted.subscribe(() => this.onDataLoaded(sds, ""));
-  }
-
-  public onDataLoaded(sds: IgxShapeDataSource, e: any) {
-    const shapeRecords = sds.getPointData();
-    console.log("loaded /Shapes/AmericanRoads.shp " + shapeRecords.length);
-
-    const roadsUSA: any[] = [];
-    const roadsMEX: any[] = [];
-    const roadsCAN: any[] = [];
-
-    // filtering records of loaded shapefile
-    for (const record of shapeRecords) {
-        // reading field values loaded from DBF file
-        const type = record.fieldValues.RoadType;
-        const road = {
-            country: record.fieldValues.Country,
-            length: record.fieldValues.RoadLength / 10,
-            points: record.points,
-            type: type === 1 ? "Highway" : "Road"
-        };
-        // grouping road items by country names
-        if (type === 1 || type === 2) {
-            if (road.country === "USA") {
-                roadsUSA.push(road);
-            } else if (road.country === "MEX") {
-                roadsMEX.push(road);
-            } else if (road.country === "CAN") {
-                roadsCAN.push(road);
-            }
-        }
-    }
-
-    // creating polyline series for roads of each country
-    this.addSeriesWith(roadsCAN, "rgba(252, 32, 32, 0.9)");
-    this.addSeriesWith(roadsUSA, "rgba(3, 121, 231, 0.9)");
-    this.addSeriesWith(roadsMEX, "rgba(14, 194, 14, 0.9)");
-}
-
-  public addSeriesWith(shapeData: any[], shapeBrush: string) {
-        const lineSeries = new IgxGeographicPolylineSeriesComponent ();
-        lineSeries.dataSource = shapeData;
-        lineSeries.shapeMemberPath = "points";
-        lineSeries.shapeFilterResolution = 2.0;
-        lineSeries.shapeStrokeThickness = 2;
-        lineSeries.shapeStroke = shapeBrush;
-        lineSeries.tooltipTemplate = this.tooltip;
-        this.map.series.add(lineSeries);
-    }
-}
-```
-
-## API リファレンス
-
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="ShapefileRecord" /><br />
diff --git a/docs/angular/src/content/jp/components/geo-map.mdx b/docs/angular/src/content/jp/components/geo-map.mdx
deleted file mode 100644
index 951d47a03b..0000000000
--- a/docs/angular/src/content/jp/components/geo-map.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: "Angular マップ | データ可視化ツール | マップ概要 | インフラジスティックス"
-description: インフラジスティックスの Angular JavaScript マップ コンポーネントを使用して、ビュー モデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示します。Ignite UI for Angular マップのサンプルを是非お試しください!
-keywords: "Angular map, geographic map, imagery tiles, Ignite UI for Angular, Infragistics, Angular マップ, 地理マップ, 画像タイル, インフラジスティックス"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series"]
-_language: ja
-llms:
-  description: "Ignite UI for Angular Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular マップの概要
-
-Ignite UI for Angular Map コンポーネントを使用すると、ビューモデルからの地理的位置を含むデータ、またはシェープ ファイルからロードされた地理空間データを地理的画像マップに表示できます。
-
-## Angular マップの例
-
-以下のサンプルは、Bubble Series (バブル シリーズ) とも呼ばれる <ApiLink type="GeographicProportionalSymbolSeries" /> を使用して <ApiLink type="GeographicMap" /> にデータを表示する方法を示しています。
-
-<Sample src="/maps/geo-map/type-scatter-bubble-series" height={500} alt="Angular geo map type scatter bubble series" />
-
-Angular 地図コンポーネントを使用すると、Bing Maps™ および Open Street Maps から地理的画像をレンダリングできます。マップは何万ものデータポイントをプロットし、コントロールがリアルタイム フィードを処理できるように数ミリ秒ごとにそれらを更新します。
-
-マップの Series プロパティは、無制限の地理的シリーズのレンダリングをサポートするために使用されます。このプロパティは、地理的シリーズ オブジェクトのコレクションで、任意のタイプの地理的シリーズをそれに追加できます。たとえば、都市などの地理的位置をプロットするために <ApiLink type="GeographicSymbolSeries" />、またこれらの地理的位置の間の接続 (道路など) をプロットするために <ApiLink type="GeographicPolylineSeries" /> を追加できます。
-
-Map は、マウス、キーボード、またはコードビハインドを使用して、マップ コンテンツをナビゲーションするためのカスタマイズ可能なナビゲーション動作を提供します。
-
-注: 2025 年 6 月 30 日をもって、すべての Microsoft Bing Maps for Enterprise Basic (無料) アカウントはすべて廃止されます。無料の Basic アカウントおよびキーをご利用中の場合は、サービスの中断を回避するために今すぐ対応する必要があります。Bing Maps for Enterprise の有償ライセンスをお持ちの方は、2028 年 6 月 30 日までアプリケーション内で Bing Maps を引き続きご利用いただけます。
-
-詳細は以下をご覧ください:
-
-[Microsoft Bing ブログ](https://blogs.bing.com/maps/2025-06/Bing-Maps-for-Enterprise-Basic-Account-shutdown-June-30,2025)
-
-## 依存関係
-
-地理マップコンポーネントを使用するには、はじめにこれらのパッケージをインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-charts
-npm install --save igniteui-angular-maps
-```
-
-## モジュールの要件
-
-<ApiLink type="GeographicMap" /> には以下のモジュールが必要ですが、DataChartInteractivityModule は、マップ コンテンツのパンやズームなどのマウス操作にのみ必要です。
-
-```ts
-// app.module.ts
-import { IgxGeographicMapModule } from 'igniteui-angular-maps';
-import { IgxDataChartInteractivityModule } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxGeographicMapModule,
-        IgxDataChartInteractivityModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-```ts
-import { AfterViewInit, Component, ViewChild } from "@angular/core";
-import { IgxGeographicMapComponent } from 'igniteui-angular-maps';
-
-@Component({
-  selector: "app-map-overview",
-  styleUrls: ["./map-overview.component.scss"],
-  templateUrl: "./map-overview.component.html"
-})
-
-export class MapOverviewComponent implements AfterViewInit {
-
-    @ViewChild ("map")
-    public map: IgxGeographicMapComponent;
-    constructor() {
-    }
-
-    public ngAfterViewInit(): void {
-        this.map.windowRect = { left: 0.2, top: 0.1, width: 0.7, height: 0.7 };
-    }
-}
-```
-
-## 使用方法
-
-マップ モジュールがインポートされたので、以下のステップは地理的地図を作成することです。以下のコードは、これを実行して地図内でズームを有効にする方法を示しています。
-
-```html
-<div className="sampleRoot" >
-    <igx-geographic-map #map
-        width="700px"
-        height="500px"
-        zoomable="true" >
-    </igx-geographic-map>
-</div>
-```
-
-## その他のリソース
-
-関連する Angular マップ機能の詳細については、以下のトピックを参照してください。
-
-- [地理マップのナビゲーション](geo-map-navigation.md)
-
-- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
-- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
-- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
-- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
-- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
-- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
-- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
-
-## API リファレンス
-
-<ApiLink type="GeographicMap" /><br />
-<ApiLink type="GeographicContourLineSeries" /><br />
-<ApiLink type="GeographicHighDensityScatterSeries" /><br />
-<ApiLink type="GeographicPolylineSeries" /><br />
-<ApiLink type="GeographicShapeSeries" /><br />
-<ApiLink type="GeographicProportionalSymbolSeries" /><br />
-<ApiLink type="GeographicSymbolSeries" /><br />
-<ApiLink type="GeographicScatterAreaSeries" /><br />
diff --git a/docs/angular/src/content/jp/components/inputs/color-editor.mdx b/docs/angular/src/content/jp/components/inputs/color-editor.mdx
deleted file mode 100644
index 3b0cf04ae2..0000000000
--- a/docs/angular/src/content/jp/components/inputs/color-editor.mdx
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: "Angular Color Editor | カラー エディター | インフラジスティックス"
-description: Color Editor コンポーネントは、アプリケーションの任意のコンポーネントまたは側面の色を変更するための、簡単に構成可能なオプションを提供します。
-keywords: "Angular Color Editor, Ignite UI for Angular, Angular カラー エディター, インフラジスティックス"
-license: commercial
-mentionedTypes: ["ColorEditor"]
-namespace: Infragistics.Controls
-_language: ja
-llms:
-  description: "Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポーネントです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Color Editor (カラー エディター) の概要 <Badge variant="preview" />
-Ignite UI for Angular Color Editor は軽量のカラー ピッカー コンポーネントです。Color Editor は、ブラッシ アイコンをクリックすると開きます。RGBA 値と 16 進値の両方を、下部にある目的の色から取得できます。これらの値は、3 つのスライダーが変更されると更新されます。中央のボックスは、彩度と明度を調整するために設計されており、隣接する 2つ のスライダーで rgb 値と輝度値を調整できます。RGB は (1～255) の範囲で登録されます。明度は (0～1) の範囲で登録されます。
-
-## Angular Color Editor の例
-
-<Sample src="/inputs/color-editor/overview" height={340} alt="Angular Color Editor の例" />
-
-## 依存関係
-
-まず、次のコマンドを実行して Ignite UI for Angular をインストールする必要があります:
-
-```cmd
-npm install igniteui-angular-core
-npm install igniteui-angular-inputs
-```
-
-<ApiLink type="ColorEditor" /> を使用する前に、次のモジュールを登録する必要があります:
-
-## 使用方法
-
-<ApiLink type="ColorEditor" /> の使用を開始する最も簡単な方法は次のとおりです:
-
-```html
-<igx-color-editor
-    name="colorEditor"
-    #colorEditor>
-    </igx-color-editor>
-</div>
-```
-
-## イベントにバインド
-
-Color Editor コンポーネントは、次のイベントを発生させます:
-
-- valueChanged
-- valueChanging
-
-```ts
-@ViewChild("colorEditor", { static: true } )
-private colorEditor: IgxColorEditorComponent
-public ngAfterViewInit(): void
-{
-    this.colorEditor.valueChanged.subscribe(this.onValueChanged);
-}
-
-public onValueChanged = (e: any) => {
-    console.log("test");
-}
-
-```
-
-## API リファレンス
-
-<ApiLink type="ColorEditor" /><br />
-
-## その他のリソース
-
-- [Ignite UI for Angular **フォーラム (英語)**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub (英語)**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx b/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
deleted file mode 100644
index 79a49bdaae..0000000000
--- a/docs/angular/src/content/jp/components/interactivity/accessibility-compliance.mdx
+++ /dev/null
@@ -1,196 +0,0 @@
----
-title: Ignite UI for Angular アクセシビリティの遵守 | Ignite UI for Angular | インフラジスティックス
-description: Ignite UI for Angular のアクセシビリティ準拠 - 第 508 条の遵守、WCAG および ARIA。
-keywords: accessibility, Angular, ignite ui for Angular, infragistics, アクセシビリティ準拠, インフラジスティックス
-license: MIT
-mentionedTypes: []
-_language: ja
-llms:
-  description: "開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の Angular チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-
-<style>{`
-.greenCheck {
-  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/greenCheck.png");
-}
-
-.redCheck {
-  content:url("${import.meta.env.BASE_URL.replace(/\/$/, '')}/images/general/redX.png");
-}
-`}</style>
-
-# アクセシビリティ準拠
-
-開発者向けの UI および UX ツールのグローバル プロバイダーとして、Infragistics の Angular チームは、可能な限り最高のユーザー エクスペリエンスを簡単に作成できるコンポーネントとツールを提供します。私たちの目標は、ユーザーにとって最高のアプリケーションとユーザー エクスペリエンスの作成に集中できるようにすることです。
-
-ここでは、Ignite UI for Angular 内の Angular グリッド、チャート、UI コンポーネントおよびコントロールのアクセシビリティ サポートと準拠に関する特定の情報を見つけることができます。
-
-## 第 508 条の遵守
-
-リハビリテーション法[第 508 条](http://www.section508.gov/)は、連邦議会によって 1998 年に改正され、すべての連邦政府機関は障害を持つ人が電子情報技術にアクセスできるようにすることを義務付けました。それ以降、第 508 条の準拠は連邦政府機関の要件であるだけでなく、ソフトウェア ソリューションを提供し、Web ページを設計する際にも重要となります。
-
-第 508 条の第 1194 部 22 条は、特に Web ベースのイントラネットおよびインターネット情報およびシステムを対象としており、遵守すべき 16 の規則が含まれています。お客様の最小限の努力でお客様の Web アプリケーションおよび Web サイトがこれらの規則に整合できるようにするために、インフラジスティックスは、Ignite UI for Angular のコントロールおよびコンポーネントが該当するアクセシビリティ規則に準拠することを保証するための取り組みを続けてきました。
-
-以下のマトリックスで、弊社の視覚的コントロール (および関連コンポーネント) によって提供されるアクセシビリティのサポートの高レベルな概要を提供します。個々のコントロール/コンポーネントのアクセシビリティの遵守の詳細は、コントロール/コンポーネント名をクリックしてください。
-
-### 第 508 条との Ignite UI for Angular 準拠
-
-|**コンポーネント/原則**|<a title="あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。"> (a)</a><br/>|<a title="マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。">(b)</a><br/>|<a title="色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。">(c)</a><br/>|<a title="ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。">(d)</a><br/>|<a title="サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。">(e)</a><br/>|<a title="その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。">(f)</a><br/>|<a title="行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。">(g)</a><br/>|<a title="マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。">(h)</a><br/>|<a title="フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。">(i)</a><br/>|<a title="ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。">(j)</a><br/>|<a title="その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。">(k)</a><br/>|<a title="ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。">(l)</a><br/>|<a title="ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。">(m)</a><br/>|<a title="オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。">(n)</a><br/>|<a title="ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。">(o)</a><br/>|<a title="一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。">(p)</a><br/>|
-|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|_グリッド_|||||||||||||||||
-| - Grid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - HierarchicalGrid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - TreeGrid|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-|_その他_||||||||||<span class="greenCheck" />*|||||||
-| - Avatar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Badge|<span class="greenCheck" />||<span class="greenCheck" />|||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Bottom navigation|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Button|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Button group|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Calendar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Card|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Carousel|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - Checkbox|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Chip|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Circular progress|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Combo|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Date time input|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Date picker|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Divider|<span class="greenCheck" />||<span class="greenCheck" />|||||||||<span class="greenCheck" />|||||
-| - Dialog|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Drop down|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Expansion panel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Icon|||<span class="greenCheck" />|||||||||<span class="redCheck" />|||||
-| - Input|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Input group|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Linear progress|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - List|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Navbar|<span class="greenCheck" />||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Navigation drawer|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Radio group|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Radio|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Select|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Slider|||<span class="greenCheck" />|||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Snackbar|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-| - Switch|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Tabs|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="greenCheck" />||<span class="greenCheck" />|||
-| - Time picker|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />|||
-| - Toast|||<span class="greenCheck" />|<span class="greenCheck" />||||||<span class="greenCheck" />*||<span class="redCheck" />||<span class="greenCheck" />||<span class="redCheck" />|
-
-**凡例**
-
-||||
-|---|---|---|
-|<span class="greenCheck" />|コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。||
-|<span class="greenCheck" />*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。| 例: **NoopAnimationsModule**ユーティリティ モジュールを使用してアニメーションの無効化を許可します。|
-|<span class="redCheck" />|コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。||
-|'空白'|この特定の規則はコントロールに適用されません。||
-
-<DocsAside type="warning" title="警告">
-上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。
-</DocsAside>
-
-### 法令遵守情報
-
-- **a** - あらゆる非テキスト要素に対してテキスト相当物を提供するものとします(つまり、「alt」、「longdesc」を介して、または要素コンテンツで)。
-- **b** - マルチメディア プレゼンテーションに相当する代替物をプレゼンテーションと同期するものとします。
-- **c** - 色によって伝達されるすべての情報が色を使用しなくても理解できるように (たとえば、コンテキストやマークアップ) Web ページを設計するものとします。
-- **d** - ドキュメントは、関連付けられたスタイル シートがなくても読めるように構成されます。
-- **e** - サーバー側の画像マップのアクティブな領域ごとに冗長なテキスト リンクが提供されます。
-- **f** - その領域を使用可能な幾何学的形状で定義できない場合を除いて、サーバー側の画像マップの代わりにクライアント側の画像マップが提供されます。
-- **g** - 行ヘッダーと列ヘッダーは、データ テーブル用に識別される必要があります。
-- **h** - マークアップは、行または列のヘッダーの 2 つ以上の論理レベルを有するデータ テーブル用にデータ セルとヘッダー セルを関連づけるために使用します。
-- **i** - フレームには、フレームの識別とナビゲーションを簡略化するテキストでタイトルが付けられます。
-- **j** - ページは、2 Hz より大きく、55 Hz を下回る周波数で画面がちらつかないように設計するものとします。
-- **k** - その他のいかなる方法でも規定に準拠できない時に、Web サイトがこの部分の規定に準拠するように、相当する情報または機能を含むテキストのみのページを提供するものとします。主要なページが変更するとテキストのみのページのコンテンツは必ず更新されるものとします。
-- **l** - ページがスクリプト言語を利用してコンテンツを表示、またはインターフェイス要素を作成する場合、スクリプトによって提供される情報は支援技術が読み取ることのできる関数テキストで識別されるものとします。
-- **m** - ページのコンテンツを解釈するためにアプレット、プラグインまたはその他のアプリケーションがクライアント システムに存在することを Web ページが必要とする時には、ページは §1194.21(a) から (l) に準拠するプラグインまたはアプレットへのリンクを提供する必要があります。
-- **n** - オンラインですべての項目に記入するように電子的フォームが設計されている場合には、そのフォームによって、補助技術を使用するユーザーは、すべての指示と手掛かりを含めた、フォームの完成と提出に必要な情報、フィールド要素、および機能にアクセスすることができます。
-- **o** - ユーザーが反復するナビゲーション リンクをスキップすることができる方法を提供します。
-- **p** - 一定の時間内での応答が要求される場合、ユーザーは警告を受け、追加時間が必要な旨を伝える十分な時間が与えられます。
-
-## WCAG の準拠
-[WCAG](https://www.w3.org/WAI/WCAG21/quickref/?showtechniques=111) は、アクセシブルな Web コンテンツを開発する方法に関する正式なガイドラインのセットです。これらの規格は、508 規格に同一または非常に類似していますが、より高いレベルのアクセシビリティを表しています。WCAG は主に HTML のアクセシビリティに焦点を当てます。
-
-|**コンポーネント/ガイドライン**|<a title="代替テキスト - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。">1.1</a><br/>|<a title="時間ベースのメディア - 時間ベースのメディアの代替物を提供します。">1.2</a><br/>|<a title="適応可能 - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。">1.3 </a><br/>|<a title="識別可能 - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。">1.4</a><br/>|<a title="キーボードでアクセス可能 - すべての機能をキーボードで使用できるようにします。">2.1</a><br/>|<a title="十分な時間 - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。">2.2</a><br/>|<a title="発作と身体的な反応 - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。">2.3</a><br/>|<a title="ナビゲート可能 - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。">2.4</a><br/>|<a title="入力モダリティ - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。<br/>">2.5</a><br/>|<a title="可読 - テキスト コンテンツを読みやすく、理解しやすくします。">3.1</a><br/>|<a title="予測可能 - Web ページを予測可能な方法で表示して動作させる。">3.2</a><br/>|<a title="入力支援 - ユーザーが間違いを回避して修正できるようにします。">3.3</a><br/>|<a title="互換性 - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。">4.1 </a><br/>|
-|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
-|_グリッド_||||||||||||||
-| - Grid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - HierarchicalGrid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - TreeGrid|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-|_その他_|||||||<span class="greenCheck" />*|||||||
-| - Avatar|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Badge|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Banner|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Bottom navigation||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Button||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Button group||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Calendar|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*||<span class="greenCheck" />|
-| - Card|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Carousel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Checkbox|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|||
-| - Chip||||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Circular progress|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*|||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Combo|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Date time editor||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Date picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Divider|<span class="greenCheck" />||||||||||<span class="greenCheck" />*|||
-| - Dialog|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Drop down|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Expansion panel|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Icon||||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Input|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Input group|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />||
-| - Label|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Linear progress|<span class="greenCheck" />|||<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*|||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - List|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||||<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Month picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Navbar|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Navigation drawer|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Radio group|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Radio|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Select|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Slider||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Snackbar|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Switch|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Tabs|<span class="greenCheck" />|||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Time picker||||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|<span class="greenCheck" />|<span class="greenCheck" />|
-| - Toast|||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="greenCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-| - Tooltip|<span class="greenCheck" />||<span class="greenCheck" />|<span class="greenCheck" />||<span class="greenCheck" />*|<span class="greenCheck" />*||<span class="redCheck" />|<span class="greenCheck" />|<span class="greenCheck" />*|||
-
-**凡例**
-
-||||
-|---|---|---|
-|<span class="greenCheck" />|コントロール/コンポーネントは、この特定の領域でユーザー補助に完全に対応しています。||
-|<span class="greenCheck" />*|コントロール/コンポーネントは、この特定の領域で特定の構成を実装した後にアクセスできます。|例 1: ガイドライン 2.2. 特定のコンポーネントでは、追加のアクションと時間パラメーターを設定する必要があります。例 2: ガイドライン 2.3. **NoopAnimationsModule**ユーティリティ モジュールを使用してアニメーションの無効化を許可します。|
-|<span class="redCheck" />|コントロール/コンポーネント: 一部の種類のアクションを実行しない限り、完全にはユーザー補助に対応しません。||
-|'空白'|この特定の規則はコントロールに適用されません。||
-
-<DocsAside type="warning" title="警告">
-上記のテーブルは、Ignite UI for Angular テーマ ライブラリのデフォルト テーマにのみ関連しています。カスタム テーマ、タイポグラフィ、およびアニメーションと色に関連する視覚的な変更に関しては、チェックリストへの準拠が異なる場合があります。
-</DocsAside>
-
-### 法令遵守情報
-
-- **原則 1 - 知覚可能** - 情報およびユーザー インターフェイス コンポーネントは、ユーザーが知覚できるように提示されなければなりません。
-  - ガイドライン 1.1 – **代替テキスト** - テキスト以外のコンテンツの代替テキストを提供して、大きな活字、点字、音声、記号、より単純な言語など、他の形式に変更できるようにします。
-  - ガイドライン 1.2 – **時間ベースのメディア** - 時間ベースのメディアの代替物を提供します。
-  - ガイドライン 1.3 – **適応可能** - 情報や構造を失うことなく、さまざまな方法 (たとえば、よりシンプルなレイアウト) で提示できるコンテンツを作成します。
-  - ガイドライン 1.4 – **識別可能** - 前景を背景から分離するなど、ユーザーがコンテンツをより簡単に視聴できるようにします。
-- **原則 2 – 操作可能** - ユーザー インターフェイス コンポーネントとナビゲーションは操作可能でなければなりません。
-  - ガイドライン 2.1 – **キーボードでアクセス可能** - すべての機能をキーボードで使用できるようにします。
-  - ガイドライン 2.2 – **十分な時間** - ユーザーがコンテンツを読んで使用するのに十分な時間を提供します。
-  - ガイドライン 2.3 – **発作と身体的な反応** - 発作または身体的な反応を引き起こすことが知られている方法でコンテンツをデザインしないでください。
-  - ガイドライン 2.4 – **ナビゲート可能** - ユーザーがナビゲートし、コンテンツを見つけ、そしてどこにいるかを判別するのに役立つ方法を提供します。
-  - ガイドライン 2.5 – **入力モダリティ** - ユーザーがキーボード以外のさまざまな入力を介して機能を簡単に操作できるようにします。
-- **原則 3 – 理解可能** - ユーザー インターフェイスの情報と操作は理解可能でなければなりません。
-  - ガイドライン 3.1 – **可読** - テキスト コンテンツを読みやすく、理解しやすくします。
-  - ガイドライン 3.2 – **予測可能** - Web ページを予測可能な方法で表示して動作させる。
-  - ガイドライン 3.3 – **入力支援** - ユーザーが間違いを回避して修正できるようにします。
-- **原則 4 – 堅牢** - コンテンツは、支援技術を含むさまざまなユーザー エージェントが解釈できるほど堅牢でなければなりません。
-  - ガイドライン 4.1 – **互換性** - 支援技術を含む現在および将来のユーザー エージェントとの互換性を最大化します。
-
-## WAI-ARIA サポート
-2014 年に W3C は [WAI-ARIA 仕様](http://www.w3.org/TR/wai-aria/)を完成しました。障害を持つユーザーに Web コンテンツおよび Web アプリケーションへのアクセシビリティを提供するデザインを定義したものです。
diff --git a/docs/angular/src/content/jp/components/linear-gauge.mdx b/docs/angular/src/content/jp/components/linear-gauge.mdx
deleted file mode 100644
index 2ff7bc9568..0000000000
--- a/docs/angular/src/content/jp/components/linear-gauge.mdx
+++ /dev/null
@@ -1,336 +0,0 @@
----
-title: "Angular リニア ゲージ | データ可視化ツール | インフラジスティックス"
-description: インフラジスティックスの Angular リニア ゲージ コントロールを使用して、シンプルで簡潔なビューでデータを可視化します。Ignite UI for Angular リニア ゲージの設定可能な要素について説明します。
-keywords: linear gauge, Ignite UI for Angular, Infragistics, animation, labels, needle, scales, ranges, tick marks, リニア ゲージ, インフラジスティックス, アニメーション, ラベル, 針, スケール, 範囲, 目盛
-license: commercial
-mentionedTypes: ["LinearGauge"]
-namespace: Infragistics.Controls.Gauges
-_language: ja
-llms:
-  description: "Ignite UI for Angular リニア ゲージ コンポーネントを使用すると、リニア ゲージの形式でデータを視覚化できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular リニア ゲージの概要
-
-Ignite UI for Angular リニア ゲージ コンポーネントを使用すると、リニア ゲージの形式でデータを視覚化できます。<ApiLink type="LinearGauge" /> は、スケールおよび 1 つ以上の範囲と比較した値のシンプルで簡潔なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。このコンポーネントには、アニメーション化されたトランジションのサポートも組み込まれており、アニメーションでは、<ApiLink type="LinearGauge" member="transitionDuration" label="TransitionDuration" /> プロパティの設定で簡単にカスタマイズできます。また構成可能な向きや方向、視覚要素やツールチップなどがサポートされます。
-
-## Angular リニア ゲージの例
-
-以下のサンプルは、同じ <ApiLink type="LinearGauge" /> でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
-<Sample src="/gauges/linear-gauge/animation" height={155} alt="Angular リニア ゲージの例" />
-
-## 依存関係
-
-Angular gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## モジュールの要件
-
-<ApiLink type="LinearGauge" /> を作成するには、以下のモジュールが必要です。
-
-```ts
-// app.module.ts
-import { IgxLinearGaugeModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxLinearGaugeModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-以下のコードは針およびスケールで 3 つの比較範囲を含むリニア ゲージを作成する方法を紹介します。
-
-```html
- <igx-linear-gauge width="700px"
-                   height="30px"
-                   minimumValue="5"
-                   maximumValue="55"
-                   value="43">
-    <igx-linear-graph-range startValue="0"
-                            endValue="15"
-                            brush="red">
-    </igx-linear-graph-range>
-    <igx-linear-graph-range startValue="15"
-                            endValue="30"
-                            brush="yellow">
-    </igx-linear-graph-range>
-    <igx-linear-graph-range startValue="30"
-                            endValue="55"
-                            brush="green">
-    </igx-linear-graph-range>
- </igx-linear-gauge>
-```
-
-## 針
-
-これは、コンポーネントで表示されるプライマリ メジャーでバーで可視化されます。あるいは以下で示す図形のほとんどすべてをカスタマイズすることもできます。
-
-```html
- <igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100 interval=10
-    value=50
-    isNeedleDraggingEnabled=true
-    needleShape="Custom"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleStrokeThickness=1
-    needleBreadth=15
-    needleInnerExtent=0.35
-    needleOuterExtent=0.65
-    needleOuterPointExtent=0.8
-    needleInnerPointExtent=0.325
-    needleInnerPointWidth=0
-    needleOuterPointWidth=0.3
-    needleInnerBaseWidth=0
-    needleOuterBaseWidth=0.07>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/needle" height={125} alt="Angular リニア ゲージのneedle" />
-
-## 針のハイライト
-
-リニア ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の <ApiLink type="LinearGauge" member="value" label="Value" /> の不透明度が低く表示されます。これを有効にするには、まず <ApiLink type="LinearGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> を Overlay に設定し、次に <ApiLink type="LinearGauge" member="highlightValue" label="HighlightValue" /> を適用します。
-
-```html
-<igx-linear-gauge
-    #linearGauge
-    height="80px"
-    width="400px"
-    value=70
-    minimumValue=0
-    maximumValue=100
-    interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    needleBrush="Blue"
-    highlightValueDisplayMode="Overlay"
-    highlightValue=25
-    isHighlightNeedleDraggingEnabled=true>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/highlight-needle" height={125} alt="Angular リニア ゲージの針のハイライト" />
-
-## 範囲
-
-範囲はスケールで指定した値の範囲をハイライト表示する視覚的な要素です。その目的は、パフォーマンス バー メジャーの質的状態を視覚で伝えると同時に、その状態をレベルとして示すことにあります。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    rangeBrushes="#a4bd29, #F86232"
-    rangeOutlines="#a4bd29, #F86232" >
-    <igx-linear-graph-range
-        startValue=0 endValue=50
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.25 outerEndExtent=0.4>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=50 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.4 outerEndExtent=0.55>
-    </igx-linear-graph-range>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/ranges" height={125} alt="Angular リニア ゲージの範囲" />
-
-## 目盛
-
-目盛は、リニア ゲージを読み取りやすくするために、目盛の間隔でスケールを分割して見せる役割を果たします。
-
-主目盛 - 主目盛は、スケールの主要な区切りとして使用されます。表示間隔、範囲、およびスタイルは、対応するプロパティを設定し制御できます。
-
-補助目盛 - 補助目盛は主目盛を補助し、スケールの数値を読み取りやすくするために追加して使用します。主目盛と同じ方法でカスタマイズできます。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100
-    interval=10
-    tickBrush="DodgerBlue"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.25
-    tickEndExtent=0.05
-    minorTickCount=4
-    minorTickBrush="DarkViolet"
-    minorTickEndExtent=0.05
-    minorTickStartExtent=0.15
-    minorTickStrokeThickness=1>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/tickmarks" height={125} alt="Angular リニア ゲージの目盛" />
-
-## ラベル
-
-ラベルはスケールのメジャーを示します。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="DodgerBlue"
-    font="11px Verdana">
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/labels" height={125} alt="Angular リニア ゲージのラベル" />
-
-## バッキング
-
-バッキング要素はブレット グラフ コントロールの背景と境界線を表します。常に最初に描画される要素でラベルやメモリなどの残りの要素は互いにオーバーレイします。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    backingBrush="#bddcfc"
-    backingOutline="DodgerBlue"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/backing" height={125} alt="Angular リニア ゲージのバッキング" />
-
-## スケール
-
-スケールはゲージで値の全範囲をハイライト表示する視覚的な要素です。外観やスケールの図形のカスタマイズ、更にスケールを反転 (<ApiLink type="LinearGauge" member="isScaleInverted" label="IsScaleInverted" /> プロパティを使用) させて、すべてのラベルを左から右ではなく、右から左へ描画することもできます。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10
-    isScaleInverted=false
-    scaleBrush="DodgerBlue"
-    scaleOutline="DarkViolet"
-    scaleStrokeThickness=1
-    scaleInnerExtent=0.05
-    scaleOuterExtent=0.65
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95>
-</igx-linear-gauge>
-```
-
-<Sample src="/gauges/linear-gauge/scale" height={125} alt="Angular リニア ゲージのスケール" />
-
-## まとめ
-
-上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
-
-```html
-<igx-linear-gauge
-    height="80px" width="400px"
-    minimumValue=0
-    maximumValue=100
-
-    labelInterval=10
-    labelExtent=0.025
-    labelsPreTerminal=0
-    labelsPostInitial=0
-    fontBrush="Black"
-    font="11px Verdana"
-
-    interval=10
-    tickBrush="Black"
-    ticksPreTerminal=0
-    ticksPostInitial=0
-    tickStrokeThickness=2
-    tickStartExtent=0.25
-    tickEndExtent=0.05
-
-    minorTickCount=4
-    minorTickBrush="Black"
-    minorTickEndExtent=0.05
-    minorTickStartExtent=0.15
-    minorTickStrokeThickness=1
-
-    value=50
-    isNeedleDraggingEnabled=true
-    needleShape="Custom"
-    needleBrush="Black"
-    needleOutline="Black"
-    needleStrokeThickness=1
-    needleBreadth=15
-    needleInnerExtent=0.35
-    needleOuterExtent=0.65
-    needleOuterPointExtent=0.8
-    needleInnerPointExtent=0.325
-    needleInnerPointWidth=0
-    needleOuterPointWidth=0.3
-    needleInnerBaseWidth=0
-    needleOuterBaseWidth=0.07
-
-    isScaleInverted=false
-    scaleBrush="Gray"
-    scaleOutline="Gray"
-    scaleStrokeThickness=1
-    scaleInnerExtent=0.05
-    scaleOuterExtent=0.65
-    scaleStartExtent=0.05
-    scaleEndExtent=0.95
-
-    backingBrush="#cecece"
-    backingOutline="#cecece"
-    backingStrokeThickness=4
-    backingInnerExtent=0
-    backingOuterExtent=1
-
-    rangeBrushes ="#C62828, #F96232, #FF9800"
-    rangeOutlines="#C62828, #F96232, #FF9800">
-    <igx-linear-graph-range
-        startValue=0 endValue=50
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.25 outerEndExtent=0.4>
-    </igx-linear-graph-range>
-    <igx-linear-graph-range
-        startValue=50 endValue=100
-        innerStartExtent=0.075 innerEndExtent=0.075
-        outerStartExtent=0.4 outerEndExtent=0.55>
-    </igx-linear-graph-range>
-</igx-linear-gauge>
-```
-
-## API リファレンス
-
-<ApiLink type="LinearGauge" /><br />
-<ApiLink type="LinearGraphRange" /><br />
-
-## その他のリソース
-
-その他のゲージ タイプの詳細については、以下のトピックを参照してください。
-
-- [ブレット グラフ](bullet-graph.md)
-- [ラジアル ゲージ](radial-gauge.md)
diff --git a/docs/angular/src/content/jp/components/maps/map-api.mdx b/docs/angular/src/content/jp/components/maps/map-api.mdx
deleted file mode 100644
index f9f661a2de..0000000000
--- a/docs/angular/src/content/jp/components/maps/map-api.mdx
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: "Angular チャート API | データ視覚化ツール | インフラジスティックス"
-description: インフラジスティックスの Ignite UI for Angular マップは、マップ ビジュアルを構成およびスタイル設定するための便利な API を提供します。
-keywords: "Angular maps, geographic, map API, API, Angular マップ, 地理, マップ API, API, Ignite UI for Angular"
-license: commercial
-mentionedTypes: ["GeographicMap", "Series", "SeriesViewer", "GeographicSymbolSeries", "GeographicProportionalSymbolSeries", "GeographicShapeSeries", "GeographicHighDensityScatterSeries", "GeographicScatterAreaSeries", "GeographicContourLineSeries", "GeographicShapeSeriesBase"]
-namespace: Infragistics.Controls.Maps
-_language: ja
-llms:
-  description: "インフラジスティックスの Ignite UI for Angular マップは、マップ ビジュアルを構成およびスタイル設定するための便利な API を提供します。"
----
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular 地理マップ API
-
-Angular <ApiLink type="GeographicMap" /> には次の API メンバーがあります:
-
-- <ApiLink type="GeographicMap" member="zoomable" label="Zoomable" />
-- <ApiLink type="GeographicMap" member="zoomToGeographic" label="ZoomToGeographic" />
-- <ApiLink type="GeographicMap" member="worldRect" label="WorldRect" />
-- <ApiLink type="GeographicMap" member="windowRect" label="WindowRect" />
-- <ApiLink type="GeographicMap" member="windowScale" label="WindowScale" />
-- <ApiLink type="GeographicMap" member="getGeographicFromZoom" label="GetGeographicFromZoom" />
-- <ApiLink type="GeographicMap" member="getGeographicPoint" label="GetGeographicPoint" />
-- <ApiLink type="GeographicMap" member="getPixelPoint" label="GetPixelPoint" />
-
-## Angular 地理的シリーズの種類
-
-Angular <ApiLink type="GeographicMap" /> には 7 種類のシリーズがあり、データ バインディング用の <ApiLink type="Series" member="dataSource" label="ItemsSource" /> プロパティがあります。
-
-- <ApiLink type="GeographicHighDensityScatterSeries" />
-- <ApiLink type="GeographicSymbolSeries" />
-- <ApiLink type="GeographicProportionalSymbolSeries" />
-- <ApiLink type="GeographicPolylineSeries" />
-- <ApiLink type="GeographicShapeSeries" />
-- <ApiLink type="GeographicScatterAreaSeries" />
-- <ApiLink type="GeographicContourLineSeries" />
-
-さらに、シリーズの各種類には、データ項目をマッピングし、その外観をスタイル設定するための特定のプロパティがあります。
-
-## Angular 地理記号シリーズ API
-
-Angular <ApiLink type="GeographicSymbolSeries" /> (地理マーカー シリーズ) には、次の API メンバーがあります。
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="markerType" label="MarkerType" />
-- <ApiLink type="GeographicSymbolSeries" member="markerBrush" label="MarkerBrush" />
-- <ApiLink type="GeographicSymbolSeries" member="markerOutline" label="MarkerOutline" />
-
-## Angular 地理バブル シリーズ API
-
-Angular <ApiLink type="GeographicProportionalSymbolSeries" /> (地理バブル シリーズ) には、次の API メンバーがあります。
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="radiusMemberPath" label="RadiusMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="radiusScale" label="RadiusScale" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillScale" label="FillScale" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillMemberPath" label="FillMemberPath" />
-
-## Angular 地理シェイプ シリーズ API
-
-Angular <ApiLink type="GeographicShapeSeries" /> と <ApiLink type="GeographicPolylineSeries" /> には同じ API メンバーがあります。
-
-- <ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />
-- <ApiLink type="Series" member="thickness" label="Thickness" />
-- <ApiLink type="Series" member="brush" label="Brush" />
-- <ApiLink type="Series" member="outline" label="Outline" />
-
-## Angular 地理エリア シリーズ API
-
-Angular <ApiLink type="GeographicScatterAreaSeries" /> には、次の API メンバーがあります。
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicScatterAreaSeries" member="colorMemberPath" label="ColorMemberPath" />
-- <ApiLink type="GeographicScatterAreaSeries" member="colorScale" label="ColorScale" />
-
-## Angular 地理等高線シリーズ API
-
-Angular <ApiLink type="GeographicContourLineSeries" /> には、次の API メンバーがあります。
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicContourLineSeries" member="valueMemberPath" label="ValueMemberPath" />
-- <ApiLink type="GeographicProportionalSymbolSeries" member="fillScale" label="FillScale" />
-
-## Angular 地理 HD シリーズ API
-
-Angular <ApiLink type="GeographicHighDensityScatterSeries" /> には、次の API メンバーがあります。
-
-- <ApiLink type="GeographicSymbolSeries" member="latitudeMemberPath" label="LatitudeMemberPath" />
-- <ApiLink type="GeographicSymbolSeries" member="longitudeMemberPath" label="LongitudeMemberPath" />
-- <ApiLink type="GeographicHighDensityScatterSeries" member="heatMaximumColor" label="HeatMaximumColor" />
-- <ApiLink type="GeographicHighDensityScatterSeries" member="heatMinimumColor" label="HeatMinimumColor" />
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/components/menus/toolbar.mdx b/docs/angular/src/content/jp/components/menus/toolbar.mdx
deleted file mode 100644
index 834a1df00a..0000000000
--- a/docs/angular/src/content/jp/components/menus/toolbar.mdx
+++ /dev/null
@@ -1,235 +0,0 @@
----
-title: "Angular Toolbar コンポーネント | Ignite UI for Angular"
-description: "Angular ツールバー コンポーネントを簡単に始める方法をご覧ください。データ チャートと互換性があります。"
-keywords: "Ignite UI for Angular, UI コントロール, Angular ウィジェット, web ウィジェット, UI ウィジェット, Angular, ネイティブ Angular コンポーネント スイート, ネイティブ Angular コントロール, ネイティブ Angular コンポーネント ライブラリ, Angular ツールバー コンポーネント, Angular ツールバー コントロール"
-license: commercial
-mentionedTypes: ["Toolbar", "ToolAction", "DomainChart", "CategoryChart", "DataChart", "TrendLineType"]
-_language: ja
-llms:
-  description: "Angular ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Toolbar (ツールバー) の概要
-
-Angular ツールバー コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
-
-## Angular ツールバーの例
-
-<Sample src="/charts/toolbar/actions-built-in-category-chart" height={600} alt="Angular ツールバーの例" />
-
-## 依存関係
-
-Ignite UI for Angular のレイアウト、入力、チャート、コア パッケージをインストールします。
-
-```cmd
-npm install igniteui-angular-layouts
-npm install igniteui-angular-inputs
-npm install igniteui-angular-charts
-npm install igniteui-angular-core
-```
-
-<ApiLink type="DataChart" /> コンポーネントとその機能とともに <ApiLink type="Toolbar" /> を使用する場合、次のモジュールが必要です。
-
-```ts
-import { IgxToolbarModule } from 'igniteui-angular-layouts';
-import { IgxDataChartToolbarModule, IgxDataChartCoreModule, IgxDataChartCategoryModule, IgxDataChartAnnotationModule, IgxDataChartInteractivityModule, IgxDataChartCategoryTrendLineModule  } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxToolbarModule,
-        IgxDataChartToolbarModule,
-        IgxDataChartCoreModule,
-        IgxDataChartCategoryModule,
-        IgxDataChartAnnotationModule,
-        IgxDataChartInteractivityModule,
-        IgxDataChartCategoryTrendLineModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-### ツール操作
-
-以下は、ツールバーに追加できるさまざまな <ApiLink type="ToolAction" /> 項目のリストです。
-
-- <ApiLink type="ToolActionButton" />
-- <ApiLink type="ToolActionCheckbox" />
-- <ApiLink type="ToolActionIconButton" />
-- <ApiLink type="ToolActionIconMenu" />
-- <ApiLink type="ToolActionLabel" />
-- <ApiLink type="ToolActionNumberInput" />
-- <ApiLink type="ToolActionRadio" />
-- <ApiLink type="ToolActionSubPanel" />
-
-これらのツールはそれぞれ、マウスのクリックによってトリガーされる `OnCommand` イベントを公開します。注: <ApiLink type="ToolActionIconMenu" /> は、<ApiLink type="ToolActionIconMenu" /> 内にラップすることもできる他のツールのラッパーです。
-
-<ApiLink type="ToolAction" /> オブジェクトの <ApiLink type="ToolAction" member="overlayId" label="OverlayId" />、<ApiLink type="ToolAction" member="beforeId" label="BeforeId" />、および <ApiLink type="ToolAction" member="afterId" label="AfterId" /> プロパティを使用して、新規および既存のツールの位置を変更したり、非表示にマークしたりすることができます。ToolActions は <ApiLink type="ToolAction" member="visibility" label="Visibility" /> プロパティも公開します。
-
-次の例は、いくつかの機能を示しています。まず、**ZoomReset** や **AnalyzeMenu** メニュー ツール操作などの組み込みツールを非表示にするなど、<ApiLink type="ToolActionSubPanel" /> でツールをグループ化できます。この例では、<ApiLink type="ToolAction" member="afterId" label="AfterId" /> プロパティを使用して **ZoomMenu** 内に **ZoomReset** ツール操作の新しいインスタンスを作成し、それを **ZoomOut** に割り当てて配置を正確にします。また、ツールの <ApiLink type="ToolAction" member="isHighlighted" label="IsHighlighted" /> プロパティによってもハイライト表示されます。
-
-<Sample src="/charts/toolbar/layout-actions-for-data-chart" height={600} alt="Angular Toolbar の例" />
-
-### Angular データ チャートの統合
-
-Angular ツールバーには、<ApiLink type="Toolbar" member="Target" label="Target" /> プロパティが含まれています。これは、以下のコードに示すように、<ApiLink type="DataChart" /> などのコンポーネントをリンクするために使用されます。
-
-```html
-  <div class="legend">
-    <igx-toolbar
-      name="toolbar"
-      [target]="chart"
-      #toolbar>
-    </igx-toolbar>
-  </div>
-  <div class="container fill">
-    <igx-data-chart
-    name="chart"
-    #chart>
-  </igx-data-chart>
-```
-
-<ApiLink type="DataChart" /> が Toolbar にリンクされると、いくつかの既存の <ApiLink type="ToolAction" /> 項目とメニューが使用可能になります。以下は、組み込みの Angular <ApiLink type="DataChart" /> ツール操作とそれに関連付けられた <ApiLink type="ToolAction" member="overlayId" label="OverlayId" /> のリストです。
-
-ズーム操作
-
-- `ZoomMenu`: チャートのズーム レベルを増減するための <ApiLink type="DomainChart" member="zoomIn" label="ZoomIn" /> および <ApiLink type="DomainChart" member="zoomOut" label="ZoomOut" /> メソッドを呼び出す 3 つの <ApiLink type="ToolActionLabel" /> 項目を公開する <ApiLink type="ToolActionIconMenu" /> には、チャートの <ApiLink type="DomainChart" member="resetZoom" label="ResetZoom" /> メソッドを呼び出してズーム レベルをデフォルトの位置にリセットする `ZoomReset` が含まれます。
-
-トレンド操作
-
-- `AnalyzeMenu`: チャートのさまざまなオプションを構成するためのいくつかのオプションを含む <ApiLink type="ToolActionIconMenu" />。
-- `AnalyzeHeader`: サブ セクションのヘッダー。
-  - `LinesMenu`: チャート上で水平破線を表示するためのさまざまなツールが含まれるサブ メニュー。
-  - `LinesHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー:
-  - `MaxValue`: シリーズの最大値で yAxis に沿って水平破線を表示する <ApiLink type="ToolActionCheckbox" />。
-  - `MinValue`: シリーズの最小値で yAxis に沿って水平破線を表示する <ApiLink type="ToolActionCheckbox" />。
-  - <ApiLink type="ValueLayerValueMode" member="Average" label="Average" />:  シリーズの平均値で yAxis に沿って水平破線を表示する <ApiLink type="ToolActionCheckbox" />。
-  - `TrendsMenu`: さまざまな近似曲線を <ApiLink type="DataChart" /> プロット領域に適用するためのツールを含むサブ メニュー。
-  - `TrendsHeader`: 次の 3 つのツールのサブメニュー セクション ヘッダー:
-  - **Exponential**: チャート内の各シリーズの <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> を **ExponentialFit** に設定する <ApiLink type="ToolActionRadio" />。
-  - **Linear**: チャート内の各シリーズの <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> を **LinearFit** に設定する <ApiLink type="ToolActionRadio" />。
-  - **Logarithmic**: チャート内の各シリーズの <ApiLink type="DomainChart" member="trendLineType" label="TrendLineType" /> を **LogarithmicFit** に設定する <ApiLink type="ToolActionRadio" />。
-- `HelpersHeader`: サブ セクションのヘッダー。
-  - `SeriesAvg`: <ApiLink type="ValueLayerValueMode" member="Average" label="Average" /> タイプの <ApiLink type="ValueLayerValueMode" /> を使用して、チャートのシリーズ コレクションに <ApiLink type="ValueLayer" /> を追加または削除する <ApiLink type="ToolActionCheckbox" />。
-  - `ValueLabelsMenu`: <ApiLink type="DataChart" /> のプロット領域に注釈を表示するためのさまざまなツールを含むサブ メニュー。
-  - `ValueLabelsHeader`: 次のツールのサブ メニュー セクション ヘッダー:
-  - `ShowValueLabels`: <ApiLink type="CalloutLayer" /> を使用してデータ ポイント値を切り替える <ApiLink type="ToolActionCheckbox" />。
-  - `ShowLastValueLabel`: <ApiLink type="FinalValueLayer" /> を使用して最終値軸の注釈を切り替える <ApiLink type="ToolActionCheckbox" />。
-- `ShowCrosshairs`: チャートの <ApiLink type="DomainChart" member="crosshairsDisplayMode" label="CrosshairsDisplayMode" /> プロパティを介してマウスオーバー十字線の注釈を切り替える <ApiLink type="ToolActionCheckbox" />。
-- `ShowGridlines`: X-Axis に `MajorStroke` を適用することで追加のグリッド線を切り替える <ApiLink type="ToolActionCheckbox" />。
-
-画像に保存アクション
-
-- `CopyAsImage`: チャートをクリップボードにコピーするオプションを公開する <ApiLink type="ToolActionLabel" />。
-- `CopyHeader`: サブ セクションのヘッダー。
-
-### SVG アイコン
-
-ツールを手動で追加する場合、`RenderIconFromText` メソッドを使用してアイコンを割り当てることができます。このメソッドには 3 つのパラメーターを渡す必要があります。1 つ目は、ツールで定義されたアイコン コレクション名です (例: <ApiLink type="ToolAction" member="iconCollectionName" label="IconCollectionName" />)。2 つ目は、ツールで定義されたアイコンの名前 (例: <ApiLink type="ToolAction" member="iconName" label="IconName" />) で、その後に SVG 文字列を追加します。
-
-### データ URL アイコン
-
-svg を追加するのと同様に、<ApiLink type="Toolbar" member="registerIconFromDataURL" label="RegisterIconFromDataURL" /> を介して URL からアイコン画像を追加することもできます。メソッドの 3 番目のパラメーターは、文字列 URL を入力するために使用されます。
-
-次のスニペットは、アイコンを追加する両方の方法を示しています。
-
-```html
-<igx-tool-action-label
-    title="Custom Icon"
-    iconName="CustomIcon"
-    iconCollectionName="CustomCollection">
-</igx-tool-action-label>
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
-
-  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
-
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  const icon = '<svg width="28px" height="28px" stroke="none" viewBox="0 0 3.5 3.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--gis" preserveAspectRatio="xMidYMid meet"><path d="M0.436 0.178a0.073 0.073 0 0 0 -0.062 0.036L0.01 0.846a0.073 0.073 0 0 0 0.063 0.109h0.729a0.073 0.073 0 0 0 0.063 -0.109L0.501 0.214a0.073 0.073 0 0 0 -0.064 -0.036zm0.001 0.219 0.238 0.413H0.199zM1.4 0.507v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245zM0.073 1.388A0.073 0.073 0 0 0 0 1.461v0.583a0.073 0.073 0 0 0 0.073 0.073h0.729A0.073 0.073 0 0 0 0.875 2.045V1.461a0.073 0.073 0 0 0 -0.073 -0.073zm0.073 0.146h0.583v0.438H0.146zM1.4 1.674v0.245h0.945v-0.245zm1.19 0v0.245h0.91v-0.245zM0.438 2.447c-0.241 0 -0.438 0.197 -0.438 0.438 0 0.241 0.197 0.438 0.438 0.438s0.438 -0.197 0.438 -0.438c0 -0.241 -0.197 -0.438 -0.438 -0.438zm0 0.146a0.291 0.291 0 0 1 0.292 0.292 0.291 0.291 0 0 1 -0.292 0.292 0.291 0.291 0 0 1 -0.292 -0.292A0.291 0.291 0 0 1 0.438 2.593zM1.4 2.842v0.245h0.525v-0.245zm0.77 0v0.245h1.33v-0.245z" fill="#000000" fill-rule="evenodd"/></svg>';
-
-  this.toolbar.registerIconFromText("CustomCollection", "CustomIcon", icon);
-
-}
-```
-
-```ts
-public toolbarCustomIconOnViewInit(): void {
-
-  toolbar.registerIconFromDataURL("CustomCollection", "CustomIcon", "https://www.svgrepo.com/show/678/calculator.svg");
-
-}
-```
-
-### Vertical Orientation
-
-By default the Angular Toolbar is shown horizontally, but it also has the ability to shown vertically by setting the <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property.
-
-```html
-<igx-toolbar orientation="Vertical" />
-```
-
-The following example demonstrates the vertical orientation of the Angular Toolbar.
-
-<Sample src="/charts/toolbar/layout-in-vertical-orientation" height={600} alt="Angular Vertical Orientation" />
-
-### Color Editor
-
-You can add a custom color editor tool to the the Angular Toolbar, which will also work with the Command event to perform custom styling to your application.
-
-```html
-<igx-toolbar
-  name="toolbar"
-  #toolbar>
-      <igx-tool-action-color-editor
-      title="Series Brush"
-      name="colorEditorTool"
-      #colorEditorTool>
-      </igx-tool-action-color-editor>
-</igx-toolbar>
-```
-
-The following example demonstrates styling the Angular Data Chart series brush with the Color Editor tool.
-<Sample src="/charts/toolbar/color-editor-support" height={600} alt="Angular Color Editor Support" />
-
-{/* ## Styling/Theming
-
-The icon component can be styled by using it's <ApiLink type="Toolbar" member="baseTheme" label="BaseTheme" /> property directly to the <ApiLink type="Toolbar" />.
-
-```html
-<igx-toolbar baseTheme="SlingshotDark" />
-```
-
-{/*The following example demonstrates the various theme options that can be applied.
-<Sample src="/charts/toolbar/theming" height={600} alt="Angular Toolbar Styling/Theming" />
- */}
-
-## API References
-
-<ApiLink type="Toolbar" /><br />
-<ApiLink type="DataChart" /><br />
-
-## Additional Resources
-
-- [Ignite UI for Angular **Forums**](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
-- [Ignite UI for Angular **GitHub**](https://github.com/IgniteUI/igniteui-angular)
diff --git a/docs/angular/src/content/jp/components/radial-gauge.mdx b/docs/angular/src/content/jp/components/radial-gauge.mdx
deleted file mode 100644
index 3a8fa03580..0000000000
--- a/docs/angular/src/content/jp/components/radial-gauge.mdx
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title: "Angular ラジアル ゲージ チャート | データ可視化ツール | インフラジスティックス"
-description: インフラジスティックスの Angular ラジアル ゲージコ ントロールを使用して、魅力的なデータ可視化とダッシュボードを作成し、豊富なスタイルと対話機能を KPI で実現できます。Ignite UI for Angular ラジアル ゲージの設定可能な要素について説明します。
-keywords: Radial Gauge, Ignite UI for Angular, Infragistics, animation, labels, needle, scales, ranges, tick marks, ラジアル ゲージ, インフラジスティックス, アニメーション, ラベル, 針, スケール, 範囲, 目盛
-license: commercial
-mentionedTypes: ["RadialGauge", "RadialGaugeRange"]
-namespace: Infragistics.Controls.Gauges
-_language: ja
-llms:
-  description: "Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ラジアル ゲージの概要
-
-Angular Radial Gauge コンポーネントは、針、目盛り、範囲、ラベルなどの視覚要素をサポートし、定義済みの図形やスケールを表示できます。<ApiLink type="RadialGauge" /> には、アニメーション化されたトランジションのサポートも組み込まれています。アニメーションは、<ApiLink type="RadialGauge" member="transitionDuration" label="TransitionDuration" /> プロパティの設定で簡単にカスタマイズできます。
-
-## Angular ラジアル ゲージの例
-
-以下のサンプルは、同じ <ApiLink type="RadialGauge" /> でいくつかのプロパティを設定して全く異なるゲージにする方法を示します。
-
-<Sample src="/gauges/radial-gauge/animation" height={375} alt="Angular ラジアル ゲージの例" />
-
-## 依存関係
-
-gauge コンポーネントをインストールするときに core パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-gauges
-```
-
-## モジュールの要件
-
-<ApiLink type="RadialGauge" /> を作成するには、以下のモジュールが必要です。
-
-```ts
-// app.module.ts
-import { IgxRadialGaugeModule } from 'igniteui-angular-gauges';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxRadialGaugeModule
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-以下のコードは針およびスケールで 3 つの比較範囲を含むラジアル ゲージを作成する方法を紹介します。
-
-```html
- <igx-radial-gauge height="400px" width="400px"
-    value="25"
-    interval="5"
-    minimumValue="0"
-    maximumValue="100">
-    <igx-radial-gauge-range startValue="0"
-                            endValue="30"
-                            brush="red">
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range startValue="30"
-                            endValue="60"
-                            brush="yellow">
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range startValue="60"
-                            endValue="100"
-                            brush="green">
-    </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-## バッキング
-
-ゲージには、スケールの後ろ側に描かれた背景図形があり、図形はゲージの背景として動作します。
-
-バッキング要素はラジアル ゲージ コントロールの背景と境界線を表します。常に最初に描画される要素で針、ラベルやメモリなどの残りの要素はその上のオーバーレイです。
-
-バッキングは、円形またはフィットにできます。円形の場合は 360 度の円形のゲージが作成されますが、一方フィット図形の場合は <ApiLink type="RadialGauge" member="scaleStartAngle" label="ScaleStartAngle" /> および <ApiLink type="RadialGauge" member="scaleEndAngle" label="ScaleEndAngle" /> プロパティで円弧部分が塗りつぶされます。これには、<ApiLink type="RadialGauge" member="backingShape" label="BackingShape" /> プロパティを設定します。
-
-```html
-<igx-radial-gauge
-    backingShape="Fitted"
-    backingBrush="#fcfcfc"
-    backingOutline="DodgerBlue"
-    backingOversweep=5
-    backingCornerRadius=10
-    backingStrokeThickness=5
-    backingOuterExtent=0.8
-    backingInnerExtent=0.15
-    scaleStartAngle=135 scaleEndAngle=45
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/backing" height={320} alt="Angular ラジアル ゲージのバッキング" />
-
-## スケール
-
-スケールは視覚要素で、<ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> と <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> 値を設定してゲージの値範囲全体をハイライト表示できます。バッキングとともにゲージの全体的な図形を定義します。<ApiLink type="RadialGauge" member="scaleStartAngle" label="ScaleStartAngle" /> と <ApiLink type="RadialGauge" member="scaleEndAngle" label="ScaleEndAngle" /> プロパティは、スケールの円弧の境界線を定義します。<ApiLink type="RadialGauge" member="scaleSweepDirection" label="ScaleSweepDirection" /> プロパティが、スケールが時計回りまたは反時計回りのどちらの方向に動くかを指定します。<ApiLink type="RadialGauge" member="scaleBrush" label="ScaleBrush" />、<ApiLink type="RadialGauge" member="scaleStartExtent" label="ScaleStartExtent" />、<ApiLink type="RadialGauge" member="scaleEndExtent" label="ScaleEndExtent" /> プロパティを設定してスケールの外観をカスタマイズできます。
-
-```html
-<igx-radial-gauge
-    scaleStartAngle=135
-    scaleEndAngle=45
-    scaleBrush="DodgerBlue"
-    scaleSweepDirection="Clockwise"
-    scaleOversweep=1
-    scaleOversweepShape="Fitted"
-    scaleStartExtent=0.45
-    scaleEndExtent=0.575
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/scale" height={320} alt="Angular ラジアル ゲージのスケール" />
-
-## ラベルとタイトル
-
-ゲージ ラベルは <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> と <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> の値の間で指定された間隔で数値を表示する視覚要素です。0 はゲージ中央、1 はゲージ バッキングの外側範囲を表す <ApiLink type="RadialGauge" member="labelExtent" label="LabelExtent" /> プロパティで小数を使用してラベルの配置を設定できます。<ApiLink type="RadialGauge" member="fontBrush" label="FontBrush" /> や <ApiLink type="RadialGauge" member="font" label="Font" /> など、さまざまなスタイル プロパティを設定してラベルをカスタマイズできます。
-
-これらの針のラベルにはそれぞれ、<ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />、<ApiLink type="RadialGauge" member="titleAngle" label="TitleAngle" />、`SubtitleFontSize`、<ApiLink type="RadialGauge" member="highlightLabelBrush" label="HighlightLabelBrush" /> など、フォント、角度、ブラシ、ゲージの中心からの距離を変更するために適用できるさまざまなスタイル属性があります。
-
-```html
-<igx-radial-gauge
-    labelExtent=0.65
-    labelInterval=10
-    font="11px Verdana"
-    fontBrush="DodgerBlue"
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=100 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/labels" height={320} alt="Angular ラジアル ゲージのラベル" />
-
-## タイトルとサブタイトル
-
-<ApiLink type="RadialGauge" member="titleText" label="TitleText" /> プロパティと <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> プロパティが使用可能であり、どちらも針のカスタム テキストを表示するために使用できます。あるいは、<ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> と <ApiLink type="RadialGauge" member="subtitleDisplaysValue" label="SubtitleDisplaysValue" /> を true に設定すると、針の値が表示され、<ApiLink type="RadialGauge" member="titleText" label="TitleText" /> と <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> がオーバーライドされます。したがって、タイトルにカスタム テキストを使用しながらサブタイトルで値を表示したり、その逆を行ったりすることができます。
-
-以下に説明するように針のハイライトが表示されている場合は、<ApiLink type="RadialGauge" member="highlightLabelText" label="HighlightLabelText" /> を介してカスタム テキストを表示できます。それ以外の場合は、<ApiLink type="RadialGauge" member="highlightLabelDisplaysValue" label="HighlightLabelDisplaysValue" /> を有効にしてその値を表示できます。
-
-```html
-<igx-radial-gauge
-    titleText="Global Sales"
-    subtitleText="2024">
-</igx-radial-gauge>
-```
-
-## オプティカル スケーリング
-
-ラジアル ゲージのラベルとタイトルにより、スケーリングを変更できます。これを有効にするには、まず <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> を true に設定します。次に、ラベルが 100% のオプティカル スケーリングを持つサイズを管理する <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> を設定できます。ゲージのサイズが大きくなると、ラベルのフォントも大きくなります。たとえば、このプロパティが 500 に設定され、ゲージのピクセル単位のサイズが 2 倍の 1000 になると、ラベルのフォント サイズは 200% 大きくなります。
-
-<Sample src="/gauges/radial-gauge/optical-scaling" height={500} alt="Angular ラジアル ゲージのオプティカル スケーリング" />
-
-## 目盛
-
-目盛は、ラジアル ゲージの中央から放射状に表示される細い線です。目盛には、主目盛および副目盛の 2 種類があり、主目盛りは <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> と <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> の間の <ApiLink type="RadialGauge" member="interval" label="Interval" /> に表示されます。また <ApiLink type="RadialGauge" member="minorTickCount" label="MinorTickCount" /> プロパティは、隣接する 2 つの主目盛間の副目盛の数を指定します。目盛りの長さは、<ApiLink type="RadialGauge" member="tickStartExtent" label="TickStartExtent" />、<ApiLink type="RadialGauge" member="tickEndExtent" label="TickEndExtent" />、<ApiLink type="RadialGauge" member="minorTickStartExtent" label="MinorTickStartExtent" />、<ApiLink type="RadialGauge" member="minorTickEndExtent" label="MinorTickEndExtent" /> に少数値 (0 から 1 の間) を設定して制御できます。
-
-```html
-<igx-radial-gauge
-    tickStartExtent=0.45
-    tickEndExtent=0.575
-    tickStrokeThickness=2
-    tickBrush="DodgerBlue"
-    minorTickCount=4
-    minorTickEndExtent=0.5
-    minorTickStartExtent=0.575
-    minorTickStrokeThickness=1
-    minorTickBrush="DarkViolet"
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/tickmarks" height={320} alt="Angular ラジアル ゲージの目盛" />
-
-## 範囲
-
-範囲に <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> や <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> プロパティで指定した連続値の境界をハイライト表示します。開始値と終了値を指定してゲージに複数の範囲を追加でき、各範囲には、<ApiLink type="RadialGaugeRange" member="brush" label="Brush" /> や <ApiLink type="RadialGaugeRange" member="outline" label="Outline" /> などのカスタマイズ プロパティがあります。または、<ApiLink type="RadialGauge" member="rangeBrushes" label="RangeBrushes" /> や <ApiLink type="RadialGauge" member="rangeOutlines" label="RangeOutlines" /> プロパティを範囲の色リストに設定することもできます。
-
-```html
-<igx-radial-gauge
-    height="300px" width="300px"
-    minimumValue=0 value=50
-    maximumValue=80 interval=10
-    rangeBrushes ="red, yellow, green"
-    rangeOutlines="red, yellow, green">
-   <igx-radial-gauge-range
-       startValue=5  endValue=15 brush="red">
-   </igx-radial-gauge-range>
-   <igx-radial-gauge-range
-       startValue=15  endValue=35 brush="yellow">
-   </igx-radial-gauge-range>
-   <igx-radial-gauge-range
-       startValue=35  endValue=45 brush="green">
-   </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/ranges" height={320} alt="Angular ラジアル ゲージの範囲" />
-
-## 針
-
-ゲージ針は、ゲージの設定値を示す視覚要素です。針は、あらかじめ定義されたいくつかの図形の中から選択でき、ピボット図形をゲージの中心に配置できます。またピボット図形は、事前に定義された図形の 1 つを使用します。オーバーレイとアンダーレイを含むピボット図形には、図形に適用する別のピボット ブラシがあります。
-
-サポートされている針の形とキャップは、<ApiLink type="RadialGauge" member="needleShape" label="NeedleShape" /> と <ApiLink type="RadialGauge" member="needlePivotShape" label="NeedlePivotShape" /> プロパティで設定します。
-
-ゲージのインタラクティブ モードを有効 (<ApiLink type="RadialGauge" member="isNeedleDraggingEnabled" label="IsNeedleDraggingEnabled" /> プロパティを使用) にするとユーザーは <ApiLink type="RadialGauge" member="minimumValue" label="MinimumValue" /> と <ApiLink type="RadialGauge" member="maximumValue" label="MaximumValue" /> の値間で針をドラッグして値を変更できるようになります。
-
-```html
-<igx-radial-gauge
-    value=50
-    isNeedleDraggingEnabled=true
-    isNeedleDraggingConstrained=true
-    needleShape="NeedleWithBulb"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleEndExtent=0.475
-    needleStrokeThickness=1
-    needlePivotShape="CircleOverlay"
-    needlePivotBrush="#9f9fa0"
-    needlePivotOutline="#9f9fa0"
-    needlePivotWidthRatio=0.2
-    needlePivotStrokeThickness=1
-    height="300px" width="300px"
-    minimumValue=0
-    maximumValue=80 interval=10>
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/needle" height={320} alt="Angular ラジアル ゲージの針" />
-
-## 針のハイライト
-
-ラジアル ゲージを変更して、2 番目の針を表示できます。これにより、メイン針の <ApiLink type="RadialGauge" member="value" label="Value" /> の不透明度が低く表示されます。これを有効にするには、まず <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> を Overlay に設定し、次に <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> を適用します。
-
-```html
-<igx-radial-gauge #radialGauge
-    labelExtent=0.65
-    labelInterval=10
-    highlightValueDisplayMode="Overlay"
-    highlightValue=50
-    highlightLabelDisplaysValue=true
-    highlightLabelSnapsToNeedlePivot=true
-    isHighlightNeedleDraggingEnabled=true
-    height="100%" width="100%"
-    minimumValue=0 value=30
-    maximumValue=100 interval=10  >
-</igx-radial-gauge>
-```
-
-<Sample src="/gauges/radial-gauge/highlight-needle" height={320} alt="Angular ラジアル ゲージの針のハイライト" />
-
-## まとめ
-
-上記すべてのコード スニペットを以下のコード ブロックにまとめています。プロジェクトに簡単にコピーしてブレットグラフのすべての機能を再現できます。
-
-```html
-<igx-radial-gauge
-    height="300px" width="300px"
-    minimumValue=0
-    maximumValue=80
-    scaleStartAngle=135
-    scaleEndAngle=45
-    scaleBrush="#c6c6c6"
-    scaleSweepDirection="Clockwise"
-    scaleOversweep=1
-    scaleOversweepShape="Fitted"
-    scaleStartExtent=0.45
-    scaleEndExtent=0.575
-
-    value=70
-    isNeedleDraggingEnabled=true
-    isNeedleDraggingConstrained=true
-    needleShape="NeedleWithBulb"
-    needleBrush="DodgerBlue"
-    needleOutline="DodgerBlue"
-    needleEndExtent=0.475
-    needleStrokeThickness=1
-    needlePivotShape="CircleOverlay"
-    needlePivotBrush="#9f9fa0"
-    needlePivotOutline="#9f9fa0"
-    needlePivotWidthRatio=0.2
-    needlePivotStrokeThickness=1
-
-    interval=10
-    tickStartExtent=0.45
-    tickEndExtent=0.575
-    tickStrokeThickness=2
-    tickBrush="Black"
-    minorTickCount=4
-    minorTickEndExtent=0.5
-    minorTickStartExtent=0.575
-    minorTickStrokeThickness=1
-    minorTickBrush="Black"
-
-    labelExtent=0.65
-    labelInterval=10
-    font="11px Verdana"
-    fontBrush="Black"
-
-    backingShape="Fitted"
-    backingBrush="#ededed"
-    backingOutline="Gray"
-    backingOversweep=5
-    backingCornerRadius=10
-    backingStrokeThickness=5
-    backingOuterExtent=0.8
-    backingInnerExtent=0.15
-
-    rangeBrushes ="#a4bd29, #F86232"
-    rangeOutlines="#a4bd29, #F86232">
-    <igx-radial-gauge-range
-        startValue=20 endValue=40
-        innerStartExtent=0.45 innerEndExtent=0.45
-        outerStartExtent=0.57 outerEndExtent=0.57>
-    </igx-radial-gauge-range>
-    <igx-radial-gauge-range
-        startValue=40 endValue=60
-        innerStartExtent=0.45 innerEndExtent=0.45
-        outerStartExtent=0.57 outerEndExtent=0.57>
-    </igx-radial-gauge-range>
-</igx-radial-gauge>
-```
-
-## API リファレンス
-
-<ApiLink type="RadialGauge" /><br />
-<ApiLink type="RadialGaugeRange" /><br />
-
-## その他のリソース
-
-その他のゲージ タイプの詳細については、以下のトピックを参照してください。
-
-- [ブレット グラフ](bullet-graph.md)
-- [リニア ゲージ](linear-gauge.md)
diff --git a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx b/docs/angular/src/content/jp/components/spreadsheet-activation.mdx
deleted file mode 100644
index 95e34af2e7..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-activation.mdx
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: "Angular スプレッドシート | アクティブ化 | インフラジスティックス"
-description: セル、ペイン、およびワークシート間で分割される Angular スプレッドシート コントロールのアクティブ化を使用する方法について説明します。Ignite UI for Angular スプレッドシートのサンプルを是非お試しください!
-keywords: Excel Spreadsheet, activation, Ignite UI for Angular, Infragistics, Excel スプレッドシート、アクティブ化, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-_language: ja
-
-llms:
-  description: "Angular Spreadsheet コンポーネントは、コントロールで現在アクティブなセル、ペイン、およびワークシートを決定できるプロパティを公開します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular スプレッドシートのアクティブ化
-
-Angular Spreadsheet コンポーネントは、コントロールで現在アクティブなセル、ペイン、およびワークシートを決定できるプロパティを公開します。これは、ユーザーがコントロール内で移動または編集している場所を判断するのに役立ちます。
-
-## Angular スプレッドシートのアクティブ化の例
-
-<Sample src="/excel/spreadsheet/activation" height={500} alt="Angular スプレッドシートのアクティブ化の例" />
-
-## アクティベーションの概要
-
-Angular <ApiLink type="Spreadsheet" /> コントロールのアクティブ化は、スプレッドシートの現在の <ApiLink type="Workbook" /> のセル、ペイン、およびワークシート間で分割されます。3 つの アクティブなプロパティは以下のとおりです。
-
-- <ApiLink type="Spreadsheet" member="activeCell" label="ActiveCell" />: スプレッドシートのアクティブ セルを設定します。設定するには、<ApiLink type="SpreadsheetCell" /> の新しいインスタンスを作成し、そのセルに関する列と行、またはセルの文字列アドレスなどの情報を渡す必要があります。
-- <ApiLink type="Spreadsheet" member="activePane" label="ActivePane" />: スプレッドシート コントロールの現在アクティブなワークシートのアクティブ ペインを返します。
-- <ApiLink type="Spreadsheet" member="activeWorksheet" label="ActiveWorksheet" />: スプレッドシート コントロールの <ApiLink type="Workbook" /> 内のアクティブ ワークシートを返すか、設定します。これは、スプレッドシートに添付されている <ApiLink type="Workbook" /> 内の既存のワークシートに設定することで設定できます。
-
-## コード スニペット
-
-次のコード スニペットは、<ApiLink type="Spreadsheet" /> コントロールのセルとワークシートのアクティブ化の設定を示しています。
-
-```ts
-this.spreadsheet.activeWorksheet = this.spreadsheet.workbook.worksheets(1);
-
-this.spreadsheet.activeCell = new SpreadsheetCell("C5");
-```
-
-## API リファレンス
-
-<ApiLink type="SpreadsheetCell" />
-<br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
deleted file mode 100644
index 38a52b450d..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-chart-adapter.mdx
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: "Angular スプレッドシート | チャート アダプター | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロールに縦棒、折れ線、エリアなどのチャートを表示します。Ignite UI for Angular スプレッドシートにチャートを統合する方法について説明します。
-keywords: Excel Spreadsheet, chart adapter, Ignite UI for Angular, Infragistics, Excel スプレッドシート、チャート アダプター, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet", "Worksheet", "WorksheetShapeCollection", "WorksheetChart"]
-_language: ja
-llms:
-  description: "ChartAdapter を使用すると、スプレッドシートにチャートを表示できます。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet チャート アダプター
-
-Angular Spreadsheet コンポーネントを使用して <ApiLink type="Spreadsheet" /> にチャートを表示できます。
-
-## Angular Spreadsheet チャート アダプターの例
-
-<Sample src="/excel/spreadsheet/adapter-chart" height={500} alt="Angular Spreadsheet チャート アダプターの例" />
-
-## チャート アダプターの概要
-
-<ApiLink type="Spreadsheet" member="chartAdapter" label="ChartAdapter" /> を使用すると、スプレッドシートにチャートを表示できます。スプレッドシート チャート アダプターは、Infragistics.Documents.Excel.WorksheetChart インスタンスに基づいてスプレッド シートのチャート要素を作成し、初期化します。
-
-WorksheetChart をワークシートに追加するには、ワークシートの Shapes コレクションの <ApiLink type="WorksheetShapeCollection" member="addChart" label="AddChart" /> メソッドを使用する必要があります。チャートの追加の詳細については、下記をご覧ください。
-
-以下はその手順です。
-
-1. SpreadsheetChartAdapterModule 参照をプロジェクトに追加します。
-2. Spreadsheet に割り当てる SpreadsheetChartAdapter クラスのインスタンスを作成します。
-3. アプリを実行してチャートを含むワークシートを読み込みます。
-
-## サポートされるチャート タイプ
-
-Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを含む 35 以上のチャート タイプがサポートされます。チャート タイプ一覧:
-
-- 縦棒チャート
-  - クラスタ縦棒チャート
-  - 積層型の柱状
-  - 100% 積層型縦棒チャート
-- 折れ線チャート
-  - 折れ線チャート
-  - マーカー付き折れ線チャート
-  - 積層型折れ線チャート
-  - マーカー付き積層型折れ線チャート
-  - 100% 積層型折れ線チャート
-  - マーカー付き 100% 積層型折れ線チャート
-- 円チャート
-- ドーナツ型チャート
-- 棒チャート
-  - クラスター棒チャート
-  - 積層型棒
-  - 100% 積層型棒チャート
-  - エリア チャート
-  - エリア
-  - 積層型エリア
-  - 100% 積層型エリア チャート
-- XY (散布図) とバブル チャート
-  - 散布図 (マーカーのみ)
-  - 滑らかな線を使用した散布図
-  - 滑らかな線とマーカーを使用した散布図
-  - 直接を使用した散布図
-  - 直線とマーカーを使用した散布図
-  - バブル (エフェクトなし) チャート
-  - Bubble3DEffect
-- 株価チャート
-  - 高値-安値-終値
-  - 始値-高値-安値-終値
-  - 出来高-高値-安値-終値
-  - 出来高-始値-高値-安値-終値
-- レーダー チャート
-  - マーカーなしのレーダー
-  - マーカー付きレーダー
-  - 塗りつぶしたレーダー
-- コンボ チャート
-  - xAxis を共有する縦棒チャートと折れ線チャート
-  - 縦棒チャートと折れ線チャート、および第 2 xAxis
-  - 積層エリアと縦棒チャート
-  - カスタムな組み合わせ
-
-## 依存関係
-
-<DocsAside type="info" title="情報">
-
-以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
-</DocsAside>
-
-ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、<ApiLink type="SpreadsheetChartAdapter" /> クラスをインポートする必要があります。
-
-```ts
-import { IgxSpreadsheetChartAdapterModule } from 'igniteui-angular-spreadsheet-chart-adapter';
-import { SpreadsheetChartAdapter } from 'igniteui-angular-spreadsheet-chart-adapter';
-
-import { ChartTitle, ChartType, FormattedString, Workbook } from 'igniteui-angular-excel';
-import { ExcelUtility } from "ExcelUtility";
-import { Worksheet } from 'igniteui-angular-excel';
-import { WorksheetCell } from 'igniteui-angular-excel';
-```
-
-## コード スニペット
-
-以下のコード スニペットは、<ApiLink type="Spreadsheet" /> コントロールで現在表示されているワークシートにハイパーリンクを追加する方法を示しています。
-
-```typescript
-this.spreadsheet.chartAdapter = new SpreadsheetChartAdapter();
-
-ExcelUtility.loadFromUrl(process.env.PUBLIC_URL + "/ExcelFiles/ChartData.xlsx").then((w) => {
-    this.spreadsheet.workbook = w;
-
-    const sheet: Worksheet = this.spreadsheet.workbook.worksheets(0);
-
-    sheet.defaultColumnWidth = 500 * 20;
-    sheet.rows(0).height = 150 * 20;
-
-    const cell1: WorksheetCell = sheet.getCell("A1");
-    const cell2: WorksheetCell = sheet.getCell("B1");
-    const cell3: WorksheetCell = sheet.getCell("C1");
-    const cell4: WorksheetCell = sheet.getCell("D1");
-
-    const dataCellAddress = "A4:D6";
-
-    const chart1 = sheet.shapes().addChart(ChartType.Line, cell1, { x: 0, y: 0 }, cell1, { x: 100, y: 100 });
-
-    const title: Angular ChartTitle = new ChartTitle();
-    title.text = new FormattedString("Line Chart");
-    chart1.chartTitle = title;
-
-    chart1.setSourceData(dataCellAddress, true);
-
-    const chart2 = sheet.shapes().addChart(ChartType.ColumnClustered, cell2, { x: 0, y: 0 }, cell2, { x: 100, y: 100 });
-
-    const title2: ChartTitle = new ChartTitle();
-    title2.text = new FormattedString("Column Chart");
-    chart2.chartTitle = title2;
-
-    chart2.setSourceData(dataCellAddress, true);
-
-    const chart3 = sheet.shapes().addChart(ChartType.Area, cell3, { x: 0, y: 0 }, cell3, { x: 100, y: 100 });
-
-    const title3: ChartTitle = new ChartTitle();
-    title3.text = new FormattedString("Area Chart");
-    chart3.chartTitle = title3;
-
-    chart3.setSourceData(dataCellAddress, true);
-
-    const chart4 = sheet.shapes().addChart(ChartType.Pie, cell4, { x: 0, y: 0 }, cell4, { x: 100, y: 100 });
-
-    const title4: ChartTitle = new ChartTitle();
-    title4.text = new FormattedString("Pie Chart");
-    chart4.chartTitle = title4;
-
-    chart4.setSourceData(dataCellAddress, true);
-});
-```
-
-## API リファレンス
-
-<ApiLink type="SpreadsheetChartAdapterBase" />
-<br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx b/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
deleted file mode 100644
index ac2e650770..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-clipboard.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: "Angular スプレッドシート | クリップボード操作 | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロール内でコピー、切り取り、貼り付けなどのクリップボード操作を使用します。Infragistics Ignite UI for Angular スプレッドシートのサンプルを是非お試しください!
-keywords: Spreadsheet, clipboard operations, Ignite UI for Angular, Infragistics, スプレッドシート, クリップボード操作, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet", "SpreadsheetAction", "SpreadsheetCommandType", "Command"]
-_language: ja
-llms:
-  description: "次のコード スニペットは、Angular Spreadsheet コントロールでクリップボードに関連するコマンドを実行する方法を示しています。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular クリップボードでの作業
-
-このトピックでは、クリップボードの操作を実行する方法を説明します。
-
-## Angular クリップボードでの作業の例
-
-<Sample src="/excel/spreadsheet/clipboard" height={500} alt="Angular クリップボードでの作業の例" />
-
-## 依存関係
-
-クリップボードを利用する前に、<ApiLink type="SpreadsheetAction" /> 列挙型をインポートします。
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-```
-
-## 使用方法
-
-次のコード スニペットは、Angular <ApiLink type="Spreadsheet" /> コントロールでクリップボードに関連するコマンドを実行する方法を示しています。
-
-```ts
-public cut(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Cut);
-}
-
-public copy(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Copy);
-}
-
-public paste(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.Paste);
-}
-```
-
-## API リファレンス
-
-<ApiLink type="SpreadsheetAction" /><br />
-<ApiLink type="Spreadsheet" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx b/docs/angular/src/content/jp/components/spreadsheet-commands.mdx
deleted file mode 100644
index ef3ecdf91d..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-commands.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: "Angular スプレッドシート | コマンド | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロールのさまざまな機能をアクティブにするためのコマンドを実行できます。Ignite UI for Angular スプレッドシートで ZoomIn や ZoomOut などのコマンドを使用できます。
-keywords: Spreadsheet, commands, Ignite UI for Angular, Infragistics, スプレッドシート, コマンド, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet", "SpreadsheetAction"]
-_language: ja
-llms:
-  description: "Angular Spreadsheet コンポーネントは、スプレッドシートのさまざまな機能をアクティブにするためのコマンドを実行できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular コマンドの使用
-
-Angular Spreadsheet コンポーネントは、スプレッドシートのさまざまな機能をアクティブにするためのコマンドを実行できます。このトピックでは、コマンドによりコントロールを使用してさまざまな操作を実行する方法を説明します。多くのコマンドは、アクティブセル、行、またはワークシートに基づいてアクションを実行します。例えば、ZoomIn と ZoomOut の 2 つのコマンドです。完全なリストは SpreadsheetAction 列挙型を見てください。
-
-## Angular コマンドの使用の例
-
-<Sample src="/excel/spreadsheet/commands" height={500} alt="Angular コマンドの使用の例" />
-
-## 依存関係
-
-コマンドボードを利用する前に、<ApiLink type="SpreadsheetAction" /> をインポートします。
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { SpreadsheetAction } from 'igniteui-angular-spreadsheet';
-```
-
-## 使用方法
-
-以下のコード スニペットは、データの検証規則を設定する方法を示します。
-
-```ts
-@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
-public spreadsheet: IgxSpreadsheetComponent;
-
-// ...
-
-public zoomIn(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.ZoomIn);
-}
-
-public zoomOut(): void {
-    this.spreadsheet.executeAction(SpreadsheetAction.ZoomOut);
-}
-```
-
-## API リファレンス
-
-<ApiLink type="SpreadsheetAction" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx b/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
deleted file mode 100644
index c872a07a30..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-conditional-formatting.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: "Angular スプレッドシート | 条件付き書式 | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロールを使用して、ワークシートのセルに条件付き書式を設定します。Ignite UI for Angular スプレッドシートのサンプルを是非お試しください!
-keywords: Spreadsheet, conditional formatting, Ignite UI for Angular, Infragistics, Worksheet, スプレッドシート, 条件付き書式, インフラジスティックス, ワークシート
-license: commercial
-mentionedTypes: ["Spreadsheet", "ConditionalFormatCollection", "WorksheetCell", "Worksheet", "IWorksheetCellFormat"]
-_language: ja
-llms:
-  description: "Angular Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet の条件付き書式設定
-
-Angular Spreadsheet コンポーネントは、ワークシートのセルに条件付き書式を設定できます。これにより、条件に基づいてデータのさまざまな部分をハイライト表示できます。
-
-## Angular Spreadsheet の条件付き書式設定の例
-
-<Sample src="/excel/spreadsheet/conditional-formatting" height={500} alt="Angular Spreadsheet の条件付き書式設定の例" />
-
-## 条件付き書式設定の概要
-
-特定のワークシートの条件付き書式を構成するには、ワークシートの <ApiLink type="Worksheet" member="conditionalFormats" label="ConditionalFormats" /> コレクションに公開される `Add` メソッドを使用できます。この `Add` メソッドの最初のパラメーターは条件付き書式に適用するワークシートの string 領域です。
-
-ワークシートに追加できる条件付き書式の多くには、その条件付き書式の条件が満たされたときにセルを表示する方法を決定する <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティがあります。たとえば、<ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" /> および <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> などのこの <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティにアタッチされるプロパティを使用してセルの背景およびフォント設定を決定できます。
-
-条件付き書式が作成され、<ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> が適用される場合、ワークシートのセルにサポートされるプロパティのサブセットがあります。現在サポートされる <ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティは <ApiLink type="IWorksheetCellFormat" member="fill" label="Fill" />、`Border` プロパティ、<ApiLink type="IWorksheetCellFormat" member="formatString" label="FormatString" />、および strikethrough、underline、italic、bold、color などの <ApiLink type="IWorksheetCellFormat" member="font" label="Font" /> プロパティです。以下のコード スニペットに複数のプロパティが設定されます。
-
-ワーク セルの可視化の動作が異なるため、<ApiLink type="WorksheetCell" member="cellFormat" label="CellFormat" /> プロパティがない条件付き書式もあります。この条件付き書式は <ApiLink type="DataBarConditionalFormat" />、<ApiLink type="ColorScaleConditionalFormat" />、<ApiLink type="IconSetConditionalFormat" /> です。
-
-既存の Workbook を Excel から読み込む際に、ワークブックが読み込まれた場合も書式設定は保持されます。ワークブックを Excel ファイルに保存する場合も保持されます。
-
-以下は、Angular <ApiLink type="Spreadsheet" /> コントロールでサポートされている条件付き書式の一覧です。
-
-- <ApiLink type="AverageConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addAverageCondition" label="AddAverageCondition" /> メソッドを使用して追加されたこの条件付きフォーマットは、セルの値が関連する範囲の平均または標準偏差より上か下かに基づいて、ワークシートセルの視覚属性を制御するプロパティを公開します。
-- <ApiLink type="BlanksConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addBlanksCondition" label="AddBlanksCondition" /> メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="ColorScaleConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addColorScaleCondition" label="AddColorScaleCondition" /> メソッドを使用して追加された条件付き書式は、最小値、中央値、最大値に対するセルの値に基づいてワークシート セルの色を制御するプロパティを公開します。
-- <ApiLink type="DataBarConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addDataBarCondition" label="AddDataBarCondition" /> メソッドを使用して追加されたこの条件付き書式は、関連付けられた値の範囲に対するセルの値に基づいてワークシートのセルにデータバーを表示するプロパティを公開します。
-- <ApiLink type="DateTimeConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addDateTimeCondition" label="AddDateTimeCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの日付値が指定された時間範囲内にあるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="DuplicateConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addDuplicateCondition" label="AddDuplicateCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの値が一意であるか、関連付けられた範囲全体で複製されるかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="ErrorsConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addErrorsCondition" label="AddErrorsCondition" /> メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="FormulaConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addFormulaCondition" label="AddFormulaCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの値が式で定義された基準を満たすかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="IconSetConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addIconSetCondition" label="AddIconSetCondition" /> メソッドを使用して追加されたこの条件付き書式は、しきい値に対するセルの値に基づいてワークシートのセルにアイコンを表示するプロパティを公開します。
-- <ApiLink type="NoBlanksConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addNoBlanksCondition" label="AddNoBlanksCondition" /> メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="NoErrorsConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addNoErrorsCondition" label="AddNoErrorsCondition" /> メソッドを使用して追加されたこの条件付き書式では、セルの値が設定されていないかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="OperatorConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addOperatorCondition" label="AddOperatorCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの値が論理演算子で定義された基準を満たすかどうかに基づいてワークシートセルの視覚属性を制御するプロパティを公開します。
-- <ApiLink type="RankConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addRankCondition" label="AddRankCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの値が関連する範囲全体の値の最下位ランクの上部にあるかどうかに基づいてワークシート セルの表示属性を制御するプロパティを公開します。
-- <ApiLink type="TextOperatorConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addRankCondition" label="AddRankCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルのテキスト値が <ApiLink type="ConditionalFormatCollection" member="addTextCondition" label="AddTextCondition" /> メソッドのパラメーターの文字列および <ApiLink type="FormatConditionTextOperator" /> 値にで定義された基準を満たすかどうかに基づいてワークシート セルのビジュアル属性を制御するプロパティを公開します。
-- <ApiLink type="UniqueConditionalFormat" />: <ApiLink type="ConditionalFormatCollection" member="addUniqueCondition" label="AddUniqueCondition" /> メソッドを使用して追加されたこの条件付き書式は、セルの値が関連付けられた範囲全体で一意であるかどうかに基づいてワークシートセルの表示属性を制御するプロパティを公開します。
-
-## 依存関係
-
-<ApiLink type="Spreadsheet" /> コントロールに条件付き書式を追加するには、以下の依存関係をインポートする必要があります。
-
-```ts
-import { CellFill } from "igniteui-angular-excel";
-import { Color } from 'igniteui-angular-core';
-import { ColorScaleType } from "igniteui-angular-excelScaleType";
-import { FormatConditionAboveBelow } from 'igniteui-angular-excel';
-import { FormatConditionIconSet } from 'igniteui-angular-excel';
-import { FormatConditionOperator } from 'igniteui-angular-excel';
-import { FormatConditionTextOperator } from 'igniteui-angular-excel';
-import { FormatConditionTimePeriod } from 'igniteui-angular-excel';
-import { FormatConditionTopBottom } from "igniteui-angular-excel";
-import { WorkbookColorInfo } from 'igniteui-angular-excel';
-```
diff --git a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx b/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
deleted file mode 100644
index 033f44c579..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-configuring.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
----
-title: "Angular スプレッドシート | 設定 | セル | 数式 | ナビゲーション | 選択 | インフラジスティックス"
-description: "Ignite UI for Angular によって Angular スプレッドシートを設定して、チャート データを向上させる方法について説明します。Infragistics はデータ可視化を向上させます。"
-keywords: Excel Spreadsheet, Ignite UI for Angular, Infragistics, Excel スプレッドシート, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-_language: ja
-llms:
-  description: "Angular Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズーム レベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet の構成
-
-Angular Spreadsheet コンポネントは、セルの編集、グリッド線とヘッダーの表示、保護、ズーム レベル、および Excel ワークシートに関連するその他のさまざまなプロパティなど、コントロールのさまざまな側面を設定できます。
-
-## Angular Spreadsheet の構成の例
-
-<Sample src="/excel/spreadsheet/config-options" height={500} alt="Angular Spreadsheet の構成の例" />
-
-## セル編集の構成
-
-ユーザーがセルの値を編集して新しい入力を確認すると、スプレッドシートの構成に応じて、<ApiLink type="Spreadsheet" /> コントロールに <kbd>ENTER</kbd> キーを押すと現在アクティブなセルに隣接するセルに移動できます。
-
-この <kbd>ENTER</kbd> キーナビゲーションを有効にするために、<ApiLink type="Spreadsheet" member="isEnterKeyNavigationEnabled" label="IsEnterKeyNavigationEnabled" /> プロパティを **true** に設定できます。false に設定すると、<kbd>ENTER</kbd> キーを押してもアクティブ セルは変わりません。
-
-Enter キーを押したときに移動する隣接セルの方向は、<ApiLink type="Spreadsheet" member="enterKeyNavigationDirection" label="EnterKeyNavigationDirection" /> プロパティを `Down`、`Up`、`Left`、`Right` に設定して構成することもできます。
-
-以下のコード スニペットは上記のデモです。
-
-```html
-<igx-spreadsheet isEnterKeyNavigationEnabled=true
-    enterKeyNavigationDirection="Left">
-</igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isEnterKeyNavigationEnabled = true;
-this.spreadsheet.enterKeyNavigationDirection = SpreadsheetEnterKeyNavigationDirection.Left;
-```
-
-## 数式バーの構成
-
-Angular <ApiLink type="Spreadsheet" /> は、コントロールの <ApiLink type="Spreadsheet" member="isFormulaBarVisible" label="IsFormulaBarVisible" /> プロパティを設定して数式バーの表示/非表示を設定できます。
-
-以下のコード スニペットは上記のデモです。
-
-```html
-<igx-spreadsheet isFormulaBarVisible=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isFormulaBarVisible = true;
-```
-
-## ガイドラインの設定
-
-<ApiLink type="Spreadsheet" /> は、コントロールの <ApiLink type="Spreadsheet" member="areGridlinesVisible" label="AreGridlinesVisible" /> プロパティを設定して数式バーの表示/非表示を設定できます。
-
-以下のコード スニペットは上記のデモです。
-
-```html
-<igx-spreadsheet areGridlinesVisible=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.areGridlinesVisible = true;
-```
-
-## ヘッダーの構成
-
-<ApiLink type="Spreadsheet" /> は、<ApiLink type="Spreadsheet" member="areHeadersVisible" label="AreHeadersVisible" /> プロパティを設定してへッダーの可視性を設定できます。
-
-以下のコード スニペットは上記のデモです。
-
-```html
-<igx-spreadsheet areHeadersVisible=false></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.areHeadersVisible = false;
-```
-
-## ナビゲーションの構成
-
-<ApiLink type="Spreadsheet" /> コントロールは、コントロールが「終了モード」にあるかどうかを構成することによって、ワークシートのセル間のナビゲーションを構成できます。終了モードは、矢印キーを押すと、アクティブなセルが、押された矢印キーの方向に応じて、現在のセルからデータが隣接するセルの行または列の末尾に移動する機能です。この機能は、大規模なデータ ブロックの最後まですばやく移動する際に役立ちます。
-
-たとえば、終了モードになっているときに、100x100 の大きなデータブロックをクリックして <kbd>→</kbd> 矢印キーを押すと、現在の行の右端に移動し、データのある一番右の列に移動します。この操作の後、<ApiLink type="Spreadsheet" /> は終了モードから飛び出します。
-
-ユーザーが <kbd>END</kbd> キーを押すと、実行時に終了モードが有効になりますが、スプレッドシート コントロールの <ApiLink type="Spreadsheet" member="isInEndMode" label="IsInEndMode" /> プロパティを設定することでプログラムで設定できます。
-
-以下のコード スニペットは、<ApiLink type="Spreadsheet" /> を終了モードで開始させる方法を示しています。
-
-```html
-<igx-spreadsheet isInEndMode=true></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.isInEndMode = true;
-```
-
-## 保護の設定
-
-<ApiLink type="Spreadsheet" /> は、ワークシートごとにブックを保護します。ワークシートの保護の設定は、ワークシートの `Protect()` メソッドを呼び出して保護し、`Unprotect()` メソッドを呼び出して保護解除することで設定できます。
-
-以下のコードは、<ApiLink type="Spreadsheet" /> コントロールの現在アクティブなワークシートの保護を有効または無効にすることができます。
-
-```ts
-this.spreadsheet.activeWorksheet.protect();
-this.spreadsheet.activeWorksheet.unprotect();
-```
-
-## 選択の設定
-
-<ApiLink type="Spreadsheet" /> コントロールは、コントロールで許可されている選択の種類を設定できます。その後、ユーザーが修飾キー (<kbd>SHIFT</kbd> または <kbd>CTRL</kbd>)  を押します。これは、スプレッドシートの <ApiLink type="Spreadsheet" member="selectionMode" label="SelectionMode" /> プロパティを次のいずれかの値に設定することによって行われます。
-
-- `AddToSelection`: マウスでドラッグするときに <kbd>CTRL</kbd> キーを押す必要はありません。新しいセル範囲が <ApiLink type="SpreadsheetSelection" /> オブジェクトの <ApiLink type="SpreadsheetSelection" member="cellRanges" label="CellRanges" /> コレクションに追加され、モードに入った後に最初の矢印キーナビゲーションで範囲が追加されます。シフト+F8 を押すとモードに入ります。
-- `ExtendSelection`: <ApiLink type="SpreadsheetSelection" /> オブジェクトの <ApiLink type="SpreadsheetSelection" member="cellRanges" label="CellRanges" /> コレクション内の選択範囲は、マウスを使用してセルを選択するかキーボードで移動すると更新されます。
-- `Normal`: セルまたはセルの範囲を選択するためにマウスをドラッグすると選択が置き換えられます。同様に、キーボードで移動すると新しい選択範囲が作成されます。<kbd>CTRL</kbd> キーを押したままマウスを使用することで新しい範囲を追加できます。また、<kbd>SHIFT</kbd> キーを押したままマウスでクリックする、あるいはキーボードで移動することでアクティブ セルを含む選択範囲を変更できます。
-
-上記の説明で述べた
-<ApiLink type="SpreadsheetSelection" />
-オブジェクトは、<ApiLink type="Spreadsheet" /> コントロールの <ApiLink type="Spreadsheet" member="activeSelection" label="ActiveSelection" /> プロパティを使用して取得できます。
-
-次のコード スニペットは、選択モードの設定を示しています。
-
-```html
-<igx-spreadsheet selectionMode="ExtendSelection"></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.selectionMode = SpreadsheetCellSelectionMode.ExtendSelection;
-```
-
-<ApiLink type="Spreadsheet" /> コントロールの選択は、プログラムで設定または取得することもできます。単一選択の場合は、<ApiLink type="Spreadsheet" member="activeCell" label="ActiveCell" /> プロパティを設定できます。複数選択は、<ApiLink type="Spreadsheet" /> コントロールの <ApiLink type="Spreadsheet" member="activeSelection" label="ActiveSelection" /> プロパティによって返される
-<ApiLink type="SpreadsheetSelection" />
-オブジェクトを介して行われます。
-
-<ApiLink type="SpreadsheetSelection" />
-オブジェクトには、新しい <ApiLink type="SpreadsheetCellRange" /> オブジェクトの形式でスプレッドシートの選択範囲にプログラムでセルの範囲を追加できる `AddCellRange()` メソッドがあります。
-
-次のコード スニペットは、スプレッドシートの選択範囲にセル範囲を追加する方法を示しています。
-
-```ts
-this.spreadsheet.activeSelection.addCellRange(new SpreadsheetCellRange(2, 2, 5, 5));
-```
-
-## タブバー領域の構成
-
-<ApiLink type="Spreadsheet" /> コントロールは、`TabBarWidth` プロパティと `TabBarVisibility` プロパティを介して、現在アクティブな <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> の <ApiLink type="Workbook" member="windowOptions" label="WindowOptions" /> からタブバー領域の表示設定と幅の設定を使用します。
-
-タブバー領域は、ワークシート名をコントロール内のタブとして可視化する領域です。
-
-次のコード スニペットを使用して、タブバーの表示と幅を設定できます。
-
-```ts
-this.spreadsheet.workbook.windowOptions.tabBarVisible = false;
-
-this.spreadsheet.workbook.windowOptions.tabBarWidth = 200;
-```
-
-## ズーム レベルの設定
-
-Angular Spreadsheet コンポーネントは、<ApiLink type="Spreadsheet" member="zoomLevel" label="ZoomLevel" /> プロパティを設定してズームインとズームアウト機能を追加できます。ズーム レベルは最大 400%、最小 10% です。
-
-このプロパティを数値に設定すると、整数としてのパーセンテージが表されるため、<ApiLink type="Spreadsheet" member="zoomLevel" label="ZoomLevel" /> を 100 に設定することは、100% に設定することと同じです。
-
-次のコード スニペットは、スプレッドシートのズームレベルを設定する方法を示しています。
-
-```html
-<igx-spreadsheet zoomLevel=200></igx-spreadsheet>
-```
-
-```ts
-this.spreadsheet.zoomLevel = 200;
-```
-
-## API リファレンス
-
-<ApiLink type="SpreadsheetCellRange" />
-<br />
-<ApiLink type="SpreadsheetSelection" /><br />
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx b/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
deleted file mode 100644
index d56910ba30..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-data-validation.mdx
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: "Angular スプレッドシート | データ検証 | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロールを使用して、組み込みのデータ検証を設定します。Ignite UI for Angular スプレッドシートのサンプルを是非お試しください!
-keywords: Excel Spreadsheet, data validation, Ignite UI for Angular, Infragistics, Excel スプレッドシート、データ検証, インフラジスティックス
-license: commercial
-_language: ja
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "このトピックでは、一括データ検証規則を構成および設定する方法について説明します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular データ検証
-
-このトピックでは、一括データ検証規則を構成および設定する方法について説明します。
-
-## Angular データ検証の例
-
-<Sample src="/excel/spreadsheet/data-validation" height={500} alt="Angular データ検証の例" />
-
-## 依存関係
-
-データ検証ルールを設定するときは、使用するルールをインポートする必要があります。
-
-```ts
-import { AnyValueDataValidationRule } from 'igniteui-angular-excel';
-import { CustomDataValidationRule } from 'igniteui-angular-excel';
-import { DataValidationErrorStyle } from 'igniteui-angular-excel';
-import { ListDataValidationRule } from 'igniteui-angular-excel';
-import { OneConstraintDataValidationOperator } from 'igniteui-angular-excel';
-import { OneConstraintDataValidationRule } from 'igniteui-angular-excel';
-import { TwoConstraintDataValidationOperator } from 'igniteui-angular-excel';
-import { TwoConstraintDataValidationRule } from 'igniteui-angular-excel';
-```
-
-## API References
-
-<ApiLink type="Spreadsheet" /><br />
diff --git a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx b/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
deleted file mode 100644
index fe523b84c9..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-hyperlinks.mdx
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: "Angular スプレッドシート | ハイパーリンク | インフラジスティックス"
-description: インフラジスティックスの Angular スプレッドシート コントロールを使用して、Excel ワークブックに Webサイト、ファイル ディレクトリ、およびその他のワークシートにリンクするハイパーリンクを表示します。Ignite UI for Angular スプレッドシート チュートリアルを是非お試しください!
-keywords: Excel Spreadsheet, hyperlinks, Ignite UI for Angular, Infragistics, Excel スプレッドシート、ハイパーリンク, インフラジスティックス
-license: commercial
-mentionedTypes: ["Spreadsheet"]
-_language: ja
-llms:
-  description: "Angular Spreadsheet コンポーネントは、Excel ワークブックに既存のハイパーリンクを表示、Web サイト、ファイル ディレクトリ、およびワークブック内の他のワークシートにリンクできる新しいハイパーリンクを挿入できます。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet ハイパーリンク
-
-Angular Spreadsheet コンポーネントは、Excel ワークブックに既存のハイパーリンクを表示、Web サイト、ファイル ディレクトリ、およびワークブック内の他のワークシートにリンクできる新しいハイパーリンクを挿入できます。
-
-## Angular Spreadsheet ハイパーリンクの例
-
-<Sample src="/excel/spreadsheet/hyperlinks" height={500} alt="Angular Spreadsheet ハイパーリンクの例" />
-
-## ハイパーリンク概要
-
-ハイパーリンクを配置するワークシートの `Hyperlinks` コレクションにアクセスすると、ハイパーリンクが表計算、<ApiLink type="Spreadsheet" /> コントロールに追加されます。このコレクションには、<ApiLink type="WorksheetHyperlink" /> オブジェクトを受け取る `Add` メソッドがあり、セル アドレス、移動先のハイパーリンク URL、表示テキスト、およびオプションでホバー時に表示するツールチップを定義できます。
-
-## 依存関係
-
-ハイパーリンクを使用するように Angular スプレッドシート コントロールを設定するときは、<ApiLink type="WorksheetHyperlink" /> クラスをインポートする必要があります。
-
-```ts
-import { WorksheetHyperlink } from 'igniteui-angular-excel';
-```
diff --git a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx b/docs/angular/src/content/jp/components/spreadsheet-overview.mdx
deleted file mode 100644
index 272539753b..0000000000
--- a/docs/angular/src/content/jp/components/spreadsheet-overview.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
----
-title: "Angular Spreadsheet コンポーネント – Ignite UI for Angular"
-description: "Ignite UI for Angular Spreadsheet を使用して、柔軟なレイアウト、簡単なカスタマイズ オプション、Excel のような便利なインターフェイスを利用できます。表データを好きなように管理できます。"
-license: commercial
-keywords: Excel Spreadsheet, Ignite UI for Angular, Infragistics, Excel スプレッドシート, インフラジスティックス
-_language: ja
-mentionedTypes: ["Spreadsheet"]
-llms:
-  description: "Angular Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。"
----
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular Spreadsheet の概要
-
-Angular Spreadsheet (Excel ビューア) コンポーネントは軽量で機能が豊富で、科学、ビジネス、財務など、あらゆる種類のスプレッドシート データを操作、視覚化、編集するために必要なすべてのオプションが用意されています。すべての情報は、セル、ペイン、およびワークシート間を直感的かつ簡単にナビゲートできる表形式で表示できます。<ApiLink type="Spreadsheet" /> は、Excel のような柔軟なインターフェイス、詳細なチャート、およびアクティブ化、セル編集、条件付き書式設定、スタイル設定、選択、クリップボードなどの機能によって補完されます。
-
-## Angular Spreadsheet の例
-
-<Sample src="/excel/spreadsheet/overview" height={500} alt="Angular Spreadsheet の例" />
-
-## 機能
-
-- 機能
-
-Excel スプレッドシートと同様に、フィルタリング機能、ソート、セルの移動、セルの色に関するカスタマイズ、キーボード ショートカットを適用したり、数式を計算する機能を追加したりできます。
-
-## Spreadsheet の使用
-
-- パフォーマンス
-
-スプレッドシートはすべての最新のブラウザーと互換性があり、完璧な機能と簡便性を保証しながら、複雑で膨大なスプレッドシート モデル用に最適化されています。
-
-- 柔軟なレイアウトと簡単なカスタマイズ
-
-必要な機能のオン/オフを簡単に選択、追加、削除、切り替え、React シートを瞬時に構成できるため、すべてがエンドユーザーのニーズに応えます。構成可能なライブラリ、スタイルとフォーマットの選択肢、表示オプション、選択できるテーマもたくさんあります。
-
-- 便利な Excel のようなインターフェース
-
-Excel でデータを操作するのと同じように、スプレッドシート コンポーネントは、コピー、貼り付け、切り取りなど、よく知られているすべての Excel クリップボード操作を提供します。すぐに使い始めるために、追加のトレーニングや新しいスキルは必要ありません。また、ソート、完全なキーボード ナビゲーション、値と数式、セルのドラッグ、列と行の編集、フィルタリング、数値の書式設定、サイズ変更のオプションも付属しています。スマートで高速な計算エンジンは、最も複雑な推定にも対応します。Excel に依存しません。
-
-- データ操作
-
-科学、ビジネス、エンジニアリング、財務、教育のデータを収集して管理します。分析、高度なグリッド、レポート、データ入力フォーム、予算編成、予測シナリオ、カスタム スプレッドシートを準備および作成します。これらすべてが包括的な API のおかげです。
-
-- 高速で安全なデータ処理
-
-データ処理は 100% 安全です。
-
-- Excel と CSV のインポートとエクスポート
-
-組み込みの Excel インポート/エクスポート機能を使用すると、Excel ドキュメントを即座にロードして開き、オンデマンドで表示したり、変更を追加したり、保存したりできます。また、完成した Excel.xlsx スプレッドシートを簡単にエクスポートできます。
-
-## 依存関係
-
-Angular スプレッドシート コンポーネントをインストールするときは、core パッケージと excel パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-excel
-npm install --save igniteui-angular-spreadsheet
-```
-
-## モジュールの要件
-
-<ApiLink type="Spreadsheet" /> を作成するには、以下のモジュールが必要です。
-
-```ts
-import { IgxExcelModule } from 'igniteui-angular-excel';
-import { IgxSpreadsheetModule } from 'igniteui-angular-spreadsheet';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxExcelModule,
-        IgxSpreadsheetModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## 使用方法
-
-Angular スプレッドシート モジュールがインポートされたので、次にスプレッドシートの基本設定です。
-
-```html
-<igx-spreadsheet #spreadsheet height="500px" width="100%">
-</igx-spreadsheet>
-```
-
-<DocsAside type="info" title="情報">
-
-次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
-</DocsAside>
-
-以下は、ワークブックを Angular スプレッドシートにロードする方法を示しています。
-
-```ts
-import { IgxSpreadsheetComponent } from 'igniteui-angular-spreadsheet';
-import { ExcelUtility } from 'ExcelUtility';
-
-// ...
-
-@ViewChild("spreadsheet", { read: IgxSpreadsheetComponent })
-public spreadsheet: IgxSpreadsheetComponent;
-
-ngOnInit() {
-    const excelFile = '../../assets/Sample1.xlsx';
-    ExcelUtility.loadFromUrl(excelFile).then((w) => {
-      this.spreadsheet.workbook = w;
-    });
-}
-```
-
-## API リファレンス
-
-<ApiLink type="Spreadsheet" /><br />
-<ApiLink type="Workbook" /><br />
diff --git a/docs/angular/src/content/jp/components/zoomslider-overview.mdx b/docs/angular/src/content/jp/components/zoomslider-overview.mdx
deleted file mode 100644
index 8e4b74cf80..0000000000
--- a/docs/angular/src/content/jp/components/zoomslider-overview.mdx
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: "Angular ズームスライダー | データ可視化ツール | ナビゲーション | ズーム | データ チャート | データ バインディング | インフラジスティックス"
-description: インフラジスティックスの Angular ズームスライダー コントロールを使用して、最小値と最大値を表す 2 つのハンドルのデータ サブセットを簡単に表示します。Ignite UI for Angular ズームスライダーでデータの可視化を向上させます。
-keywords: zoom slider, Ignite UI for Angular, Infragistics, data chart, ズームスライダー, インフラジスティックス, データ チャート
-license: commercial
-mentionedTypes: ["ZoomSlider", "DataChart"]
-_language: ja
-llms:
-  description: "Angular ZoomSlider コントロールは、範囲対応コントロールにズーム機能を提供します。"
----
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-# Angular ズーム スライダーの概要
-
-Angular ZoomSlider コントロールは、範囲対応コントロールにズーム機能を提供します。ZoomSlider には、水平スクロールバー、全範囲の縮小表示、サイズ変更可能なズーム範囲ウィンドウの機能があります。ZoomSlider は、スタンド アロン コントロールとして機能できません。または、DataChart や CategoryChart などの範囲ベースのコントロールの拡張機能として動作します。
-
-## Angular ズーム スライダーの例
-
-以下のサンプルは、<ApiLink type="ZoomSlider" /> を使用して <ApiLink type="DataChart" /> のコンテンツをナビゲートする方法を示しています。
-
-<Sample src="/charts/zoomslider/overview" height={600} alt="Angular ズーム スライダーの例" />
-
-## 使用方法
-
-| 機能名|説明 |
-| --------------------|----------------------- |
-| スクロールバーのナビゲーション|ZoomSlider スクロールバーの組み込み機能を使用して、スケールを変更してデータ範囲をスクロールできます。 |
-| パンとズーム|サムパッドの端をドラッグして表示スケールを調節し、現在の表示範囲を広げる (ズーム アウト)、または狭くする (ズーム イン) ことができます。 |
-| 複数のユーザー インタラクション オプション|マウスによるすべてのインタラクションは、タッチ操作 (ほとんどはキーボードを介した操作) でもサポートされます。詳細は、ユーザー インタラクションと操作性を参照してください。 |
-| タッチ サポート|タッチ対応デバイスでは、ZoomSlider のすべての機能を使用できます。すべてのマウス操作は、タッチ環境でもサポートされます。 |
-| 拡張性|ZoomSlider コントロールは、追加設定なしで DataChart コントロール をサポートします。 |
-| 構成可能なズーム範囲ウィンドウ|ズーム範囲ウィンドウの初期幅、初期位置、最小サイズは、構成可能です。 |
-
-## 依存関係
-
-Angular chart コンポーネントをインストールするときに core パッケージもインストールする必要があります。
-
-```cmd
-npm install --save igniteui-angular-core
-npm install --save igniteui-angular-charts
-```
-
-## モジュールの要件
-
-<ApiLink type="ZoomSlider" /> を作成するには、以下のモジュールが必要です。
-
-```ts
-import { IgxZoomSliderModule } from 'igniteui-angular-charts';
-import { IgxZoomSliderComponent } from 'igniteui-angular-charts';
-
-@NgModule({
-    imports: [
-        // ...
-        IgxZoomSliderModule,
-        // ...
-    ]
-})
-export class AppModule {}
-```
-
-## コード スニペット
-
-以下のコードは、ZoomSlider を設定する方法を示します。
-
-```html
-<igx-zoom-slider
-  width="100%"
-  height="150px">
-</igx-zoom-slider>
-```
-
-## その他のリソース
-
-チャートの詳細については、[グラフの機能](charts/chart-features.md)トピックを参照してください。
-
-## API リファレンス
-
-<ApiLink type="ZoomSlider" /><br />
-<ApiLink type="DataChart" /><br />

From 2dec5a05b38bafc0d49f8eaa0c817198d98b3488 Mon Sep 17 00:00:00 2001
From: Dobromir Tsvetkov <46093564+dobromirts@users.noreply.github.com>
Date: Tue, 14 Jul 2026 13:58:44 +0300
Subject: [PATCH 20/30] feat(): add relative link validation and update
 cross-topic references (#355)

* feat(): add relative link validation and update cross-topic references

* resolve broken relative links

* fix: add relative and absolute link validation, fix broken links in JP templates

* fix links casing

* update angular jp toc

* fix: rename JP  to match igPath casing on linux cli

* fix: correct casing in link to pivot grid

* run both xplat and angular link checks in CI

* fix themes links and add html checker

* fix: fix CI relative-link check failures

* fix: normalize pivotGrid folder references to lowercase pivotgrid

* move relative-link check into its separate workflow

* resolve comments

---------

Co-authored-by: Stamen Stoychev <SStoychev@infragistics.com>
---
 .env.example                                  |  13 -
 .github/CONTRIBUTING.md                       |  10 +
 .github/PULL_REQUEST_TEMPLATE.md              |   2 +-
 .github/workflows/check-relative-links.yml    |  71 ++
 README.md                                     |  87 ++-
 docs/angular/.github/CONTRIBUTING.md          | 242 ------
 docs/angular/README.md                        | 198 -----
 docs/angular/scripts/generate.mjs             |   6 +
 docs/angular/src/content/en/.gitignore        |   8 +
 .../content/en/components/action-strip.mdx    |   2 +-
 .../ai/ai-assisted-development-overview.mdx   |  18 +-
 .../src/content/en/components/ai/cli-mcp.mdx  |   8 +-
 .../en/components/ai/maker-framework.mdx      |  10 +-
 .../src/content/en/components/ai/skills.mdx   |   6 +-
 .../content/en/components/ai/theming-mcp.mdx  |  22 +-
 .../src/content/en/components/banner.mdx      |   6 +-
 .../en/components/date-range-picker.mdx       |   2 +-
 .../content/en/components/exporter-pdf.mdx    |   2 +-
 .../general-breaking-changes-dv.mdx           |  10 +-
 .../en/components/general/cli-overview.mdx    |  12 +-
 .../components/general/cli/auth-template.mdx  |   2 +-
 .../general/cli/component-templates.mdx       |  78 +-
 ...etting-started-with-angular-schematics.mdx |  14 +-
 .../general/cli/getting-started-with-cli.mdx  |  16 +-
 ...by-step-guide-using-angular-schematics.mdx |  10 +-
 .../cli/step-by-step-guide-using-cli.mdx      |  10 +-
 ...de-splitting-and-multiple-entry-points.mdx |   2 +-
 .../en/components/general/getting-started.mdx |  26 +-
 .../general/how-to/general-how-to-mcp-e2e.mdx |   8 +-
 .../general/how-to/how-to-perform-crud.mdx    |   2 +-
 .../general/open-source-vs-premium.mdx        |   2 +-
 .../geo-map-binding-data-overview.mdx         |  27 +
 .../grid/selection-based-aggregates.mdx       |   2 +-
 .../src/content/en/components/navbar.mdx      |   8 +-
 .../pivot-grid-custom.mdx                     |   4 +-
 .../pivot-grid-features.mdx                   |   4 +-
 .../{pivotGrid => pivotgrid}/pivot-grid.mdx   |   4 +-
 .../content/en/components/query-builder.mdx   |  10 +-
 .../content/en/components/slider/slider.mdx   |   2 +-
 .../src/content/en/components/snackbar.mdx    |   6 +-
 .../src/content/en/components/tabbar.mdx      |   6 +-
 .../src/content/en/components/tabs.mdx        |   6 +-
 .../content/en/components/texthighlight.mdx   |   8 +-
 .../themes/misc/angular-material-theming.mdx  |  20 +-
 .../components/themes/sass/global-themes.mdx  |  16 +-
 .../src/content/en/components/toast.mdx       |   6 +-
 .../src/content/en/components/toc.json        |  10 +-
 docs/angular/src/content/en/docfx.json        | 109 ---
 .../en/grids_templates/advanced-filtering.mdx |  12 +-
 .../en/grids_templates/batch-editing.mdx      |   6 +-
 .../en/grids_templates/cascading-combos.mdx   |   4 +-
 .../en/grids_templates/cell-editing.mdx       |   6 +-
 .../collapsible-column-groups.mdx             |  10 +-
 .../en/grids_templates/column-selection.mdx   |   2 +-
 .../en/grids_templates/column-types.mdx       |   6 +-
 .../content/en/grids_templates/editing.mdx    |  26 +-
 .../grids_templates/excel-style-filtering.mdx |  10 +-
 .../en/grids_templates/export-excel.mdx       |   2 +-
 .../content/en/grids_templates/filtering.mdx  |   2 +-
 .../grids_templates/multi-column-headers.mdx  |   2 +-
 .../en/grids_templates/multi-row-layout.mdx   |   4 +-
 .../src/content/en/grids_templates/paging.mdx |   8 +-
 .../content/en/grids_templates/row-adding.mdx |   4 +-
 .../en/grids_templates/row-editing.mdx        |  12 +-
 .../src/content/en/grids_templates/search.mdx |   2 +-
 .../content/en/grids_templates/selection.mdx  |   6 +-
 .../src/content/en/grids_templates/sizing.mdx |   2 +-
 .../en/grids_templates/state-persistence.mdx  |  28 +-
 .../content/en/grids_templates/summaries.mdx  |   2 +-
 .../content/en/grids_templates/validation.mdx |   2 +
 docs/angular/src/content/jp/.gitignore        |   8 +
 .../src/content/jp/components/accordion.mdx   |   4 +-
 .../content/jp/components/action-strip.mdx    |   2 +-
 .../ai/ai-assisted-development-overview.mdx   |  16 +-
 .../src/content/jp/components/ai/cli-mcp.mdx  |   6 +-
 .../jp/components/ai/maker-framework.mdx      |  10 +-
 .../src/content/jp/components/ai/skills.mdx   |   8 +-
 .../content/jp/components/ai/theming-mcp.mdx  |   6 +-
 .../angular-reactive-form-validation.mdx      |  10 +-
 .../content/jp/components/autocomplete.mdx    |  10 +-
 .../src/content/jp/components/avatar.mdx      |   6 +-
 .../src/content/jp/components/badge.mdx       |   6 +-
 .../src/content/jp/components/banner.mdx      |   6 +-
 .../content/jp/components/button-group.mdx    |   4 +-
 .../src/content/jp/components/button.mdx      |  10 +-
 .../src/content/jp/components/calendar.mdx    |   4 +-
 .../src/content/jp/components/card.mdx        |   4 +-
 .../src/content/jp/components/carousel.mdx    |  12 +-
 .../src/content/jp/components/chat.mdx        |   4 +-
 .../src/content/jp/components/checkbox.mdx    |   4 +-
 .../src/content/jp/components/chip.mdx        |   6 +-
 .../jp/components/circular-progress.mdx       |   2 +-
 .../content/jp/components/combo-features.mdx  |  16 +-
 .../content/jp/components/combo-remote.mdx    |  14 +-
 .../content/jp/components/combo-templates.mdx |  12 +-
 .../src/content/jp/components/combo.mdx       |  38 +-
 .../src/content/jp/components/date-picker.mdx |  32 +-
 .../jp/components/date-range-picker.mdx       |  30 +-
 .../jp/components/date-time-editor.mdx        |  16 +-
 .../src/content/jp/components/dialog.mdx      |  12 +-
 .../src/content/jp/components/divider.mdx     |   2 +-
 .../content/jp/components/dock-manager.mdx    |   2 +-
 .../src/content/jp/components/drag-drop.mdx   |   2 +-
 .../drop-down-hierarchical-selection.mdx      |   8 +-
 .../jp/components/drop-down-virtual.mdx       |   2 +-
 .../src/content/jp/components/drop-down.mdx   |   4 +-
 .../content/jp/components/expansion-panel.mdx |  12 +-
 .../content/jp/components/exporter-csv.mdx    |   6 +-
 .../content/jp/components/exporter-excel.mdx  |   6 +-
 .../content/jp/components/exporter-pdf.mdx    |   2 +-
 .../src/content/jp/components/for-of.mdx      |   4 +-
 .../general-breaking-changes-dv.mdx           |  10 +-
 .../general/angular-grid-overview-guide.mdx   |  22 +-
 .../jp/components/general/cli-overview.mdx    |   6 +-
 .../components/general/cli/auth-template.mdx  |   2 +-
 .../general/cli/component-templates.mdx       |  68 +-
 ...etting-started-with-angular-schematics.mdx |  12 +-
 .../general/cli/getting-started-with-cli.mdx  |  18 +-
 ...by-step-guide-using-angular-schematics.mdx |  12 +-
 .../cli/step-by-step-guide-using-cli.mdx      |  10 +-
 ...de-splitting-and-multiple-entry-points.mdx |  10 +-
 .../jp/components/general/data-analysis.mdx   |  30 +-
 .../jp/components/general/getting-started.mdx |  30 +-
 .../general/how-to/general-how-to-mcp-e2e.mdx |   8 +-
 .../general/how-to/how-to-customize-theme.mdx |  26 +-
 .../general/how-to/how-to-perform-crud.mdx    |  28 +-
 .../how-to-use-standalone-components.mdx      |   4 +-
 .../general/ignite-ui-licensing.mdx           |  10 +-
 .../general/open-source-vs-premium.mdx        |  16 +-
 .../jp/components/general/ssr-rendering.mdx   |   8 +-
 .../jp/components/general/update-guide.mdx    |   8 +-
 .../wpf-to-angular-guide/one-way-binding.mdx  |   2 +-
 .../wpf-to-angular-guide/two-way-binding.mdx  |   2 +-
 .../wpf-to-angular-guide.mdx                  |  16 +-
 .../jp/components/grid-lite/binding.mdx       |   8 +-
 .../jp/components/grid-lite/cell-template.mdx |   8 +-
 .../grid-lite/column-configuration.mdx        |  10 +-
 .../jp/components/grid-lite/filtering.mdx     |   4 +-
 .../components/grid-lite/header-template.mdx  |   6 +-
 .../jp/components/grid-lite/overview.mdx      |   2 +-
 .../jp/components/grid-lite/sorting.mdx       |   4 +-
 .../jp/components/grid-lite/theming.mdx       |   6 +-
 .../src/content/jp/components/grid/grid.mdx   |  50 +-
 .../content/jp/components/grid/groupby.mdx    |  26 +-
 .../jp/components/grid/paste-excel.mdx        |   2 +-
 .../grid/selection-based-aggregates.mdx       |  12 +-
 .../content/jp/components/grids-and-lists.mdx |  76 +-
 .../hierarchicalgrid/hierarchical-grid.mdx    |  12 +-
 .../hierarchicalgrid/load-on-demand.mdx       |   2 +-
 .../src/content/jp/components/icon-button.mdx |   6 +-
 .../src/content/jp/components/icon.mdx        |   6 +-
 .../src/content/jp/components/input-group.mdx |  12 +-
 .../src/content/jp/components/label-input.mdx |   6 +-
 .../content/jp/components/linear-progress.mdx |   2 +-
 .../src/content/jp/components/list.mdx        |  14 +-
 .../src/content/jp/components/mask.mdx        |   4 +-
 .../content/jp/components/month-picker.mdx    |   4 +-
 .../src/content/jp/components/navbar.mdx      |   8 +-
 .../src/content/jp/components/navdrawer.mdx   |  14 +-
 .../jp/components/overlay-position.mdx        |   6 +-
 .../content/jp/components/overlay-scroll.mdx  |   6 +-
 .../content/jp/components/overlay-styling.mdx |  22 +-
 .../src/content/jp/components/overlay.mdx     |   8 +-
 .../src/content/jp/components/paginator.mdx   |  12 +-
 .../pivotgrid/pivot-grid-custom.mdx           |   4 +-
 .../pivotgrid/pivot-grid-features.mdx         |   4 +-
 .../jp/components/pivotgrid/pivot-grid.mdx    |   8 +-
 .../content/jp/components/query-builder.mdx   |  10 +-
 .../content/jp/components/radio-button.mdx    |   6 +-
 .../src/content/jp/components/ripple.mdx      |   2 +-
 .../src/content/jp/components/select.mdx      |   8 +-
 .../content/jp/components/simple-combo.mdx    |  24 +-
 .../jp/components/slider/slider-ticks.mdx     |   2 +-
 .../content/jp/components/slider/slider.mdx   |   4 +-
 .../src/content/jp/components/snackbar.mdx    |   6 +-
 .../src/content/jp/components/splitter.mdx    |   4 +-
 .../src/content/jp/components/stepper.mdx     |  12 +-
 .../src/content/jp/components/style-guide.mdx |   2 +-
 .../src/content/jp/components/switch.mdx      |   4 +-
 .../src/content/jp/components/tabbar.mdx      |   6 +-
 .../src/content/jp/components/tabs.mdx        |   6 +-
 .../content/jp/components/texthighlight.mdx   |   8 +-
 .../jp/components/themes/elevations.mdx       |   2 +-
 .../content/jp/components/themes/index.mdx    |  12 +-
 .../themes/misc/angular-material-theming.mdx  |  22 +-
 .../themes/misc/bootstrap-theming.mdx         |  22 +-
 .../themes/misc/printing-styles.mdx           |   2 +-
 .../content/jp/components/themes/palettes.mdx |   2 +-
 .../jp/components/themes/roundness.mdx        |   8 +-
 .../themes/sass/component-themes.mdx          |   4 +-
 .../components/themes/sass/configuration.mdx  |  14 +-
 .../jp/components/themes/sass/elevations.mdx  |   4 +-
 .../components/themes/sass/global-themes.mdx  |  18 +-
 .../jp/components/themes/sass/index.mdx       |  16 +-
 .../jp/components/themes/sass/palettes.mdx    |   6 +-
 .../jp/components/themes/sass/typography.mdx  |   2 +-
 .../jp/components/themes/typography.mdx       |   2 +-
 .../content/jp/components/tile-manager.mdx    |   2 +-
 .../src/content/jp/components/time-picker.mdx |  26 +-
 .../src/content/jp/components/toast.mdx       |   6 +-
 .../src/content/jp/components/toggle.mdx      |   2 +-
 .../src/content/jp/components/tooltip.mdx     |  14 +-
 .../jp/components/transaction-classes.mdx     |  28 +-
 .../jp/components/transaction-how-to-use.mdx  |   4 +-
 .../src/content/jp/components/transaction.mdx |  18 +-
 .../src/content/jp/components/tree.mdx        |   8 +-
 .../jp/components/treegrid/groupby.mdx        |   8 +-
 .../jp/components/treegrid/load-on-demand.mdx |   6 +-
 .../jp/components/treegrid/tree-grid.mdx      |  14 +-
 docs/angular/src/content/jp/docfx.json        | 109 ---
 .../jp/grids_templates/advanced-filtering.mdx |  16 +-
 .../jp/grids_templates/batch-editing.mdx      |   8 +-
 .../jp/grids_templates/cascading-combos.mdx   |  16 +-
 .../jp/grids_templates/cell-editing.mdx       |  24 +-
 .../collapsible-column-groups.mdx             |  11 +-
 .../jp/grids_templates/column-hiding.mdx      |   8 +-
 .../jp/grids_templates/column-moving.mdx      |   2 +-
 .../jp/grids_templates/column-pinning.mdx     |   4 +-
 .../jp/grids_templates/column-resizing.mdx    |   2 +-
 .../jp/grids_templates/column-selection.mdx   |   2 +-
 .../jp/grids_templates/column-types.mdx       |  13 +-
 .../content/jp/grids_templates/editing.mdx    |  24 +-
 .../grids_templates/excel-style-filtering.mdx |  12 +-
 .../jp/grids_templates/export-excel.mdx       |  10 +-
 .../content/jp/grids_templates/filtering.mdx  |   6 +-
 .../content/jp/grids_templates/live-data.mdx  |   6 +-
 .../grids_templates/multi-column-headers.mdx  |   4 +-
 .../jp/grids_templates/multi-row-layout.mdx   |   8 +-
 .../src/content/jp/grids_templates/paging.mdx |   6 +-
 .../jp/grids_templates/row-actions.mdx        |   2 +-
 .../content/jp/grids_templates/row-adding.mdx |  12 +-
 .../content/jp/grids_templates/row-drag.mdx   |   2 +-
 .../jp/grids_templates/row-editing.mdx        |  20 +-
 .../jp/grids_templates/row-pinning.mdx        |   2 +-
 .../src/content/jp/grids_templates/search.mdx |   4 +-
 .../content/jp/grids_templates/selection.mdx  |   2 +-
 .../src/content/jp/grids_templates/sizing.mdx |   2 +-
 .../content/jp/grids_templates/sorting.mdx    |   2 +-
 .../jp/grids_templates/state-persistence.mdx  |  24 +-
 .../content/jp/grids_templates/summaries.mdx  |  26 +-
 .../content/jp/grids_templates/toolbar.mdx    |   2 +-
 .../content/jp/grids_templates/validation.mdx |   6 +-
 docs/angular/src/scripts/grid-configs.mjs     |   2 +-
 docs/xplat/scripts/generate.mjs               |  45 +-
 .../ai/ai-assisted-development-overview.mdx   |  18 +-
 .../src/content/en/components/ai/cli-mcp.mdx  |  10 +-
 .../en/components/ai/maker-framework.mdx      |  10 +-
 .../src/content/en/components/ai/skills.mdx   |  54 +-
 .../content/en/components/ai/theming-mcp.mdx  |  12 +-
 ...rite-excel-files-to-reduce-server-load.mdx |   2 +-
 .../content/en/components/bullet-graph.mdx    |   4 +-
 .../en/components/charts/chart-api.mdx        |   8 +-
 .../en/components/charts/chart-features.mdx   |  20 +-
 .../en/components/charts/chart-overview.mdx   |  50 +-
 .../charts/features/chart-animations.mdx      |   8 +-
 .../charts/features/chart-axis-gridlines.mdx  |   4 +-
 .../charts/features/chart-axis-layouts.mdx    |  10 +-
 .../charts/features/chart-axis-options.mdx    |   8 +-
 .../charts/features/chart-axis-types.mdx      |  22 +-
 .../features/chart-data-aggregations.mdx      |   2 +-
 .../charts/features/chart-data-filtering.mdx  |   8 +-
 .../features/chart-highlight-filter.mdx       |   6 +-
 .../charts/features/chart-highlighting.mdx    |   6 +-
 .../charts/features/chart-markers.mdx         |   6 +-
 .../charts/features/chart-navigation.mdx      |   4 +-
 .../charts/features/chart-overlays.mdx        |  12 +-
 .../charts/features/chart-performance.mdx     |  88 +--
 .../charts/features/chart-tooltips.mdx        |   6 +-
 .../charts/features/chart-trendlines.mdx      |   4 +-
 .../features/chart-user-annotations.mdx       |   4 +-
 .../en/components/charts/types/area-chart.mdx |  20 +-
 .../en/components/charts/types/bar-chart.mdx  |  20 +-
 .../components/charts/types/bubble-chart.mdx  |   6 +-
 .../components/charts/types/column-chart.mdx  |  22 +-
 .../charts/types/composite-chart.mdx          |   8 +-
 .../charts/types/data-pie-chart.mdx           |   6 +-
 .../components/charts/types/donut-chart.mdx   |  30 +-
 .../components/charts/types/gantt-chart.mdx   |  10 +-
 .../en/components/charts/types/line-chart.mdx |  18 +-
 .../components/charts/types/network-chart.mdx |   6 +-
 .../en/components/charts/types/pie-chart.mdx  |   6 +-
 .../components/charts/types/point-chart.mdx   |  12 +-
 .../components/charts/types/polar-chart.mdx   |  26 +-
 .../components/charts/types/pyramid-chart.mdx |   8 +-
 .../components/charts/types/radial-chart.mdx  |  16 +-
 .../components/charts/types/scatter-chart.mdx |  10 +-
 .../components/charts/types/shape-chart.mdx   |   6 +-
 .../charts/types/sparkline-chart.mdx          |   6 +-
 .../components/charts/types/spline-chart.mdx  |  12 +-
 .../components/charts/types/stacked-chart.mdx |  18 +-
 .../en/components/charts/types/step-chart.mdx |   6 +-
 .../components/charts/types/stock-chart.mdx   |  10 +-
 .../components/charts/types/treemap-chart.mdx |   4 +-
 .../content/en/components/dashboard-tile.mdx  |  12 +-
 .../content/en/components/excel-library.mdx   |   2 +-
 .../content/en/components/excel-utility.mdx   |   2 +-
 .../general-changelog-dv-blazor.mdx           | 134 ++--
 .../components/general-changelog-dv-react.mdx |  84 +-
 .../en/components/general-changelog-dv-wc.mdx | 162 ++--
 .../en/components/general-changelog-dv.mdx    |  52 +-
 .../en/components/general-cli-overview.mdx    |  14 +-
 .../general-getting-started-blazor-client.mdx |   4 +-
 .../general-getting-started-blazor-maui.mdx   |   2 +-
 ...general-getting-started-blazor-web-app.mdx |   2 +-
 .../general-getting-started-oss.mdx           |   8 +-
 .../en/components/general-getting-started.mdx |  26 +-
 .../en/components/general-how-to-mcp-e2e.mdx  |  10 +-
 .../components/general-installing-blazor.mdx  |   4 +-
 .../en/components/general-licensing.mdx       |   4 +-
 .../general-open-source-vs-premium.mdx        |  32 +-
 .../general-step-by-step-guide-using-cli.mdx  |   6 +-
 .../components/geo-map-binding-data-model.mdx |   2 +-
 .../geo-map-binding-data-overview.mdx         |  10 +-
 .../geo-map-binding-multiple-shapes.mdx       |   2 +-
 .../geo-map-binding-multiple-sources.mdx      |   2 +-
 .../geo-map-display-esri-imagery.mdx          |   2 +-
 .../geo-map-display-heat-imagery.mdx          |   2 +-
 .../geo-map-resources-world-connections.mdx   |   2 +-
 .../geo-map-shape-files-reference.mdx         |   2 +-
 .../en/components/geo-map-shape-styling.mdx   |   2 +-
 .../en/components/geo-map-type-series.mdx     |  14 +-
 .../src/content/en/components/geo-map.mdx     |  18 +-
 .../en/components/grid-lite/binding.mdx       |   8 +-
 .../en/components/grid-lite/cell-template.mdx |   8 +-
 .../grid-lite/column-configuration.mdx        |   8 +-
 .../en/components/grid-lite/filtering.mdx     |   4 +-
 .../components/grid-lite/header-template.mdx  |   6 +-
 .../en/components/grid-lite/overview.mdx      |   2 +-
 .../en/components/grid-lite/sorting.mdx       |   4 +-
 .../en/components/grid-lite/theming.mdx       |   8 +-
 .../grids/_shared/advanced-filtering.mdx      |  28 +-
 .../grids/_shared/batch-editing.mdx           |  22 +-
 .../components/grids/_shared/cell-editing.mdx |  60 +-
 .../components/grids/_shared/cell-merging.mdx |  20 +-
 .../grids/_shared/cell-selection.mdx          |  22 +-
 .../grids/_shared/clipboard-interactions.mdx  |  20 +-
 .../_shared/collapsible-column-groups.mdx     |  20 +-
 .../grids/_shared/column-hiding.mdx           |  24 +-
 .../grids/_shared/column-moving.mdx           |  22 +-
 .../grids/_shared/column-pinning.mdx          |  24 +-
 .../grids/_shared/column-resizing.mdx         |  24 +-
 .../grids/_shared/column-selection.mdx        |  28 +-
 .../components/grids/_shared/column-types.mdx |  12 +-
 .../_shared/conditional-cell-styling.mdx      |  28 +-
 .../en/components/grids/_shared/editing.mdx   |  60 +-
 .../grids/_shared/excel-style-filtering.mdx   |  26 +-
 .../components/grids/_shared/export-excel.mdx |   8 +-
 .../en/components/grids/_shared/filtering.mdx |  30 +-
 .../grids/_shared/keyboard-navigation.mdx     |  22 +-
 .../en/components/grids/_shared/live-data.mdx |  26 +-
 .../grids/_shared/multi-column-headers.mdx    |  28 +-
 .../grids/_shared/multi-row-layout.mdx        |  18 +-
 .../en/components/grids/_shared/paging.mdx    |  31 +-
 .../grids/_shared/remote-data-operations.mdx  |  20 +-
 .../components/grids/_shared/row-adding.mdx   |   8 +-
 .../en/components/grids/_shared/row-drag.mdx  |   2 +-
 .../components/grids/_shared/row-editing.mdx  |  26 +-
 .../components/grids/_shared/row-pinning.mdx  |  22 +-
 .../grids/_shared/row-selection.mdx           |  20 +-
 .../en/components/grids/_shared/search.mdx    |  22 +-
 .../en/components/grids/_shared/selection.mdx |  24 +-
 .../en/components/grids/_shared/size.mdx      |  22 +-
 .../en/components/grids/_shared/sizing.mdx    |   2 +-
 .../en/components/grids/_shared/sorting.mdx   |  26 +-
 .../grids/_shared/state-persistence.mdx       |  22 +-
 .../en/components/grids/_shared/summaries.mdx |  48 +-
 .../en/components/grids/_shared/toolbar.mdx   |   4 +-
 .../components/grids/_shared/validation.mdx   |  20 +-
 .../grids/_shared/virtualization.mdx          |  18 +-
 .../content/en/components/grids/data-grid.mdx |  74 +-
 .../en/components/grids/grid/groupby.mdx      |  28 +-
 .../en/components/grids/grid/paste-excel.mdx  |   2 +-
 .../grids/grid/selection-based-aggregates.mdx |  10 +-
 .../en/components/grids/grid/theming-grid.mdx |  46 +-
 .../en/components/grids/grids-header.mdx      |  98 +--
 .../src/content/en/components/grids/grids.mdx | 302 +++----
 .../hierarchical-grid/load-on-demand.mdx      |   2 +-
 .../grids/hierarchical-grid/overview.mdx      |  20 +-
 .../grids/hierarchical-grid/theming-grid.mdx  |  44 +-
 .../src/content/en/components/grids/list.mdx  |   4 +-
 .../components/grids/pivot-grid/overview.mdx  |   2 +-
 .../grids/pivot-grid/remote-operations.mdx    |   4 +-
 .../components/grids/tree-grid/overview.mdx   |  14 +-
 .../grids/tree-grid/theming-grid.mdx          |  46 +-
 .../src/content/en/components/grids/tree.mdx  |   2 +-
 .../content/en/components/inputs/badge.mdx    |   2 +-
 .../en/components/inputs/button-group.mdx     |   2 +-
 .../content/en/components/inputs/button.mdx   |   4 +-
 .../content/en/components/inputs/checkbox.mdx |   2 +-
 .../src/content/en/components/inputs/chip.mdx |   4 +-
 .../components/inputs/circular-progress.mdx   |   2 +-
 .../en/components/inputs/combo/overview.mdx   |   2 +-
 .../en/components/inputs/combo/templates.mdx  |   2 +-
 .../en/components/inputs/date-time-input.mdx  |   2 +-
 .../content/en/components/inputs/dropdown.mdx |   6 +-
 .../en/components/inputs/file-input.mdx       |   4 +-
 .../en/components/inputs/highlight.mdx        |   2 +-
 .../en/components/inputs/icon-button.mdx      |   4 +-
 .../content/en/components/inputs/input.mdx    |   4 +-
 .../en/components/inputs/linear-progress.mdx  |   2 +-
 .../en/components/inputs/mask-input.mdx       |   2 +-
 .../content/en/components/inputs/radio.mdx    |   2 +-
 .../content/en/components/inputs/rating.mdx   |   4 +-
 .../content/en/components/inputs/ripple.mdx   |   2 +-
 .../content/en/components/inputs/select.mdx   |   6 +-
 .../content/en/components/inputs/slider.mdx   |   2 +-
 .../content/en/components/inputs/switch.mdx   |   2 +-
 .../en/components/inputs/text-area.mdx        |   4 +-
 .../content/en/components/inputs/tooltip.mdx  |   2 +-
 .../en/components/interactivity/chat.mdx      |   2 +-
 .../en/components/layouts/accordion.mdx       |   2 +-
 .../content/en/components/layouts/avatar.mdx  |   2 +-
 .../content/en/components/layouts/card.mdx    |   4 +-
 .../en/components/layouts/carousel.mdx        |   8 +-
 .../content/en/components/layouts/divider.mdx |   2 +-
 .../en/components/layouts/dock-manager.mdx    |   4 +-
 .../en/components/layouts/expansion-panel.mdx |   6 +-
 .../content/en/components/layouts/icon.mdx    |   2 +-
 .../en/components/layouts/splitter.mdx        |   4 +-
 .../content/en/components/layouts/stepper.mdx |   4 +-
 .../content/en/components/layouts/tabs.mdx    |   6 +-
 .../en/components/layouts/tile-manager.mdx    |   6 +-
 .../content/en/components/linear-gauge.mdx    |   4 +-
 .../content/en/components/menus/navbar.mdx    |   2 +-
 .../en/components/menus/navigation-drawer.mdx |   2 +-
 .../content/en/components/nextjs-usage.mdx    |   8 +-
 .../en/components/notifications/banner.mdx    |   2 +-
 .../en/components/notifications/dialog.mdx    |   2 +-
 .../en/components/notifications/snackbar.mdx  |   2 +-
 .../en/components/notifications/toast.mdx     |   2 +-
 .../content/en/components/radial-gauge.mdx    |   8 +-
 .../en/components/scheduling/calendar.mdx     |   2 +-
 .../en/components/scheduling/date-picker.mdx  |  10 +-
 .../scheduling/date-range-picker.mdx          |  18 +-
 .../components/spreadsheet-chart-adapter.mdx  |   2 +-
 .../en/components/spreadsheet-overview.mdx    |   2 +-
 .../content/en/components/update-guide.mdx    |   6 +-
 .../en/components/zoomslider-overview.mdx     |   2 +-
 docs/xplat/src/content/en/toc.json            | 736 +++++++++---------
 .../ai/ai-assisted-development-overview.mdx   |  18 +-
 .../src/content/jp/components/ai/cli-mcp.mdx  |  14 +-
 .../jp/components/ai/maker-framework.mdx      |  10 +-
 .../src/content/jp/components/ai/skills.mdx   |  38 +-
 .../content/jp/components/ai/theming-mcp.mdx  |  10 +-
 ...rite-excel-files-to-reduce-server-load.mdx |   2 +-
 .../content/jp/components/bullet-graph.mdx    |   4 +-
 .../jp/components/charts/chart-api.mdx        |   8 +-
 .../jp/components/charts/chart-features.mdx   |  20 +-
 .../jp/components/charts/chart-overview.mdx   |  44 +-
 .../charts/features/chart-animations.mdx      |   8 +-
 .../charts/features/chart-axis-gridlines.mdx  |   4 +-
 .../charts/features/chart-axis-layouts.mdx    |  10 +-
 .../charts/features/chart-axis-options.mdx    |   8 +-
 .../charts/features/chart-axis-types.mdx      |  22 +-
 .../features/chart-data-aggregations.mdx      |   2 +-
 .../charts/features/chart-data-filtering.mdx  |   8 +-
 .../features/chart-highlight-filter.mdx       |   6 +-
 .../charts/features/chart-highlighting.mdx    |   6 +-
 .../charts/features/chart-markers.mdx         |   6 +-
 .../charts/features/chart-navigation.mdx      |   4 +-
 .../charts/features/chart-overlays.mdx        |  12 +-
 .../charts/features/chart-performance.mdx     |  88 +--
 .../charts/features/chart-tooltips.mdx        |   6 +-
 .../charts/features/chart-trendlines.mdx      |   4 +-
 .../features/chart-user-annotations.mdx       |   4 +-
 .../jp/components/charts/types/area-chart.mdx |  20 +-
 .../jp/components/charts/types/bar-chart.mdx  |  20 +-
 .../components/charts/types/bubble-chart.mdx  |   6 +-
 .../components/charts/types/column-chart.mdx  |  22 +-
 .../charts/types/composite-chart.mdx          |   8 +-
 .../charts/types/data-pie-chart.mdx           |   6 +-
 .../components/charts/types/donut-chart.mdx   |  30 +-
 .../components/charts/types/gantt-chart.mdx   |   8 +-
 .../jp/components/charts/types/line-chart.mdx |  18 +-
 .../components/charts/types/network-chart.mdx |   6 +-
 .../jp/components/charts/types/pie-chart.mdx  |   6 +-
 .../components/charts/types/point-chart.mdx   |  12 +-
 .../components/charts/types/polar-chart.mdx   |  26 +-
 .../components/charts/types/pyramid-chart.mdx |   6 +-
 .../components/charts/types/radial-chart.mdx  |  16 +-
 .../components/charts/types/scatter-chart.mdx |  10 +-
 .../components/charts/types/shape-chart.mdx   |   6 +-
 .../charts/types/sparkline-chart.mdx          |   6 +-
 .../components/charts/types/spline-chart.mdx  |  12 +-
 .../components/charts/types/stacked-chart.mdx |  18 +-
 .../jp/components/charts/types/step-chart.mdx |   6 +-
 .../components/charts/types/stock-chart.mdx   |  10 +-
 .../components/charts/types/treemap-chart.mdx |   4 +-
 .../content/jp/components/dashboard-tile.mdx  |  12 +-
 .../content/jp/components/excel-library.mdx   |   2 +-
 .../content/jp/components/excel-utility.mdx   |   2 +-
 .../general-changelog-dv-blazor.mdx           | 166 ++--
 .../components/general-changelog-dv-react.mdx |  84 +-
 .../jp/components/general-changelog-dv-wc.mdx | 120 +--
 .../jp/components/general-changelog-dv.mdx    |  40 +-
 .../general-getting-started-blazor-client.mdx |   4 +-
 .../general-getting-started-blazor-maui.mdx   |   2 +-
 ...general-getting-started-blazor-web-app.mdx |   2 +-
 .../general-getting-started-oss.mdx           |   8 +-
 .../jp/components/general-getting-started.mdx |  22 +-
 .../jp/components/general-how-to-mcp-e2e.mdx  |  10 +-
 .../components/general-installing-blazor.mdx  |   4 +-
 .../jp/components/general-licensing.mdx       |   4 +-
 .../general-open-source-vs-premium.mdx        |  32 +-
 .../general-step-by-step-guide-using-cli.mdx  |   6 +-
 .../components/geo-map-binding-data-model.mdx |   2 +-
 .../geo-map-binding-data-overview.mdx         |  10 +-
 .../geo-map-binding-multiple-shapes.mdx       |   2 +-
 .../geo-map-binding-multiple-sources.mdx      |   2 +-
 .../geo-map-display-esri-imagery.mdx          |   2 +-
 .../geo-map-display-heat-imagery.mdx          |   2 +-
 .../geo-map-resources-world-connections.mdx   |   2 +-
 .../geo-map-shape-files-reference.mdx         |   2 +-
 .../jp/components/geo-map-shape-styling.mdx   |   2 +-
 .../jp/components/geo-map-type-series.mdx     |  14 +-
 .../src/content/jp/components/geo-map.mdx     |  18 +-
 .../jp/components/grid-lite/binding.mdx       |   8 +-
 .../jp/components/grid-lite/cell-template.mdx |   8 +-
 .../grid-lite/column-configuration.mdx        |   8 +-
 .../jp/components/grid-lite/filtering.mdx     |   4 +-
 .../components/grid-lite/header-template.mdx  |   6 +-
 .../jp/components/grid-lite/overview.mdx      |   2 +-
 .../jp/components/grid-lite/sorting.mdx       |   4 +-
 .../jp/components/grid-lite/theming.mdx       |   8 +-
 .../grids/_shared/advanced-filtering.mdx      |  28 +-
 .../grids/_shared/batch-editing.mdx           |   2 +-
 .../components/grids/_shared/cell-editing.mdx |  64 +-
 .../grids/_shared/cell-selection.mdx          |  22 +-
 .../grids/_shared/clipboard-interactions.mdx  |  20 +-
 .../_shared/collapsible-column-groups.mdx     |  20 +-
 .../grids/_shared/column-hiding.mdx           |  24 +-
 .../grids/_shared/column-moving.mdx           |  22 +-
 .../grids/_shared/column-pinning.mdx          |   6 +-
 .../grids/_shared/column-resizing.mdx         |  24 +-
 .../grids/_shared/column-selection.mdx        |  30 +-
 .../components/grids/_shared/column-types.mdx |  12 +-
 .../_shared/conditional-cell-styling.mdx      |  30 +-
 .../jp/components/grids/_shared/editing.mdx   |  60 +-
 .../grids/_shared/excel-style-filtering.mdx   |   8 +-
 .../components/grids/_shared/export-excel.mdx |  10 +-
 .../jp/components/grids/_shared/filtering.mdx |  20 +-
 .../grids/_shared/keyboard-navigation.mdx     |  22 +-
 .../jp/components/grids/_shared/live-data.mdx |  26 +-
 .../grids/_shared/multi-column-headers.mdx    |  28 +-
 .../grids/_shared/multi-row-layout.mdx        |  18 +-
 .../jp/components/grids/_shared/paging.mdx    |  12 +-
 .../grids/_shared/remote-data-operations.mdx  |   2 +-
 .../components/grids/_shared/row-adding.mdx   |   4 +-
 .../jp/components/grids/_shared/row-drag.mdx  |   2 +-
 .../components/grids/_shared/row-editing.mdx  |  26 +-
 .../components/grids/_shared/row-pinning.mdx  |  24 +-
 .../grids/_shared/row-selection.mdx           |  20 +-
 .../jp/components/grids/_shared/search.mdx    |  22 +-
 .../jp/components/grids/_shared/selection.mdx |  24 +-
 .../jp/components/grids/_shared/size.mdx      |  22 +-
 .../jp/components/grids/_shared/sizing.mdx    |   2 +-
 .../jp/components/grids/_shared/sorting.mdx   |   4 +-
 .../grids/_shared/state-persistence.mdx       |  26 +-
 .../jp/components/grids/_shared/summaries.mdx |  30 +-
 .../jp/components/grids/_shared/toolbar.mdx   |   4 +-
 .../components/grids/_shared/validation.mdx   |  30 +-
 .../grids/_shared/virtualization.mdx          |  18 +-
 .../content/jp/components/grids/data-grid.mdx |  73 +-
 .../jp/components/grids/grid/groupby.mdx      |  28 +-
 .../jp/components/grids/grid/paste-excel.mdx  |   2 +-
 .../grids/grid/selection-based-aggregates.mdx |  10 +-
 .../jp/components/grids/grids-header.mdx      |  82 +-
 .../src/content/jp/components/grids/grids.mdx | 300 +++----
 .../hierarchical-grid/load-on-demand.mdx      |   2 +-
 .../grids/hierarchical-grid/overview.mdx      |  19 +-
 .../src/content/jp/components/grids/list.mdx  |   2 +-
 .../components/grids/pivot-grid/overview.mdx  |   2 +-
 .../grids/pivot-grid/remote-operations.mdx    |   2 +-
 .../jp/components/grids/theming-grid.mdx      |  44 +-
 .../components/grids/tree-grid/overview.mdx   |  15 +-
 .../src/content/jp/components/grids/tree.mdx  |   2 +-
 .../content/jp/components/inputs/badge.mdx    |   2 +-
 .../jp/components/inputs/button-group.mdx     |   2 +-
 .../content/jp/components/inputs/button.mdx   |   2 +-
 .../content/jp/components/inputs/checkbox.mdx |   2 +-
 .../src/content/jp/components/inputs/chip.mdx |   2 +-
 .../components/inputs/circular-progress.mdx   |   2 +-
 .../jp/components/inputs/combo/overview.mdx   |   2 +-
 .../jp/components/inputs/date-time-input.mdx  |   2 +-
 .../content/jp/components/inputs/dropdown.mdx |   4 +-
 .../jp/components/inputs/file-input.mdx       |   2 +-
 .../jp/components/inputs/highlight.mdx        |   2 +-
 .../jp/components/inputs/icon-button.mdx      |   4 +-
 .../content/jp/components/inputs/input.mdx    |   2 +-
 .../jp/components/inputs/linear-progress.mdx  |   2 +-
 .../jp/components/inputs/mask-input.mdx       |   2 +-
 .../content/jp/components/inputs/radio.mdx    |   2 +-
 .../content/jp/components/inputs/rating.mdx   |   2 +-
 .../content/jp/components/inputs/ripple.mdx   |   2 +-
 .../content/jp/components/inputs/select.mdx   |   2 +-
 .../content/jp/components/inputs/slider.mdx   |   2 +-
 .../content/jp/components/inputs/switch.mdx   |   2 +-
 .../jp/components/inputs/text-area.mdx        |   2 +-
 .../content/jp/components/inputs/tooltip.mdx  |   2 +-
 .../jp/components/interactivity/chat.mdx      |   2 +-
 .../jp/components/layouts/accordion.mdx       |   2 +-
 .../content/jp/components/layouts/avatar.mdx  |   2 +-
 .../content/jp/components/layouts/card.mdx    |   2 +-
 .../jp/components/layouts/carousel.mdx        |   4 +-
 .../content/jp/components/layouts/divider.mdx |   2 +-
 .../jp/components/layouts/dock-manager.mdx    |   4 +-
 .../jp/components/layouts/expansion-panel.mdx |   4 +-
 .../content/jp/components/layouts/icon.mdx    |   2 +-
 .../jp/components/layouts/splitter.mdx        |   4 +-
 .../content/jp/components/layouts/stepper.mdx |   2 +-
 .../content/jp/components/layouts/tabs.mdx    |   2 +-
 .../jp/components/layouts/tile-manager.mdx    |   4 +-
 .../content/jp/components/linear-gauge.mdx    |   4 +-
 .../content/jp/components/menus/navbar.mdx    |   2 +-
 .../jp/components/menus/navigation-drawer.mdx |   2 +-
 .../content/jp/components/nextjs-usage.mdx    |   8 +-
 .../jp/components/notifications/banner.mdx    |   2 +-
 .../jp/components/notifications/dialog.mdx    |   2 +-
 .../jp/components/notifications/snackbar.mdx  |   2 +-
 .../jp/components/notifications/toast.mdx     |   2 +-
 .../content/jp/components/radial-gauge.mdx    |   8 +-
 .../jp/components/scheduling/calendar.mdx     |   2 +-
 .../jp/components/scheduling/date-picker.mdx  |   4 +-
 .../scheduling/date-range-picker.mdx          |  10 +-
 .../components/spreadsheet-chart-adapter.mdx  |   2 +-
 .../jp/components/spreadsheet-overview.mdx    |   2 +-
 .../content/jp/components/update-guide.mdx    |   4 +-
 .../jp/components/zoomslider-overview.mdx     |   2 +-
 docs/xplat/src/content/jp/toc.json            | 736 +++++++++---------
 docs/xplat/src/pages/index.astro              |   2 +-
 migration.md                                  | 588 --------------
 package.json                                  |   7 +-
 reports/html-links-report.md                  |  12 +
 reports/relative-links-report-angular.md      |  12 +
 reports/relative-links-report-xplat.md        |  12 +
 reports/relative-links-report.md              |  12 +
 scripts/check-html-links.mjs                  | 224 ++++++
 scripts/check-mdx-quality.mjs                 |  18 +-
 scripts/check-relative-links-ci.mjs           |  90 +++
 scripts/check-relative-links.mjs              | 512 ++++++++++++
 scripts/merge-vnext-updates.mjs               | 260 -------
 scripts/migrate-vnext-new-files.mjs           | 114 ---
 scripts/reimport-body.mjs                     | 500 ------------
 src/content.config.ts                         |   4 +-
 src/plugins/remark-md-links.ts                |  30 +-
 src/sidebar.ts                                |   5 +-
 646 files changed, 6046 insertions(+), 6969 deletions(-)
 delete mode 100644 .env.example
 create mode 100644 .github/workflows/check-relative-links.yml
 delete mode 100644 docs/angular/.github/CONTRIBUTING.md
 delete mode 100644 docs/angular/README.md
 create mode 100644 docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
 rename docs/angular/src/content/en/components/{pivotGrid => pivotgrid}/pivot-grid-custom.mdx (98%)
 rename docs/angular/src/content/en/components/{pivotGrid => pivotgrid}/pivot-grid-features.mdx (98%)
 rename docs/angular/src/content/en/components/{pivotGrid => pivotgrid}/pivot-grid.mdx (99%)
 delete mode 100644 docs/angular/src/content/en/docfx.json
 delete mode 100644 docs/angular/src/content/jp/docfx.json
 delete mode 100644 migration.md
 create mode 100644 reports/html-links-report.md
 create mode 100644 reports/relative-links-report-angular.md
 create mode 100644 reports/relative-links-report-xplat.md
 create mode 100644 reports/relative-links-report.md
 create mode 100644 scripts/check-html-links.mjs
 create mode 100644 scripts/check-relative-links-ci.mjs
 create mode 100644 scripts/check-relative-links.mjs
 delete mode 100644 scripts/merge-vnext-updates.mjs
 delete mode 100644 scripts/migrate-vnext-new-files.mjs
 delete mode 100644 scripts/reimport-body.mjs

diff --git a/.env.example b/.env.example
deleted file mode 100644
index c5a3a49171..0000000000
--- a/.env.example
+++ /dev/null
@@ -1,13 +0,0 @@
-# ---------------------------------------------------------------------------
-# docs-template — local development environment
-#
-# Copy this file to .env and fill in the paths for your machine.
-# The .env file is gitignored; never commit real paths.
-# ---------------------------------------------------------------------------
-
-# Absolute path to the root of the docs source repository.
-# This directory must contain en/components/toc.yml and en/components/*.md
-#
-# Windows example:   DOCS_SOURCE_PATH=C:/Repos/docs/my-docs-source
-# macOS/Linux:       DOCS_SOURCE_PATH=/home/user/repos/my-docs-source
-DOCS_SOURCE_PATH=
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 3819775212..6f5479647b 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -477,6 +477,16 @@ The xplat documentation uses a single MDX source file shared across all four pla
 
 When creating a shared topic that covers multiple grid types (e.g. Grid, TreeGrid, HierarchicalGrid), use the `{ComponentName}` token in prose and code examples so the same file can be referenced from each grid's navigation entry with a different `{ComponentName}` value injected. Each generated output file gets its own resolved content without duplicating the MDX source.
 
+### Grid template files (`_shared/`)
+
+Files under `docs/xplat/src/content/*/components/grids/_shared/` are template sources expanded by `docs/xplat/scripts/generate.mjs` into per-grid-type output under `docs/xplat/generated/`. They are **excluded** from the direct relative-link check; their links are validated via the generated output after the generate step runs.
+
+Cross-references from a `_shared/` file to grid-specific topics must use relative paths that resolve from the **generated** location, e.g. `../grid/groupby.mdx` (not `./groupby.mdx`, which would resolve from the `_shared/` directory itself).
+
+### Relative link convention
+
+All cross-page links must carry the `.mdx` extension. Both explicit (`./page.mdx`, `../dir/page.mdx`) and bare (`page.mdx`) forms are accepted by the checker and by the `remarkMdLinks` build plugin. Run `npm run check-relative-links:ci` to validate all links after making changes.
+
 # <a name='#updating-of-data-visualization-related-topics'>Updating of Data Visualization related topics</a>
 
 The cross-platform (xplat) documentation MDX source files live in this repository under `docs/xplat/src/content/`. Edit them directly here. The generated per-platform output is produced by the build scripts under `docs/xplat/scripts/`.
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index b7ad13ed59..09c2ffb8d3 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -4,7 +4,7 @@ Closes #
  
  - [ ] check topic's TOC/menu and paragraph headings
  - [ ] Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered `preview` / `beta`
- - [ ] link to other topics using `../relative/path.md`
+ - [ ] link to other topics using `./page.mdx` or `../relative/path.mdx` (`.mdx` extension required)
  - [ ] at the References section at the end of the topic add links to topics, samples, etc
  - [ ] reference API documentation instead of adding a section with API
 
diff --git a/.github/workflows/check-relative-links.yml b/.github/workflows/check-relative-links.yml
new file mode 100644
index 0000000000..a8779bf886
--- /dev/null
+++ b/.github/workflows/check-relative-links.yml
@@ -0,0 +1,71 @@
+name: Check Relative Links
+
+permissions:
+  contents: read
+
+on:
+  pull_request:
+    branches: [master, vnext]
+    paths:
+      - 'docs/**/*.mdx'
+      - 'docs/**/*.md'
+      - 'docs/*/scripts/**'
+      - 'scripts/check-relative-links*.mjs'
+      - 'package.json'
+
+jobs:
+  check-relative-links:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          cache: 'npm'
+
+      - run: npm ci
+
+      # Sync xplat-generated Angular content into docs/angular/src/content
+      # before scanning so the angular tree is complete (same as the angular build).
+      - name: Sync xplat → angular (en)
+        run: npm run sync:generated-from-xplat --prefix docs/angular
+
+      - name: Sync xplat → angular (jp)
+        run: npm run sync:generated-from-xplat:jp --prefix docs/angular
+
+      - name: Generate angular content (en)
+        run: npm run generate:en --prefix docs/angular
+
+      - name: Generate angular content (jp)
+        run: npm run generate:jp --prefix docs/angular
+
+      # Expand xplat _shared/ templates into docs/xplat/generated/ for all
+      # non-Angular platforms so the generated grid pages are present when
+      # the xplat link check runs (Angular is already generated by the sync step).
+      - name: Generate xplat content (en)
+        run: |
+          npm run generate:react --prefix docs/xplat
+          npm run generate:webcomponents --prefix docs/xplat
+          npm run generate:blazor --prefix docs/xplat
+
+      - name: Generate xplat content (jp)
+        run: |
+          npm run generate:react:jp --prefix docs/xplat
+          npm run generate:webcomponents:jp --prefix docs/xplat
+          npm run generate:blazor:jp --prefix docs/xplat
+
+      - name: Check relative links
+        shell: bash
+        run: |
+          set -o pipefail
+
+          EXIT=0
+          echo '## Relative Link Check' >> "$GITHUB_STEP_SUMMARY"
+          echo '```' >> "$GITHUB_STEP_SUMMARY"
+
+          node scripts/check-relative-links.mjs --platform=xplat 2>&1 | tee -a "$GITHUB_STEP_SUMMARY" || EXIT=1
+          node scripts/check-relative-links.mjs --platform=angular 2>&1 | tee -a "$GITHUB_STEP_SUMMARY" || EXIT=1
+
+          echo '```' >> "$GITHUB_STEP_SUMMARY"
+          exit $EXIT
diff --git a/README.md b/README.md
index ca26caa6bb..0ffaf59cb1 100644
--- a/README.md
+++ b/README.md
@@ -66,6 +66,92 @@ The MDX files currently use these documentation components from `igniteui-astro-
 | `PlatformBlock` | Shows content only for selected platforms. |
 | `Sample` | Embeds runnable or linked product samples. |
 
+## Checking Relative Links
+
+Use the root `check-relative-links` scripts to validate that every relative cross-page link in the MDX source resolves to an existing file.
+
+### Link convention
+
+All relative cross-page links must carry the `.mdx` extension. Preferred forms:
+
+- `./page.mdx` — same-directory link (explicit relative)
+- `../folder/page.mdx` — parent-directory link (explicit relative)
+- `page.mdx` — bare same-directory link (also accepted by the checker)
+
+The `.mdx` extension enables editor Go-to-Definition (Ctrl+Click). The `remarkMdLinks` plugin strips the extension and makes the URL absolute at build time. The link checker validates that the target file exists and normalizes bare `page.mdx` links as same-directory relative.
+
+### Angular content pipeline
+
+The Angular documentation is assembled from three sources before being checked:
+
+1. **xplat sync** — `docs/xplat/src/content/` is generated into platform-specific output and then copied into `docs/angular/src/content/` by the sync scripts.
+2. **Grid generation** — `docs/angular/src/content/en/grids_templates/` and `jp/grids_templates/` are template files shared across all four grid types (Grid, TreeGrid, HierarchicalGrid, PivotGrid). `generate.mjs` expands them into the individual component pages under `docs/angular/src/content/en/components/grid/`, `treegrid/`, `hierarchicalgrid/`, and `pivotGrid/`. These template directories are excluded from link checking (same as xplat `_shared/`).
+3. **Link check** — the checker scans the fully assembled `docs/angular/src/content/` tree.
+
+The check must run **after** both steps above, otherwise it scans stale or incomplete files and misses links that only exist in generated output.
+
+> **xplat:** The checker scans both `docs/xplat/src/content/` (source) and the `docs/xplat/generated/React|WebComponents|Blazor` trees, so a broken link usually surfaces once per source file plus once per generated platform copy. `docs/xplat/generated/` is gitignored build output, fix the link in the source file and regenerate; never edit the generated copies.
+
+### Commands
+
+The preferred command to replicate the exact CI pipeline locally:
+
+```bash
+npm run check-relative-links:ci
+```
+
+This runs the full chain in order:
+1. Sync xplat → angular (en)
+2. Sync xplat → angular (jp)
+3. Generate angular grid pages (en)
+4. Generate angular grid pages (jp)
+5. Generate xplat React + WC + Blazor pages (en) — expands `_shared/` templates and rewrites `_shared/` paths in output
+6. Generate xplat React + WC + Blazor pages (jp)
+7. Check xplat links (source `docs/xplat/src/content/` + `docs/xplat/generated/`)
+8. Check angular links
+
+> **Note:** The generate scripts rewrite `../_shared/X.mdx` → `./X.mdx` (and `./_shared/X.mdx` → `./grid/X.mdx`) in the generated output so links in the expanded files resolve correctly.
+
+Other available commands:
+
+| Scope | Command |
+|---|---|
+| Full CI simulation (preferred) | `npm run check-relative-links:ci` |
+| Both trees, no setup (skips the generate steps) | `npm run check-relative-links` |
+| Full pipeline, combined report to file | `npm run check-relative-links:report` |
+
+To check a single tree without running the generate steps, call the script directly with `--platform` (`angular`, `xplat`, `react`, `wc`, or `blazor`):
+
+```bash
+node scripts/check-relative-links.mjs --platform=angular
+node scripts/check-relative-links.mjs --platform=xplat --md=reports/relative-links-report.md
+```
+
+Note that this skips generation, so it scans whatever is currently on disk. Use `check-relative-links:ci` when the generated output may be stale.
+
+The checker exits with code 1 on any broken link and prints each failure with a reason code:
+
+| Reason | Meaning |
+|---|---|
+| `[not found]` | Target file does not exist |
+| `[add .mdx extension]` | Link is `./page` — has `./` prefix but is missing the `.mdx` extension |
+| `[use ./page.mdx instead]` | Link is `(page)` — bare path with no extension and no `./` prefix |
+
+## Checking HTML Links
+
+The relative-link checker works on MDX source. To validate the links in a **built** site instead, use the `check-html-links` scripts. They crawl every `.html` file under `dist/`, extract the internal doc links, and verify each target page exists in the same `dist` tree. This catches breakage introduced by the build itself, so it requires a completed build.
+
+| Scope | Command |
+|---|---|
+| Crawl `dist/` | `npm run check-html-links` |
+| Crawl `dist/`, report to file | `npm run check-html-links:report` |
+
+Pass `--dist=` to scope the crawl to one built site:
+
+```bash
+node scripts/check-html-links.mjs --dist=dist/angular
+```
+
 ## Checking MDX API Links
 
 Use the root `check-mdx-links` scripts to validate `ApiLink` references:
@@ -105,7 +191,6 @@ The check is read-only and reports the source file and line for missing or malfo
 
 - [.github/CONTRIBUTING.md](.github/CONTRIBUTING.md): day-to-day editing, generated-content behavior, and report expectations.
 - [API-LINK-WORKFLOW.md](API-LINK-WORKFLOW.md): API registry flow, `ApiLink` resolution, ambiguity handling, and checker commands.
-- [migration.md](migration.md): MDX migration rules and component examples.
 
 ## Contributing
 
diff --git a/docs/angular/.github/CONTRIBUTING.md b/docs/angular/.github/CONTRIBUTING.md
deleted file mode 100644
index cffb6b3670..0000000000
--- a/docs/angular/.github/CONTRIBUTING.md
+++ /dev/null
@@ -1,242 +0,0 @@
-## In this topic
- ### 1. [Writing an article](#writing-an-article)
- ### 2. [Topic structure](#topic-structure)
- ### 3. [Writing a Styling section for article](#styling-section)
- ### 4. [Workflow](#workflow)
- ### 5. [Environment variables](#environment-variables)
- ### 6. [Code View Configuration](#code-view-configuration)
- ### 7. [Creating shared help topics](#creating-shared-help-topics)
- ### 8. [Updating of Data Visualization related topics](#updating-of-data-visualization-related-topics)
- ### 9. [Adding of images](#adding-of-images-in-the-topic)
-
-# <a name='#writing-an-article'>Writing an article</a>
-
-When writing an article about a specific component, it is important to have a plan that you stick to. This will improve the overall cohesion of the text, making it more structured and clear for the reader.
-
-There are a few questions one can ask, when charting such plan.
-
-### 1. What is this article about (objective)?
-
-    a. List required previous knowledge to better understand the concept of the topic. For instance, if the article is about a directive feature, put references to the ng directives in the beginning of the article.
-
-    b. Identify common use cases. Where would said component/directive be used in most often. Try to outline samples around said use cases.
-
-### 2. What are the prerequisites to using said component/directive?\*\* Does it depend on other components, or can it be used on its own?
-
-### 3. How does one get started with using said component/directive?
-
-### 4. Identify the most important feature(s) of a component/directive.
-
-    Why was a feature implemented? What problem does it solve? How important is that feature for the overall weight of the component? Can this component exist without the feature and still be perceived useful? Rank features by importance and write about the most important ones.
-
-### 5. What are some common gotchas about a component/directive’s feature?
-
-    Does the feature require any previous knowledge? If yes, then refer the user to it.
-
-### 6. Can we identify some problems that may occur when using said component/directive?
-
-    If yes, we can anticipate questions and have a troubleshooting section where we outline such issues and how to solve them.
-
-### 7. Do we have a summary of the article and component APIs?
-
-    Since the product API docs have been made available online, the API tables in the DocFX articles are inapplicable. All API tables should be removed, if there are such in the component topics, and they should be replaced with links to the API for each component mentioned in the article. If such tables are not present, and the article is updated to mention a new component that is not present as an API link, then a link to the component's API should be included. Example of listing the mentioned components:
-```markdown
-[IgxGridComponent API]({environment:angularApiUrl}/classes/igxgridcomponent.html)
-[IgxGridComponent Styles]({environment:sassApiUrl}/index.html#mixin-igx-grid)
-[IgxGridRow API]({environment:angularApiUrl}/classes/igxgridrow.html)
-```
-
-    Also any text in the article that mentions a component class, or other class/interface that can be linked to in the API docs, should be accompanied by a link to the corresponding class in the API documentation. Example of linking a corresponding item in the article to the API documentation in the grid filtering topic:
-
-```markdown
-Depending on the set [`dataType`]({environment:angularApiUrl/classes/igxcolumncomponent.html#datatype}) of the column, the correct set of [**filtering operations**](grid.md#filtering-conditions) is loaded inside the filter UI dropdown.
-```
-
-### 8. Where does one find further help related to the topic of the article?
-
-# <a name='#topic-structure'>Topic structure</a>
-
-The purpose of this section is to present what the structure of the topic should be and the arrangement of the main elements in it.
-
-### 1. The first title of the page should be with `<h1>` tag (`#` Page Title) and it wont appear on the submenu on the right.
-
-### 2. Every main title should be with `<h2>` tag (`##` Main Title).
-
-### 3. Using nested titles.
-Minor titles related to the main titles can be used with `<h3>`(`###`) or `<h4>` (`####`).
-Note: when `<h4>` (`####`) is used the title wont appear on the submenu on the right.
-
-# <a name='#styling-section'>Writing a Styling section for article</a>
-
-The main purpose of the Styling section is to provide simple examples on how to style most common parts of the UI (lets say styling for alternate rows in the grid), copy/paste the code in any sample and see it working. In order to write content that fullfills the purpose, follow the steps below:
-
-### 1.	Give the content an `<h3>` Section header, so that it appears on the submenu on the right.
-### 2.	Start the content with the example of adding the theming index file.
-### 3.	Provide the simplest styling example, which is to extend the default theme for the corresponding feature/component. For example, when styling the paginator UI, the `igx-grid-paginator-theme` needs to be extended:
-
-```scss
-$dark-grid-paginator: grid-paginator-theme(
-    $text-color: #F4D45C,
-    $background-color: #575757,
-    $border-color: #292826
-);
-```
-
-### 4.	If other elements in the feature UI are styled by another theme, add example for that theme too. For example - the buttons in the paginator UI require that a new theme for buttons is created.
-### 5.	If a theme provides a ton of parameters for styling, choose those that you decide would be the most common. You may state in one sentence what each property controls, and provide a link to the theme under the SASS API.
-### 6.	Provide the last step, which is to include the component mixin, along with two notes – the first one for scoping any mixin if needed, and the second note about penetrating the `ViewEncapsulation`, along with example on how to overcome the encapsulation.
-### 7.	Add an iframe with an example, along with a Stackblitz button
-### 8.	Examples on styling with `igx-color`, `palettes` and `schemas` are not necessary, but you may add a link to Theming engine topics as they are quite detailed.
-### 9. When adding a section for a certain grid feature, add it for the igxHierachicalGrid and igxTreeGrid as well.
-
-
-# <a name='#workflow'>Workflow</a>
-
-When working on an issue for the Ignite UI for Angular DocFX Site Builder, you need to be aware of and to follow a correct status workflow. We have created a number of status labels in order to communicate well what the current status of a single issue/pull request is. The statuses are as follows:
-
-## Development - applicable to issues and pull requests
-1. `status: in-review` this is the initial status of an issue. If the label is not placed, go ahead and place it.
-2. `status: in-development` this is the status once you start working on an issue. Assign the issue to yourself if it hasn't been assigned already and remove the previous status and assign it an in development status.
-3. `status: by-design` this is the status of an issue that has been reviewed and has been determined that the current design of the feature is such that the issue describes the correct behavior as incorrect. Remove other statuses and place this status if you've reviewed the issue.
-4. `status: third-party-issue` this is the status of an issue that has been reviewed, has been determined to be an issue, but the root case is not in the Ignite UI for Angular code. Example would be browser specific bugs caused by the particular browser's rendering or JavaScript engines, or an issue with the Angular framework. Remove other statuses and place only this one if you're the one performing the investigation.
-5. `status: not-to-fix` this is the status of issues that derive from our code, but have been decided to leave as is. This is done when fixes require general design and/or architecture changes and are very risky.
-6. `status: already-fixed` this status indicates that the issue is already fixed in the source code. When setting this status assign the person that logged the issue so that he can verify the issue is fixed in the respective development branch. Remove other statuses and place this status if you've reviewed the issue.
-7. `status: cannot-reproduce` this status indicates that you cannot reproduce the issue in the source code. A reason may be because the issue is already fixed. When setting this status assign the person that logged the issue so that he can respond with more details on how to reproduce it.
-8. `status: not a bug` this is the status of an issue that you reviewed and concluded that it's not a bug. You should comment explaining the reasons why you think the issue is not a bug.
-9. `status: resolved` this is the status of an issue that has been fixed and there are active pull requests related to it.
-
-Example status workflows:
-
-`status: in-review` => `status: in-development` => `status: resolved` (PR is created)
-
-`status: in-review` => `status: by-design` (Issue can be closed)
-
-`status: in-review` => `status: third-party-issue` (Issue can be closed)
-
-`status: in-review` => `status: not-to-fix` (Issue can be closed)
-
-> Note: In most cases the development will be related to new topics creation or updating of existing one. Keep in mind that **for each newly added topic the toc.json should be updated with a reference to the new topic**. It is recommended `Additional references` section to be added at the end of each topic.
-
-## Testing - applicable to pull requests
-1. `status: awaiting-test` this is the initial status of pull requests. If you're performing the pull request, please place this status on it. Pull requests are accepted if and only if all status checks pass, review is performed, and the pull request has been tested and contains `status: verified`.
-2. `status: in-test` place this status once you pick up the pull request for testing.
-3. `status: verified` place this status once you've tested the pull request, have verified that the issue is fixed, and have included all necessary automated tests for the issue.
-4. `status: not-fixed` place this status once you've tested the pull request and you are still able to reproduce the issue it's attempting to fix. Then assign the developer back on the pull request.
-
-Example status workflows:
-
-`status: awaiting-test` => `status: in-test` => `status: verified` (PR can be merged if all prerequisites are met)
-
-`status: awaiting-test` => `status: in-test` => `status: not-fixed` => `status: in-development` => `status: awaiting-test`
-
-> Note: When you are assigned to test a PR related to new topic creation or updating an existing one:
-1. Check the build result.
-2. Be sure that `Writing an article` guidance is respected.
-3. Check whether the embed sample is working.
-4. Code views are working as well
-5. Each hyperlink is working properly.
-6. Table of content is correct.
-
-> Note: Testing a PR from Angular Samples (when new sample is added) with combination of PR related to topic update (or when new topic is added).
-Open both repositories and perform `npm start`. This will start both projects and you will see the embed sample in your topic under `localhost`.
-
-## Localization - applicable to issues and pull requests
-Ensure that whenever a change is made to the text content the appropriate status is set:
-1. `status: pending-localization` this status tells that there are changes in the localization strings that need to be translated. When you make such changes, put this status badge without removing the other applicable ones and assign a person to do the translations.
-
-> Note: This status should be set only when the PR is approved. This will indicate that no further changes will be applied.
-2. `status: localized` this status is for issues that were with a pending translation status and have already been localized. Place this status label once these translation changes have been included in the current pull request, or the changes are already pulled with a different pull request.
-
-> Note: Keep in mind that when you submit a change in the EN .md files, you don't need to make the same change in the JP/KR versions. This task will be handled by the Localization team.
-
-
-## Fixing a bug  
-
-1.  Depending on where the bug/change/feature was found/is planned `the current version` or the `ongoing release version`, checkout a development branches from `vnext` or/and `master` branch. `vnext` is the version that is going to be used upon release (next version), and `master` is the branch with the current state (current version available on production). If the change/fix is applicable only to the ongoing release branch (`vnext`) there is no need to cherry-pick to `master` branch as the change/fix/feature will be pushed to `master` branch upon release.
-2. Run lint
-4. Pull request your changes and reference the issue. Use the enforced commit message format with applicable type, scope, etc.
-5. Don't forget to make the necessary status updates, as described in the workflow section.
-
-> Note: Cherry-pick to `master` branch only changes with **high priority**. There is no need to cherry-pick into `master` every bug fix/change from `vnext`> A regular mass merge PRs are going to be made from `vnext` into `master`.
-
-**Example workflow for a bug with high priority**
-The process will look like this:
-
-1.	Checkout new branch from `vnext`. For code example purposes let's say the new branch is called `fixing-bug-5423-vnext`.
-2.	Commit your changes to your `fixing-bug-5423-vnext` branch.
-3.	Push and PR to the `vnext` branch.
-4.	Switch to the `master` branch.
-5.  Create a new branch from `master`.  For code example purposes let's say the new branch is called `fixing-bug-5423-master`.
-6.  Cherry pick your commit from the `fixing-bug-5423-vnext` branch: `git cherry-pick fixing-bug-5423-master`
-7.  Push to your `fixing-bug-5423-master` branch and PR to the `master` branch.
-
-# <a name='#environment-variables'>Environment variables</a>
-The environment variables are a syntactic sugar for pointing out the location of the resources used in a topic.
-These variables are defined in the [**environment.json**](https://github.com/IgniteUI/igniteui-docfx/blob/master/en/environment.json) file of a docfx project. Each environment variable is replaced with its corresponding value during build time.
-
-# <a name='#code-view-configuration'>Code View Configuration</a>
-
-If you want to add a sample and introduce the code behind this sample to the readers, you have to add a ```<code-view></code-view>``` element.
-This element is rendered as a container with tabs, their respective views and a footer element containing **StackBlitz** and **Codesandbox** buttons for live editing purposes. The first tab renders the sample iframe and each following tab renders the content of a specific file, used for the development of the sample. The live editing buttons create [StackBlitz](https://stackblitz.com/) and [Codesandbox](https://codesandbox.io/) applications for the sample in the code view.
-
-The ```<code-view></code-view>``` element has the following attributes:
-
-- ***style***: The [*global style attribute*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style). At runtime its values are applied to the container of the sample.
-> Note: It is necessary to add the **height** of the code-view when you create this element.
-- ***data-demos-base-url***: The base url of the sample. It is recommended to assign an **environment variable** to this attribute. 
-- ***iframe-src***: The absolute path of the sample. It is recommended to assign the value of the *data-demos-base-url* attribute combined with the relative (relative to its base url) path of the sample.
-- ***alt*** (optional): This attribute is applied as an *alt* attribute to the iframe of the sample.
-
-Code view example:
-
-```html
-<code-view style="height:700px" 
-           data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" 
-           alt="Angular data grid example">
-</code-view>
-```
-
-Here is a brief explanation of how the code view element works. For each sample (grid-sample-1) a .json file is created (grid--grid-sample-1.json). Each .json file contains the source code of the sample.
-All of the `.json` files are located under `/assets/samples` of [igniteui-angular-samples](https://github.com/IgniteUI/igniteui-angular-samples/) project.
-
-> Note: Samples without a respective .json file are still rendered in the code view, but the code tabs and the footer will be omitted.
-
-# <a name='#environment-variables'>Add/Change environment variables</a>
-Our samples are embedded in the topics with iframes. Some topics have more than one sample and in order to prevent loading delays, we've added lazy loading functionality of [the iframes](https://github.com/IgniteUI/igniteui-docfx-template/issues/75). In order to achieve this we use [lazysizes](https://www.npmjs.com/package/lazysizes#recommendedpossible-markup-patterns) library.
-
-Follow the steps below for lazy loading implementation in a topic ([PR example](https://github.com/IgniteUI/igniteui-docfx/pull/1001/files#diff-52bafd164f6207a20517090ad21d7a6aR13)):
-1. Generally the first sample should not be lazily loaded. Add `loading` class to the sample container and: `onload="onSampleIframeContentLoaded(this);` on the `iframe`.
-2. For all of the sample you'd like to load lazily, add
-- `loading` class to the sample container
-- `lazyload` class to the `iframe`
-- rename the `src` of the iframe to `data-src`
-- you shouldn't have `onload="onSampleIframeContentLoaded(this);"`
-
-# <a name='#creating-shared-help-topics'>Creating shared help topics</a>
-[Here](https://github.com/IgniteUI/igniteui-docfx/wiki/Creating-Shared-Help-Topics) you can find the document which describes how to create a shared topic (template) which is used to produce separate topics for a particular features. For example shared templates for IgxGrid, IgxTreeGrid and/or IgxHierarchicalGrid components.
-
-# <a name='#updating-of-data-visualization-related-topics'>Updating of Data Visualization related topics</a>
-Our cross platform docs are in `internal repo`. 
-
-If you need to update the cross platform docs, please do so from the [`igniteui-xplat-doc`](https://github.com/IgniteUI/igniteui-xplat-docs) repo, queue an Angular build from `AngularDocFX_EN` build definition in the `igniteui-xplat-doc` repository, and then approve the PR that will come into public repo from ESShared.
-
-# <a name='#adding-images'>Adding of images in the topic</a>
-When there is a need to add image (png, jpeg and etc.) to a topic use the following guidance:
-- add `b-lazy` and `responsive-img` classes - these are responsible for the lazy loading and part of the image responsiveness
-- always add the image as part of the `images` folder.
-- define `data-srcset` with 480w, 768w and 1100w 
-- set `alt` and `title` attributes
-
-
-Example:
-
-```html
-<img class="b-lazy responsive-img"
-    src="../../images/general/landing-grid-page.png" 
-    data-src="../../images/general/landing-grid-page.png" 
-    data-srcset="../../images/general/landing-grid-page.png 480w, ../../images/general/landing-grid-page.png 768w, ../../images/general/landing-grid-page.png 1100w" 
-    alt="Angular Data Grid"
-    title="Angular Data Grid">
-</div>
-```
\ No newline at end of file
diff --git a/docs/angular/README.md b/docs/angular/README.md
deleted file mode 100644
index fa1501b140..0000000000
--- a/docs/angular/README.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# Ignite UI for Angular Docs (Astro + Starlight)
-
-The Astro-based migration of the [igniteui-docfx](https://github.com/IgniteUI/igniteui-docfx) documentation site for Ignite UI for Angular. Built with [Astro Starlight](https://starlight.astro.build) and the internal `docs-template` integration.
-
----
-
-## Prerequisites
-
-- **Node.js** 18 or later
-- **docs-template** package at `C:/Repos/docs/docs-template`
-  (referenced as a `file:` dependency in `package.json`)
-
----
-
-## Getting started
-
-```bash
-npm install
-npm run dev          # English, development env → http://localhost:4321
-```
-
----
-
-## Build commands
-
-The build depends on two environment variables:
-
-| Variable    | Values                                    | Default       |
-| :---------- | :---------------------------------------- | :------------ |
-| `NODE_ENV`  | `development`, `staging`, `production`    | `development` |
-| `DOCS_LANG` | `en`, `jp`, `kr`                          | `en`          |
-
-All combinations are available as npm scripts:
-
-### Development server
-
-```bash
-npm run dev            # English (default)
-npm run dev:en         # English (explicit)
-npm run dev:jp         # Japanese
-npm run dev:kr         # Korean
-```
-
-### Build (development URLs)
-
-```bash
-npm run build          # English (default)
-npm run build:en       # English (explicit)
-npm run build:jp       # Japanese
-npm run build:kr       # Korean
-```
-
-### Build for staging
-
-```bash
-npm run build-staging         # English (default)
-npm run build-staging:en      # English (explicit)
-npm run build-staging:jp      # Japanese
-npm run build-staging:kr      # Korean
-```
-
-### Build for production
-
-```bash
-npm run build-production         # English (default)
-npm run build-production:en      # English (explicit)
-npm run build-production:jp      # Japanese
-npm run build-production:kr      # Korean
-```
-
-### Preview
-
-```bash
-npm run preview        # serve the last build locally
-```
-
----
-
-## Environment variables
-
-Documentation uses `{environment:variableName}` tokens inside markdown that are resolved **at build time**.
-
-All variable values are defined in each language's `environment.json` (e.g. `src/content/en/environment.json`), keyed by `NODE_ENV` (`development`, `staging`, `production`).
-
-At startup, `astro.config.mjs` reads `NODE_ENV` and `DOCS_LANG`. The `remark-docfx` plugin (from `docs-template`) resolves every `{environment:key}` token at render time using the matching variable set from `environment.json`.
-
-Key variables:
-
-| Token | Description |
-| :---- | :---------- |
-| `{environment:demosBaseUrl}` | Base URL for Angular sample iframes |
-| `{environment:dvDemosBaseUrl}` | Data Visualization samples base URL |
-| `{environment:lobDemosBaseUrl}` | LOB samples base URL |
-| `{environment:angularApiUrl}` | TypeScript API docs base URL |
-| `{environment:sassApiUrl}` | SASS API docs base URL |
-| `{environment:infragisticsBaseUrl}` | Main Infragistics site base URL |
-
-You can also set these via a `.env` file at the project root:
-
-```
-NODE_ENV=development
-DOCS_LANG=en
-```
-
----
-
-## How it works
-
-### 1. Content source
-
-Markdown files live in `src/content/{lang}/` (e.g. `src/content/en/`). They are either:
-
-- **Flat docs** — individual `.md` files (e.g. `accordion.md`, `calendar.md`).
-- **Grid template pages** — shared templates in `src/content/{lang}/grids_templates/` expanded at build time into per-variant pages.
-
-### 2. Grid page generation (`src/generate-grids.mjs`)
-
-Grid, Tree Grid, Hierarchical Grid, and Pivot Grid share documentation via DocFX-style conditional templates:
-
-```
-@@if (igxName === 'IgxGrid') { ... }
-@@if (igxName === 'IgxTreeGrid') { ... }
-```
-
-`generateGridTopics()` runs before Astro starts, evaluates the `@@if` blocks and replaces `@@variable` placeholders for each grid variant, writing resolved files into `src/content/{lang}/grid/`, `treegrid/`, `hierarchicalgrid/`, and `pivotGrid/`.
-
-### 3. Environment token resolution
-
-The `remark-docfx` plugin (from `docs-template`) resolves `{environment:key}` tokens at render time using the values from `src/content/{lang}/environment.json` matching the current `NODE_ENV`.
-
-### 4. Image path normalization
-
-`normalizeImagePaths()` rewrites relative `../images/` paths to absolute `/images/` so Astro resolves them from `public/`.
-
-### 5. Navigation (`src/content/{lang}/toc.json`)
-
-The sidebar is driven by `toc.json`, consumed by the `docs-template` integration via `source.tocPath`.
-
-### 6. Site configuration (`astro.config.mjs`)
-
-```js
-createDocsSite({
-  site: 'https://www.infragistics.com/products/ignite-ui-angular',
-  platform: 'angular',
-  navLang: docsLang,
-  mode, // 'development' | 'staging' | 'production'
-  source: {
-    tocPath: `./src/content/${docsLang}/toc.json`,
-    docsDir: `./src/content/${docsLang}`,
-  },
-})
-```
-
----
-
-## Project structure
-
-```
-.
-├── .github/
-│   └── CONTRIBUTING.md            Contribution guidelines
-├── public/
-│   └── images/                    Static images referenced by docs
-├── scripts/
-│   └── sync-docfx.mjs             Pull content from igniteui-docfx
-├── src/
-│   ├── content/
-│   │   ├── en/                    English docs + toc.json + environment.json
-│   │   ├── jp/                    Japanese docs + toc.json + environment.json
-│   │   └── kr/                    Korean docs + toc.json + environment.json
-│   │       ├── grids_templates/   Shared @@if-templated source files
-│   │       ├── grid/              Generated IgxGrid pages
-│   │       ├── treegrid/          Generated IgxTreeGrid pages
-│   │       ├── hierarchicalgrid/  Generated IgxHierarchicalGrid pages
-│   │       ├── pivotGrid/         Generated IgxPivotGrid pages
-│   │       ├── toc.json           Sidebar navigation
-│   │       └── environment.json   Environment variables (dev/staging/prod)
-│   ├── content.config.ts          Astro content collection schema
-│   ├── generate-grids.mjs         Build-time grid page generator
-├── astro.config.mjs               Main site config (grid gen, createDocsSite)
-└── package.json                   Build scripts for all lang/env combinations
-```
-
----
-
-## Migrated from igniteui-docfx
-
-This project replaces the DocFX + Gulp build pipeline with Astro + Starlight. Key changes:
-
-| DocFX | Astro |
-| :---- | :---- |
-| `gulp serve --lang en` | `npm run dev:en` |
-| `cross-env NODE_ENV=staging gulp build --lang jp` | `npm run build-staging:jp` |
-| `cross-env NODE_ENV=production gulp build --lang kr` | `npm run build-production:kr` |
-| DocFX `docfx.json` | `astro.config.mjs` + `createDocsSite()` |
-| `gulp-file-include` (@@if/@@var) | `src/generate-grids.mjs` |
-| `environment.json` per locale dir | `src/content/{lang}/environment.json` per locale |
-| DocFX template (`igniteui-docfx-template`) | `docs-template` Astro integration |
diff --git a/docs/angular/scripts/generate.mjs b/docs/angular/scripts/generate.mjs
index 6b6c2c1da7..522737e41b 100644
--- a/docs/angular/scripts/generate.mjs
+++ b/docs/angular/scripts/generate.mjs
@@ -1,6 +1,7 @@
 import { writeFileSync, rmSync, existsSync } from 'node:fs';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { generateGridTopics } from '../src/scripts/generate-grids.mjs';
 
 const args = process.argv.slice(2);
 const get  = (prefix) => args.find(a => a.startsWith(prefix))?.split('=')[1];
@@ -12,6 +13,11 @@ const ROOT = path.join(path.dirname(fileURLToPath(import.meta.url)), '..');
 writeFileSync(path.join(ROOT, '.platform.json'), JSON.stringify({ platform: 'Angular', lang: LANG }, null, 2));
 console.log(`[generate] lang: ${LANG}`);
 
+// Generate per-grid-variant MDX files from grids_templates/ so that
+// check-relative-links:ci can validate the generated pages without starting Astro.
+const docsDir = path.join(ROOT, 'src', 'content', LANG);
+generateGridTopics(path.join(docsDir, 'grids_templates'), path.join(docsDir, 'components'));
+
 // Clear Astro's content cache so the next build picks up fresh content
 const cache = path.join(ROOT, '.astro');
 if (existsSync(cache)) {
diff --git a/docs/angular/src/content/en/.gitignore b/docs/angular/src/content/en/.gitignore
index 53b9d5e19c..bc6cd82100 100644
--- a/docs/angular/src/content/en/.gitignore
+++ b/docs/angular/src/content/en/.gitignore
@@ -15,6 +15,8 @@ components/treegrid/*.md
 components/treegrid/*.mdx
 components/hierarchicalgrid/*.md
 components/hierarchicalgrid/*.mdx
+components/pivotgrid/*.md
+components/pivotgrid/*.mdx
 components/pivotGrid/*.md
 components/pivotGrid/*.mdx
 
@@ -45,6 +47,12 @@ components/pivotGrid/*.mdx
 !components/hierarchicalgrid/load-on-demand.mdx
 
 # All pivot grid specific files that should NOT be ignored:
+!components/pivotgrid/pivot-grid.md
+!components/pivotgrid/pivot-grid-features.md
+!components/pivotgrid/pivot-grid-custom.md
+!components/pivotgrid/pivot-grid.mdx
+!components/pivotgrid/pivot-grid-features.mdx
+!components/pivotgrid/pivot-grid-custom.mdx
 !components/pivotGrid/pivot-grid.md
 !components/pivotGrid/pivot-grid-features.md
 !components/pivotGrid/pivot-grid-custom.md
diff --git a/docs/angular/src/content/en/components/action-strip.mdx b/docs/angular/src/content/en/components/action-strip.mdx
index dd0b39f1ae..f3a29b369e 100644
--- a/docs/angular/src/content/en/components/action-strip.mdx
+++ b/docs/angular/src/content/en/components/action-strip.mdx
@@ -165,7 +165,7 @@ When `IgxActionStripComponent` is a child component of the grid, hovering a row
 <Sample src="/grid/grid-action-strip" height={600} alt="" />
 
 <DocsAside type="info">
-More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](/components/grid/row-actions.html).
+More information about how to use ActionStrip in the grid component could be found in the [Grid Row Actions documentation](./grid/row-actions.mdx).
 </DocsAside>
 
 ## Styling
diff --git a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
index 21cc36c62a..5a8c94ada1 100644
--- a/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -116,7 +116,7 @@ Agent Skills are structured, developer-owned packages that tell AI coding assist
 
 Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
 
-For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
+For full setup instructions and IDE wiring, see [Agent Skills](skills.mdx).
 
 ## CLI MCP Server
 
@@ -128,7 +128,7 @@ The CLI MCP server runs via `npx` without a global install:
 npx -y igniteui-cli mcp
 ```
 
-Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide.
+Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.mdx) for the full setup guide.
 
 It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
 
@@ -144,7 +144,7 @@ npx -y igniteui-theming igniteui-theming-mcp
 
 The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
 
-For configuration details, see [Theming MCP](theming-mcp.md).
+For configuration details, see [Theming MCP](theming-mcp.mdx).
 
 ## Supported AI Clients
 
@@ -207,7 +207,7 @@ The Skill package ships with the library in `node_modules/igniteui-{framework}/s
 
 Wire it to your IDE using the persistent setup for your client.
 
-See [Agent Skills](skills.md) for the complete setup.
+See [Agent Skills](skills.mdx) for the complete setup.
 
 ### Step 2 - Connect the CLI MCP Server
 
@@ -239,7 +239,7 @@ Add the `igniteui-cli` MCP server entry to the configuration file for your AI cl
 }
 ```
 
-For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
+For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.mdx).
 
 ### Step 3 - Connect the Theming MCP Server (optional)
 
@@ -271,13 +271,13 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
 }
 ```
 
-For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
+For configuration details and theming workflows, see [Theming MCP](theming-mcp.mdx).
 
 ## Additional Resources
 
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/cli-mcp.mdx b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
index 7c04c13a30..4380344281 100644
--- a/docs/angular/src/content/en/components/ai/cli-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/cli-mcp.mdx
@@ -20,7 +20,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 ## Overview
 
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.mdx). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
 
 The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
 
@@ -427,9 +427,9 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
 
 ## Additional Resources
 
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/maker-framework.mdx b/docs/angular/src/content/en/components/ai/maker-framework.mdx
index bd5342be94..8381e664b9 100644
--- a/docs/angular/src/content/en/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/en/components/ai/maker-framework.mdx
@@ -15,7 +15,7 @@ llms:
 
 The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction.
 
-The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
+The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.mdx). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
 
 ## How MAKER Works
 
@@ -223,10 +223,10 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
 
 ## Additional Resources
 
-- [AI-Assisted Development Overview](ai-assisted-development-overview.md)
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development Overview](ai-assisted-development-overview.mdx)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/skills.mdx b/docs/angular/src/content/en/components/ai/skills.mdx
index 32aff83992..243e28c707 100644
--- a/docs/angular/src/content/en/components/ai/skills.mdx
+++ b/docs/angular/src/content/en/components/ai/skills.mdx
@@ -257,9 +257,9 @@ For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](/a
 
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Getting Started with Ignite UI for Angular</a>
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 <hr/>
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/ai/theming-mcp.mdx b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
index 7af334cc39..60cfe03a47 100644
--- a/docs/angular/src/content/en/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/en/components/ai/theming-mcp.mdx
@@ -351,19 +351,19 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
 
 ## Additional Resources
 
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [MAKER Framework](./maker-framework.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [MAKER Framework](./maker-framework.mdx)
 
 {/* Ideally these should be included once documentation is combined
-- [Theming Overview](../themes/index)
-- [Palettes](../themes/palettes)
-- [Typography](../themes/typography)
-- [Elevations](../themes/elevations)
-- [Spacing](../themes/spacing)
-- [Roundness](../themes/roundness)
-- [Theming with Sass](../themes/sass/index)
+- [Theming Overview](../themes/index.mdx)
+- [Palettes](../themes/palettes.mdx)
+- [Typography](../themes/typography.mdx)
+- [Elevations](../themes/elevations.mdx)
+- [Spacing](../themes/spacing.mdx)
+- [Roundness](../themes/roundness.mdx)
+- [Theming with Sass](../themes/sass/index.mdx)
 */}
 
 <hr/>
diff --git a/docs/angular/src/content/en/components/banner.mdx b/docs/angular/src/content/en/components/banner.mdx
index b6222e516b..5fd399ccdc 100644
--- a/docs/angular/src/content/en/components/banner.mdx
+++ b/docs/angular/src/content/en/components/banner.mdx
@@ -31,7 +31,7 @@ To get started with the Ignite UI for Angular Banner component, first you need t
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxBannerModule` in your **app.module.ts** file.
 
@@ -119,7 +119,7 @@ Configuring the message displayed in the banner is easy - just change the conten
 
 ### Adding an icon
 
-An [`igx-icon`](/icon) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
+An [`igx-icon`](./icon.mdx) can be displayed in the banner by passing it to the banner's content. The icon will always be positioned at the beginning of the banner message.
 
 <DocsAside type="info">
 If several `igx-icon` elements are inserted as direct descendants of the banner, the banner will try to position all of them at the beginning. It is strongly advised to pass only one `igx-icon` directly to the banner.
@@ -280,7 +280,7 @@ $custom-banner-theme: banner-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 The last step is to pass the custom banner theme:
diff --git a/docs/angular/src/content/en/components/date-range-picker.mdx b/docs/angular/src/content/en/components/date-range-picker.mdx
index 3b0a03dab4..5a736c80df 100644
--- a/docs/angular/src/content/en/components/date-range-picker.mdx
+++ b/docs/angular/src/content/en/components/date-range-picker.mdx
@@ -158,7 +158,7 @@ To show a clear action, use `igx-picker-clear` with `igxSuffix` applied directly
 - Use `igx-picker-toggle` for the calendar action and `igx-picker-clear` for the clear action.
 - Apply `igxPrefix` directly to `igx-picker-toggle` and `igxSuffix` directly to `igx-picker-clear`.
 - Add the <ApiLink type="InputDirective" /> directly inside each component.
-- To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](date-time-editor) directive.
+- To enable date editing, decorate both inputs with the [`igxDateTimeEditor`](./date-time-editor.mdx) directive.
 
 <Sample src="/scheduling/daterangepicker-start-end" height={600} alt="" />
 
diff --git a/docs/angular/src/content/en/components/exporter-pdf.mdx b/docs/angular/src/content/en/components/exporter-pdf.mdx
index 1bbe428c04..83f64286ad 100644
--- a/docs/angular/src/content/en/components/exporter-pdf.mdx
+++ b/docs/angular/src/content/en/components/exporter-pdf.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotGrid/pivot-grid). The exporting functionality is encapsulated in the <ApiLink type="PdfExporterService" /> class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options.
+The Ignite UI for Angular PDF Exporter service provides powerful functionality to export data in PDF format from various sources, including raw data arrays and advanced grid components such as [**IgxGrid**](/grid/grid), [**IgxTreeGrid**](/treegrid/tree-grid), [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid), and [**IgxPivotGrid**](/pivotgrid/pivot-grid). The exporting functionality is encapsulated in the <ApiLink type="PdfExporterService" /> class, which enables seamless data export to PDF format with comprehensive features including multi-page document support, automatic page breaks, and customizable formatting options.
 </div>
 <igc-divider></igc-divider>
 
diff --git a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
index 75a59c07fb..1c3cbfce2b 100644
--- a/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
+++ b/docs/angular/src/content/en/components/general-breaking-changes-dv.mdx
@@ -75,11 +75,11 @@ These breaking changes were introduce in version **8.2.12** of these packages an
 
 | Affected Packages                                                                                                              | Affected Components                                                                                         |
 | :----------------------------------------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------------------------------- |
-| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a>             | [Excel Library](excel-library)                                                                           |
-| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [Spreadsheet](spreadsheet-overview)                                                                      |
-| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a>               | [Geo Map](geo-map), [Treemap](charts/types/treemap-chart)                                             |
-| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a>           | [Bullet Graph](bullet-graph), [Linear Gauge](linear-gauge), [Radial Gauge](radial-gauge)           |
-| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>           | Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview) |
+| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a>             | [Excel Library](./excel-library.mdx)                                                                           |
+| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [Spreadsheet](./spreadsheet-overview.mdx)                                                                      |
+| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a>               | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)                                             |
+| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a>           | [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)           |
+| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>           | Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](./zoomslider-overview.mdx) |
 | <a href="https://www.npmjs.com/package/igniteui-angular-core/v/8.2.12" target="_blank">igniteui-angular-core</a>               | all classes and enums                                                                                       |
 
 ## Code After Changes
diff --git a/docs/angular/src/content/en/components/general/cli-overview.mdx b/docs/angular/src/content/en/components/general/cli-overview.mdx
index 7a8996ffa9..e537a6b589 100644
--- a/docs/angular/src/content/en/components/general/cli-overview.mdx
+++ b/docs/angular/src/content/en/components/general/cli-overview.mdx
@@ -11,7 +11,7 @@ llms:
 
 The Ignite UI CLI and the Ignite UI for Angular Schematics collection are two complementary scaffolding tools for generating Angular projects and component views pre-configured for Ignite UI for Angular. Both provide a guided step-by-step wizard and non-interactive command modes. Both produce the same project output - they differ only in how they integrate with your workflow.
 
-The Ignite UI CLI does not manage Blazor or Web Components projects through this Angular toolchain. For the Angular-only Schematics workflow without a separate global tool, use `@igniteui/angular-schematics` directly with the Angular CLI. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](getting-started).
+The Ignite UI CLI does not manage Blazor or Web Components projects through this Angular toolchain. For the Angular-only Schematics workflow without a separate global tool, use `@igniteui/angular-schematics` directly with the Angular CLI. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](./getting-started.mdx).
 
 ## Ignite UI CLI
 
@@ -19,7 +19,7 @@ The Ignite UI CLI does not manage Blazor or Web Components projects through this
 
 The CLI provides a guided wizard (`ig` or `ig new`) and non-interactive project creation (`ig new <name> --framework=angular --type=igx-ts`), component scaffolding (`ig add`), a development server (`ig start`), and a built-in MCP server for AI assistant integration (`ig mcp`).
 
-For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli).
+For setup instructions and all available commands, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.mdx).
 
 ## Ignite UI for Angular Schematics
 
@@ -27,14 +27,14 @@ For setup instructions and all available commands, see [Getting Started with Ign
 
 The Schematics collection provides the same core project templates and component views as the CLI, within the native Angular CLI workflow. It does not include the MCP server - for AI assistant integration, use the Ignite UI CLI alongside your Angular CLI project.
 
-For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics).
+For setup instructions see [Getting Started with Ignite UI for Angular Schematics](./cli/getting-started-with-angular-schematics.mdx).
 
 ## Step-by-Step Guides
 
 Both tools support a guided interactive mode and a direct command mode:
 
-- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli)
-- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics)
+- [Step-by-Step Guide Using Ignite UI CLI](./cli/step-by-step-guide-using-cli.mdx)
+- [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx)
 
 ## AI Assistant Integration (MCP)
 
@@ -46,4 +46,4 @@ Start the MCP server with:
 ig mcp
 ```
 
-For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp).
+For client configuration (VS Code, Claude Desktop, Cursor) and a description of available tools, see [Ignite UI CLI MCP](../ai/cli-mcp.mdx).
diff --git a/docs/angular/src/content/en/components/general/cli/auth-template.mdx b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
index e46edfe445..7f6f30f326 100644
--- a/docs/angular/src/content/en/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/en/components/general/cli/auth-template.mdx
@@ -40,7 +40,7 @@ Answering yes generates one of two authenticated variants:
 
 <Image src={igxSideAuthQuestion} alt="Auth question" class="responsive-img" />
 
-For a full walkthrough of the wizard steps, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli) or [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a full walkthrough of the wizard steps, see [Step-by-Step Guide Using Ignite UI CLI](./step-by-step-guide-using-cli.mdx) or [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
 
 ### Direct command (advanced)
 
diff --git a/docs/angular/src/content/en/components/general/cli/component-templates.mdx b/docs/angular/src/content/en/components/general/cli/component-templates.mdx
index 50a575d390..1b4d9466c2 100644
--- a/docs/angular/src/content/en/components/general/cli/component-templates.mdx
+++ b/docs/angular/src/content/en/components/general/cli/component-templates.mdx
@@ -16,52 +16,52 @@ These templates generate components into an existing Angular workspace only. The
 | Template                        |  Code and description                                                                                                                                                                                                                                                                                                                                                | Demo                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
 | :-------------------------------| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | <b>Grids & Lists</b>            |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| grid                            | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid newGrid</code><br />Ignite UI CLI:<br /><code>ig add grid newGrid</code><details>Basic template for IgxGrid.</details>                                                                                                                                   | [IgxGrid](../../grid/grid.md) component with auto generated columns                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| grid-batch-editing              | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add grid-batch-editing newGridBatchEditing</code><details>Sample IgxGrid with batch editing.</details>                                                                        | [IgxGrid](../../grid/grid.md) that uses Transaction service for [batch editing](../../grid/batch-editing.md)                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| custom-grid                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c custom-grid newCustomGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-grid newCustomGrid</code><details>IgxGrid with optional features like sorting, filtering, editing, etc.</details>                                                                                            | [IgxGrid](../../grid/grid.md) with optional features like [Sorting](../../grid/sorting.md), [Filtering](../../grid/filtering.md), [Cell Editing](../../grid/editing.md), [Row Editing](../../grid/row-editing.md), [Group By](../../grid/groupby.md), [Resizing](../../grid/column-resizing.md), [Selection](../../grid/selection.md), [Paging](../../grid/paging.md), [Column Pinning](../../grid/column-pinning.md), [Column Moving](../../grid/column-moving.md), [Column Hiding](../../grid/column-hiding.md)                       |
-| grid-summaries                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add grid-summaries newGridSummaries</code><details>IgxGrid with summaries feature.</details>                                                                                                                      | [IgxGrid](../../grid/grid.md) with [summaries](../../grid/summaries.md) feature.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| grid-multi-column-headers       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders</code><br />Ignite UI CLI:<br /><code>ig add grid-multi-column-headers newGridMultiColumnHeaders</code><details>IgxGrid with multiple header columns.</details>                                                                        | [IgxGrid](../../grid/grid.md) with [multi-column headers](../../grid/multi-column-headers.md)                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| tree grid                       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-tree-grid newCustomTreeGrid</code><details>IgxTreeGrid with optional features like sorting, filtering, row editing, etc.</details>                                                                  | [IgxTreeGrid](../../treegrid/tree-grid.md) with optional features like [Sorting](../../treegrid/sorting.md), [Filtering](../../treegrid/filtering.md), [Cell Editing](../../treegrid/editing.md), [Row Editing](../../treegrid/row-editing.md), [Resizing](../../treegrid/column-resizing.md), [Row Selection](../../treegrid/selection.md), [Paging](../../treegrid/paging.md), [Column Pinning](../../treegrid/column-pinning.md), [Column Moving](../../treegrid/column-moving.md), [Column Hiding](../../treegrid/column-hiding.md) |
-| hierarchical-grid               | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid newHierarchicalGrid</code><details>Basic IgxHierarchicalGrid.</details>                                                                                  | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) component with auto generated columns.                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| hierarchical-grid-batch-editing | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditing</code><details>IgxHierarchicalGrid with batch editing.</details>                 | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.md).                                                                                                                                                                                                                                                                                                                                                                          |
-| hierarchical-grid-custom        | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-custom newCustomHierarchicalGrid</code><details>IgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.</details> | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with optional features like [Sorting](../../hierarchicalgrid/sorting.md), [Filtering](../../hierarchicalgrid/filtering.md), [Row Editing](../../hierarchicalgrid/row-editing.md), [Selection](../../hierarchicalgrid/selection.md).                                                                                                                                                                                                                                  |
-| hierarchical-grid-summaries     | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-summaries newHierarchicalGridSummaries</code><details>IgxHierarchicalGrid with summaries feature.</details>                           | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.md) with [summaries](../../hierarchicalgrid/summaries.md) feature.                                                                                                                                                                                                                                                                                                                                                                                                       |
-| pivot-grid                      | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid</code><br />Ignite UI CLI:<br /><code>ig add pivot-grid newPivotGrid</code><details>Basic IgxPivotGrid.</details>                                                                                                                     | [IgxPivotGrid](../../pivotGrid/pivot-grid.md) component for multi-dimensional data analysis.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| tree                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tree newTree</code><br />Ignite UI CLI:<br /><code>ig add tree newTree</code><details>IgxTree with selection and load-on-demand nodes.</details>                                                                                                                                           | [IgxTree](../../tree.md) with selection and load-on-demand node support.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
-| list                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c list newList</code><br />Ignite UI CLI:<br /><code>ig add list newList</code><details>Basic IgxList.</details>                                                                                                                                                                             | [IgxList](../../list.md) with search and filtering logic.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
-| combo                           | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>Basic IgxCombo with templating.</details>                                                                                                                                                        | [IgxCombo](../../combo.md) with custom [templating](../../combo-templates.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| grid                            | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid newGrid</code><br />Ignite UI CLI:<br /><code>ig add grid newGrid</code><details>Basic template for IgxGrid.</details>                                                                                                                                   | [IgxGrid](../../grid/grid.mdx) component with auto generated columns                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| grid-batch-editing              | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add grid-batch-editing newGridBatchEditing</code><details>Sample IgxGrid with batch editing.</details>                                                                        | [IgxGrid](../../grid/grid.mdx) that uses Transaction service for [batch editing](../../grid/batch-editing.mdx)                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| custom-grid                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c custom-grid newCustomGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-grid newCustomGrid</code><details>IgxGrid with optional features like sorting, filtering, editing, etc.</details>                                                                                            | [IgxGrid](../../grid/grid.mdx) with optional features like [Sorting](../../grid/sorting.mdx), [Filtering](../../grid/filtering.mdx), [Cell Editing](../../grid/editing.mdx), [Row Editing](../../grid/row-editing.mdx), [Group By](../../grid/groupby.mdx), [Resizing](../../grid/column-resizing.mdx), [Selection](../../grid/selection.mdx), [Paging](../../grid/paging.mdx), [Column Pinning](../../grid/column-pinning.mdx), [Column Moving](../../grid/column-moving.mdx), [Column Hiding](../../grid/column-hiding.mdx)                       |
+| grid-summaries                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add grid-summaries newGridSummaries</code><details>IgxGrid with summaries feature.</details>                                                                                                                      | [IgxGrid](../../grid/grid.mdx) with [summaries](../../grid/summaries.mdx) feature.                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| grid-multi-column-headers       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders</code><br />Ignite UI CLI:<br /><code>ig add grid-multi-column-headers newGridMultiColumnHeaders</code><details>IgxGrid with multiple header columns.</details>                                                                        | [IgxGrid](../../grid/grid.mdx) with [multi-column headers](../../grid/multi-column-headers.mdx)                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| tree grid                       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-tree-grid newCustomTreeGrid</code><details>IgxTreeGrid with optional features like sorting, filtering, row editing, etc.</details>                                                                  | [IgxTreeGrid](../../treegrid/tree-grid.mdx) with optional features like [Sorting](../../treegrid/sorting.mdx), [Filtering](../../treegrid/filtering.mdx), [Cell Editing](../../treegrid/editing.mdx), [Row Editing](../../treegrid/row-editing.mdx), [Resizing](../../treegrid/column-resizing.mdx), [Row Selection](../../treegrid/selection.mdx), [Paging](../../treegrid/paging.mdx), [Column Pinning](../../treegrid/column-pinning.mdx), [Column Moving](../../treegrid/column-moving.mdx), [Column Hiding](../../treegrid/column-hiding.mdx) |
+| hierarchical-grid               | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid newHierarchicalGrid</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid newHierarchicalGrid</code><details>Basic IgxHierarchicalGrid.</details>                                                                                  | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) component with auto generated columns.                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| hierarchical-grid-batch-editing | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-batch-editing newHierarchicalGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-batch-editing newHierarchicalGridBatchEditing</code><details>IgxHierarchicalGrid with batch editing.</details>                 | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) that uses Transaction service for [batch editing](../../hierarchicalgrid/batch-editing.mdx).                                                                                                                                                                                                                                                                                                                                                                          |
+| hierarchical-grid-custom        | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-custom newCustomHierarchicalGrid</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-custom newCustomHierarchicalGrid</code><details>IgxHierarchicalGrid with optional features like sorting, filtering, editing, etc.</details> | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with optional features like [Sorting](../../hierarchicalgrid/sorting.mdx), [Filtering](../../hierarchicalgrid/filtering.mdx), [Row Editing](../../hierarchicalgrid/row-editing.mdx), [Selection](../../hierarchicalgrid/selection.mdx).                                                                                                                                                                                                                                  |
+| hierarchical-grid-summaries     | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c hierarchical-grid-summaries newHierarchicalGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add hierarchical-grid-summaries newHierarchicalGridSummaries</code><details>IgxHierarchicalGrid with summaries feature.</details>                           | [IgxHierarchicalGrid](../../hierarchicalgrid/hierarchical-grid.mdx) with [summaries](../../hierarchicalgrid/summaries.mdx) feature.                                                                                                                                                                                                                                                                                                                                                                                                       |
+| pivot-grid                      | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c pivot-grid newPivotGrid</code><br />Ignite UI CLI:<br /><code>ig add pivot-grid newPivotGrid</code><details>Basic IgxPivotGrid.</details>                                                                                                                     | [IgxPivotGrid](../../pivotgrid/pivot-grid.mdx) component for multi-dimensional data analysis.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| tree                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tree newTree</code><br />Ignite UI CLI:<br /><code>ig add tree newTree</code><details>IgxTree with selection and load-on-demand nodes.</details>                                                                                                                                           | [IgxTree](../../tree.mdx) with selection and load-on-demand node support.                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| list                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c list newList</code><br />Ignite UI CLI:<br /><code>ig add list newList</code><details>Basic IgxList.</details>                                                                                                                                                                             | [IgxList](../../list.mdx) with search and filtering logic.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
+| combo                           | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>Basic IgxCombo with templating.</details>                                                                                                                                                        | [IgxCombo](../../combo.mdx) with custom [templating](../../combo-templates.mdx).                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | <b>Charts</b>                   |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| category chart                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c category-chart newCategoryChart</code><br />Ignite UI CLI:<br /><code>ig add category-chart newCategoryChart</code><details>Basic category chart with chart type selector.</details>                                                                                                       | Basic [category chart](../../charts/types/column-chart.md) with chart type selector.                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| financial chart                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c financial-chart newFinancialChart</code><br />Ignite UI CLI:<br /><code>ig add financial-chart newFinancialChart</code><details>Basic financial chart with automatic toolbar and type selection.</details>                                                                                 | Basic [financial chart](../../charts/types/stock-chart.md) with automatic toolbar and type selection.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| category chart                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c category-chart newCategoryChart</code><br />Ignite UI CLI:<br /><code>ig add category-chart newCategoryChart</code><details>Basic category chart with chart type selector.</details>                                                                                                       | Basic [category chart](../../charts/types/column-chart.mdx) with chart type selector.                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| financial chart                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c financial-chart newFinancialChart</code><br />Ignite UI CLI:<br /><code>ig add financial-chart newFinancialChart</code><details>Basic financial chart with automatic toolbar and type selection.</details>                                                                                 | Basic [financial chart](../../charts/types/stock-chart.mdx) with automatic toolbar and type selection.                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | <b>Gauges</b>                   |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| bullet graph                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph</code><br />Ignite UI CLI:<br /><code>ig add bullet-graph newBulletGraph</code><details>IgxBulletGraph with different animations.</details>                                                                                                                    | [IgxBulletGraph](../../bullet-graph.md) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| linear gauge                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge</code><br />Ignite UI CLI:<br /><code>ig add linear-gauge newLinearGauge</code><details>IgxLinearGauge with different animations.</details>                                                                                                                    | [IgxLinearGauge](../../linear-gauge.md) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| radial gauge                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge</code><br />Ignite UI CLI:<br /><code>ig add radial-gauge newRadialGauge</code><details>IgxRadialGauge with different animations.</details>                                                                                                                    | [IgxRadialGauge](../../radial-gauge.md) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| bullet graph                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph</code><br />Ignite UI CLI:<br /><code>ig add bullet-graph newBulletGraph</code><details>IgxBulletGraph with different animations.</details>                                                                                                                    | [IgxBulletGraph](../../bullet-graph.mdx) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| linear gauge                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge</code><br />Ignite UI CLI:<br /><code>ig add linear-gauge newLinearGauge</code><details>IgxLinearGauge with different animations.</details>                                                                                                                    | [IgxLinearGauge](../../linear-gauge.mdx) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| radial gauge                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge</code><br />Ignite UI CLI:<br /><code>ig add radial-gauge newRadialGauge</code><details>IgxRadialGauge with different animations.</details>                                                                                                                    | [IgxRadialGauge](../../radial-gauge.mdx) with different animations.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
 | <b>Maps</b>                     |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| geographic-map                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c geographic-map newGeographicMap</code><br />Ignite UI CLI:<br /><code>ig add geographic-map newGeographicMap</code><details>Basic IgxGeographicMap.</details>                                                                                                                              | [IgxGeographicMap](../../geo-map.md) displaying geo-spatial data on geographic imagery maps.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| geographic-map                  | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c geographic-map newGeographicMap</code><br />Ignite UI CLI:<br /><code>ig add geographic-map newGeographicMap</code><details>Basic IgxGeographicMap.</details>                                                                                                                              | [IgxGeographicMap](../../geo-map.mdx) displaying geo-spatial data on geographic imagery maps.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | <b>Layouts</b>                  |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| dock-manager                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dock-manager newDockManager</code><br />Ignite UI CLI:<br /><code>ig add dock-manager newDockManager</code><details>Basic IgcDockManager.</details>                                                                                                                                        | [IgcDockManager](../../dock-manager.md) with nine content slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
-| carousel                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c carousel newCarousel</code><br />Ignite UI CLI:<br /><code>ig add carousel newCarousel</code><details>Basic IgxCarousel.</details>                                                                                                                                                         | [IgxCarousel](../../carousel.md) cycling through a series of images.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
-| tabs                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tabs newTabs</code><br />Ignite UI CLI:<br /><code>ig add tabs newTabs</code><details>Basic IgxTabs.</details>                                                                                                                                                                             | [IgxTabs](../../tabs.md) component that includes three customized tab-groups.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| bottom-nav                      | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c bottom-nav newBottomNav</code><br />Ignite UI CLI:<br /><code>ig add bottom-nav newBottomNav</code><details>Three item bottom-nav template.</details>                                                                                                                                      | Three item bottom [navbar](../../navbar.md) template.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
-| accordion                       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c accordion newAccordion</code><br />Ignite UI CLI:<br /><code>ig add accordion newAccordion</code><details>Basic IgxAccordion sample.</details>                                                                                                                                             | [IgxAccordion](../../accordion.md) with multiple collapsible panels in a single container.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| stepper                         | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c stepper newStepper</code><br />Ignite UI CLI:<br /><code>ig add stepper newStepper</code><details>Basic IgxStepper sample.</details>                                                                                                                                                       | [IgxStepper](../../stepper.md) visualizing content as a process with successive steps.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| dock-manager                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dock-manager newDockManager</code><br />Ignite UI CLI:<br /><code>ig add dock-manager newDockManager</code><details>Basic IgcDockManager.</details>                                                                                                                                        | [IgcDockManager](../../dock-manager.mdx) with nine content slots.                                                                                                                                                                                                                                                                                                                                                                                                                                                                        |
+| carousel                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c carousel newCarousel</code><br />Ignite UI CLI:<br /><code>ig add carousel newCarousel</code><details>Basic IgxCarousel.</details>                                                                                                                                                         | [IgxCarousel](../../carousel.mdx) cycling through a series of images.                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+| tabs                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tabs newTabs</code><br />Ignite UI CLI:<br /><code>ig add tabs newTabs</code><details>Basic IgxTabs.</details>                                                                                                                                                                             | [IgxTabs](../../tabs.mdx) component that includes three customized tab-groups.                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| bottom-nav                      | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c bottom-nav newBottomNav</code><br />Ignite UI CLI:<br /><code>ig add bottom-nav newBottomNav</code><details>Three item bottom-nav template.</details>                                                                                                                                      | Three item bottom [navbar](../../navbar.mdx) template.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
+| accordion                       | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c accordion newAccordion</code><br />Ignite UI CLI:<br /><code>ig add accordion newAccordion</code><details>Basic IgxAccordion sample.</details>                                                                                                                                             | [IgxAccordion](../../accordion.mdx) with multiple collapsible panels in a single container.                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| stepper                         | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c stepper newStepper</code><br />Ignite UI CLI:<br /><code>ig add stepper newStepper</code><details>Basic IgxStepper sample.</details>                                                                                                                                                       | [IgxStepper](../../stepper.mdx) visualizing content as a process with successive steps.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
 | <b>Data Entry & Display</b>     |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| chip                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c chip newChip</code><br />Ignite UI CLI:<br /><code>ig add chip newChip</code><details>Basic IgxChip.</details>                                                                                                                                                                             | [IgxChip](../../chip.md) components inside igx-chips-area.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
-| dropdown                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dropdown newDropDown</code><br />Ignite UI CLI:<br /><code>ig add dropdown newDropDown</code><details>Basic IgxDropDown.</details>                                                                                                                                                         | Basic [IgxDropDown](../../drop-down.md) that displays a list of items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select newSelect</code><br />Ignite UI CLI:<br /><code>ig add select newSelect</code><details>Basic IgxSelect.</details>                                                                                                                                                                   | Simple [IgxSelect](../../select.md) that displays a list of items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select-groups newGroupsSelect</code><br />Ignite UI CLI:<br /><code>ig add select-groups newGroupsSelect</code><details>Select With Groups.</details>                                                                                                                                      | [IgxSelect](../../select.md) displaying grouped items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-in-form newFormSelect</code><details>IgxSelect in a form.</details>                                                                                                                                       | [IgxSelect](../../select.md) component usage in a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
-| input group                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c input-group newInputGroup</code><br />Ignite UI CLI:<br /><code>ig add input-group newInputGroup</code><details>Basic IgxInputGroup form view.</details>                                                                                                                                   | Form view created with [IgxInputGroup](../../input-group.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
-| autocomplete                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c autocomplete newAutocomplete</code><br />Ignite UI CLI:<br /><code>ig add autocomplete newAutocomplete</code><details>Simple IgxAutocomplete.</details>                                                                                                                                    | [IgxAutocomplete](../../autocomplete.md) enhancing text input with a dropdown of suggested options.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-| enhanced-autocomplete           | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete</code><br />Ignite UI CLI:<br /><code>ig add enhanced-autocomplete newEnhancedAutocomplete</code><details>IgxAutocomplete with enhanced groups.</details>                                                       | [IgxAutocomplete](../../autocomplete.md) with grouped suggestion items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| chip                            | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c chip newChip</code><br />Ignite UI CLI:<br /><code>ig add chip newChip</code><details>Basic IgxChip.</details>                                                                                                                                                                             | [IgxChip](../../chip.mdx) components inside igx-chips-area.                                                                                                                                                                                                                                                                                                                                                                                                                                                                              |
+| dropdown                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dropdown newDropDown</code><br />Ignite UI CLI:<br /><code>ig add dropdown newDropDown</code><details>Basic IgxDropDown.</details>                                                                                                                                                         | Basic [IgxDropDown](../../drop-down.mdx) that displays a list of items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select newSelect</code><br />Ignite UI CLI:<br /><code>ig add select newSelect</code><details>Basic IgxSelect.</details>                                                                                                                                                                   | Simple [IgxSelect](../../select.mdx) that displays a list of items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select-groups newGroupsSelect</code><br />Ignite UI CLI:<br /><code>ig add select-groups newGroupsSelect</code><details>Select With Groups.</details>                                                                                                                                      | [IgxSelect](../../select.mdx) displaying grouped items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| select (v4.1.0)                 | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-in-form newFormSelect</code><details>IgxSelect in a form.</details>                                                                                                                                       | [IgxSelect](../../select.mdx) component usage in a form.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
+| input group                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c input-group newInputGroup</code><br />Ignite UI CLI:<br /><code>ig add input-group newInputGroup</code><details>Basic IgxInputGroup form view.</details>                                                                                                                                   | Form view created with [IgxInputGroup](../../input-group.mdx).                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| autocomplete                    | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c autocomplete newAutocomplete</code><br />Ignite UI CLI:<br /><code>ig add autocomplete newAutocomplete</code><details>Simple IgxAutocomplete.</details>                                                                                                                                    | [IgxAutocomplete](../../autocomplete.mdx) enhancing text input with a dropdown of suggested options.                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| enhanced-autocomplete           | Ignite UI Schematics collection:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c enhanced-autocomplete newEnhancedAutocomplete</code><br />Ignite UI CLI:<br /><code>ig add enhanced-autocomplete newEnhancedAutocomplete</code><details>IgxAutocomplete with enhanced groups.</details>                                                       | [IgxAutocomplete](../../autocomplete.mdx) with grouped suggestion items.                                                                                                                                                                                                                                                                                                                                                                                                                                                                 |
 | <b>Interactions</b>             |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| dialog                          | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dialog newDialog</code><br />Ignite UI CLI:<br /><code>ig add dialog newDialog</code><details>Basic IgxDialog.</details>                                                                                                                                                                   | Sample of the [IgxDialog](../../dialog.md) used as a standard confirmation dialog.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
-| tooltip                         | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tooltip newTooltip</code><br />Ignite UI CLI:<br /><code>ig add tooltip newTooltip</code><details>A fully customizable tooltip.</details>                                                                                                                                                  | Basic tooltip created with the [IgxTooltip](../../tooltip.md).                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
+| dialog                          | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dialog newDialog</code><br />Ignite UI CLI:<br /><code>ig add dialog newDialog</code><details>Basic IgxDialog.</details>                                                                                                                                                                   | Sample of the [IgxDialog](../../dialog.mdx) used as a standard confirmation dialog.                                                                                                                                                                                                                                                                                                                                                                                                                                                      |
+| tooltip                         | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tooltip newTooltip</code><br />Ignite UI CLI:<br /><code>ig add tooltip newTooltip</code><details>A fully customizable tooltip.</details>                                                                                                                                                  | Basic tooltip created with the [IgxTooltip](../../tooltip.mdx).                                                                                                                                                                                                                                                                                                                                                                                                                                                                          |
 | <b>Scheduling</b>               |                                                                                                                                                                                                                                                                                                                                                                      |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
-| date-picker                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c date-picker newDatePicker</code><br />Ignite UI CLI:<br /><code>ig add date-picker newDatePicker</code><details>Basic IgxDatePicker.</details>                                                                                                                                             | Basic [IgxDatePicker](../../date-picker.md) with one-way data binding.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
-| time-picker                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c time-picker newTimePicker</code><br />Ignite UI CLI:<br /><code>ig add time-picker newTimePicker</code><details>Basic IgxTimePicker.</details>                                                                                                                                             | Basic [IgxTimePicker](../../time-picker.md) with initial value set and one-way data binding.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
-| calendar                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c calendar newCalendar</code><br />Ignite UI CLI:<br /><code>ig add calendar newCalendar</code><details>IgxCalendar with single selection.</details>                                                                                                                                         | Basic [IgxCalendar](../../calendar.md) with single selection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| date-picker                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c date-picker newDatePicker</code><br />Ignite UI CLI:<br /><code>ig add date-picker newDatePicker</code><details>Basic IgxDatePicker.</details>                                                                                                                                             | Basic [IgxDatePicker](../../date-picker.mdx) with one-way data binding.                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| time-picker                     | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c time-picker newTimePicker</code><br />Ignite UI CLI:<br /><code>ig add time-picker newTimePicker</code><details>Basic IgxTimePicker.</details>                                                                                                                                             | Basic [IgxTimePicker](../../time-picker.mdx) with initial value set and one-way data binding.                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| calendar                        | Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c calendar newCalendar</code><br />Ignite UI CLI:<br /><code>ig add calendar newCalendar</code><details>IgxCalendar with single selection.</details>                                                                                                                                         | Basic [IgxCalendar](../../calendar.mdx) with single selection.                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 
 
 ## Scenario Templates
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
index 4f39e9166c..224f1cb790 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -15,7 +15,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 The Ignite UI for Angular Schematics collection is a set of Angular CLI schematics for scaffolding Angular projects and component views pre-configured for Ignite UI for Angular. It integrates into the native Angular CLI workflow - use it with `ng new` for project creation and `ng g` for component scaffolding, without installing a separate global tool. The collection is distributed as the `@igniteui/angular-schematics` package and is added automatically when you run `ng add igniteui-angular` on an existing Angular project.
 
-The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started).
+The Schematics collection does not run an MCP server - the MCP server process is provided by the Ignite UI CLI and starts via `npx -y igniteui-cli mcp`, where `-y` avoids the interactive `npx` confirmation prompt. The `ai-config` schematic configures the MCP client connection and copies Agent Skills without requiring a separate CLI install. The collection is specific to Angular; React, Web Components, and Blazor equivalents are covered in their respective framework documentation. Neither tool is required to use Ignite UI for Angular - the library can be installed and configured manually as described in the [Getting Started guide](../getting-started.mdx).
 
 ## Install the Schematics Collection
 
@@ -51,7 +51,7 @@ The guided wizard is the recommended starting point for new projects. Activate i
 ng new --collection="@igniteui/angular-schematics"
 ```
 
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx).
 
 ### Create a project directly
 
@@ -79,8 +79,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
 
 | Template ID        | Description                                                                                                                                           |
 | :----------------- | :---------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth      | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details.                 |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details.            |
+| side-nav-auth      | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details.                 |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details.            |
 
 The following arguments are available when creating a project:
 
@@ -146,13 +146,13 @@ The following arguments are available when creating a project:
 
 ## Add a Component Template
 
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, use `ng generate` with the Ignite UI for Angular collection and the `component` schematic, providing the template ID and a name for the new component:
 
 ```cmd
 ng g @igniteui/angular-schematics:component grid newGrid
 ```
 
-Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](step-by-step-guide-using-angular-schematics#add-component-views).
+Template addition is supported in projects created with the Angular Schematics, Ignite UI CLI, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./step-by-step-guide-using-angular-schematics.mdx#add-component-views).
 
 The following arguments are available when adding a template:
 
@@ -326,4 +326,4 @@ ig ai-config
 The `ig ai-config` command configures only the two Ignite UI entries, `igniteui-cli` and `igniteui-theming`, and does not register `angular-cli`. Use `ng generate @igniteui/angular-schematics:ai-config` to get all three servers configured in a single step.
 </DocsAside>
 
-For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp).
\ No newline at end of file
+For full setup instructions across all AI clients and Agent Skills wiring, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
index d9ddc45c84..838eb0b16c 100644
--- a/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/en/components/general/cli/getting-started-with-cli.mdx
@@ -68,7 +68,7 @@ ig new
     <p style="text-align:center;">Building Your First Ignite UI CLI App</p>
 </div>
 
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](./step-by-step-guide-using-cli.mdx).
 
 ### Create a project directly
 
@@ -112,8 +112,8 @@ When using the interactive wizard, selecting `side-nav` or `side-nav-mini` trigg
 
 | Template ID        | Description                                                                                                                                          |
 | :----------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------- |
-| side-nav-auth      | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details.                |
-| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](auth-template) for details.           |
+| side-nav-auth      | Side navigation extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details.                |
+| side-nav-mini-auth | Side navigation mini extended with a user authentication module. See [Angular Authentication Project Template](./auth-template.mdx) for details.           |
 
 The following arguments are available when creating a project:
 
@@ -189,7 +189,7 @@ The following arguments are available when creating a project:
 
 ## Add a Component Template
 
-To add an [available Ignite UI for Angular template](component-templates) to an existing project, provide the template ID and a name for the new component:
+To add an [available Ignite UI for Angular template](./component-templates.mdx) to an existing project, provide the template ID and a name for the new component:
 
 ```cmd
 ig add grid newGrid
@@ -201,7 +201,7 @@ To list all available templates in your project directory:
 ig list
 ```
 
-Template addition is supported in projects created with the Ignite UI CLI, Angular Schematics, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI CLI](step-by-step-guide-using-cli#add-view).
+Template addition is supported in projects created with the Ignite UI CLI, Angular Schematics, or any Angular CLI project where Ignite UI for Angular was added with `ng add`. For the guided component wizard, see [Step-by-Step Guide Using Ignite UI CLI](./step-by-step-guide-using-cli.mdx#add-view).
 
 The following arguments are available when adding a template:
 
@@ -263,7 +263,7 @@ When run without flags, `ig ai-config` enters interactive mode and prompts you t
 1. **Choose coding assistants** - select one or more targets for MCP server configuration (Generic, VS Code, Cursor, Gemini, Junie), or None to skip.
 2. **Choose AI agents** - select one or more agents for skill files and instruction files (Generic, Claude, Copilot, Cursor, Codex, Windsurf, Gemini, Junie), or None to skip.
 
-Defaults in interactive mode are **Generic** for assistants and **Generic + Claude** for agents. For details on the wizard prompts, see [Step-by-Step Guide Using Ignite UI CLI - Configure AI assistants](step-by-step-guide-using-cli#configure-ai-assistants).
+Defaults in interactive mode are **Generic** for assistants and **Generic + Claude** for agents. For details on the wizard prompts, see [Step-by-Step Guide Using Ignite UI CLI - Configure AI assistants](./step-by-step-guide-using-cli.mdx#configure-ai-assistants).
 
 If you want to configure your AI client manually, or use a client other than VS Code, start the MCP server directly:
 
@@ -271,7 +271,7 @@ If you want to configure your AI client manually, or use a client other than VS
 ig mcp
 ```
 
-For client configuration (VS Code, Claude Desktop, Cursor, and others) and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp).
+For client configuration (VS Code, Claude Desktop, Cursor, and others) and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
 
 ## Ignite UI CLI Commands
 
@@ -288,5 +288,5 @@ A complete list of available Ignite UI CLI commands is maintained on the [Ignite
 | [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list)         | l     | Lists all templates for the specified framework and type. When run inside a project folder, lists templates for the project's framework and type even if different values are provided as arguments. |
 | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test)         |       | Executes the tests for the current project.                                                                                                                                                          |
 | ig version                                                            | -v    | Shows the Ignite UI CLI version installed locally, or globally if no local installation is found.                                                                                                    |
-| ig mcp                                                                |       | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp).                          |
+| ig mcp                                                                |       | Starts the Ignite UI MCP server, providing component documentation search and API reference tools to connected AI assistants. See [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).                          |
 | ig ai-config                                                          |       | Sets up AI coding assistant integration - configures MCP servers, copies skill files, and populates instruction files for your chosen assistants and agents.                                          |
diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
index 6a3f45a260..b45d6134fd 100644
--- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
+++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Step-by-Step Guide Using Ignite UI for Angular Schematics
 
-The Ignite UI for Angular Schematics step-by-step mode is an interactive wizard built into the `@igniteui/angular-schematics` collection. It guides you through project bootstrapping, template selection, and theming, then lets you add component views before finishing. The wizard can be activated for both new project creation and for adding views to an existing project previously created with the [Ignite UI Angular Schematics](getting-started-with-angular-schematics).
+The Ignite UI for Angular Schematics step-by-step mode is an interactive wizard built into the `@igniteui/angular-schematics` collection. It guides you through project bootstrapping, template selection, and theming, then lets you add component views before finishing. The wizard can be activated for both new project creation and for adding views to an existing project previously created with the [Ignite UI Angular Schematics](./getting-started-with-angular-schematics.mdx).
 
 The step-by-step mode does not support non-interactive or scripted use - for that, use the direct `ng new` and `ng g` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility.
 
@@ -70,7 +70,7 @@ Navigate the available project templates using the arrow keys and press ENTER to
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step prompt: choose project template" class="responsive-img" />
 
-If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](auth-template) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **empty**, the authentication prompt is skipped.
+If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](./auth-template.mdx) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **empty**, the authentication prompt is skipped.
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step prompt: auth question" class="responsive-img" />
 
@@ -79,7 +79,7 @@ If you select **side-nav** or **side-nav-mini**, the wizard will prompt you with
 Two theme options are available:
 
 - **default** - includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular Material-based theme in `angular.json`
-- **custom** - generates a color palette and theme configuration using the [Theming API](../../themes) in `app/styles.scss`, ready for customization
+- **custom** - generates a color palette and theme configuration using the [Theming API](../../themes.mdx) in `app/styles.scss`, ready for customization
 
 <Image src={igStepByStepNewProjectTheme} alt="Step by step prompt: choose default or custom theme" class="responsive-img" />
 
@@ -97,7 +97,7 @@ To activate the component wizard in an existing project, run the `component` sch
 ng g @igniteui/angular-schematics:component
 ```
 
-The wizard displays the available [component templates](component-templates#component-templates), grouped by category. Navigate with the arrow keys and press ENTER to select.
+The wizard displays the available [component templates](./component-templates.mdx#component-templates), grouped by category. Navigate with the arrow keys and press ENTER to select.
 
 <Image src={igStepByStepTemplateGroup} alt="Step by step prompt: template category selection" class="responsive-img" />
 
@@ -160,4 +160,4 @@ When run via the Angular schematic, an additional `angular-cli` MCP server entry
 To skip AI configuration prompts entirely during non-interactive project creation, pass `--assistants none --agents none` to `ng new`. To re-run AI configuration later, use `ng generate @igniteui/angular-schematics:ai-config` from the project root.
 </DocsAside>
 
-For MCP client configuration and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp).
+For MCP client configuration and a full description of available tools, see [Ignite UI CLI MCP](../../ai/cli-mcp.mdx).
diff --git a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx
index 9efa51a700..66c4165524 100644
--- a/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx
+++ b/docs/angular/src/content/en/components/general/cli/step-by-step-guide-using-cli.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Step-by-Step Guide Using Ignite UI CLI
 
-The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for [Ignite UI CLI](getting-started-with-cli)-based Angular projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront.
+The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for [Ignite UI CLI](./getting-started-with-cli.mdx)-based Angular projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront.
 
 The step-by-step mode does not support scripted or non-interactive use - for that, use the direct `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility.
 
@@ -63,11 +63,11 @@ Then you will be guided to choose one of the available project templates. Three
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step new project template selection" class="responsive-img" />
 
-If you select **Side Navigation** or **Side Navigation Mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](auth-template) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **Empty Project**, the authentication prompt is skipped.
+If you select **Side Navigation** or **Side Navigation Mini**, the wizard will prompt you with an additional step asking whether to add an [authentication module](./auth-template.mdx) to the project. Answering yes generates the corresponding auth variant (`side-nav-auth` or `side-nav-mini-auth`). If you select **Empty Project**, the authentication prompt is skipped.
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step auth question prompt" class="responsive-img" />
 
-The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes) in `app/styles.scss`.
+The next step is to choose a theme for your application. Selecting the default option includes a pre-compiled CSS file (`igniteui-angular.css`) with the default Ignite UI for Angular theme in your project's `angular.json`. The custom option generates a color palette and theme configuration using the [Theming API](../../themes.mdx) in `app/styles.scss`.
 
 <Image src={igStepByStepNewProjectTheme} alt="Step by step new project theme selection" class="responsive-img" />
 
@@ -83,7 +83,7 @@ The Ignite UI CLI supports multiple component templates and scenario templates t
 ig add
 ```
 
-You will be provided with a [list of the available templates](component-templates#component-templates), grouped by category.
+You will be provided with a [list of the available templates](./component-templates.mdx#component-templates), grouped by category.
 
 <Image src={igStepByStepTemplateGroup} alt="Step by step template group selection" class="responsive-img" />
 
@@ -91,7 +91,7 @@ Use the arrow keys to navigate through the options and ENTER to select. For some
 
 <Image src={igStepByStepComponentFeatures} alt="Step by step component feature toggles" class="responsive-img" />
 
-If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](component-templates#scenario-templates):
+If you choose to add a scenario to your application, you will also get a list of the available [scenario templates](./component-templates.mdx#scenario-templates):
 
 <Image src={igStepByStepScenarioTemplates} alt="Step by step scenario template selection" class="responsive-img" />
 
diff --git a/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx b/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx
index 97ed0bc0e3..446f27643e 100644
--- a/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx
+++ b/docs/angular/src/content/en/components/general/code-splitting-and-multiple-entry-points.mdx
@@ -321,4 +321,4 @@ For detailed information about specific components and their APIs, refer to the
 - [Grid](/grid/grid)
 - [Tree Grid](/treegrid/tree-grid)
 - [Hierarchical Grid](/hierarchicalgrid/hierarchical-grid)
-- [Pivot Grid](/pivotGrid/pivot-grid)
\ No newline at end of file
+- [Pivot Grid](/pivotgrid/pivot-grid)
\ No newline at end of file
diff --git a/docs/angular/src/content/en/components/general/getting-started.mdx b/docs/angular/src/content/en/components/general/getting-started.mdx
index 429e5e3c2e..cc324d0c46 100644
--- a/docs/angular/src/content/en/components/general/getting-started.mdx
+++ b/docs/angular/src/content/en/components/general/getting-started.mdx
@@ -21,7 +21,7 @@ import igniteuiProject from '../../images/general/igniteui-project.png';
 
 Ignite UI for Angular targets Angular 17 and later, with standalone components as the default bootstrapping model. It does not support Vue, React, or Web Components natively - for those frameworks see [Ignite UI for React](https://www.infragistics.com/products/ignite-ui-react), [Ignite UI for Web Components](https://www.infragistics.com/products/ignite-ui-web-components), and [Ignite UI for Blazor](https://www.infragistics.com/products/ignite-ui-blazor).
 
-Ignite UI for Angular is offered under a dual-license model: some components are open source under MIT, others require a commercial license. For details see [Ignite UI Licensing](./ignite-ui-licensing) and [Open Source vs Premium](./open-source-vs-premium).
+Ignite UI for Angular is offered under a dual-license model: some components are open source under MIT, others require a commercial license. For details see [Ignite UI Licensing](./ignite-ui-licensing.mdx) and [Open Source vs Premium](./open-source-vs-premium.mdx).
 
 ## Prerequisites
 
@@ -59,10 +59,10 @@ As of Ignite UI CLI v13.1.0, the `igx-ts` project type generates a project that
 </DocsAside>
 
 <DocsAside type="info">
-At some point during the process you may be asked to [log in to the Infragistics npm registry](ignite-ui-licensing#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured. This applies when using components under a [commercial license](./open-source-vs-premium#comparison-table-for-all-components).
+At some point during the process you may be asked to [log in to the Infragistics npm registry](./ignite-ui-licensing.mdx#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured. This applies when using components under a [commercial license](./open-source-vs-premium.mdx#comparison-table-for-all-components).
 </DocsAside>
 
-For a full walkthrough of all CLI options and project templates, see [Getting Started with Ignite UI CLI](cli/getting-started-with-cli) and [Angular Schematics and Ignite UI CLI](cli-overview).
+For a full walkthrough of all CLI options and project templates, see [Getting Started with Ignite UI CLI](./cli/getting-started-with-cli.mdx) and [Angular Schematics and Ignite UI CLI](./cli-overview.mdx).
 
 ### Install with Angular Schematics
 
@@ -78,7 +78,7 @@ Activate the guided wizard:
 ng new --collection="@igniteui/angular-schematics"
 ```
 
-For a step-by-step walkthrough see [Step-by-Step Guide Using Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics).
+For a step-by-step walkthrough see [Step-by-Step Guide Using Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx).
 
 ### Install with Angular CLI (`ng add`)
 
@@ -88,7 +88,7 @@ If you already have an Angular project or prefer to work entirely within the Ang
 ng new <project-name> --style=scss
 ```
 
-SCSS is recommended because the [Ignite UI for Angular Theming Library](../themes) is built on it and `ng add` configures the default theme automatically. Then add Ignite UI for Angular:
+SCSS is recommended because the [Ignite UI for Angular Theming Library](../themes.mdx) is built on it and `ng add` configures the default theme automatically. Then add Ignite UI for Angular:
 
 ```cmd
 ng add igniteui-angular
@@ -102,7 +102,7 @@ ng add igniteui-angular
 
 Some Ignite UI for Angular components ship as separate npm packages and are added independently:
 
-**[Grid Lite](../grid-lite/overview) - open source (MIT)**
+**[Grid Lite](../grid-lite/overview.mdx) - open source (MIT)**
 
 A lightweight grid for projects that need basic data display without the full commercial feature set. Its API is compatible with `IgxGrid`, so upgrading later requires minimal changes.
 
@@ -110,7 +110,7 @@ A lightweight grid for projects that need basic data display without the full co
 ng add igniteui-grid-lite
 ```
 
-**[Dock Manager](../dock-manager) - premium**
+**[Dock Manager](../dock-manager.mdx) - premium**
 
 A pane-based layout component where end users can pin, resize, move, and hide panes at runtime.
 
@@ -221,24 +221,24 @@ Or, using the Ignite UI CLI:
 ig upgrade-packages
 ```
 
-The schematic updates package dependencies and replaces source references. You will be prompted to [log in to the Infragistics private npm registry](ignite-ui-licensing#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured.
+The schematic updates package dependencies and replaces source references. You will be prompted to [log in to the Infragistics private npm registry](./ignite-ui-licensing.mdx#how-to-setup-your-environment-to-use-the-private-npm-feed-step-by-step-guide) if not already configured.
 
 ## AI-Assisted Development
 
 Ignite UI for Angular ships two tools for AI-assisted development.
 
-**Agent Skills** are structured knowledge files that teach AI coding assistants - GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI - how to work correctly with Ignite UI components, APIs, and theming patterns. Skills cover data grids, grid operations, charting, and theming. See [Ignite UI for Angular Skills](../ai/skills).
+**Agent Skills** are structured knowledge files that teach AI coding assistants - GitHub Copilot, Cursor, Windsurf, Claude, JetBrains AI - how to work correctly with Ignite UI components, APIs, and theming patterns. Skills cover data grids, grid operations, charting, and theming. See [Ignite UI for Angular Skills](../ai/skills.mdx).
 
-**The Ignite UI MCP Server** is a built-in server in the Ignite UI CLI that connects AI assistants to live Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server answers queries about current APIs, retrieves setup guides on demand, and supports accurate code generation for Ignite UI components. Start it with `ig mcp` after installing the CLI. For client configuration and available tools, see [Ignite UI CLI MCP Overview](../ai/cli-mcp).
+**The Ignite UI MCP Server** is a built-in server in the Ignite UI CLI that connects AI assistants to live Ignite UI component documentation and API references directly inside your editor. Unlike static skills, the MCP server answers queries about current APIs, retrieves setup guides on demand, and supports accurate code generation for Ignite UI components. Start it with `ig mcp` after installing the CLI. For client configuration and available tools, see [Ignite UI CLI MCP Overview](../ai/cli-mcp.mdx).
 
 ## API References
 - <ApiLink type="Grid" />
 - <ApiLink kind="sass" module="themes" type="function-grid-theme" label="IgxGridComponent Styles" />
 ## Additional Resources
 
-- [Ignite UI for Angular Skills](../ai/skills)
-- [Ignite UI CLI MCP Overview](../ai/cli-mcp)
-- [Angular Schematics and Ignite UI CLI](cli-overview)
+- [Ignite UI for Angular Skills](../ai/skills.mdx)
+- [Ignite UI CLI MCP Overview](../ai/cli-mcp.mdx)
+- [Angular Schematics and Ignite UI CLI](./cli-overview.mdx)
 - [Ignite UI CLI Commands](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
 - [Grid overview](/grid/grid)
 - [Grid Lite overview](/grid-lite/overview)
diff --git a/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx b/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx
index 8c15dbc025..8b959abfe9 100644
--- a/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx
+++ b/docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx
@@ -39,7 +39,7 @@ Before you start, make sure you have:
 
 This walkthrough works best with a **CLI-first** setup because Ignite UI CLI scaffolds the project and prepares the first MCP configuration for VS Code automatically.
 
-If you still need the detailed setup reference for each client, see [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md) and [Ignite UI Theming MCP](~/components/ai/theming-mcp.md).
+If you still need the detailed setup reference for each client, see [Angular Schematics & Ignite UI CLI](../cli-overview.mdx) and [Ignite UI Theming MCP](../../ai/theming-mcp.mdx).
 
 ## Step 1: Start with Ignite UI CLI
 
@@ -246,9 +246,9 @@ In practice, the most effective pattern is to use CLI MCP for project and compon
 
 ## Related Topics
 
-- [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md)
-- [Ignite UI Theming MCP](~/components/ai/theming-mcp.md)
-- [Ignite UI for Angular Skills](~/components/ai/skills.md)
+- [Angular Schematics & Ignite UI CLI](../cli-overview.mdx)
+- [Ignite UI Theming MCP](../../ai/theming-mcp.mdx)
+- [Ignite UI for Angular Skills](../../ai/skills.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx
index 4afe3ef800..35bb987e1f 100644
--- a/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx
+++ b/docs/angular/src/content/en/components/general/how-to/how-to-perform-crud.mdx
@@ -65,7 +65,7 @@ export class CRUDService {
 }
 ```
 
-What the above service is missing is configuration for filtering/sorting/paging, etc. Depending on the exact API implementation of the endpoints, requests to the server may need optional parameters to handle filtering/sorting/paging for you. See our [Remote Data Operations](../../grid/remote-data-operations/) for demos accompanied with code examples.
+What the above service is missing is configuration for filtering/sorting/paging, etc. Depending on the exact API implementation of the endpoints, requests to the server may need optional parameters to handle filtering/sorting/paging for you. See our [Remote Data Operations](../../grid/remote-data-operations.mdx) for demos accompanied with code examples.
 
 For more examples and guidance, refer to the [HTTP Services](https://angular.io/tutorial/toh-pt6) tutorial in the official Angular documentation.
 
diff --git a/docs/angular/src/content/en/components/general/open-source-vs-premium.mdx b/docs/angular/src/content/en/components/general/open-source-vs-premium.mdx
index dbb3f2cd38..225d3236ec 100644
--- a/docs/angular/src/content/en/components/general/open-source-vs-premium.mdx
+++ b/docs/angular/src/content/en/components/general/open-source-vs-premium.mdx
@@ -26,7 +26,7 @@ Our Ignite UI Premium components come with advanced enterprise features and are
 
 ### Grids and advanced components
 
-- [Data Grid](/grid/grid), [Hierarchical Grid](/hierarchicalgrid/hierarchical-grid), [Tree Grid](/treegrid/tree-grid), [Pivot Grid](/pivotGrid/pivot-grid)
+- [Data Grid](/grid/grid), [Hierarchical Grid](/hierarchicalgrid/hierarchical-grid), [Tree Grid](/treegrid/tree-grid), [Pivot Grid](/pivotgrid/pivot-grid)
 - [Dock Manager](/dock-manager)
 - [Query Builder](/query-builder)
 - [Charting library](/charts/chart-overview)
diff --git a/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
new file mode 100644
index 0000000000..6de1ba59da
--- /dev/null
+++ b/docs/angular/src/content/en/components/geo-map-binding-data-overview.mdx
@@ -0,0 +1,27 @@
+---
+title: "Angular Map | Data Visualization Tools | Data Binding | Infragistics"
+description: Use Infragistics'  Angular map to display data that contains geographic locations from view models or geo-spatial data loaded from shape files on geographic imagery maps. View Ignite UI for Angular map demos!
+keywords: "Angular map, geo-spatial data, Ignite UI for Angular, Infragistics, data binding"
+license: commercial
+mentionedTypes: ["GeographicMap", "Series"]
+namespace: Infragistics.Controls.Maps
+llms:
+  description: "The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps."
+---
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+
+# Angular Data Binding
+
+The Ignite UI for Angular map component is designed to display geo-spatial data from shape files and/or geographic locations from data models on geographic imagery maps. The <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> property of geographic series is used for the purpose of binding to data models.
+
+## Types of Data Sources
+The following section list some of data source that you can bind in the geographic map component
+
+- [Binding Shape Files](./geo-map-binding-shp-file.mdx)
+- [Binding JSON Files](./geo-map-binding-data-json-points.mdx)
+- [Binding CSV Files](./geo-map-binding-data-csv.mdx)
+- [Binding Data Models](./geo-map-binding-data-model.mdx)
+- [Binding Multiple Sources](./geo-map-binding-multiple-sources.mdx)
+
+## API References
+<ApiLink type="GeographicMap" />
diff --git a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx
index a99de32f0c..d08ac1e9a8 100644
--- a/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx
+++ b/docs/angular/src/content/en/components/grid/selection-based-aggregates.mdx
@@ -19,7 +19,7 @@ With the sample, illustrated beyond, you may see how multiple selection is being
 
 ## Topic Overview
 
-To achieve the selection-based aggregates functionality, you can use our [Grid Selection](/components/grid/grid/selection) feature, together with the [Grid Summaries](/components/grid/grid/summaries).
+To achieve the selection-based aggregates functionality, you can use our [Grid Selection](/grid/selection) feature, together with the [Grid Summaries](/grid/summaries).
 The Summaries are allowing for customization of the basic Summary feature functionality through extending one of the base classes, <ApiLink type="SummaryOperand" />, <ApiLink type="NumberSummaryOperand" /> or <ApiLink type="DateSummaryOperand" />, depending on the column data type and your needs.
 
 ## Selection
diff --git a/docs/angular/src/content/en/components/navbar.mdx b/docs/angular/src/content/en/components/navbar.mdx
index 411dac304a..a842d9d4c6 100644
--- a/docs/angular/src/content/en/components/navbar.mdx
+++ b/docs/angular/src/content/en/components/navbar.mdx
@@ -29,7 +29,7 @@ To get started with the Ignite UI for Angular Navbar component, first you need t
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The first step is to import the `IgxNavbarModule` inside our **app.module.ts** file.
 
@@ -94,7 +94,7 @@ The <ApiLink type="Navbar" member="actionButtonIcon" label="actionButtonIcon" />
 
 ### Add Icon Buttons
 
-We can make our app a little more functional by adding options for searching, favorites and more. To do that let's grab the [**IgxIconButton**](/icon-button) and [**IgxIcon**](/icon) modules and import them in our **app.module.ts** file.
+We can make our app a little more functional by adding options for searching, favorites and more. To do that let's grab the [**IgxIconButton**](./icon-button.mdx) and [**IgxIcon**](./icon.mdx) modules and import them in our **app.module.ts** file.
 
 ```typescript
 // app.module.ts
@@ -305,7 +305,7 @@ $custom-navbar-theme: navbar-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 The last step is to pass the newly created theme to the `tokens` mixin:
@@ -324,7 +324,7 @@ The last step is to pass the newly created theme to the `tokens` mixin:
 
 ### Styling with Tailwind
 
-You can style the navbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the navbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-custom.mdx b/docs/angular/src/content/en/components/pivotgrid/pivot-grid-custom.mdx
similarity index 98%
rename from docs/angular/src/content/en/components/pivotGrid/pivot-grid-custom.mdx
rename to docs/angular/src/content/en/components/pivotgrid/pivot-grid-custom.mdx
index 04c53ca4b6..21c3ef5954 100644
--- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-custom.mdx
+++ b/docs/angular/src/content/en/components/pivotgrid/pivot-grid-custom.mdx
@@ -135,8 +135,8 @@ public noopSortStrategy = NoopSortingStrategy.instance();
 ## Additional Resources
 
 
-- [Angular Pivot Grid Features](/pivotGrid/pivot-grid-features)
-- [Angular Pivot Grid Overview](/pivotGrid/pivot-grid)
+- [Angular Pivot Grid Features](/pivotgrid/pivot-grid-features)
+- [Angular Pivot Grid Overview](/pivotgrid/pivot-grid)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx b/docs/angular/src/content/en/components/pivotgrid/pivot-grid-features.mdx
similarity index 98%
rename from docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx
rename to docs/angular/src/content/en/components/pivotgrid/pivot-grid-features.mdx
index e66f836fc4..4018fbf47a 100644
--- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid-features.mdx
+++ b/docs/angular/src/content/en/components/pivotgrid/pivot-grid-features.mdx
@@ -216,8 +216,8 @@ The chips from the Pivot Grid can not be moved to the Pivot Data Selector and it
 ## Additional Resources
 
 
-- [Angular Pivot Grid Overview](/pivotGrid/pivot-grid)
-- [Angular Pivot Grid Custom Aggregations](/pivotGrid/pivot-grid-custom)
+- [Angular Pivot Grid Overview](/pivotgrid/pivot-grid)
+- [Angular Pivot Grid Custom Aggregations](/pivotgrid/pivot-grid-custom)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx b/docs/angular/src/content/en/components/pivotgrid/pivot-grid.mdx
similarity index 99%
rename from docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx
rename to docs/angular/src/content/en/components/pivotgrid/pivot-grid.mdx
index f729d3ed0e..5915e36ef2 100644
--- a/docs/angular/src/content/en/components/pivotGrid/pivot-grid.mdx
+++ b/docs/angular/src/content/en/components/pivotgrid/pivot-grid.mdx
@@ -397,8 +397,8 @@ There are also additional parameters in the <ApiLink kind="sass" module="themes"
 ## Additional Resources
 
 
-- [Angular Pivot Grid Features](/pivotGrid/pivot-grid-features)
-- [Angular Pivot Grid Custom Aggregations](/pivotGrid/pivot-grid-custom)
+- [Angular Pivot Grid Features](/pivotgrid/pivot-grid-features)
+- [Angular Pivot Grid Custom Aggregations](/pivotgrid/pivot-grid-custom)
 - [Ignite UI for Angular Skills](/ai/skills) — Agent Skills for grids, data operations, and theming
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/query-builder.mdx b/docs/angular/src/content/en/components/query-builder.mdx
index affba049b9..ba389e23eb 100644
--- a/docs/angular/src/content/en/components/query-builder.mdx
+++ b/docs/angular/src/content/en/components/query-builder.mdx
@@ -40,7 +40,7 @@ To get started with the Ignite UI for Angular Query Builder component, first you
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxQueryBuilderModule` in the **app.module.ts** file.
 
@@ -156,7 +156,7 @@ The <ApiLink type="QueryBuilder" member="expressionTree" label="expressionTree"
 
 ## Expressions Dragging
 
-Condition chips can be easily repositioned using mouse [_Drag & Drop_](/drag-drop) or [_Keyboard reordering_](#keyboard-interaction) approaches. With those, users can adjust their query logic dynamically.
+Condition chips can be easily repositioned using mouse [_Drag & Drop_](./drag-drop.mdx) or [_Keyboard reordering_](#keyboard-interaction) approaches. With those, users can adjust their query logic dynamically.
 
 - Dragging a chip does not modify its condition/contents, only its position.
 - Chip can also be dragged along groups and subgroups. For example, grouping/ungrouping expressions is achieved via the Expressions Dragging functionality.
@@ -338,7 +338,7 @@ $custom-icon-button: outlined-icon-button-theme(
 In this example we only changed some of the parameters for the listed components, but the <ApiLink kind="sass" module="themes" type="function-button-theme" label="button-theme" code={true} />, <ApiLink kind="sass" module="themes" type="function-chip-theme" label="chip-theme" code={true} />, <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" code={true} />, <ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" code={true} /> themes provide way more parameters to control their respective styling.
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 The last step is to **include** the new component themes using the `tokens` mixin.
@@ -357,7 +357,7 @@ The last step is to **include** the new component themes using the `tokens` mixi
 ```
 
 <DocsAside type="info">
-If the component is using an [`Emulated`](/themes/sass/component-themes/#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the query builder component (button, chip, drop-down ...etc).
+If the component is using an [`Emulated`](./themes/sass/component-themes.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to style the components inside the query builder component (button, chip, drop-down ...etc).
 </DocsAside>
 
 ### Demo
@@ -372,7 +372,7 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 ### Styling with Tailwind
 
-You can style the query builder using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the query builder using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/slider/slider.mdx b/docs/angular/src/content/en/components/slider/slider.mdx
index 6759e810ed..274f035311 100644
--- a/docs/angular/src/content/en/components/slider/slider.mdx
+++ b/docs/angular/src/content/en/components/slider/slider.mdx
@@ -568,7 +568,7 @@ This is the final result from applying our new theme.
 
 ### Styling with Tailwind
 
-You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes/) first.
+You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/snackbar.mdx b/docs/angular/src/content/en/components/snackbar.mdx
index 68cdf1fa5b..f1503f4655 100644
--- a/docs/angular/src/content/en/components/snackbar.mdx
+++ b/docs/angular/src/content/en/components/snackbar.mdx
@@ -33,7 +33,7 @@ To get started with the Ignite UI for Angular Snackbar component, first you need
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxSnackbarModule` in your **app.module.ts** file.
 
@@ -336,7 +336,7 @@ $dark-snackbar: snackbar-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 The last step is to **include** the component theme in our application.
@@ -355,7 +355,7 @@ The last step is to **include** the component theme in our application.
 
 ### Styling with Tailwind
 
-You can style the snackbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the snackbar using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/tabbar.mdx b/docs/angular/src/content/en/components/tabbar.mdx
index 7fb7f8f01a..8f48ce11e2 100644
--- a/docs/angular/src/content/en/components/tabbar.mdx
+++ b/docs/angular/src/content/en/components/tabbar.mdx
@@ -37,7 +37,7 @@ To get started with the Ignite UI for Angular Bottom Navigation component, first
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxBottomNavModule` in your **app.module.ts** file.
 
@@ -460,7 +460,7 @@ $dark-bottom-nav: bottom-nav-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 If we take a look at the <ApiLink kind="sass" module="themes" type="function-bottom-nav-theme" label="bottom-nav-theme" code={true} />, we will notice that there are even more parameters available to us in order to style our bottom navigation component!
@@ -483,7 +483,7 @@ The last step is to **include** the component theme in our application.
 
 ### Styling with Tailwind
 
-You can style the bottom navigation using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the bottom navigation using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/tabs.mdx b/docs/angular/src/content/en/components/tabs.mdx
index 0c7f4d90af..bd31fb40a7 100644
--- a/docs/angular/src/content/en/components/tabs.mdx
+++ b/docs/angular/src/content/en/components/tabs.mdx
@@ -39,7 +39,7 @@ To get started with the Ignite UI for Angular Tabs component, first you need to
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxTabsModule` in your **app.module.ts** file.
 
@@ -525,7 +525,7 @@ $dark-tabs: tabs-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 If we take a look at the <ApiLink kind="sass" module="themes" type="function-tabs-theme" label="tabs-theme" code={true} />, we will notice that there are even more properties available to us in order to style our tabs.
@@ -548,7 +548,7 @@ The last step is to **include** the component theme in our application.
 
 ### Styling with Tailwind
 
-You can style the tabs using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the tabs using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/texthighlight.mdx b/docs/angular/src/content/en/components/texthighlight.mdx
index bbc4ac3ab3..97ce58639c 100644
--- a/docs/angular/src/content/en/components/texthighlight.mdx
+++ b/docs/angular/src/content/en/components/texthighlight.mdx
@@ -29,7 +29,7 @@ To get started with the Ignite UI for Angular Text Highlight directive, first yo
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxTextHighlightModule` in your **app.module.ts** file.
 
@@ -82,7 +82,7 @@ Now that you have the Ignite UI for Angular Text Highlight module or directive i
 
 ## Using the Angular Text Highlight Directive
 
-Let's create a search box that we can use to highlight different parts of the text. We will use Ignite UI for Angular's [InputGroup](/input-group) component in which we will add a text input with buttons for clear matches, find next, find previous, and a button for specifying whether the search will be case-sensitive or not. Also it has a label for how many matches we have found.
+Let's create a search box that we can use to highlight different parts of the text. We will use Ignite UI for Angular's [InputGroup](./input-group.mdx) component in which we will add a text input with buttons for clear matches, find next, find previous, and a button for specifying whether the search will be case-sensitive or not. Also it has a label for how many matches we have found.
 
 ```html
 <div class="search-container">
@@ -387,7 +387,7 @@ The last step is to **include** the newly created theme.
 ```
 
 <DocsAside type="info">
-If the component is using an [`Emulated`](/themes/sass/component-themes/#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles.
+If the component is using an [`Emulated`](./themes/sass/component-themes.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep` to apply the styles.
 </DocsAside>
 
 ### Custom styles
@@ -450,7 +450,7 @@ Additional components that were used:
 <igc-divider></igc-divider>
 ## Additional Resources
 
-- [Grid Search](/grid/search)
+- [Grid Search](./grid/search.mdx)
 
 <hr/>
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
index 38c72ebc72..048e551909 100644
--- a/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
+++ b/docs/angular/src/content/en/components/themes/misc/angular-material-theming.mdx
@@ -205,7 +205,7 @@ $custom-mat-light-theme: mat.define-light-theme((
 ```
 
 <DocsAside type="info">
-Visit our [`palettes with Sass`](../sass/palettes/) section to discover more about the palettes provided by Ignite UI for Angular and learn how to create a new one.
+Visit our [`palettes with Sass`](../sass/palettes.mdx) section to discover more about the palettes provided by Ignite UI for Angular and learn how to create a new one.
 </DocsAside>
 
 #### Dark Theme Palette
@@ -264,7 +264,7 @@ For the Angular Material components, we also need to include their `core` mixin
 ```
 
 <DocsAside type="warning">
-Be sure to place the above code inside the `::ng-deep` selector to `penetrate` the [`Emulated`](../sass/component-themes/#view-encapsulation) ViewEncapsulation.
+Be sure to place the above code inside the `::ng-deep` selector to `penetrate` the [`Emulated`](../sass/component-themes.mdx#view-encapsulation) ViewEncapsulation.
 </DocsAside>
 
 #### Light Mode
@@ -411,14 +411,14 @@ Check Angular Material [`Typography documentation`](https://material.angular.io/
 - <ApiLink kind="sass" module="palettes" type="function-palette" label="Palette Function" />
 - <ApiLink kind="sass" module="typography" type="mixin-typography" label="Typography Mixin" />
 Related topics:
-- [Palettes](../sass/palettes/)
-- [Component Themes](../sass/component-themes/)
-- [Typography](../sass/typography/)
-- [Avatar Component](../../avatar/)
-- [Button Component](../../button/)
-- [Dialog Component](../../dialog/)
-- [Icon Component](../../icon/)
-- [Expansion Panel Component](../../expansion-panel/)
+- [Palettes](../sass/palettes.mdx)
+- [Component Themes](../sass/component-themes.mdx)
+- [Typography](../sass/typography.mdx)
+- [Avatar Component](../../avatar.mdx)
+- [Button Component](../../button.mdx)
+- [Dialog Component](../../dialog.mdx)
+- [Icon Component](../../icon.mdx)
+- [Expansion Panel Component](../../expansion-panel.mdx)
 ## Additional Resources
 
 <hr/>
diff --git a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx
index 25ff382aa3..3e7c1faccb 100644
--- a/docs/angular/src/content/en/components/themes/sass/global-themes.mdx
+++ b/docs/angular/src/content/en/components/themes/sass/global-themes.mdx
@@ -150,14 +150,14 @@ The table below shows all the built-in themes that you can use right away.
 
 | Theme                                                           | Schema                    | Color Palette                                                                          |
 | :-------------------------------------------------------------- | :------------------------ | :------------------------------------------------------------------------------------- |
-| [**Material Light**](presets/material#default-theme)         |  `$light-material-schema` | $light-material-palette                                                                |
-| [**Material Dark**](presets/material#material-dark-theme)    |  `$dark-material-schema`  | $dark-material-palette                                                                 |
-| [**Fluent Light**](presets/fluent)                           | `$light-fluent-schema`    | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
-| [**Fluent Dark**](presets/fluent#fluent-dark-theme)          |  `$dark-fluent-schema`    | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
-| [**Bootstrap Light**](presets/bootstrap)                     | `$light-bootstrap-schema` | $light-bootstrap-palette                                                               |
-| [**Bootstrap Dark**](presets/bootstrap#bootstrap-dark-theme) |  `$dark-bootstrap-schema` | $dark-bootstrap-palette                                                                |
-| [**Indigo Light**](presets/indigo)                           | `$light-indigo-schema`    | $light-indigo-palette                                                                  |
-| [**Indigo Dark**](presets/indigo#indigo-dark-theme)          |   `$dark-indigo-schema`   | $dark-indigo-palette                                                                   |
+| [**Material Light**](./presets/material.mdx#default-theme)         |  `$light-material-schema` | $light-material-palette                                                                |
+| [**Material Dark**](./presets/material.mdx#material-dark-theme)    |  `$dark-material-schema`  | $dark-material-palette                                                                 |
+| [**Fluent Light**](./presets/fluent.mdx)                           | `$light-fluent-schema`    | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
+| [**Fluent Dark**](./presets/fluent.mdx#fluent-dark-theme)          |  `$dark-fluent-schema`    | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
+| [**Bootstrap Light**](./presets/bootstrap.mdx)                     | `$light-bootstrap-schema` | $light-bootstrap-palette                                                               |
+| [**Bootstrap Dark**](./presets/bootstrap.mdx#bootstrap-dark-theme) |  `$dark-bootstrap-schema` | $dark-bootstrap-palette                                                                |
+| [**Indigo Light**](./presets/indigo.mdx)                           | `$light-indigo-schema`    | $light-indigo-palette                                                                  |
+| [**Indigo Dark**](./presets/indigo.mdx#indigo-dark-theme)          |   `$dark-indigo-schema`   | $dark-indigo-palette                                                                   |
 
 
 ## Additional Resources
diff --git a/docs/angular/src/content/en/components/toast.mdx b/docs/angular/src/content/en/components/toast.mdx
index 07b1d8d59c..b92bb9b3f1 100644
--- a/docs/angular/src/content/en/components/toast.mdx
+++ b/docs/angular/src/content/en/components/toast.mdx
@@ -31,7 +31,7 @@ To get started with the Ignite UI for Angular Toast component, first you need to
 ng add igniteui-angular
 ```
 
-For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
+For a complete introduction to the Ignite UI for Angular, read the [_getting started_](./general/getting-started.mdx) topic.
 
 The next step is to import the `IgxToastModule` in your **app.module.ts** file.
 
@@ -226,7 +226,7 @@ $custom-toast-theme: toast-theme(
 ```
 
 <DocsAside type="info">
-Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](/themes/sass/palettes/) topic for detailed guidance on how to use them.
+Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the <ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> and <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> functions. Please refer to [`Palettes`](./themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 The last step is to pass the custom toast theme:
@@ -243,7 +243,7 @@ The last step is to pass the custom toast theme:
 
 ### Styling with Tailwind
 
-You can style the toast using our custom Tailwind utility classes. Make sure to [set up Tailwind](/themes/misc/tailwind-classes) first.
+You can style the toast using our custom Tailwind utility classes. Make sure to [set up Tailwind](./themes/misc/tailwind-classes.mdx) first.
 
 Along with the Tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/en/components/toc.json b/docs/angular/src/content/en/components/toc.json
index 3a5745585c..70a1e35c37 100644
--- a/docs/angular/src/content/en/components/toc.json
+++ b/docs/angular/src/content/en/components/toc.json
@@ -1047,34 +1047,34 @@
   },
   {
     "name": "Pivot Grid",
-    "href": "pivotGrid/pivot-grid.mdx",
+    "href": "pivotgrid/pivot-grid.mdx",
     "premium": true,
     "new": false,
     "updated": true,
     "items": [
       {
         "name": "Export services",
-        "href": "pivotGrid/export-excel.mdx",
+        "href": "pivotgrid/export-excel.mdx",
         "new": false,
         "updated": true,
         "premium": true
       },
       {
         "name": "Pivot Grid Features",
-        "href": "pivotGrid/pivot-grid-features.mdx",
+        "href": "pivotgrid/pivot-grid-features.mdx",
         "updated": true,
         "new": false,
         "premium": true
       },
       {
         "name": "Pivot Grid Remote Operations",
-        "href": "pivotGrid/pivot-grid-custom.mdx",
+        "href": "pivotgrid/pivot-grid-custom.mdx",
         "new": false,
         "premium": true
       },
       {
         "name": "State Persistence",
-        "href": "pivotGrid/state-persistence.mdx",
+        "href": "pivotgrid/state-persistence.mdx",
         "new": false,
         "updated": true,
         "premium": true
diff --git a/docs/angular/src/content/en/docfx.json b/docs/angular/src/content/en/docfx.json
deleted file mode 100644
index 3e7ddcae18..0000000000
--- a/docs/angular/src/content/en/docfx.json
+++ /dev/null
@@ -1,109 +0,0 @@
-{
-    "build": {
-        "content": [
-            {
-                "files": [
-                    "components/**.md",
-                    "components/**/toc.json",
-                    "components/themes/**.md",
-                    "components/general/**.md",
-                    "toc.json",
-                    "*.md"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**",
-                    "components/grids_templates/**"
-                ]
-            }
-        ],
-        "resource": [
-            {
-                "files": [
-                    "images/**",
-                    "web.config"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**"
-                ]
-            }
-        ],
-        "overwrite": [
-            {
-                "files": [
-                    "apidoc/**.md"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**"
-                ]
-            }
-        ],
-        "dest": "_site",
-        "globalMetadataFiles": [
-            "global.json",
-            "../node_modules/igniteui-docfx-template/template/bundling.global.json"
-        ],
-        "fileMetadataFiles": [],
-        "template": [
-            "../node_modules/igniteui-docfx-template/template"
-        ],
-        "noLangKeyword": false,
-        "keepFileLink": false,
-        "cleanupCacheHistory": true,
-        "disableGitFeatures": true,
-        "sitemap": {
-            "baseUrl": "https://www.infragistics.com/products/ignite-ui-angular/angular/",
-            "changefreq": "weekly",
-            "priority": 0.7,
-            "fileOptions":{
-                "**/grid/**": {
-                    "priority": 0.8
-                },
-                "**/grid.md": {
-                    "priority": 0.9
-                },
-                "**/hierarchical-grid.md": {
-                    "priority": 0.9
-                },
-                "**/tree-grid.md": {
-                    "priority": 0.9
-                },
-                "**/grids-and-lists.md": {
-                    "priority": 0.9
-                },
-                "**/combo.md": {
-                    "priority": 0.9
-                },
-                "**/spreadsheet_overview.md": {
-                    "priority": 0.9
-                },
-                "**/category-chart.md": {
-                    "priority": 0.9
-                },
-                "**/data-chart.md": {
-                    "priority": 0.9
-                },
-                "**/financial-chart.md": {
-                    "priority": 0.9
-                },
-                "**/ignite-ui-licensing.md": {
-                    "priority": 0.9
-                },
-                "**/getting-started.md": {
-                    "priority": 0.9
-                },
-                "**/accessibility-compliance.md": {
-                    "priority": 0.9
-                },
-                "**/ssr-rendering.md": {
-                    "priority": 0.9
-                },
-                "**/data-analysis.md": {
-                    "priority": 0.9
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx
index 01ba5ee5d3..5161993da8 100644
--- a/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx
+++ b/docs/angular/src/content/en/grids_templates/advanced-filtering.mdx
@@ -55,7 +55,7 @@ The Advanced filtering provides a dialog which allows the creation of groups wit
 
 ## Interaction
 
-In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the <ApiLink type="QueryBuilder" /> component to generate,display and edit the filtering logic. You can have a look at the [`Query Builder topic`](../query-builder#getting-started-with-ignite-ui-for-angular-query-builder) for details on the interaction process.
+In order to open the advanced filtering dialog, the **Advanced Filtering** button in the grid toolbar should be clicked. The dialog is using the <ApiLink type="QueryBuilder" /> component to generate,display and edit the filtering logic. You can have a look at the [`Query Builder topic`](../query-builder.mdx#getting-started-with-ignite-ui-for-angular-query-builder) for details on the interaction process.
 
 In order to filter the data once you are ready with creating the filtering conditions and groups, you should click the **Apply** button. If you have modified the advanced filter, but you don't want to preserve the changes, you should click the **Cancel** button. You could also clear the advanced filter by clicking the **Clear Filter** button.
 
@@ -154,7 +154,7 @@ ngAfterViewInit(): void {
 }
 ```
 
-The advanced filtering in the `IgxHierarchicalGrid` can be used to filter root grid data based on child grids data using the _IN / NOT-IN_ operators. This way, subqueries can be created to define more complex filtering logic. More information about this functionality can be found in [`Query Builder's Using Sub-Queries section`](../query-builder-model#using-sub-queries). Here's a sample <ApiLink type="FilteringExpressionsTree" /> with a subquery:
+The advanced filtering in the `IgxHierarchicalGrid` can be used to filter root grid data based on child grids data using the _IN / NOT-IN_ operators. This way, subqueries can be created to define more complex filtering logic. More information about this functionality can be found in [`Query Builder's Using Sub-Queries section`](../query-builder-model.mdx#using-sub-queries). Here's a sample <ApiLink type="FilteringExpressionsTree" /> with a subquery:
 
 ```TypeScript
 ngAfterViewInit(): void {
@@ -176,7 +176,7 @@ ngAfterViewInit(): void {
 }
 ```
 
-If remote data is used, the <ApiLink type="HierarchicalGrid" member="schema" label="schema" /> property of the `IgxHierarchicalGrid` should be set. Please refer to [`Load on Demand`](../hierarchicalgrid/load-on-demand) topic for detailed guidance.
+If remote data is used, the <ApiLink type="HierarchicalGrid" member="schema" label="schema" /> property of the `IgxHierarchicalGrid` should be set. Please refer to [`Load on Demand`](../hierarchicalgrid/load-on-demand.mdx) topic for detailed guidance.
 </ComponentBlock>
 
 In case you don't want to show the {ComponentTitle} toolbar, you could use the <ApiLink type="{ComponentApiType}" member="openAdvancedFilteringDialog" label="openAdvancedFilteringDialog" /> and <ApiLink type="{ComponentApiType}" member="closeAdvancedFilteringDialog" label="closeAdvancedFilteringDialog" /> methods to open and close the advanced filtering dialog programmatically.
@@ -322,16 +322,18 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 
 - [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
-- [Filtering](/{igPath}/filtering)
 - [Excel Style Filtering](/{igPath}/excel-style-filtering)
-- [Virtualization and Performance](/{igPath}/virtualization)
 - [Paging](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [Filtering](/{igPath}/filtering)
+- [Virtualization and Performance](/{igPath}/virtualization)
 - [Sorting](/{igPath}/sorting)
 - [Summaries](/{igPath}/summaries)
 - [Column Moving](/{igPath}/column-moving)
 - [Column Pinning](/{igPath}/column-pinning)
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
+</ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/grids_templates/batch-editing.mdx b/docs/angular/src/content/en/grids_templates/batch-editing.mdx
index 65594ea01c..e9262431a8 100644
--- a/docs/angular/src/content/en/grids_templates/batch-editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/batch-editing.mdx
@@ -15,12 +15,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <ComponentBlock for="Grid, HierarchicalGrid">
 
-The Batch Editing feature of the {ComponentName} is based on the <ApiLink type="TransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxTransactionService` and details how it is implemented.
+The Batch Editing feature of the {ComponentName} is based on the <ApiLink type="TransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes.mdx) topic to see an overview of the `igxTransactionService` and details how it is implemented.
 </ComponentBlock>
 
 <ComponentBlock for="TreeGrid">
 
-The Batch Editing feature of the {ComponentName} is based on the <ApiLink kind="interface" type="HierarchicalTransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
+The Batch Editing feature of the {ComponentName} is based on the <ApiLink kind="interface" type="HierarchicalTransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes.mdx) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
 </ComponentBlock>
 <ComponentBlock for="HierarchicalGrid">
 
@@ -273,7 +273,9 @@ Disabling <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEdit
 
 - [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} Overview](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} Editing](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} Row Editing](/{igPath}/row-editing)
 - [{ComponentTitle} Row Adding](/{igPath}/row-adding)
 
diff --git a/docs/angular/src/content/en/grids_templates/cascading-combos.mdx b/docs/angular/src/content/en/grids_templates/cascading-combos.mdx
index 7a702b99bc..993e9335c0 100644
--- a/docs/angular/src/content/en/grids_templates/cascading-combos.mdx
+++ b/docs/angular/src/content/en/grids_templates/cascading-combos.mdx
@@ -77,7 +77,7 @@ public countryChanging(event: IComboSelectionChangeEventArgs) {
 }
 ```
 
-And lastly, adding the [Linear Progress](../linear-progress), which is required while loading the list of data.
+And lastly, adding the [Linear Progress](../linear-progress.mdx), which is required while loading the list of data.
 The <ApiLink type="LinearProgressBar" member="id" label="id" /> is necessary to set the value of `id` attribute.
 
 ```html
@@ -95,7 +95,9 @@ The <ApiLink type="LinearProgressBar" member="id" label="id" /> is necessary to
 - <ApiLink kind="sass" module="themes" type="function-progress-linear-theme" label="IgxLinearProgressBarComponent Styles" />
 ## Additional Resources
 
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} Editing](/{igPath}/editing)
+</ComponentBlock>
 - [Single Select ComboBox](/simple-combo)
 - [Cascading Combos](/simple-combo#cascading-scenario)
 - [Linear Progress](/linear-progress)
diff --git a/docs/angular/src/content/en/grids_templates/cell-editing.mdx b/docs/angular/src/content/en/grids_templates/cell-editing.mdx
index 593a9a98c3..29224aa1fe 100644
--- a/docs/angular/src/content/en/grids_templates/cell-editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/cell-editing.mdx
@@ -190,7 +190,7 @@ This code is used in the sample below which implements an [`IgxSelectComponent`]
 
 
 <DocsAside type="info">
-Any changes made to the cell's <ApiLink type="GridCell" member="editValue" label="editValue" /> in edit mode, will trigger the appropriate [editing event](editing#event-arguments-and-sequence) on exit and apply to the [transaction state](batch-editing) (if transactions are enabled).
+Any changes made to the cell's <ApiLink type="GridCell" member="editValue" label="editValue" /> in edit mode, will trigger the appropriate [editing event](/{igPath}/editing#event-arguments-and-sequence) on exit and apply to the [transaction state](/{igPath}/batch-editing) (if transactions are enabled).
 </DocsAside>
 
 <DocsAside type="info">
@@ -443,7 +443,7 @@ These can be wired to user interactions, not necessarily related to the **{Compo
 ### Cell validation on edit event
 
 Using the grid's editing events we can alter how the user interacts with the grid.
-In this example, we'll validate a cell based on the data entered in it by binding to the <ApiLink type="{ComponentApiType}" member="cellEdit" label="cellEdit" /> event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event (`event.cancel = true`). We'll also display a custom error message using [`IgxToast`](../toast).
+In this example, we'll validate a cell based on the data entered in it by binding to the <ApiLink type="{ComponentApiType}" member="cellEdit" label="cellEdit" /> event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event (`event.cancel = true`). We'll also display a custom error message using [`IgxToast`](../toast.mdx).
 
 The first thing we need to is bind to the grid's event:
 
@@ -685,5 +685,5 @@ _ <ApiLink type="TreeGridRow" />
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
 <ComponentBlock for="Grid, TreeGrid, PivotGrid">
-- [Searching](search)
+- [Searching](/{igPath}/search)
 </ComponentBlock>
diff --git a/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx b/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx
index 362fb507bc..d400055b6a 100644
--- a/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx
+++ b/docs/angular/src/content/en/grids_templates/collapsible-column-groups.mdx
@@ -66,7 +66,11 @@ ng add igniteui-angular
 
 For a complete introduction to the Ignite UI for Angular, read the [_getting started_](/general/getting-started) topic.
 
-The next step is to import the `{ComponentName}Module` in the app.module.ts file. Also, we strongly suggest that you take a brief look at [_multi-column groups_](./multi-column-headers) topic, to see more detailed information on how to setup the column groups in your grid.
+The next step is to import the `{ComponentName}Module` in the app.module.ts file.
+
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+Also, we strongly suggest that you take a brief look at [_multi-column groups_](/{igPath}/multi-column-headers) topic, to see more detailed information on how to setup the column groups in your grid.
+</ComponentBlock>
 
 ## Usage
 
@@ -164,14 +168,16 @@ hidden and you have a group defined where the same column should be shown, the c
 
 
 - [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
-- [Virtualization and Performance](/{igPath}/virtualization)
 - [Paging](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [Virtualization and Performance](/{igPath}/virtualization)
 - [Filtering](/{igPath}/filtering)
 - [Sorting](/{igPath}/sorting)
 - [Summaries](/{igPath}/summaries)
 - [Column Moving](/{igPath}/column-moving)
 - [Column Pinning](/{igPath}/column-pinning)
 - [Selection](/{igPath}/selection)
+</ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/grids_templates/column-selection.mdx b/docs/angular/src/content/en/grids_templates/column-selection.mdx
index 0be6d17133..0380109d92 100644
--- a/docs/angular/src/content/en/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/en/grids_templates/column-selection.mdx
@@ -75,7 +75,7 @@ The column selection feature can be enabled through the <ApiLink type="{Componen
 The default selection mode is `none`. If set to `single` or `multiple` all of the presented columns will be <ApiLink type="Column" member="selectable" label="selectable" />. With that being said, in order to select a column, we just need to click on one, which will mark it as <ApiLink type="Column" member="selected" label="selected" />. If the column is not selectable, no selection style will be applied on the header, while hovering.
 
 <DocsAside type="info">
-[`Multi-column Headers`](multi-column-headers) don't reflect on the <ApiLink type="Column" member="selectable" label="selectable" /> input. The <ApiLink type="ColumnGroup" /> is <ApiLink type="Column" member="selectable" label="selectable" />, if at least one of its children has the selection behavior enabled. In addition, the component is marked as <ApiLink type="ColumnGroup" member="selected" label="selected" /> if all of its `selectable` descendants are <ApiLink type="Column" member="selected" label="selected" />.
+[`Multi-column Headers`](/{igPath}/multi-column-headers) don't reflect on the <ApiLink type="Column" member="selectable" label="selectable" /> input. The <ApiLink type="ColumnGroup" /> is <ApiLink type="Column" member="selectable" label="selectable" />, if at least one of its children has the selection behavior enabled. In addition, the component is marked as <ApiLink type="ColumnGroup" member="selected" label="selected" /> if all of its `selectable` descendants are <ApiLink type="Column" member="selected" label="selected" />.
 </DocsAside>
 
 <ComponentBlock for="Grid">
diff --git a/docs/angular/src/content/en/grids_templates/column-types.mdx b/docs/angular/src/content/en/grids_templates/column-types.mdx
index af0507ecf0..3f4dff1801 100644
--- a/docs/angular/src/content/en/grids_templates/column-types.mdx
+++ b/docs/angular/src/content/en/grids_templates/column-types.mdx
@@ -86,7 +86,7 @@ The appearance of the date portions will be set (e.g. day, month, year) based on
 - **timezone** - The user's local system timezone is the default value. The timezone offset or standard GMT/UTC or continental US timezone abbreviation can also be passed. Different timezone examples which will display the corresponding time of the location anywhere in the world:
 
 <DocsAside type="info">
-Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization#formatting).
+Since 20.2.x, if you have the Angular localization disabled, the list of available format options can be found in our new [localization topic](../general/localization.mdx#formatting).
 </DocsAside>
 
 ```ts
@@ -123,12 +123,12 @@ Available timezones:
 
 <ComponentBlock for="Grid">
 
-The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](grid.md#custom-display-format).
+The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](/{igPath}/grid#custom-display-format).
 
 </ComponentBlock>
 <ComponentBlock for="TreeGrid, HierarchicalGrid, PivotGrid">
 
-The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.md#custom-display-format).
+The {ComponentTitle} accepts date values of type _Date object_, _Number (milliseconds)_, _An ISO date-time string_. This section shows [how to configure a custom display format](../grid/grid.mdx#custom-display-format).
 
 </ComponentBlock>
 
diff --git a/docs/angular/src/content/en/grids_templates/editing.mdx b/docs/angular/src/content/en/grids_templates/editing.mdx
index 331d1c813a..ac8f1717c0 100644
--- a/docs/angular/src/content/en/grids_templates/editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/editing.mdx
@@ -81,7 +81,7 @@ In the {ComponentTitle} if you set rowEditable property to true, and editable pr
 - For `boolean` data type, default template is using <ApiLink type="Checkbox" label="igxCheckbox" />
 - For `currency` data type, default template is using <ApiLink type="InputGroup" /> with prefix/suffix configuration based on application or grid locale settings.
 - For `percent` data type, default template is using <ApiLink type="InputGroup" /> with suffix element that shows a preview of the edited value in percents.
-- For custom templates you can see [Cell Editing topic](cell-editing#cell-editing-templates)
+- For custom templates you can see [Cell Editing topic](/{igPath}/cell-editing#cell-editing-templates)
 
 All available column data types could be found in the official [Column types topic](/{igPath}/column-types#default-template).
 
@@ -189,17 +189,17 @@ _ <ApiLink type="TreeGridRow" />
 ## Additional Resources
 
 
-- [{ComponentTitle} overview]({ComponentMainTopic})
-- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud)
-- [Column Data Types](column-types#default-template)
-- [Virtualization and Performance](virtualization)
-- [Paging](paging)
-- [Filtering](filtering)
-- [Sorting](sorting)
-- [Summaries](summaries)
-- [Column Pinning](column-pinning)
-- [Column Resizing](column-resizing)
-- [Selection](selection)
+- [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
+- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.mdx)
+- [Column Data Types](/{igPath}/column-types#default-template)
+- [Virtualization and Performance](/{igPath}/virtualization)
+- [Paging](/{igPath}/paging)
+- [Filtering](/{igPath}/filtering)
+- [Sorting](/{igPath}/sorting)
+- [Summaries](/{igPath}/summaries)
+- [Column Pinning](/{igPath}/column-pinning)
+- [Column Resizing](/{igPath}/column-resizing)
+- [Selection](/{igPath}/selection)
 <ComponentBlock for="Grid, TreeGrid, PivotGrid">
-- [Searching](search)
+- [Searching](/{igPath}/search)
 </ComponentBlock>
diff --git a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
index cbf49bdfe9..bd0f8f1789 100644
--- a/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
+++ b/docs/angular/src/content/en/grids_templates/excel-style-filtering.mdx
@@ -356,7 +356,11 @@ Here is the full list of Excel style filtering components that you could use:
 
 ## Unique Column Values Strategy
 
-The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [`{ComponentTitle} Remote Data Operations`](/{igPath}/remote-data-operations#unique-column-values-strategy) topic.
+The list items inside the Excel Style Filtering dialog represent the unique values for the respective column.
+
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+These values can be provided manually and loaded on demand, which is demonstrated in the [`{ComponentTitle} Remote Data Operations`](/{igPath}/remote-data-operations#unique-column-values-strategy) topic.
+</ComponentBlock>
 
 ## Formatted Values Filtering Strategy
 
@@ -590,14 +594,16 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 
 - [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
-- [Virtualization and Performance](/{igPath}/virtualization)
 - [Paging](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [Virtualization and Performance](/{igPath}/virtualization)
 - [Sorting](/{igPath}/sorting)
 - [Summaries](/{igPath}/summaries)
 - [Column Moving](/{igPath}/column-moving)
 - [Column Pinning](/{igPath}/column-pinning)
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
+</ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/grids_templates/export-excel.mdx b/docs/angular/src/content/en/grids_templates/export-excel.mdx
index 2ace4d1943..4f342b4f41 100644
--- a/docs/angular/src/content/en/grids_templates/export-excel.mdx
+++ b/docs/angular/src/content/en/grids_templates/export-excel.mdx
@@ -217,7 +217,7 @@ Example:
 
 ## Export Multi Column Headers Grid
 
-Dashboards often rely on [multi-column headers](multi-column-headers) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the <ApiLink kind="interface" type="IGridToolbarExportEventArgs" label="exporter option" /> <ApiLink type="ExcelExporterOptions" member="ignoremulticolumnheaders" label="ignoreMultiColumnHeaders" /> flag to `true` and the output will include only the leaf headers.
+Dashboards often rely on [multi-column headers](/{igPath}/multi-column-headers) to add context—think of a "Q1/Q2/Q3" band above individual month columns. The exporter mirrors this structure so spreadsheet users immediately understand the grouping logic. If your downstream workflow prefers simple column names, flip the <ApiLink kind="interface" type="IGridToolbarExportEventArgs" label="exporter option" /> <ApiLink type="ExcelExporterOptions" member="ignoremulticolumnheaders" label="ignoreMultiColumnHeaders" /> flag to `true` and the output will include only the leaf headers.
 
 <DocsAside type="info">
 The exported {ComponentTitle} will not be formatted as a table, since Excel tables do not support multiple row headers.
diff --git a/docs/angular/src/content/en/grids_templates/filtering.mdx b/docs/angular/src/content/en/grids_templates/filtering.mdx
index a092c40ada..834ff2daf4 100644
--- a/docs/angular/src/content/en/grids_templates/filtering.mdx
+++ b/docs/angular/src/content/en/grids_templates/filtering.mdx
@@ -117,7 +117,7 @@ Property **<ApiLink type="Column" member="filterable" label="filterable" />** en
 
 </ComponentBlock>
 
-To enable the [Advanced filtering](advanced-filtering) however, you need to set the <ApiLink type="{ComponentApiType}" member="allowAdvancedFiltering" label="allowAdvancedFiltering" /> input properties to `true`.
+To enable the [Advanced filtering](/{igPath}/advanced-filtering) however, you need to set the <ApiLink type="{ComponentApiType}" member="allowAdvancedFiltering" label="allowAdvancedFiltering" /> input properties to `true`.
 
 ```html
 <{ComponentSelector} [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
diff --git a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
index 285650b3ed..0a7b48e247 100644
--- a/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
+++ b/docs/angular/src/content/en/grids_templates/multi-column-headers.mdx
@@ -164,7 +164,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo
 
 </ComponentBlock>
 
-Every <ApiLink type="ColumnGroup" label="igx-column-group" /> supports [`moving`](column-moving), [`pinning`](column-pinning) and [`hiding`](column-hiding).
+Every <ApiLink type="ColumnGroup" label="igx-column-group" /> supports [`moving`](/{igPath}/column-moving), [`pinning`](/{igPath}/column-pinning) and [`hiding`](/{igPath}/column-hiding).
 <DocsAside type="info">
 When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested `column groups` or `columns` is not allowed. <br />
 Please note that when using Pinning with Multi-Column Headers, the entire Group gets pinned. <br />
diff --git a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx
index 225843662f..be8643b856 100644
--- a/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx
+++ b/docs/angular/src/content/en/grids_templates/multi-row-layout.mdx
@@ -196,11 +196,13 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 
 - [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
-- [Virtualization and Performance](/{igPath}/virtualization)
 - [Paging](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [Virtualization and Performance](/{igPath}/virtualization)
 - [Sorting](/{igPath}/sorting)
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
+</ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/grids_templates/paging.mdx b/docs/angular/src/content/en/grids_templates/paging.mdx
index da417f0091..ebff766cf9 100644
--- a/docs/angular/src/content/en/grids_templates/paging.mdx
+++ b/docs/angular/src/content/en/grids_templates/paging.mdx
@@ -184,7 +184,11 @@ Due to certain limitations in how the child grids of an IgxHierarchicalGrid are
 
 ## Remote Paging
 
-Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the [`{ComponentTitle} Remote Data Operations`](/{igPath}/remote-data-operations#remote-paging) topic.
+Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription.
+
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+For more detailed information, check the [`{ComponentTitle} Remote Data Operations`](/{igPath}/remote-data-operations#remote-paging) topic.
+</ComponentBlock>
 
 <ComponentBlock for="Grid">
 
@@ -257,6 +261,7 @@ igx-paginator {
 
 - [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
 - [Paginator](/paginator)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [Virtualization and Performance](/{igPath}/virtualization)
 - [Filtering](/{igPath}/filtering)
 - [Sorting](/{igPath}/sorting)
@@ -265,6 +270,7 @@ igx-paginator {
 - [Column Pinning](/{igPath}/column-pinning)
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
+</ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/angular/src/content/en/grids_templates/row-adding.mdx b/docs/angular/src/content/en/grids_templates/row-adding.mdx
index 7623882f64..26b5bce89f 100644
--- a/docs/angular/src/content/en/grids_templates/row-adding.mdx
+++ b/docs/angular/src/content/en/grids_templates/row-adding.mdx
@@ -79,7 +79,7 @@ import { {ComponentName}Module } from 'igniteui-angular';
 export class AppModule {}
 ```
 
-Then define a {ComponentTitle} with bound data source and <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" /> set to true and an [Action Strip](../action-strip) component with editing actions enabled. The <ApiLink type="GridEditingActions" member="addRow" label="addRow" /> input controls the visibility of the button that spawns the row adding UI.
+Then define a {ComponentTitle} with bound data source and <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" /> set to true and an [Action Strip](../action-strip.mdx) component with editing actions enabled. The <ApiLink type="GridEditingActions" member="addRow" label="addRow" /> input controls the visibility of the button that spawns the row adding UI.
 
 <ComponentBlock for="Grid">
 
@@ -337,7 +337,9 @@ The row adding UI comprises the buttons in the `IgxActionStrip` editing actions,
 
 
 - [{ComponentTitle} Overview](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} Editing](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} Transactions](/{igPath}/batch-editing)
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/grids_templates/row-editing.mdx b/docs/angular/src/content/en/grids_templates/row-editing.mdx
index d714e4000e..459dbf76f3 100644
--- a/docs/angular/src/content/en/grids_templates/row-editing.mdx
+++ b/docs/angular/src/content/en/grids_templates/row-editing.mdx
@@ -317,13 +317,17 @@ If you want the buttons to be part of the keyboard navigation, then each on of t
 
 ## Styling
 
-Using the [Ignite UI for Angular Theme Library](/themes/index), we can greatly alter the Row Editing overlay.
+Using the [Ignite UI for Angular Theme Library](/themes), we can greatly alter the Row Editing overlay.
 The Row Editing overlay is a composite element - its UI is comprised of a couple of other components:
     - [`igx-banner`](/banner) in order to render its contents
     - [`igx-button`](/button)s are rendered in the default template (for the `Done` and `Cancel` buttons).
 
 In the below example, we will make use of those two components' styling options, [`button styling`](/button#styling) & [`banner-styling`](/banner#styling), to customize the experience of our {ComponentName}'s Row Editing.
-We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in the [Cell Styling section](/{igPath}/cell-editing#styling).
+We will also style the current cell's editor and background to make it more distinct.
+
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+You can learn more about cell styling in the [Cell Styling section](/{igPath}/cell-editing#styling).
+</ComponentBlock>
 
 ### Import theme
 
@@ -422,7 +426,9 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie
 
 ### Demo
 
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 After styling the banner and buttons, we also define a custom style for [the cell in edit mode](/{igPath}/cell-editing#styling). The result of all the combined styles can be seen below:
+</ComponentBlock>
 
 <ComponentBlock for="Grid">
 
@@ -471,7 +477,9 @@ The sample will not be affected by the selected global theme from `Change Theme`
 
 - [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} Overview](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} Editing](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} Transactions](/{igPath}/batch-editing)
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/grids_templates/search.mdx b/docs/angular/src/content/en/grids_templates/search.mdx
index c8d0152539..c75a46a425 100644
--- a/docs/angular/src/content/en/grids_templates/search.mdx
+++ b/docs/angular/src/content/en/grids_templates/search.mdx
@@ -291,7 +291,7 @@ export class AppModule {}
 
 Finally, let's update our template with the new components!
 
-We will wrap all of our components inside an [**IgxInputGroup**](../input-group). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our **searchText** and invoke the {ComponentTitle}'s <ApiLink type="{ComponentApiType}" member="clearSearch" label="clearSearch" /> method to clear the highlights.
+We will wrap all of our components inside an [**IgxInputGroup**](../input-group.mdx). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our **searchText** and invoke the {ComponentTitle}'s <ApiLink type="{ComponentApiType}" member="clearSearch" label="clearSearch" /> method to clear the highlights.
 
 ```html
 <!--searchgrid.component.html-->
diff --git a/docs/angular/src/content/en/grids_templates/selection.mdx b/docs/angular/src/content/en/grids_templates/selection.mdx
index 56327a419b..1532167e65 100644
--- a/docs/angular/src/content/en/grids_templates/selection.mdx
+++ b/docs/angular/src/content/en/grids_templates/selection.mdx
@@ -67,7 +67,7 @@ The sample below demonstrates the three types of {ComponentTitle}'s **cell selec
 
 ## Angular Grid Selection Options
 
-IgniteUI for Angular {ComponentTitle} component provides three different selection modes - [Row selection](row-selection), [Cell selection](cell-selection) and [Column selection](column-selection). By default only **Multi-cell selection** mode is enabled in the {ComponentTitle}. In order to change/enable selection mode you can use <ApiLink type="Grid" member="rowSelection" label="rowSelection" />, <ApiLink type="Grid" member="cellSelection" label="cellSelection" /> or <ApiLink type="Column" member="selectable" label="selectable" /> properties.
+IgniteUI for Angular {ComponentTitle} component provides three different selection modes - [Row selection](/{igPath}/row-selection), [Cell selection](/{igPath}/cell-selection) and [Column selection](/{igPath}/column-selection). By default only **Multi-cell selection** mode is enabled in the {ComponentTitle}. In order to change/enable selection mode you can use <ApiLink type="Grid" member="rowSelection" label="rowSelection" />, <ApiLink type="Grid" member="cellSelection" label="cellSelection" /> or <ApiLink type="Column" member="selectable" label="selectable" /> properties.
 
 ### Angular Row Selection
 
@@ -80,7 +80,7 @@ Property <ApiLink type="Grid" member="rowSelection" label="rowSelection" /> enab
 - multipleCascade -  This is a mode for cascading selection, resulting in the selection of all children in the tree below the record that the user selects with user interaction. In this mode a parent's selection state entirely depends on the selection state of its children.
 </ComponentBlock>
 
-> Go to [Row selection topic](row-selection) for more information.
+> Go to [Row selection topic](/{igPath}/row-selection) for more information.
 
 ### Angular Cell Selection
 
@@ -243,7 +243,7 @@ _ <ApiLink type="TreeGridRow" />
 - [Column Moving](/{igPath}/column-moving)
 - [Virtualization and Performance](/{igPath}/virtualization)
 <ComponentBlock for="Grid">
-- [Selection-based Aggregates](selection-based-aggregates)
+- [Selection-based Aggregates](/{igPath}/selection-based-aggregates)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/grids_templates/sizing.mdx b/docs/angular/src/content/en/grids_templates/sizing.mdx
index 69e82e5f70..d33be808ed 100644
--- a/docs/angular/src/content/en/grids_templates/sizing.mdx
+++ b/docs/angular/src/content/en/grids_templates/sizing.mdx
@@ -327,7 +327,7 @@ llms:
 
 ## Grid Cell Spacing Control
 
-The <ApiLink type="{ComponentApiType}" /> automatically adapts its internal spacing based on the [size](display-density) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control.
+The <ApiLink type="{ComponentApiType}" /> automatically adapts its internal spacing based on the [size](/{igPath}/display-density) setting. You can further customize the padding and margins in grid header and body cells using CSS custom properties for spacing control.
 
 ### Global Grid Spacing
 
diff --git a/docs/angular/src/content/en/grids_templates/state-persistence.mdx b/docs/angular/src/content/en/grids_templates/state-persistence.mdx
index ed9a252869..fa73904c2b 100644
--- a/docs/angular/src/content/en/grids_templates/state-persistence.mdx
+++ b/docs/angular/src/content/en/grids_templates/state-persistence.mdx
@@ -81,7 +81,7 @@ The igxGridState directive allows developers to easily save and restore the grid
 </ComponentBlock>
   - Columns order
   - Column properties defined by the <ApiLink type="IColumnState" kind="interface" /> interface.
-  - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence#restoring-columns) section.
+  - Columns templates and functions are restored using application level code, see [Restoring Column](/{igPath}/state-persistence#restoring-columns) section.
 </ComponentBlock>
 
 <ComponentBlock for="TreeGrid">
@@ -99,7 +99,7 @@ The igxGridState directive allows developers to easily save and restore the grid
   - **NEW**: Multi column headers are now supported out of the box
   - Columns order
   - Column properties defined by the <ApiLink type="IColumnState" kind="interface" /> interface.
-  - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence#restoring-columns) section.
+  - Columns templates and functions are restored using application level code, see [Restoring Column](/{igPath}/state-persistence#restoring-columns) section.
 </ComponentBlock>
 
 <ComponentBlock for="HierarchicalGrid">
@@ -119,7 +119,7 @@ The igxGridState directive allows developers to easily save and restore the grid
   - Multi column headers
   - Columns order
   - Column properties defined by the <ApiLink type="IColumnState" kind="interface" /> interface.
-  - Columns templates and functions are restored using application level code, see [Restoring Column](state-persistence#restoring-columns) section.
+  - Columns templates and functions are restored using application level code, see [Restoring Column](/{igPath}/state-persistence#restoring-columns) section.
 </ComponentBlock>
 
 <ComponentBlock for="PivotGrid">
@@ -132,14 +132,14 @@ The igxGridState directive allows developers to easily save and restore the grid
 - `Expansion`
 - `Pivot Configuration`
   - Pivot Configuration properties defined by the <ApiLink type="IPivotConfiguration" kind="interface" /> interface.
-  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence#restoring-pivot-configuration) section.
-  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence#restoring-pivot-strategies) section.
+  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](/{igPath}/state-persistence#restoring-pivot-configuration) section.
+  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](/{igPath}/state-persistence#restoring-pivot-strategies) section.
 </ComponentBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 
 <DocsAside type="info">
-The <ApiLink type="GridStateDirective" /> directive does not take care of templates. Go to [Restoring Column](state-persistence#restoring-columns) section to see how to restore column templates.
+The <ApiLink type="GridStateDirective" /> directive does not take care of templates. Go to [Restoring Column](/{igPath}/state-persistence#restoring-columns) section to see how to restore column templates.
 </DocsAside>
 </ComponentBlock>
 
@@ -303,7 +303,7 @@ public onColumnInit(column: IgxColumnComponent) {
 
 ## Restoring Pivot Configuration
 
-<ApiLink type="GridStateDirective" /> will not persist pivot dimension functions, value formatters, etc. by default (see [`limitations`](state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxPivotGrid` exposes two events which can be used to set back any custom functions you have in the configuration: <ApiLink type="{ComponentApiType}" member="dimensionInit" label="dimensionInit" /> and <ApiLink type="{ComponentApiType}" member="valueInit" label="valueInit" />. Let's show how to do this:
+<ApiLink type="GridStateDirective" /> will not persist pivot dimension functions, value formatters, etc. by default (see [`limitations`](/{igPath}/state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxPivotGrid` exposes two events which can be used to set back any custom functions you have in the configuration: <ApiLink type="{ComponentApiType}" member="dimensionInit" label="dimensionInit" /> and <ApiLink type="{ComponentApiType}" member="valueInit" label="valueInit" />. Let's show how to do this:
 
 - Assign event handlers for the `dimensionInit` and `valueInit` events:
 
@@ -419,7 +419,7 @@ this.state.setState(state, ['filtering', 'rowIslands']);
 
 ## Restoring Pivot Strategies
 
-<ApiLink type="GridStateDirective" /> will not persist neither remote pivot operations nor custom dimension strategies (For further information see [Pivot Grid Remote Operations](pivot-grid-custom) sample) by default (see [`limitations`](state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called <ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> which can be used to additionally modify the grid state before it gets applied. Let's show how to do this:
+<ApiLink type="GridStateDirective" /> will not persist neither remote pivot operations nor custom dimension strategies (For further information see [Pivot Grid Remote Operations](/{igPath}/pivot-grid-custom) sample) by default (see [`limitations`](/{igPath}/state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called <ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> which can be used to additionally modify the grid state before it gets applied. Let's show how to do this:
 
 > <ApiLink type="GridStateDirective" /> is only emitted when we are using <ApiLink type="GridStateDirective" member="setState" label="setState" /> with string argument.
 
@@ -469,7 +469,7 @@ public restoreState() {
 
 ## Restoring Strategies
 
-<ApiLink type="GridStateDirective" /> will not persist neither remote operations nor custom dimension strategies (For further information see [Grid Remote Operations](remote-data-operations) sample) by default (see [`limitations`](state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called <ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> which can be used to additionally modify the grid state before it gets applied. Let's show how to do this:
+<ApiLink type="GridStateDirective" /> will not persist neither remote operations nor custom dimension strategies (For further information see [Grid Remote Operations](/{igPath}/remote-data-operations) sample) by default (see [`limitations`](/{igPath}/state-persistence#limitations)). Restoring any of these can be achieved with code on application level. The `IgxGridState` exposes an event called <ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> which can be used to additionally modify the grid state before it gets applied. Let's show how to do this:
 
 <DocsAside type="info">
 <ApiLink type="GridStateDirective" /> is only emitted when we are using <ApiLink type="GridStateDirective" member="setState" label="setState" /> with string argument.
@@ -556,11 +556,11 @@ state.setState(gridState.columnSelection);
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 
-- [{ComponentTitle} overview]({ComponentMainTopic})
-- [Paging](paging)
-- [Filtering](filtering)
-- [Sorting](sorting)
-- [Selection](selection)
+- [{ComponentTitle} overview](/{igPath}/{ComponentMainTopic})
+- [Paging](/{igPath}/paging)
+- [Filtering](/{igPath}/filtering)
+- [Sorting](/{igPath}/sorting)
+- [Selection](/{igPath}/selection)
 </ComponentBlock>
 <ComponentBlock for="PivotGrid">
 
diff --git a/docs/angular/src/content/en/grids_templates/summaries.mdx b/docs/angular/src/content/en/grids_templates/summaries.mdx
index 55a476b455..c5a77a6cc5 100644
--- a/docs/angular/src/content/en/grids_templates/summaries.mdx
+++ b/docs/angular/src/content/en/grids_templates/summaries.mdx
@@ -850,7 +850,7 @@ If the component is using an [`Emulated`](/themes/sass/component-themes#view-enc
 - [Column Resizing](/{igPath}/column-resizing)
 - [Selection](/{igPath}/selection)
 <ComponentBlock for="Grid">
-- [Selection-based Aggregates](selection-based-aggregates)
+- [Selection-based Aggregates](/{igPath}/selection-based-aggregates)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/angular/src/content/en/grids_templates/validation.mdx b/docs/angular/src/content/en/grids_templates/validation.mdx
index b25b97d87b..d9295a4afb 100644
--- a/docs/angular/src/content/en/grids_templates/validation.mdx
+++ b/docs/angular/src/content/en/grids_templates/validation.mdx
@@ -763,7 +763,9 @@ public cellStyles = {
 
 - [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} Overview](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} Editing](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} Row Editing](/{igPath}/row-editing)
 - [{ComponentTitle} Row Adding](/{igPath}/row-adding)
 - [{ComponentTitle} Transactions](/{igPath}/batch-editing)
diff --git a/docs/angular/src/content/jp/.gitignore b/docs/angular/src/content/jp/.gitignore
index ecf4a386c3..67c5e1e6f8 100644
--- a/docs/angular/src/content/jp/.gitignore
+++ b/docs/angular/src/content/jp/.gitignore
@@ -15,6 +15,8 @@ components/treegrid/*.md
 components/treegrid/*.mdx
 components/hierarchicalgrid/*.md
 components/hierarchicalgrid/*.mdx
+components/pivotgrid/*.md
+components/pivotgrid/*.mdx
 components/pivotGrid/*.md
 components/pivotGrid/*.mdx
 
@@ -45,6 +47,12 @@ components/pivotGrid/*.mdx
 !components/hierarchicalgrid/load-on-demand.mdx
 
 # All pivot grid specific files that should NOT be ignored:
+!components/pivotgrid/pivot-grid.md
+!components/pivotgrid/pivot-grid-features.md
+!components/pivotgrid/pivot-grid-custom.md
+!components/pivotgrid/pivot-grid.mdx
+!components/pivotgrid/pivot-grid-features.mdx
+!components/pivotgrid/pivot-grid-custom.mdx
 !components/pivotGrid/pivot-grid.md
 !components/pivotGrid/pivot-grid-features.md
 !components/pivotGrid/pivot-grid-custom.md
diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx
index 30091524d8..ccbec7ba29 100644
--- a/docs/angular/src/content/jp/components/accordion.mdx
+++ b/docs/angular/src/content/jp/components/accordion.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Accordion コンポーネントを初期化するには、
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxAccordionModule` をインポートします。
 
@@ -268,7 +268,7 @@ Ignite UI for Angular Accordion のキーボード ナビゲーションは、
 
 ## スタイル設定
 
-<ApiLink type="Accordion" label="Accordion" /> は、基になる<ApiLink type="ExpansionPanel" label="パネル" />のコンテナーとしてのみ機能します。スタイルは、[`IgxExpansionPanel トピックのスタイル設定セクション`](expansion-panel.md#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。
+<ApiLink type="Accordion" label="Accordion" /> は、基になる<ApiLink type="ExpansionPanel" label="パネル" />のコンテナーとしてのみ機能します。スタイルは、[`IgxExpansionPanel トピックのスタイル設定セクション`](expansion-panel.mdx#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。
 
 設計上、`igx-accordion` 内に配置される場合、展開されたパネルにマージンが設定されます。変更するために、igx-expansion-panel テーマ内で公開されるプロパティがあります。
 テーマ エンジンによって公開される関数を利用するには、スタイル ファイルに `index` ファイルをインポートする必要があります。
diff --git a/docs/angular/src/content/jp/components/action-strip.mdx b/docs/angular/src/content/jp/components/action-strip.mdx
index f3b498026f..2178d38569 100644
--- a/docs/angular/src/content/jp/components/action-strip.mdx
+++ b/docs/angular/src/content/jp/components/action-strip.mdx
@@ -33,7 +33,7 @@ Ignite UI for Angular Action Strip コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxActionStripModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
index eb60ef3518..5f7a3eb874 100644
--- a/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
@@ -34,7 +34,7 @@ CLI MCP サーバーと Theming MCP サーバーはどちらも `npx` を通じ
 
 Ignite UI は、Angular、React、Web Components、Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が管理するものであり、チームの規約に合わせて `SKILL.md` を編集したり、プロジェクト固有のパターンの追加や内部デザイン システムを参照するなどして、コードベースとともにパッケージをバージョン管理できます。
 
-完全なセットアップ手順と IDE の設定については、[エージェント スキル](skills.md)を参照してください。
+完全なセットアップ手順と IDE の設定については、[エージェント スキル](skills.mdx)を参照してください。
 
 ## CLI MCP サーバー
 
@@ -62,7 +62,7 @@ npx -y igniteui-theming igniteui-theming-mcp
 
 Theming MCP サーバーは Angular、React、Web Components、Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に最新のトークン サーフェスに対して動作します。
 
-構成の詳細については、[Theming MCP](theming-mcp.md)を参照してください。
+構成の詳細については、[Theming MCP](theming-mcp.mdx)を参照してください。
 
 ## サポートされている AI クライアント
 
@@ -87,7 +87,7 @@ Ignite UI AI ツールチェーンのセットアップには 3 つのステッ
 
 フレームワークの Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは `node_modules/igniteui-{framework}/skills/` のライブラリに付属しています。IDE との連携設定はクライアントに応じてその構成ファイルに保存してください。
 
-完全なセットアップについては、[エージェント スキル](skills.md)を参照してください。
+完全なセットアップについては、[エージェント スキル](skills.mdx)を参照してください。
 
 ### ステップ 2 - CLI MCP サーバーを接続する
 
@@ -119,7 +119,7 @@ AI クライアントの構成ファイルに `igniteui-cli` MCP サーバー 
 }
 ```
 
-VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](cli-mcp.md)を参照してください。
+VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](cli-mcp.mdx)を参照してください。
 
 ### ステップ 3 - Theming MCP サーバーを接続する (オプション)
 
@@ -136,14 +136,14 @@ VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他
 }
 ```
 
-構成の詳細とテーマ ワークフローについては、[Theming MCP](theming-mcp.md)を参照してください。
+構成の詳細とテーマ ワークフローについては、[Theming MCP](theming-mcp.mdx)を参照してください。
 
 ## その他のリソース
 
 
-- [エージェント スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [エージェント スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/ai/cli-mcp.mdx b/docs/angular/src/content/jp/components/ai/cli-mcp.mdx
index 5f7cc6b800..7e47b493b4 100644
--- a/docs/angular/src/content/jp/components/ai/cli-mcp.mdx
+++ b/docs/angular/src/content/jp/components/ai/cli-mcp.mdx
@@ -422,9 +422,9 @@ JSON が `mcpServers` 構造を使用していること、および各ローカ
 ## その他のリソース
 
 
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular スキル](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular スキル](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/ai/maker-framework.mdx b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
index 5e707c4df4..19959246f3 100644
--- a/docs/angular/src/content/jp/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
@@ -16,7 +16,7 @@ llms:
 
 MAKER Framework (`@igniteui/maker-mcp`) は、Infragistics が提供するマルチエージェント AI オーケストレーション MCP サーバーです。複数の AI エージェントにわたるコンセンサス ベースの投票アルゴリズムを使用して、複雑なタスクを検証済みで実行可能なステップ プランに分解します。MAKER は、Maximal Agentic decomposition (最大エージェント分解)、first-to-ahead-by-K Error correction (K ステップ先読みエラー修正)、Red-flagging (レッド フラギング) の頭文字を取ったものです。このフレームワークは、Cognizant AI Lab による研究論文 _Solving a million-step LLM task with zero errors_ に基づいています。`@igniteui` GitHub Packages レジストリから `npx` 経由で MCP サーバーとして実行され、STDIO トランスポートを通じて任意の MCP 互換 AI クライアントに接続します。接続すると、AI アシスタントは 3 つのツール (`plan`、`execute`、`plan_and_execute`) を呼び出して、自動エラー検出と修正を伴う長期タスクを実行できます。
 
-MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメント クエリには [CLI MCP サーバー](cli-mcp.md) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Web Components を特定のターゲットとせず、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
+MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメント クエリには [CLI MCP サーバー](cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Web Components を特定のターゲットとせず、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
 
 ## MAKER の仕組み
 
@@ -224,10 +224,10 @@ ARM Linux は現在パッケージ化されていません。追加のプラッ
 
 ## その他のリソース
 
-- [AI 支援開発の概要](ai-assisted-development-overview.md)
-- [エージェント スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI 支援開発の概要](ai-assisted-development-overview.mdx)
+- [エージェント スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティは常に活気があり、新しいアイデアを歓迎しています。
diff --git a/docs/angular/src/content/jp/components/ai/skills.mdx b/docs/angular/src/content/jp/components/ai/skills.mdx
index fe5c7b8dc9..7888075ba0 100644
--- a/docs/angular/src/content/jp/components/ai/skills.mdx
+++ b/docs/angular/src/content/jp/components/ai/skills.mdx
@@ -283,7 +283,7 @@ CLI は、一連のプロンプトをガイドします:
 
 
 
-Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md) のドキュメントを参照してください。
+Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.mdx) のドキュメントを参照してください。
 
 ## その他のリソース
 
@@ -293,9 +293,9 @@ Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md)
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Ignite UI for Angular で作業を開始</a>
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
 
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 <div class="divider--half"></div>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
index 37785d10cb..f4ddabf26d 100644
--- a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
@@ -366,9 +366,9 @@ ng add igniteui-angular
 ## その他のリソース
 
 
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [Ignite UI for Angular スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [Ignite UI for Angular スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
 
 <div class="divider--half"></div>
 
diff --git a/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx b/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
index 16e77d56a5..fc646371ba 100644
--- a/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
+++ b/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
@@ -185,11 +185,11 @@ export class MyComponent implements OnInit {
 
 関連トピック:
 
-- [Combo](combo.md)
-- [Select](select.md)
-- [Input Group](input-group.md)
-- [Date Picker](date-picker.md)
-- [Time Picker](time-picker.md)
+- [Combo](combo.mdx)
+- [Select](select.mdx)
+- [Input Group](input-group.mdx)
+- [Date Picker](date-picker.mdx)
+- [Time Picker](time-picker.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/autocomplete.mdx b/docs/angular/src/content/jp/components/autocomplete.mdx
index e769bf547b..a24f47526f 100644
--- a/docs/angular/src/content/jp/components/autocomplete.mdx
+++ b/docs/angular/src/content/jp/components/autocomplete.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular の [Angular コンポーネント](https://jp.infragistic
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 はじめに、**app.module** で **IgxAutocompleteModule** と **IgxDropDownModule** をインポートします。<ApiLink type="AutocompleteDirective" label="igxAutocomplete" /> が <ApiLink type="InputDirective" label="igxInput" /> に適用される場合、**igxInputGroupModule** も必要です。
 
@@ -271,7 +271,7 @@ The `drop-down` component, used as provider for suggestions, will expose the fol
 
 `igxAutocomplete` のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> と <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" /> を使用します。
 
-これら 2 つのコンポーネントのスタイル設定については、[`igxInputGroup`](input-group.md#スタイル設定) および [`igxDropdown`](drop-down.md#スタイル設定) のスタイル設定セクションを参照してください。
+これら 2 つのコンポーネントのスタイル設定については、[`igxInputGroup`](input-group.mdx#スタイル設定) および [`igxDropdown`](drop-down.mdx#スタイル設定) のスタイル設定セクションを参照してください。
 
 ## API リファレンス
 
@@ -290,9 +290,9 @@ The `drop-down` component, used as provider for suggestions, will expose the fol
 
 <hr/>
 
-- [IgxDropDown](drop-down.md)
-- [IgxInputGroup](input-group.md)
-- [テンプレート駆動フォームの統合](input-group.md)
+- [IgxDropDown](drop-down.mdx)
+- [IgxInputGroup](input-group.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx
index d34c3457a7..b64b0526d8 100644
--- a/docs/angular/src/content/jp/components/avatar.mdx
+++ b/docs/angular/src/content/jp/components/avatar.mdx
@@ -33,7 +33,7 @@ Ignite UI for Angular Avatar コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxAvatarModule` をインポートします。
 
@@ -206,7 +206,7 @@ $custom-avatar-theme: avatar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -274,7 +274,7 @@ igx-avatar {
 }
 ```
 
-詳細については、[サイズ](display-density.md)の記事をご覧ください。
+詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
 
 <hr/>
 
diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx
index 034377b2b0..7e7bcfe3d2 100644
--- a/docs/angular/src/content/jp/components/badge.mdx
+++ b/docs/angular/src/content/jp/components/badge.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Badge コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBadgeModule` をインポートします。
 
@@ -183,7 +183,7 @@ igx-badge {
 
 ### バッジのアイコン
 
-`igx-badge` コンポーネントは、Material アイコンに加えて[Material アイコン拡張](../components/material-icons-extended.md)およびその他のカスタム アイコン セットの使用もサポートしています。Material アイコン拡張セットからバッジ コンポーネントにアイコンを追加するには、まずそのアイコンを登録する必要があります。
+`igx-badge` コンポーネントは、Material アイコンに加えて[Material アイコン拡張](../components/material-icons-extended.mdx)およびその他のカスタム アイコン セットの使用もサポートしています。Material アイコン拡張セットからバッジ コンポーネントにアイコンを追加するには、まずそのアイコンを登録する必要があります。
 
 ```ts
 export class BadgeIconComponent implements OnInit { 
@@ -393,7 +393,7 @@ $custom-badge-theme: badge-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/banner.mdx b/docs/angular/src/content/jp/components/banner.mdx
index ca1fb7d6b7..391dcc6c43 100644
--- a/docs/angular/src/content/jp/components/banner.mdx
+++ b/docs/angular/src/content/jp/components/banner.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Banner コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBannerModule` をインポートします。
 
@@ -119,7 +119,7 @@ Banner コンポーネントを表示するには、ボタン クリックで <A
 
 ### アイコンの追加
 
-[`igx-icon`](icon.md) は、バナーのコンテンツに渡すことでバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。
+[`igx-icon`](icon.mdx) は、バナーのコンテンツに渡すことでバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。
 
 <DocsAside type="info" title="情報">
 複数の `igx-icon` 要素がバナーの直接の子孫として挿入される場合、バナーはそれらすべてを最初に配置しようとします。`igx-icon` は 1 つのみ、直接渡すことに注意してください。
@@ -280,7 +280,7 @@ $custom-banner-theme: banner-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後にバナーのカスタム テーマを渡します。
diff --git a/docs/angular/src/content/jp/components/button-group.mdx b/docs/angular/src/content/jp/components/button-group.mdx
index 826078991a..45e86ffc3c 100644
--- a/docs/angular/src/content/jp/components/button-group.mdx
+++ b/docs/angular/src/content/jp/components/button-group.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Button Group コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxButtonGroupModule` をインポートします。
 
@@ -311,7 +311,7 @@ $custom-button-group: button-group-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx
index 7c6cc6aecd..be0d42f963 100644
--- a/docs/angular/src/content/jp/components/button.mdx
+++ b/docs/angular/src/content/jp/components/button.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Button ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxButtonModule` をインポートします。
 
@@ -114,7 +114,7 @@ Contained ボタンを作成するには、`igxButton` プロパティの値を
 
 ### Icon ボタン
 
-バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](icon-button.md)を参照してください。
+バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](icon-button.mdx)を参照してください。
 
 ```html
 <button igxIconButton="flat">
@@ -662,12 +662,12 @@ contained タイプのボタンのスタイル設定に使用できるパラメ
 <Sample src="/data-entries/buttons-style" height={260} alt="" />
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Bootstrap Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
+サンプルでは、[Bootstrap Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -760,7 +760,7 @@ button {
 }
 ```
 
-詳細については、[サイズ](display-density.md)の記事をご覧ください。
+詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
 
 <hr/>
 
diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx
index 843825f30e..0c90f7f257 100644
--- a/docs/angular/src/content/jp/components/calendar.mdx
+++ b/docs/angular/src/content/jp/components/calendar.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Calendar コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
@@ -682,7 +682,7 @@ $custom-calendar-theme: calendar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/card.mdx b/docs/angular/src/content/jp/components/card.mdx
index f1655d7e9e..a89e3f5e49 100644
--- a/docs/angular/src/content/jp/components/card.mdx
+++ b/docs/angular/src/content/jp/components/card.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Card コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCardModule` をインポートします。
 
@@ -380,7 +380,7 @@ $colorful-card: card-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx
index c17482c822..14cfd0d629 100644
--- a/docs/angular/src/content/jp/components/carousel.mdx
+++ b/docs/angular/src/content/jp/components/carousel.mdx
@@ -39,7 +39,7 @@ Ignite UI for Angular Carousel コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCarouselModule` をインポートします。
 
@@ -297,7 +297,7 @@ Angular カスタム カルーセル インジケーターを追加するには
 
 デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。これはオプションであり、<ApiLink type="Carousel" member="gesturesSupport" label="gesturesSupport" /> プロパティを `false` に設定して変更できます。
 
-Carousel [アニメーション](carousel.md#angular-carousel-のアニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
+Carousel [アニメーション](carousel.mdx#angular-carousel-のアニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
 
 ### キーボード ナビゲーション
 
@@ -336,7 +336,7 @@ Carousel [アニメーション](carousel.md#angular-carousel-のアニメーシ
 
 カルーセル テンプレートは以下のようになります。
 
-カルーセル構成の準備ができました。次に、[リスト](list.md) コンポーネントを追加して、両方のコンポーネントを同期します。
+カルーセル構成の準備ができました。次に、[リスト](list.mdx) コンポーネントを追加して、両方のコンポーネントを同期します。
 
 ```html
 ...
@@ -509,7 +509,7 @@ These configurations will have the following result:
 | **$indicator-dot-color** | $indicator-hover-dot-color | The color of the indicator dot on hover. |
 
 </div>
-[Ignite UI for Angular テーマ](themes/index.md)を使用して、`carousel` の外観を変更できます。
+[Ignite UI for Angular テーマ](themes/index.mdx)を使用して、`carousel` の外観を変更できます。
 <div>
       | Primary Property | Dependent Property | Description |
 | --- | --- | --- |
@@ -603,13 +603,13 @@ The last step is to include the component's theme.
 
 ### デモ
 
-以下のサンプルは、[Ignite UI for Angular テーマ](themes/index.md)で適用されるシンプルなスタイル設定を示します。
+以下のサンプルは、[Ignite UI for Angular テーマ](themes/index.mdx)で適用されるシンプルなスタイル設定を示します。
 
 <Sample src="/layouts/carousel-styling-sample" height={310} alt="Angular Carousel スタイル設定の例" />
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `carousel` をスタイル設定できます。最初に必ず [Tailwind](themes/misc/tailwind-classes.md) を設定してください。
+カスタム Tailwind ユーティリティ クラスを使用して `carousel` をスタイル設定できます。最初に必ず [Tailwind](themes/misc/tailwind-classes.mdx) を設定してください。
 
 グローバル スタイルシートに tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/chat.mdx b/docs/angular/src/content/jp/components/chat.mdx
index b804089d38..158f8b27b4 100644
--- a/docs/angular/src/content/jp/components/chat.mdx
+++ b/docs/angular/src/content/jp/components/chat.mdx
@@ -30,7 +30,7 @@ npm install igniteui-angular igniteui-webcomponents
 
 <ApiLink type="Chat" /> は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
 
 インストールが完了したら、プロジェクトにコンポーネントをインポートできます。
 
@@ -409,7 +409,7 @@ Chat コンポーネントのオプションには、高度なスタイル設定
 - <ApiLink type="ChatMessageContextDirective" />
 - <ApiLink type="ChatInputContextDirective" />
 - <ApiLink type="ChatAttachmentContextDirective" />
-- [スタイル設定およびテーマ](./themes/index.md)
+- [スタイル設定およびテーマ](./themes/index.mdx)
 
 ## その他のリソース
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/checkbox.mdx b/docs/angular/src/content/jp/components/checkbox.mdx
index b62c83e540..ad89ceed92 100644
--- a/docs/angular/src/content/jp/components/checkbox.mdx
+++ b/docs/angular/src/content/jp/components/checkbox.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Checkbox コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCheckboxModule` をインポートします。
 
@@ -281,7 +281,7 @@ $custom-checkbox-theme: checkbox-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/chip.mdx b/docs/angular/src/content/jp/components/chip.mdx
index d74dc94f4e..75355bbbd9 100644
--- a/docs/angular/src/content/jp/components/chip.mdx
+++ b/docs/angular/src/content/jp/components/chip.mdx
@@ -41,7 +41,7 @@ Ignite UI for Angular Chip コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに **IgxChipsModule** をインポートします。
 
@@ -562,7 +562,7 @@ $custom-chip-theme: chip-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して chip  をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して chip  をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -633,7 +633,7 @@ igx-chip {
 }
 ```
 
-詳細については、[サイズ](display-density.md)の記事をご覧ください。
+詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
 
 ## API
 
diff --git a/docs/angular/src/content/jp/components/circular-progress.mdx b/docs/angular/src/content/jp/components/circular-progress.mdx
index 869f45d7a6..d3d5bbc8b1 100644
--- a/docs/angular/src/content/jp/components/circular-progress.mdx
+++ b/docs/angular/src/content/jp/components/circular-progress.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Circular Progress コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxProgressBarModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/combo-features.mdx b/docs/angular/src/content/jp/components/combo-features.mdx
index 597e3ee539..b7ed212baf 100644
--- a/docs/angular/src/content/jp/components/combo-features.mdx
+++ b/docs/angular/src/content/jp/components/combo-features.mdx
@@ -112,7 +112,7 @@ export class ComboDemo implements OnInit {
 `displayKey` プロパティが省略された場合、`valueKey` エンティティが項目テキストとして使用されます。
 </DocsAside>
 
-コンボボックス コンポーネントをリモート データにバインドする方法の詳細は、[コンボボックス リモート バインディング](combo-remote.md)を参照してください。
+コンボボックス コンポーネントをリモート データにバインドする方法の詳細は、[コンボボックス リモート バインディング](combo-remote.mdx)を参照してください。
 
 ### カスタム オーバーレイ設定
 
@@ -137,7 +137,7 @@ export class CustomOverlayCombo {
 <igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>
 ```
 
-すべてが適切に設定されると、[GlobalPositionStrategy](overlay-position.md#グローバル) を使用してコンボボックスのリストが中央に表示されます。
+すべてが適切に設定されると、[GlobalPositionStrategy](overlay-position.mdx#グローバル) を使用してコンボボックスのリストが中央に表示されます。
 
 <Sample src="/lists/combo-overlay" height={440} alt="" />
 
@@ -232,12 +232,12 @@ export class ComboDemo {
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.md)
-- [コンボボックス リモート バインディング](combo-remote.md)
-- [コンボボックス テンプレート](combo-templates.md)
-- [テンプレート駆動フォームの統合](input-group.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
-- [単一選コンボボックス](simple-combo.md)
+- [コンボボックス コンポーネント](combo.mdx)
+- [コンボボックス リモート バインディング](combo-remote.mdx)
+- [コンボボックス テンプレート](combo-templates.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [単一選コンボボックス](simple-combo.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo-remote.mdx b/docs/angular/src/content/jp/components/combo-remote.mdx
index 1ad73fa790..0f23c43f98 100644
--- a/docs/angular/src/content/jp/components/combo-remote.mdx
+++ b/docs/angular/src/content/jp/components/combo-remote.mdx
@@ -224,7 +224,7 @@ export class ComboRemoteComponent implements OnInit {
 
 ### 選択の処理
 
-より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、`valueKey` を定義する必要があります。[コンボボックス トピック](combo.md#データ値と表示プロパティ)で述べたように、`valueKey` が指定されていない場合、コンボボックスは選択を `equality (===)` で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。
+より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、`valueKey` を定義する必要があります。[コンボボックス トピック](combo.mdx#データ値と表示プロパティ)で述べたように、`valueKey` が指定されていない場合、コンボボックスは選択を `equality (===)` で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。
 
 <DocsAside type="info" title="情報">
 コンボボックスをリモートデータにバインドするときは、各項目に固有のプロパティを表す `valueKey` を指定してください。
@@ -243,12 +243,12 @@ export class ComboRemoteComponent implements OnInit {
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.md)
-- [コンボボックス機能](combo-features.md)
-- [コンボボックス テンプレート](combo-templates.md)
-- [テンプレート駆動フォームの統合](input-group.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
-- [単一選択コンボボックス](simple-combo.md)
+- [コンボボックス コンポーネント](combo.mdx)
+- [コンボボックス機能](combo-features.mdx)
+- [コンボボックス テンプレート](combo-templates.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [単一選択コンボボックス](simple-combo.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo-templates.mdx b/docs/angular/src/content/jp/components/combo-templates.mdx
index cb3fbc0b83..18bc1d85e2 100644
--- a/docs/angular/src/content/jp/components/combo-templates.mdx
+++ b/docs/angular/src/content/jp/components/combo-templates.mdx
@@ -172,12 +172,12 @@ export class AppModule {}
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.md)
-- [コンボボックス機能](combo-features.md)
-- [コンボボックス リモート バインディング](combo-remote.md)
-- [テンプレート駆動フォームの統合](input-group.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
-- [単一選択コンボボックス](simple-combo.md)
+- [コンボボックス コンポーネント](combo.mdx)
+- [コンボボックス機能](combo-features.mdx)
+- [コンボボックス リモート バインディング](combo-remote.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [単一選択コンボボックス](simple-combo.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo.mdx b/docs/angular/src/content/jp/components/combo.mdx
index 703e357dcf..07e3231221 100644
--- a/docs/angular/src/content/jp/components/combo.mdx
+++ b/docs/angular/src/content/jp/components/combo.mdx
@@ -27,13 +27,13 @@ Angular ComboBox コンポーネントは、編集可能な機能を提供する
 ## Angular ComboBox 機能
 
 コンボボックス コントロールは以下の機能を公開します。
-- データ バインディング- ローカル データおよび[リモート データ](combo-remote.md)
-- [値バインディング](combo-features.md#データ-バインディング)
-- [フィルタリング](combo-features.md#フィルタリング)
-- [グループ化](combo-features.md#グループ化)
-- [カスタム値](combo-features.md#カスタム値)
-- [テンプレート](combo-templates.md)
-- [テンプレート駆動フォーム](input-group.md)および[リアクティブ フォーム](angular-reactive-form-validation.md)との統合
+- データ バインディング- ローカル データおよび[リモート データ](combo-remote.mdx)
+- [値バインディング](combo-features.mdx#データ-バインディング)
+- [フィルタリング](combo-features.mdx#フィルタリング)
+- [グループ化](combo-features.mdx#グループ化)
+- [カスタム値](combo-features.mdx#カスタム値)
+- [テンプレート](combo-templates.mdx)
+- [テンプレート駆動フォーム](input-group.mdx)および[リアクティブ フォーム](angular-reactive-form-validation.mdx)との統合
 
 - Data Binding - local data and [remote data](/combo-remote)
 - [Value Binding](/combo-features#data-binding)
@@ -51,7 +51,7 @@ Ignite UI for Angular ComboBox コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxComboModule` をインポートします。
 
@@ -270,7 +270,7 @@ public singleSelection(event: IComboSelectionChangingEventArgs) {
 }
 ```
 
-> 注: igxCombo を変更する代わりに、[igxSimpleCombo](simple-combo.md) を使用することをお勧めします (上記を参照)。
+> 注: igxCombo を変更する代わりに、[igxSimpleCombo](simple-combo.mdx) を使用することをお勧めします (上記を参照)。
 
 <hr/>
 
@@ -341,7 +341,7 @@ When combobox is opened, allow custom values are enabled and add item button is
 | **$toggle-button-background-focus** | $toggle-button-foreground-focus | The combo toggle button foreground color when focused. |
 | **$clear-button-background-focus** | $clear-button-foreground-focus | The combo clear button foreground color when focused. |
 
-[`Ignite UI for Angular テーマ`](themes/index.md)を使用して、コンボボックスの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
+[`Ignite UI for Angular テーマ`](themes/index.mdx)を使用して、コンボボックスの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -384,7 +384,7 @@ $custom-checkbox-theme: checkbox-theme(
 ```
 
 <DocsAside type="info" title="情報">
-<ApiLink type="Combo" /> は、[`IgxOverlay`](overlay.md) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
+<ApiLink type="Combo" /> は、[`IgxOverlay`](overlay.mdx) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.mdx)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
 </DocsAside>
 
 ### デモ
@@ -395,7 +395,7 @@ $custom-checkbox-theme: checkbox-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -438,7 +438,7 @@ class="!light-combo
 - コンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。
 
 <DocsAside type="info" title="情報">
-コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](for-of.md#既知の制限)セクションを参照してください。
+コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](for-of.mdx#既知の制限)セクションを参照してください。
 </DocsAside>
 
 ## API リファレンス
@@ -465,12 +465,12 @@ class="!light-combo
 
 <hr/>
 
-- [コンボボックス機能](combo-features.md)
-- [コンボボックス リモート バインディング](combo-remote.md)
-- [コンボボックス テンプレート](combo-templates.md)
-- [テンプレート駆動フォームの統合](input-group.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
-- [単一選択コンボボックス](simple-combo.md)
+- [コンボボックス機能](combo-features.mdx)
+- [コンボボックス リモート バインディング](combo-remote.mdx)
+- [コンボボックス テンプレート](combo-templates.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [単一選択コンボボックス](simple-combo.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx
index d42ed8c805..d66700a6b5 100644
--- a/docs/angular/src/content/jp/components/date-picker.mdx
+++ b/docs/angular/src/content/jp/components/date-picker.mdx
@@ -35,7 +35,7 @@ Ignite UI for Angular Date Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDatePickerModule` をインポートします。
 
@@ -112,7 +112,7 @@ public date = new Date(2000, 0, 1);
 <igx-date-picker [value]="'2000-01-01'"></igx-date-picker>
 ```
 
-これについての詳細は、[DateTime Editor の ISO セクション](date-time-editor.md#iso)にあります。
+これについての詳細は、[DateTime Editor の ISO セクション](date-time-editor.mdx#iso)にあります。
 
 `ngModel` を介して双方向バインディングが可能です:
 
@@ -152,7 +152,7 @@ export class SampleFormComponent {
 
 ### コンポーネントの投影
 
-<ApiLink type="DatePicker" /> は、<ApiLink type="InputDirective" /> を除く <ApiLink type="InputGroup" /> がサポートする子コンポーネントの投影を許可します。それは、[`igxLabel`](label-input.md)、[`igx-hint / IgxHint`](input-group.md#hint)、[`igx-prefix / igxPrefix`](input-group.md#prefix-および-suffix)、[`igx-suffix / igxSuffix`](input-group.md#prefix-および-suffix) です。詳細については、[Label および Input](label-input.md) トピックを参照してください。
+<ApiLink type="DatePicker" /> は、<ApiLink type="InputDirective" /> を除く <ApiLink type="InputGroup" /> がサポートする子コンポーネントの投影を許可します。それは、[`igxLabel`](label-input.mdx)、[`igx-hint / IgxHint`](input-group.mdx#hint)、[`igx-prefix / igxPrefix`](input-group.mdx#prefix-および-suffix)、[`igx-suffix / igxSuffix`](input-group.mdx#prefix-および-suffix) です。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
 
 ```html
 <igx-date-picker #datePicker>
@@ -187,7 +187,7 @@ export class SampleFormComponent {
 ピッカーのアクション ボタンは、次の 2 つの方法で変更できます:
 - ボタンのテキストは、<ApiLink type="DatePicker" member="todayButtonLabel" label="todayButtonLabel" /> と <ApiLink type="DatePicker" member="cancelButtonLabel" label="cancelButtonLabel" /> 入力プロパティを使用して変更できます:
 
-- ボタン全体は、<ApiLink type="PickerActionsDirective" /> ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの [`calendar`](calendar.md) とそのすべてのメンバーにアクセスできます。
+- ボタン全体は、<ApiLink type="PickerActionsDirective" /> ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの [`calendar`](calendar.mdx) とそのすべてのメンバーにアクセスできます。
 
 ```html
 <igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>
@@ -216,7 +216,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 | <kbd>Enter</kbd> | カレンダーのポップアップを閉じ、フォーカスされた日付を選択して、フォーカスを入力フィールドに移動します。 |
 | <kbd>Alt</kbd> + <kbd>&uarr;</kbd> | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 |
 
-<ApiLink type="DatePicker" /> は [`IgxDateTimeEditorDirective`](date-time-editor.md) を使用するため、キーボード ナビゲーションを継承します。
+<ApiLink type="DatePicker" /> は [`IgxDateTimeEditorDirective`](date-time-editor.mdx) を使用するため、キーボード ナビゲーションを継承します。
 
 ## コード例
 
@@ -241,7 +241,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 一方、<ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> は Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。<ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> が指定されていない場合、ピッカーは <ApiLink type="DatePicker" member="inputFormat" label="inputFormat" /> を <ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> として使用します。
 あるいは、<ApiLink type="DatePicker" member="inputFormat" label="inputFormat" /> プロパティが設定されていない場合、入力形式は <ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。
 
-これらの詳細については、[`IgxDateTimeEditor`](date-time-editor.md#例) の例のセクションを参照してください。
+これらの詳細については、[`IgxDateTimeEditor`](date-time-editor.mdx#例) の例のセクションを参照してください。
 
 <Sample src="/scheduling/datepicker-sample-3" height={680} alt="" />
 
@@ -253,7 +253,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 
 ### 増加および減少
 
-<ApiLink type="DatePicker" /> は、<ApiLink type="DatePicker" member="increment" label="increment" /> メソッドと <ApiLink type="DatePicker" member="decrement" label="decrement" /> メソッドを公開します。どちらも [`IgxDateTimeEditorDirective`](date-time-editor.md#increment-decrement) から取得され、現在設定されている日付の特定の <ApiLink type="DatePart" kind="enum" /> を増加および減少するために使用できます。
+<ApiLink type="DatePicker" /> は、<ApiLink type="DatePicker" member="increment" label="increment" /> メソッドと <ApiLink type="DatePicker" member="decrement" label="decrement" /> メソッドを公開します。どちらも [`IgxDateTimeEditorDirective`](date-time-editor.mdx#increment-decrement) から取得され、現在設定されている日付の特定の <ApiLink type="DatePart" kind="enum" /> を増加および減少するために使用できます。
 
 ```html
 <igx-date-picker #datePicker>
@@ -272,11 +272,11 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 
 <ApiLink type="DatePicker" /> は、コア [FormsModule](https://angular.io/api/forms/FormsModule)、[NgModel](https://angular.io/api/forms/NgModel)、および [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl)、[`FormGroup`](https://angular.io/api/forms/FormGroup) など) からのすべてのディレクティブをサポートします。これには、[フォーム バリデータ](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの <ApiLink type="DatePicker" member="minValue" label="minValue" /> プロパティと <ApiLink type="DatePicker" member="maxValue" label="maxValue" /> プロパティはフォーム バリデータとして機能します。
 
-[リアクティブ フォームの統合](angular-reactive-form-validation.md)トピックにアクセスすると、<ApiLink type="DatePicker" /> をリアクティブ フォームで確認できます。
+[リアクティブ フォームの統合](angular-reactive-form-validation.mdx)トピックにアクセスすると、<ApiLink type="DatePicker" /> をリアクティブ フォームで確認できます。
 
 #### 日付ピッカーとタイム ピッカーを併用する
 
-IgxDatePicker と [`IgxTimePicker`](time-picker.md) を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
+IgxDatePicker と [`IgxTimePicker`](time-picker.mdx) を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
 
 テンプレート駆動フォームでこれを実現するには、`ngModel` を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。
 
@@ -292,11 +292,11 @@ IgxDatePicker と [`IgxTimePicker`](time-picker.md) を一緒に使用する場
 
 ### カレンダー固有の設定
 
-<ApiLink type="DatePicker" /> は [`IgxCalendarComponent`](calendar.md) を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる <ApiLink type="DatePicker" member="displayMonthsCount" label="displayMonthsCount" />、週の開始日を決定する <ApiLink type="DatePicker" member="weekStart" label="weekStart" />、年の各週の番号を表示する <ApiLink type="DatePicker" member="showWeekNumbers" label="showWeekNumbers" /> などが含まれます。
+<ApiLink type="DatePicker" /> は [`IgxCalendarComponent`](calendar.mdx) を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる <ApiLink type="DatePicker" member="displayMonthsCount" label="displayMonthsCount" />、週の開始日を決定する <ApiLink type="DatePicker" member="weekStart" label="weekStart" />、年の各週の番号を表示する <ApiLink type="DatePicker" member="showWeekNumbers" label="showWeekNumbers" /> などが含まれます。
 
 ## インターナショナリゼーション
 
-<ApiLink type="DatePicker" /> のローカライズは、<ApiLink type="DatePicker" member="locale" label="locale" /> 入力で制御できます。さらに、<ApiLink type="Calendar" /> によって提供される `igxCalendarHeader` と `igxCalendarSubheader` テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、[**IgxCalendarComponent**](calendar.md) トピックを参照してください。
+<ApiLink type="DatePicker" /> のローカライズは、<ApiLink type="DatePicker" member="locale" label="locale" /> 入力で制御できます。さらに、<ApiLink type="Calendar" /> によって提供される `igxCalendarHeader` と `igxCalendarSubheader` テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、[**IgxCalendarComponent**](calendar.mdx) トピックを参照してください。
 
 以下は日本ロケール定義を持つ Angular Date Picker です。
 
@@ -340,7 +340,7 @@ $custom-datepicker-theme: calendar-theme(
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -377,10 +377,10 @@ $custom-datepicker-theme: calendar-theme(
 
 ## その他のリソース
 
-- [Time Picker](time-picker.md)
-- [Date Time Editor](date-time-editor.md)
-- [Date Range Picker](date-range-picker.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [Time Picker](time-picker.mdx)
+- [Date Time Editor](date-time-editor.mdx)
+- [Date Range Picker](date-range-picker.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/date-range-picker.mdx b/docs/angular/src/content/jp/components/date-range-picker.mdx
index 2851c34aac..abeec87b73 100644
--- a/docs/angular/src/content/jp/components/date-range-picker.mdx
+++ b/docs/angular/src/content/jp/components/date-range-picker.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular <ApiLink type="DateRangePicker" /> を使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDateRangePickerModule` をインポートします。
 
@@ -123,8 +123,8 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
-- <ApiLink type="DateRangeStart" /> と <ApiLink type="DateRangeEnd" /> は、既存の [`IgxInputGroupComponent`](input-group.md) を拡張します。このような構成を操作するには、<ApiLink type="InputDirective" /> に定義する必要があります。さらに、[`IgxInputGroupComponent`](input-group.md) で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。
-- 両方のインプットで日付編集を有効にするには、[`igxDateTimeEditor`](date-time-editor.md) ディレクティブでデコレートする必要があります。
+- <ApiLink type="DateRangeStart" /> と <ApiLink type="DateRangeEnd" /> は、既存の [`IgxInputGroupComponent`](input-group.mdx) を拡張します。このような構成を操作するには、<ApiLink type="InputDirective" /> に定義する必要があります。さらに、[`IgxInputGroupComponent`](input-group.mdx) で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。
+- 両方のインプットで日付編集を有効にするには、[`igxDateTimeEditor`](date-time-editor.mdx) ディレクティブでデコレートする必要があります。
 
 <Sample src="/scheduling/daterangepicker-start-end" height={600} alt="" />
 
@@ -171,7 +171,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 | <kbd>Alt + 下矢印</kbd> | カレンダーのドロップダウンを開きます |
 | <kbd>Alt + 上矢印</kbd> | カレンダーのドロップダウンを閉じます |
 
-[カレンダーのキーボード ナビゲーションセクション](calendar.md#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。
+[カレンダーのキーボード ナビゲーションセクション](calendar.mdx#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。
 
 <hr/>
 
@@ -179,7 +179,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 
 ### コンポーネントの投影
 
-デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します (<ApiLink type="InputGroup" />と同じです): [`igxLabel`](label-input.md)、[`igx-hint / igxHint`](input-group.md#hints)、[`igx-prefix / igxPrefix`](input-group.md#prefix--suffix)、[`igx-suffix / igxSuffix`](input-group.md#prefix--suffix) (<ApiLink type="InputDirective" /> を除く)。詳細については、[Label および Input](label-input.md) トピックを参照してください。
+デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します (<ApiLink type="InputGroup" />と同じです): [`igxLabel`](label-input.mdx)、[`igx-hint / igxHint`](input-group.mdx#hints)、[`igx-prefix / igxPrefix`](input-group.mdx#prefix--suffix)、[`igx-suffix / igxSuffix`](input-group.mdx#prefix--suffix) (<ApiLink type="InputDirective" /> を除く)。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
 
 ```html
 <igx-date-range-picker #dateRangePicker [(ngModel)]="range">
@@ -212,7 +212,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 
 #### アイコンの切り替えとクリア
 
-デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、<ApiLink type="PickerToggle" /> および <ApiLink type="PickerClear" /> を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する [`igxPrefix`](input-group.md#prefix-および-suffix) または [`igxSuffix`](input-group.md#prefix-および-suffix) で設定できます。
+デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、<ApiLink type="PickerToggle" /> および <ApiLink type="PickerClear" /> を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する [`igxPrefix`](input-group.mdx#prefix-および-suffix) または [`igxSuffix`](input-group.mdx#prefix-および-suffix) で設定できます。
 
 ```html
 <igx-date-range-picker>
@@ -415,9 +415,9 @@ export class DateRangeSampleComponent implements OnInit {
 }
 ```
 
-<ApiLink type="DateRangePicker" member="disabledDates" label="disabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [カレンダーの無効日](calendar.md#angular-calendar-で日付を無効にする方法)。
+<ApiLink type="DateRangePicker" member="disabledDates" label="disabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [カレンダーの無効日](calendar.mdx#angular-calendar-で日付を無効にする方法)。
 
-同様に、カレンダーに 1 日または複数の日付を特別な日付として設定したい場合も可能です。この場合は <ApiLink type="DateRangePicker" member="specialDates" label="specialDates" /> プロパティを使用します。[特別な日付](./calendar.md#特別な日付)
+同様に、カレンダーに 1 日または複数の日付を特別な日付として設定したい場合も可能です。この場合は <ApiLink type="DateRangePicker" member="specialDates" label="specialDates" /> プロパティを使用します。[特別な日付](./calendar.mdx#特別な日付)
 
 ### テンプレート化
 
@@ -437,7 +437,7 @@ export class DateRangeSampleComponent implements OnInit {
 
 ### カレンダー固有の設定
 
-さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、[**IgxCalendarComponent**](calendar.md) のトピックをご覧ください。
+さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、[**IgxCalendarComponent**](calendar.mdx) のトピックをご覧ください。
 
 |名前|タイプ|説明|
 |--|--|--|
@@ -538,7 +538,7 @@ $custom-calendar-theme: calendar-theme(
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -553,7 +553,7 @@ $custom-calendar-theme: calendar-theme(
 
 ### スタイルのスコーピング
 
-スタイルのスコーピングについては、詳細は[オーバーレイのスコープ コンポーネント スタイル](overlay-styling.md#スコープ-コンポーネント-スタイル)および[入力グループのスタイル スコーピング](input-group.md#スタイル設定)の両方のスタイル設定セクションを参照してください。
+スタイルのスコーピングについては、詳細は[オーバーレイのスコープ コンポーネント スタイル](overlay-styling.mdx#スコープ-コンポーネント-スタイル)および[入力グループのスタイル スコーピング](input-group.mdx#スタイル設定)の両方のスタイル設定セクションを参照してください。
 
 <Sample src="/scheduling/styled-daterangepicker" height={600} alt="" />
 
@@ -587,10 +587,10 @@ $custom-calendar-theme: calendar-theme(
 ## その他のリソース
 
 関連トピック:
-- [Date Time Editor](date-time-editor.md)
-- [Label および Input](label-input.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
-- [Date Picker](date-picker.md)
+- [Date Time Editor](date-time-editor.mdx)
+- [Label および Input](label-input.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [Date Picker](date-picker.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/date-time-editor.mdx b/docs/angular/src/content/jp/components/date-time-editor.mdx
index 3c61017d3b..ca6fef8d3a 100644
--- a/docs/angular/src/content/jp/components/date-time-editor.mdx
+++ b/docs/angular/src/content/jp/components/date-time-editor.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Date Time Editor ディレクティブを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDateTimeEditorModule` をインポートします。
 
@@ -80,7 +80,7 @@ Ignite UI for Angular Date Time Editor モジュールまたはディレクテ
 
 ## Ignite UI for Angular Date Time Editor ディレクティブの使用
 
-input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.md) にラップします。これにより、<ApiLink type="InputDirective" label="igxInput" />、[`igxLabel`](label-input.md)、[`igx-prefix`](input-group.md#prefix-および-suffix)、[`igx-suffix`](input-group.md#prefix-および-suffix)、[`igx-hint`](input-group.md#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。
+input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.mdx) にラップします。これにより、<ApiLink type="InputDirective" label="igxInput" />、[`igxLabel`](label-input.mdx)、[`igx-prefix`](input-group.mdx#prefix-および-suffix)、[`igx-suffix`](input-group.mdx#prefix-および-suffix)、[`igx-hint`](input-group.mdx#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。
 
 ### バインディング
 
@@ -145,7 +145,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ
 Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用しており、`shortDate` や `longDate` などの事前定義された形式オプションをサポートできます。また、`DatePipe` でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、`EE/MM/yyyy` です。`shortDate`、`longDate` などの形式は、<ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> としてのみ使用できることに注意してください。また、<ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> が指定されていない場合、エディターは <ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> を <ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> として使用します。
 あるいは、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> プロパティが設定されていない場合、入力形式は <ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。
 
-特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](mask.md)の両方が設定されます。さらに、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
+特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](mask.mdx)の両方が設定されます。さらに、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
 
 ```html
 <igx-input-group>
@@ -228,7 +228,7 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 
 ### テキスト選択
 
-<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.md#フォーカスとテキストの選択) で <ApiLink type="TextSelectionDirective" /> の詳細情報を参照してください。
+<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.mdx#フォーカスとテキストの選択) で <ApiLink type="TextSelectionDirective" /> の詳細情報を参照してください。
 
 ```html
 <igx-input-group>
@@ -242,7 +242,7 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 
 ## スタイル設定
 
-詳細については、[`Input Group スタイル ガイド`](input-group.md#スタイル設定)を参照してください。
+詳細については、[`Input Group スタイル ガイド`](input-group.mdx#スタイル設定)を参照してください。
 
 ## API リファレンス
 
@@ -257,9 +257,9 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 ## その他のリソース
 
 関連トピック:
-- [Mask](mask.md)
-- [Label および Input](label-input.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [Mask](mask.mdx)
+- [Label および Input](label-input.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/dialog.mdx b/docs/angular/src/content/jp/components/dialog.mdx
index 9296774a54..b8abc0d6a8 100644
--- a/docs/angular/src/content/jp/components/dialog.mdx
+++ b/docs/angular/src/content/jp/components/dialog.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Dialog Window コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDialogModule` をインポートします。
 
@@ -136,7 +136,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ
 ### カスタム ダイアログ
 
 カスタム ダイアログを作成するには、サインイン コンポーネントのテンプレートに以下のコードを追加します。ダイアログのタイトル領域は `igxDialogTitle` ディレクティブまたは `igx-dialog-title` セレクターを使ってカスタマイズできます。アクション領域は `igxDialogActions` ディレクティブまたは `igx-dialog-actions` セレクターを使ってカスタマイズできます。
-[**igxLabel**](input-group.md) および [**igxInput**](input-group.md) ディレクティブで装飾された label と input を含む 2 つの入力グループを追加します。
+[**igxLabel**](input-group.mdx) および [**igxInput**](input-group.mdx) ディレクティブで装飾された label と input を含む 2 つの入力グループを追加します。
 
 ```html
 <!--sign-in.component.html-->
@@ -288,7 +288,7 @@ $my-dialog-theme: dialog-theme(
 ```
 
 <DocsAside type="info" title="情報">
-ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
 ```scss
@@ -298,7 +298,7 @@ $custom-button: contained-button-theme(
 );
 ```
 
-ダイアログウィンドウは [`IgxOverlayService`](overlay.md) を使用するため、カスタム テーマがスタイルを設定するダイアログ ウィンドウに届くように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+ダイアログウィンドウは [`IgxOverlayService`](overlay.mdx) を使用するため、カスタム テーマがスタイルを設定するダイアログ ウィンドウに届くように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 ```html
 <div igxOverlayOutlet>
@@ -309,7 +309,7 @@ $custom-button: contained-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-[`IgxOverlayService`](overlay.md) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.md)をご覧ください。
+[`IgxOverlayService`](overlay.mdx) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.mdx)をご覧ください。
 </DocsAside>
 
 ### テーマを含む
@@ -325,7 +325,7 @@ $custom-button: contained-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/components/divider.mdx b/docs/angular/src/content/jp/components/divider.mdx
index def8b53f74..f397f2e58f 100644
--- a/docs/angular/src/content/jp/components/divider.mdx
+++ b/docs/angular/src/content/jp/components/divider.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular Divider コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDividerModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/dock-manager.mdx b/docs/angular/src/content/jp/components/dock-manager.mdx
index 711fdbc4a2..74e73362f0 100644
--- a/docs/angular/src/content/jp/components/dock-manager.mdx
+++ b/docs/angular/src/content/jp/components/dock-manager.mdx
@@ -77,4 +77,4 @@ Angular コンポーネント テンプレートで Dock Manager コンポーネ
 
 Dock Manager コンポーネントの使用方法の詳細については、[このトピック (英語)](https://www.infragistics.com//products/ignite-ui-web-components/web-components/components/dock-manager.html) を参照してください。
 
-さまざまな Ignite UI for Angular コンポーネントをホストするペインで Dock Manager コンポーネントを使用する高度な例については、このバージョンの[データ分析サンプル](./general/data-analysis.md#Dock-Manager-のデータ分析)を参照してください。
+さまざまな Ignite UI for Angular コンポーネントをホストするペインで Dock Manager コンポーネントを使用する高度な例については、このバージョンの[データ分析サンプル](./general/data-analysis.mdx#Dock-Manager-のデータ分析)を参照してください。
diff --git a/docs/angular/src/content/jp/components/drag-drop.mdx b/docs/angular/src/content/jp/components/drag-drop.mdx
index f76496099e..2c82d698cf 100644
--- a/docs/angular/src/content/jp/components/drag-drop.mdx
+++ b/docs/angular/src/content/jp/components/drag-drop.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Drag & Drop ディレクティブを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDragDropModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
index f955afb94e..27b1181650 100644
--- a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
+++ b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
@@ -57,10 +57,10 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解
 
 <hr/>
 
-- [Drop Down の概要](drop-down.md)
-- [Chip の概要](chip.md)
-- [Tree の概要](tree.md)
-- [Tree Grid の概要](treegrid/tree-grid.md)
+- [Drop Down の概要](drop-down.mdx)
+- [Chip の概要](chip.mdx)
+- [Tree の概要](tree.mdx)
+- [Tree Grid の概要](treegrid/tree-grid.mdx)
 
 <hr/>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/drop-down-virtual.mdx b/docs/angular/src/content/jp/components/drop-down-virtual.mdx
index b500013189..314312216e 100644
--- a/docs/angular/src/content/jp/components/drop-down-virtual.mdx
+++ b/docs/angular/src/content/jp/components/drop-down-virtual.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # 仮想ドロップダウン
 
-Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目リストを表示するために、[`IgxForOf`](for-of.md) ディレクティブの使用方法を完全に統合できます。
+Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目リストを表示するために、[`IgxForOf`](for-of.mdx) ディレクティブの使用方法を完全に統合できます。
 
 ## Angular 仮想ドロップダウンの例
 
diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx
index 2b56caedf6..cb11ef9ebf 100644
--- a/docs/angular/src/content/jp/components/drop-down.mdx
+++ b/docs/angular/src/content/jp/components/drop-down.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Drop Down コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDropDownModule` をインポートします。
 
@@ -517,7 +517,7 @@ export class InputDropDownComponent {
 |  | $selected-focus-item-text-color | The drop-down selected item focus text color. |
 |  | $focused-item-border-color | The drop-down item focused border color. |
 
-[Ignite UI for Angular テーマ](themes/index.md) を使用して、ドロップダウンの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
+[Ignite UI for Angular テーマ](themes/index.mdx) を使用して、ドロップダウンの外観を変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
 
 ```scss
 @use "igniteui-angular/theming" as *;
diff --git a/docs/angular/src/content/jp/components/expansion-panel.mdx b/docs/angular/src/content/jp/components/expansion-panel.mdx
index 562d3b54ae..0cab2197ed 100644
--- a/docs/angular/src/content/jp/components/expansion-panel.mdx
+++ b/docs/angular/src/content/jp/components/expansion-panel.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Expansion Panel コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxExpansionPanelModule` をインポートします。
 
@@ -195,7 +195,7 @@ export class ExpansionPanelComponent {
 
 Angular Expansion Panel は、パネルの縮小時に「更に表示」を描画し、完全に展開した後に「簡易表示」を描画します。
 
-`IgxExpansionPanel` コントロールを使用すると、あらゆる種類のコンテンツを `igx-expansion-panel-body` 内に追加できます。[`IgxGrid`](grid/grid.md)、[`IgxCombo`](combo.md)、チャート、その他の展開パネルもレンダリングできます。
+`IgxExpansionPanel` コントロールを使用すると、あらゆる種類のコンテンツを `igx-expansion-panel-body` 内に追加できます。[`IgxGrid`](grid/grid.mdx)、[`IgxCombo`](combo.mdx)、チャート、その他の展開パネルもレンダリングできます。
 
 展開パネルの本体にいくつかの基本的なマークアップを追加します。
 
@@ -290,7 +290,7 @@ $custom-panel-theme: expansion-panel-theme(
 ```
 
 <DocsAside type="info" title="情報">
-[`テーマ`](themes/sass/component-themes.md) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、<ApiLink kind="sass" module="themes" type="function-expansion-panel-theme" label="API ヘルプ" code={true} />を参照してください。
+[`テーマ`](themes/sass/component-themes.mdx) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、<ApiLink kind="sass" module="themes" type="function-expansion-panel-theme" label="API ヘルプ" code={true} />を参照してください。
 </DocsAside>
 
 ### コンポーネント テーマの適用
@@ -304,7 +304,7 @@ $custom-panel-theme: expansion-panel-theme(
 }
 ```
 
-Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](themes/sass/component-themes.md)。
+Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](themes/sass/component-themes.mdx)。
 
 ### デモ
 
@@ -312,7 +312,7 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -416,7 +416,7 @@ export class ExpansionPanelComponent {
 
 ## 複数パネルの場合
 
-[igxAccordion トピック](accordion.md)を参照してください。
+[igxAccordion トピック](accordion.mdx)を参照してください。
 
 ## API リファレンス
 
diff --git a/docs/angular/src/content/jp/components/exporter-csv.mdx b/docs/angular/src/content/jp/components/exporter-csv.mdx
index 78361e36b0..6583362129 100644
--- a/docs/angular/src/content/jp/components/exporter-csv.mdx
+++ b/docs/angular/src/content/jp/components/exporter-csv.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または [**IgxGrid**](grid/grid.md) からデータをエクスポートします。
+Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または [**IgxGrid**](grid/grid.mdx) からデータをエクスポートします。
 エクスポート機能は <ApiLink type="CsvExporterService" /> クラスにカプセル化されます。
 </div>
 <igc-divider></igc-divider>
@@ -84,7 +84,7 @@ public exportButtonHandler() {
 
 ## IgxGrid のデータのエクスポート
 
-CSV Exporter サービスも [**IgxGrid**](grid/grid.md) からのデータを CSV 形式でエクスポートできます。<ApiLink type="CsvExporterService" /> の <ApiLink type="CsvExporterService" member="export" label="export" /> メソッドを起動し、[**IgxGrid**](grid/grid.md) を最初の引数として渡します。
+CSV Exporter サービスも [**IgxGrid**](grid/grid.mdx) からのデータを CSV 形式でエクスポートできます。<ApiLink type="CsvExporterService" /> の <ApiLink type="CsvExporterService" member="export" label="export" /> メソッドを起動し、[**IgxGrid**](grid/grid.mdx) を最初の引数として渡します。
 
 以下は例です。
 
@@ -158,7 +158,7 @@ this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs
 this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile'));
 ```
 
-[**IgxGrid**](grid/grid.md) からのデータのエクスポートで、エクスポート処理は行フィルタリングおよび列の非表示などの機能に応じてグリッドで表示されるデータのみをエクスポートします。<ApiLink type="CsvExporterOptions" /> オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。このプロパティは以下の表で説明します。
+[**IgxGrid**](grid/grid.mdx) からのデータのエクスポートで、エクスポート処理は行フィルタリングおよび列の非表示などの機能に応じてグリッドで表示されるデータのみをエクスポートします。<ApiLink type="CsvExporterOptions" /> オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。このプロパティは以下の表で説明します。
 
 ## API リファレンス
 
diff --git a/docs/angular/src/content/jp/components/exporter-excel.mdx b/docs/angular/src/content/jp/components/exporter-excel.mdx
index 327fe12fbb..5b7f08f1d3 100644
--- a/docs/angular/src/content/jp/components/exporter-excel.mdx
+++ b/docs/angular/src/content/jp/components/exporter-excel.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または [**IgxGrid**](grid/grid.md)、[**IgxTreeGrid**](treegrid/tree-grid.md) および [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md) コンポーネントのデータをエクスポートできます。エクスポート機能は、<ApiLink type="ExcelExporterService" /> クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。
+Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または [**IgxGrid**](grid/grid.mdx)、[**IgxTreeGrid**](treegrid/tree-grid.mdx) および [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.mdx) コンポーネントのデータをエクスポートできます。エクスポート機能は、<ApiLink type="ExcelExporterService" /> クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。
 </div>
 <igc-divider></igc-divider>
 
@@ -108,8 +108,8 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor
 - <ApiLink type="ExcelExporterOptions" />
 
 Grid Excel エクスポーター:
-- [`IgxGrid Excel エクスポーター`](grid/export-excel.md)
-- [`IgxTreeGrid Excel エクスポーター`](treegrid/export-excel.md)
+- [`IgxGrid Excel エクスポーター`](grid/export-excel.mdx)
+- [`IgxTreeGrid Excel エクスポーター`](treegrid/export-excel.mdx)
 
 その他の使用されたコンポーネント:
 - <ApiLink type="Grid" />
diff --git a/docs/angular/src/content/jp/components/exporter-pdf.mdx b/docs/angular/src/content/jp/components/exporter-pdf.mdx
index 171c4cc77c..fd7c2bd3bf 100644
--- a/docs/angular/src/content/jp/components/exporter-pdf.mdx
+++ b/docs/angular/src/content/jp/components/exporter-pdf.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI for Angular PDF Exporter サービスは、生データ配列や [**IgxGrid**](grid/grid.md)、[**IgxTreeGrid**](treegrid/tree-grid.md)、[**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.md)、[**IgxPivotGrid**](pivotGrid/pivot-grid.md) などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は <ApiLink type="PdfExporterService" /> クラスにカプセル化されており、複数ページのドキュメント サポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータ エクスポートを可能にします。
+Ignite UI for Angular PDF Exporter サービスは、生データ配列や [**IgxGrid**](grid/grid.mdx)、[**IgxTreeGrid**](treegrid/tree-grid.mdx)、[**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.mdx)、[**IgxPivotGrid**](pivotgrid/pivot-grid.mdx) などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は <ApiLink type="PdfExporterService" /> クラスにカプセル化されており、複数ページのドキュメント サポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータ エクスポートを可能にします。
 </div>
 <igc-divider></igc-divider>
 
diff --git a/docs/angular/src/content/jp/components/for-of.mdx b/docs/angular/src/content/jp/components/for-of.mdx
index 88d65e667a..de032a9688 100644
--- a/docs/angular/src/content/jp/components/for-of.mdx
+++ b/docs/angular/src/content/jp/components/for-of.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular <ApiLink type="ForOfDirective" member="igxForOf" label="ig
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxForOfModule` をインポートします。
 
@@ -166,7 +166,7 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
 
 `igxFor` ディレクティブは、`igxGrid` 内のデータを垂直方向と水平方向の両方向に仮想化するために使用されます。
 
-より詳細な情報とデモについては、[グリッド仮想化](grid/virtualization.md)トピックに従ってください。
+より詳細な情報とデモについては、[グリッド仮想化](grid/virtualization.mdx)トピックに従ってください。
 
 ### リモート サービスにバインドされる igxFor
 
diff --git a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx
index da6e1dce09..6c39343211 100644
--- a/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx
+++ b/docs/angular/src/content/jp/components/general-breaking-changes-dv.mdx
@@ -23,11 +23,11 @@ Import ステートメントは、API クラスと列挙型へのフル パス
 
 | 影響されるパッケージ                                                                                                                     | 影響されるコンポーネント                                                                         |
 | ------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------ |
-| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a>             | [Excel ライブラリ](excel-library.md)                                                      |
-| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [スプレッドシート](spreadsheet-overview.md)                                                  |
-| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a>               | [地理マップ](geo-map.md)、[ツリーマップ](treemap-overview.md)                                    |
-| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a>           | [ブレット グラフ](bullet-graph.md)、[リニア ゲージ](linear-gauge.md)、[ラジアル ゲージ](radial-gauge.md)   |
-| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>           | カテゴリ チャート、データ チャート、ドーナツ チャート、ファイナンシャル チャート、円チャート、[ズーム スライダー](zoomslider-overview.md) |
+| <a href="https://www.npmjs.com/package/igniteui-angular-excel/v/8.2.12" target="_blank">igniteui-angular-excel</a>             | [Excel ライブラリ](excel-library.mdx)                                                      |
+| <a href="https://www.npmjs.com/package/igniteui-angular-spreadsheet/v/8.2.12" target="_blank">igniteui-angular-spreadsheet</a> | [スプレッドシート](spreadsheet-overview.mdx)                                                  |
+| <a href="https://www.npmjs.com/package/igniteui-angular-maps/v/8.2.12" target="_blank">igniteui-angular-maps</a>               | [地理マップ](./geo-map.mdx)、[ツリーマップ](./charts/types/treemap-chart.mdx)                                    |
+| <a href="https://www.npmjs.com/package/igniteui-angular-gauges/v/8.2.12" target="_blank">igniteui-angular-gauges</a>           | [ブレット グラフ](bullet-graph.mdx)、[リニア ゲージ](linear-gauge.mdx)、[ラジアル ゲージ](radial-gauge.mdx)   |
+| <a href="https://www.npmjs.com/package/igniteui-angular-charts/v/8.2.12" target="_blank">igniteui-angular-charts</a>           | カテゴリ チャート、データ チャート、ドーナツ チャート、ファイナンシャル チャート、円チャート、[ズーム スライダー](zoomslider-overview.mdx) |
 | <a href="https://www.npmjs.com/package/igniteui-angular-core/v/8.2.12" target="_blank">igniteui-angular-core</a>               | すべてのクラスと列挙型                                                                          |
 
 - All types of charts/series have marker outlines with 2px thickness
diff --git a/docs/angular/src/content/jp/components/general/angular-grid-overview-guide.mdx b/docs/angular/src/content/jp/components/general/angular-grid-overview-guide.mdx
index 48ccce548c..7ac9582d6f 100644
--- a/docs/angular/src/content/jp/components/general/angular-grid-overview-guide.mdx
+++ b/docs/angular/src/content/jp/components/general/angular-grid-overview-guide.mdx
@@ -15,7 +15,7 @@ import scrolling from '../../images/general/scrolling.gif';
 
 # Angular Grid と Angular アプリケーション開発の完全ガイド
 
-Angular Data Grid とその使用方法については、[このセクション](../grids-and-lists.md#angular-data-grid-の概要) (グリッドの概要トピック) をご覧ください。
+Angular Data Grid とその使用方法については、[このセクション](../grids-and-lists.mdx#angular-data-grid-の概要) (グリッドの概要トピック) をご覧ください。
 
 ## Ignite UI - Angular アプリ開発のフレームワーク
 
@@ -29,17 +29,17 @@ Ignite UI for Angular の多くの利点のうち、簡単な統合、迅速な
 
 ## プロジェクトのインストールと作成
 
-Ignite UI for Angular は、Angular CLI または [Ignite UI CLI](./cli/getting-started-with-cli.md) でインストールできます。Angular CLI をすばやく開始するには、以下のコマンドを実行します。
+Ignite UI for Angular は、Angular CLI または [Ignite UI CLI](./cli/getting-started-with-cli.mdx) でインストールできます。Angular CLI をすばやく開始するには、以下のコマンドを実行します。
 
 `ng add igniteui-angular`
 
-Ignite UI for Angular を[既存の Angular アプリケーション](getting-started.md#ignite-ui-for-angular-のインストール)に追加する必要がある場合、このオプションお勧めします。
+Ignite UI for Angular を[既存の Angular アプリケーション](getting-started.mdx#ignite-ui-for-angular-のインストール)に追加する必要がある場合、このオプションお勧めします。
 
 新しいアプリケーションを最初から作成する場合、以下の方法をお勧めします。
 
 `npm install –g igniteui-cli`
 
-Ignite UI CLI がインストールされると、cli の [Ignite UI CLI を使用したガイド付きエクスペリエンス](./cli/step-by-step-guide-using-cli.md)または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md) に従ってアプリケーションを簡単にブートストラップできます。これにより、エンドユーザーが 1 つのコマンドで実行できる構成済みアプリが構築されます。
+Ignite UI CLI がインストールされると、cli の [Ignite UI CLI を使用したガイド付きエクスペリエンス](./cli/step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) に従ってアプリケーションを簡単にブートストラップできます。これにより、エンドユーザーが 1 つのコマンドで実行できる構成済みアプリが構築されます。
 
 `ig`
 
@@ -49,11 +49,11 @@ Ignite UI CLI がインストールされると、cli の [Ignite UI CLI を使
 
 製品の依存関係のインポートには、Ignite UI CLI の使用をお勧めします。`ng add igniteui-angular` を使用すると、Ignite UI for Angular パッケージとその依存関係、フォントのインポート、スタイル設定などをプロジェクトにインストールできます。
 
-Ignite UI CLI せずに Ignite UI for Angular コンポーネントを使用するには、必要となるすべての依存関係を構成し、プロジェクトを適切に設定したことを確認してください。手順は、[はじめに](./getting-started.md)のトピックをご確認ください。
+Ignite UI CLI せずに Ignite UI for Angular コンポーネントを使用するには、必要となるすべての依存関係を構成し、プロジェクトを適切に設定したことを確認してください。手順は、[はじめに](./getting-started.mdx)のトピックをご確認ください。
 
 ## コンポーネントをテンプレートに追加
 
-開発の環境設定が完了した後、他の Ignite UI コンポーネントの追加および構成を続行できます。以下には、[schematics](./cli-overview.md) を使用して基本構成のグリッドを追加し、一部の列にテンプレートを追加する方法です。
+開発の環境設定が完了した後、他の Ignite UI コンポーネントの追加および構成を続行できます。以下には、[schematics](./cli-overview.mdx) を使用して基本構成のグリッドを追加し、一部の列にテンプレートを追加する方法です。
 
 ```html
 <igx-grid #grid1 [data]="localData" height="600px" (selected)="cellSelection($event)">
@@ -167,7 +167,7 @@ export class MyComponent implements OnInit {
 </igx-grid>
 ```
 
-詳細については、[データ バインディングのトピック](../grid/grid.md#angular-grid-データ-バインディング)を参照してください。
+詳細については、[データ バインディングのトピック](../grid/grid.mdx#angular-grid-データ-バインディング)を参照してください。
 
 同じデータ バインディング方法は、igxDataChart などの他の Ignite UI コンポーネントにも適用できます。
 
@@ -208,11 +208,11 @@ Angular データ グリッドは、簡単なソート、フィルタリング
 
 グリッドは、カスタム フィルタリング条件で 3 種類のフィルタリングを提供します。
 
-- デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件で列ごとに[行をフィルタリングします](../grid/filtering.md)。  
+- デフォルトの定義済みフィルタリングおよび標準のフィルタリング条件で列ごとに[行をフィルタリングします](../grid/filtering.mdx)。  
 
-- ソート、移動、ピン固定、非表示などの機能を構成できるメニューの [Excel スタイル フィルタリング](../grid/excel-style-filtering.md) 。
+- ソート、移動、ピン固定、非表示などの機能を構成できるメニューの [Excel スタイル フィルタリング](../grid/excel-style-filtering.mdx) 。
 
-- すべての列でフィルタリング条件を持つグループを作成できるダイアログを提供する[高度なフィルタリング](../grid/advanced-filtering.md)。
+- すべての列でフィルタリング条件を持つグループを作成できるダイアログを提供する[高度なフィルタリング](../grid/advanced-filtering.mdx)。
 
 [Angular 9 リリース](https://www.infragistics.com/community/blogs/b/infragistics/posts/ignite-ui-for-angular-9-0-0-release "Ignite UI for Angular 9.0.0 リリース")には、データ解析、豊富な可視化、グリッド状態の永続化、テーマ ウィジェットなど、多数の新しい主要機能が含まれています。
 
@@ -249,7 +249,7 @@ Ignite UI for Angular はコンポーネントのデザインを[マテリアル
 
 ## Ignite UI のデータ分析
 
-Ignite Angular UI ツールセットには[データ分析機能](data-analysis.md)も含まれています。優れたエクスペリエンスを顧客に提供するために必要なすべてのビジネス機能を提供します。そのため、Excel に類似したエクスペリエンスを提供するディレクティブを提供します。たとえば、データの一部を選択することにより、ボタンをクリックし、データのサブセットですばやくデータ分析を実行できるようになりました。
+Ignite Angular UI ツールセットには[データ分析機能](data-analysis.mdx)も含まれています。優れたエクスペリエンスを顧客に提供するために必要なすべてのビジネス機能を提供します。そのため、Excel に類似したエクスペリエンスを提供するディレクティブを提供します。たとえば、データの一部を選択することにより、ボタンをクリックし、データのサブセットですばやくデータ分析を実行できるようになりました。
 
 <Sample src="/grid-dynamic-chart-data/data-analysis" height={750} lob iframeOnly fullscreenBtn />
 
diff --git a/docs/angular/src/content/jp/components/general/cli-overview.mdx b/docs/angular/src/content/jp/components/general/cli-overview.mdx
index fedafa20a8..c33718114e 100644
--- a/docs/angular/src/content/jp/components/general/cli-overview.mdx
+++ b/docs/angular/src/content/jp/components/general/cli-overview.mdx
@@ -11,8 +11,8 @@ llms:
 
 CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。プロジェクトにさらに追加できる Ignite UI for Angular コンポーネントを備えたビューの選択により、開発者の生産性が大幅に向上します。
 
-[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドライン ツールです。使用方法の詳細と例については、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.md)トピックを参照してください。
+[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドライン ツールです。使用方法の詳細と例については、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.mdx)トピックを参照してください。
 
-[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli) で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。[Ignite UI for Angular をインストールする](getting-started.md#ignite-ui-for-angular-のインストール)と、schematics コレクションがプロジェクトに追加されます。使用方法の詳細と例については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.md)トピックを参照してください。
+[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli) で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。[Ignite UI for Angular をインストールする](getting-started.mdx#ignite-ui-for-angular-のインストール)と、schematics コレクションがプロジェクトに追加されます。使用方法の詳細と例については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.mdx)トピックを参照してください。
 
-ツールの両方のバージョンは、さまざまなプロジェクト、コンポーネント、およびシナリオビュー (テンプレート) を許可し、[Ignite UI CLI を使用したガイド付きステップ バイ ステップモード](./cli/step-by-step-guide-using-cli.md)および [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md) を提供します。
+ツールの両方のバージョンは、さまざまなプロジェクト、コンポーネント、およびシナリオビュー (テンプレート) を許可し、[Ignite UI CLI を使用したガイド付きステップ バイ ステップモード](./cli/step-by-step-guide-using-cli.mdx)および [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) を提供します。
diff --git a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
index 9f3077e207..1edaaa17e3 100644
--- a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
@@ -41,7 +41,7 @@ Angular Schematics または Ignite UI CLI を使用して Angular プロジェ
 
 <Image src={igxSideAuthQuestion} alt="Auth question" class="responsive-img" />
 
-ウィザードの手順の完全なガイドは、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)または [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)をご覧ください。
+ウィザードの手順の完全なガイドは、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx)をご覧ください。
 
 ### 直接コマンド (上級者向け)
 
diff --git a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx
index 442568f1cb..4153fae42c 100644
--- a/docs/angular/src/content/jp/components/general/cli/component-templates.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/component-templates.mdx
@@ -14,49 +14,49 @@ llms:
 | テンプレート          |  コードと説明                                                                         | デモ              |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- |
 |<b>グリッドとリスト</b>|                                                                                              |                    |
-|grid               |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid newGrid</code><br />Ignite UI CLI:<br /><code>ig add grid newGrid</code><details>IgxGrid の基本 テンプレート。</details>                  |自動生成列を含む [IgxGrid](../../grid/grid.md) コンポーネント。 |
-|grid-batch-editing |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add grid-batch-editing newGridBatchEditing</code><details>一括編集を含むサンプル IgxGrid。</details>             |[batch editing](../../grid/batch-editing.md) にトランザクション サービスを使用する [IgxGrid](../../grid/grid.md)。|
-|custom-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c custom-grid newCustomGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-grid newCustomGrid</code><details>ソート、フィルタリング、編集などのオプション機能を含む IgxGrid。</details>| [IgxGrid](../../grid/grid.md) には、オプション機能 [ソート](../../grid/sorting.md)、[フィルタリング](../../grid/filtering.md)、[セル編集](../../grid/editing.md)、[行編集](../../grid/row-editing.md)、[グループ化](../../grid/groupby.md)、[サイズ変更](../../grid/column-resizing.md)、[選択](../../grid/selection.md)、[ページング](../../grid/paging.md)、[列ピン固定](../../grid/column-pinning.md)、[列移動](../../grid/column-moving.md)、[列の非表示](../../grid/column-hiding.md) などが含まれます。|
-|grid-summaries     |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add grid-summaries newGridSummaries</code><details>集計機能を含む IgxGrid。</details>| [集計](../../grid/summaries.md) を含む [IgxGrid](../../grid/grid.md)。|
-|grid-multi-column-headers|Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders</code><br />Ignite UI CLI:<br /><code>ig add grid-multi-column-headers newGridMultiColumnHeaders</code><details>複数のヘッダー列を含む IgxGrid。</details> | [multi-column headers](../../grid/multi-column-headers.md) を含む [IgxGrid](../../grid/grid.md)。  |
-|tree grid          |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-tree-grid newCustomTreeGrid</code><details>ソート、フィルタリング、行編集などのオプション機能を含む IgxTreeGrid。</details> |[IgxTreeGrid](../../treegrid/tree-grid.md) には、オプション機能 [ソーティング](../../treegrid/sorting.md)、[フィルタリング](../../treegrid/filtering.md)、[セル編集](../../treegrid/editing.md)、[行編集](../../treegrid/row-editing.md)、[サイズ変更](../../treegrid/column-resizing.md)、[行選択](../../treegrid/selection.md)、[ページング](../../treegrid/paging.md)、[列のピン固定](../../treegrid/column-pinning.md)、[列移動](../../treegrid/column-moving.md)、[列の非表示](../../treegrid/column-hiding.md) などが含まれます。|
-|list               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c list newList</code><br />Ignite UI CLI:<br /><code>ig add list newList</code><details>基本  IgxList。</details>                               |検索とフィルタリング ロジックを含む [IgxList](../../list.md)。|
-|combo              |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>テンプレートを含む基本  IgxCombo。</details>            |カスタム [templating](../../combo-templates.md)を含む |[IgxCombo](../../combo.md)。|
+|grid               |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid newGrid</code><br />Ignite UI CLI:<br /><code>ig add grid newGrid</code><details>IgxGrid の基本 テンプレート。</details>                  |自動生成列を含む [IgxGrid](../../grid/grid.mdx) コンポーネント。 |
+|grid-batch-editing |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c grid-batch-editing newGridBatchEditing</code><br />Ignite UI CLI:<br /><code>ig add grid-batch-editing newGridBatchEditing</code><details>一括編集を含むサンプル IgxGrid。</details>             |[batch editing](../../grid/batch-editing.mdx) にトランザクション サービスを使用する [IgxGrid](../../grid/grid.mdx)。|
+|custom-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c custom-grid newCustomGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-grid newCustomGrid</code><details>ソート、フィルタリング、編集などのオプション機能を含む IgxGrid。</details>| [IgxGrid](../../grid/grid.mdx) には、オプション機能 [ソート](../../grid/sorting.mdx)、[フィルタリング](../../grid/filtering.mdx)、[セル編集](../../grid/editing.mdx)、[行編集](../../grid/row-editing.mdx)、[グループ化](../../grid/groupby.mdx)、[サイズ変更](../../grid/column-resizing.mdx)、[選択](../../grid/selection.mdx)、[ページング](../../grid/paging.mdx)、[列ピン固定](../../grid/column-pinning.mdx)、[列移動](../../grid/column-moving.mdx)、[列の非表示](../../grid/column-hiding.mdx) などが含まれます。|
+|grid-summaries     |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c grid-summaries newGridSummaries</code><br />Ignite UI CLI:<br /><code>ig add grid-summaries newGridSummaries</code><details>集計機能を含む IgxGrid。</details>| [集計](../../grid/summaries.mdx) を含む [IgxGrid](../../grid/grid.mdx)。|
+|grid-multi-column-headers|Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c grid-multi-column-headers newGridMultiColumnHeaders</code><br />Ignite UI CLI:<br /><code>ig add grid-multi-column-headers newGridMultiColumnHeaders</code><details>複数のヘッダー列を含む IgxGrid。</details> | [multi-column headers](../../grid/multi-column-headers.mdx) を含む [IgxGrid](../../grid/grid.mdx)。  |
+|tree grid          |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c custom-tree-grid newCustomTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add custom-tree-grid newCustomTreeGrid</code><details>ソート、フィルタリング、行編集などのオプション機能を含む IgxTreeGrid。</details> |[IgxTreeGrid](../../treegrid/tree-grid.mdx) には、オプション機能 [ソーティング](../../treegrid/sorting.mdx)、[フィルタリング](../../treegrid/filtering.mdx)、[セル編集](../../treegrid/editing.mdx)、[行編集](../../treegrid/row-editing.mdx)、[サイズ変更](../../treegrid/column-resizing.mdx)、[行選択](../../treegrid/selection.mdx)、[ページング](../../treegrid/paging.mdx)、[列のピン固定](../../treegrid/column-pinning.mdx)、[列移動](../../treegrid/column-moving.mdx)、[列の非表示](../../treegrid/column-hiding.mdx) などが含まれます。|
+|list               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c list newList</code><br />Ignite UI CLI:<br /><code>ig add list newList</code><details>基本  IgxList。</details>                               |検索とフィルタリング ロジックを含む [IgxList](../../list.mdx)。|
+|combo              |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c combo newCombo</code><br />Ignite UI CLI:<br /><code>ig add combo newCombo</code><details>テンプレートを含む基本  IgxCombo。</details>            |カスタム [templating](../../combo-templates.mdx)を含む |[IgxCombo](../../combo.mdx)。|
 |<b>チャート</b>      |                                                                                               |
-|category chart     |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c category-chart newCategoryChart</code><br />Ignite UI CLI:<br /><code>ig add category-chart newCategoryChart</code><details>チャート タイプ セレクターを備えた基本 カテゴリチャート。</details>| チャート タイプ セレクターを含む基本 [category chart](../../category-chart.md)。|
-|financial chart    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c financial-chart newFinancialChart</code><br />Ignite UI CLI:<br /><code>ig add financial-chart newFinancialChart</code><details>自動ツールバーとタイプ選択を含む基本 ファイナンシャル チャート。</details>| 自動ツールバーとタイプ選択を含む基本 [financial chart](../../financial-chart.md)。|
+|category chart     |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c category-chart newCategoryChart</code><br />Ignite UI CLI:<br /><code>ig add category-chart newCategoryChart</code><details>チャート タイプ セレクターを備えた基本 カテゴリチャート。</details>| チャート タイプ セレクターを含む基本 [category chart](../../charts/types/column-chart.mdx)。|
+|financial chart    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c financial-chart newFinancialChart</code><br />Ignite UI CLI:<br /><code>ig add financial-chart newFinancialChart</code><details>自動ツールバーとタイプ選択を含む基本 ファイナンシャル チャート。</details>| 自動ツールバーとタイプ選択を含む基本 [financial chart](../../charts/types/stock-chart.mdx)。|
 |<b>ゲージ</b>|                                                                                                     |
-|bullet graph       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph</code><br />Ignite UI CLI:<br /><code>ig add bullet-graph newBulletGraph</code><details>さまざまなアニメーションを含む IgxBulletGraph。</details>| さまざまなアニメーションを含む [IgxBulletGraph](../../bullet-graph.md)。|
-|linear gauge       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge</code><br />Ignite UI CLI:<br /><code>ig add linear-gauge newLinearGauge</code><details>さまざまなアニメーションを含む IgxLinearGauge</details>| さまざまなアニメーションを含む  [IgxLinearGauge](../../linear-gauge.md)。|
-|radial gauge       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge</code><br />Ignite UI CLI:<br /><code>ig add radial-gauge newRadialGauge</code><details>さまざまなアニメーションを含む IgxRadialGauge。</details>| さまざまなアニメーションを含む [IgxRadialGauge](../../radial-gauge.md)。|
+|bullet graph       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c bullet-graph newBulletGraph</code><br />Ignite UI CLI:<br /><code>ig add bullet-graph newBulletGraph</code><details>さまざまなアニメーションを含む IgxBulletGraph。</details>| さまざまなアニメーションを含む [IgxBulletGraph](../../bullet-graph.mdx)。|
+|linear gauge       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c linear-gauge newLinearGauge</code><br />Ignite UI CLI:<br /><code>ig add linear-gauge newLinearGauge</code><details>さまざまなアニメーションを含む IgxLinearGauge</details>| さまざまなアニメーションを含む  [IgxLinearGauge](../../linear-gauge.mdx)。|
+|radial gauge       |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c radial-gauge newRadialGauge</code><br />Ignite UI CLI:<br /><code>ig add radial-gauge newRadialGauge</code><details>さまざまなアニメーションを含む IgxRadialGauge。</details>| さまざまなアニメーションを含む [IgxRadialGauge](../../radial-gauge.mdx)。|
 |<b>レイアウト</b>     |  
-|dock-manager        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c dock-manager newDockManager</code><br />Ignite UI CLI:<br /><code>ig add dock-manager newDockManager</code><details>基本 IgcDockManager。</details>                 |9 つのコンテンツ スロットの [IgcDockManager](../../dock-manager.md)。   |                                                                                             |
-|carousel           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c carousel newCarousel</code><br />Ignite UI CLI:<br /><code>ig add carousel newCarousel</code><details>基本 IgxCarousel。</details>                 | 一連の画像を循環する [IgxCarousel](../../carousel.md)。                 |
-|tabs               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c tabs newTabs</code><br />Ignite UI CLI:<br /><code>ig add tabs newTabs</code><details>基本 IgxTabs。</details>                             | 3 つのカスタマイズされたタブグループを含む [IgxTabs](../../tabs.md) コンポーネント。                             |
-|bottom-nav         |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c bottom-nav newBottomNav</code><br />Ignite UI CLI:<br /><code>ig add bottom-nav newBottomNav</code><details>3 項目の下部ナビゲーション テンプレート。</details> | 3 項目の下部 [navbar](../../navbar.md) テンプレート。|
+|dock-manager        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c dock-manager newDockManager</code><br />Ignite UI CLI:<br /><code>ig add dock-manager newDockManager</code><details>基本 IgcDockManager。</details>                 |9 つのコンテンツ スロットの [IgcDockManager](../../dock-manager.mdx)。   |                                                                                             |
+|carousel           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c carousel newCarousel</code><br />Ignite UI CLI:<br /><code>ig add carousel newCarousel</code><details>基本 IgxCarousel。</details>                 | 一連の画像を循環する [IgxCarousel](../../carousel.mdx)。                 |
+|tabs               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c tabs newTabs</code><br />Ignite UI CLI:<br /><code>ig add tabs newTabs</code><details>基本 IgxTabs。</details>                             | 3 つのカスタマイズされたタブグループを含む [IgxTabs](../../tabs.mdx) コンポーネント。                             |
+|bottom-nav         |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c bottom-nav newBottomNav</code><br />Ignite UI CLI:<br /><code>ig add bottom-nav newBottomNav</code><details>3 項目の下部ナビゲーション テンプレート。</details> | 3 項目の下部 [navbar](../../navbar.mdx) テンプレート。|
 |<b>データ入力と表示</b>|
-|chip               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c chip newChip</code><br />Ignite UI CLI:<br /><code>ig add chip newChip</code><details>基本 IgxChip。</details>                             | igx-chips-area 内の [IgxChip](../../chip.md) コンポーネント。                             |
-|dropdown           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c dropdown newDropDown</code><br />Ignite UI CLI:<br /><code>ig add dropdown newDropDown</code><details>基本 IgxDropDown。</details>                 | 項目のリストを表示する基本 [IgxDropDown](../../drop-down.md)。                 |
-|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select newSelect</code><br />Ignite UI CLI:<br /><code>ig add select newSelect</code><details>基本 IgxSelect。</details>| 項目のリストを表示する基本 [IgxSelect](../../select.md)。|
-|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-groups newGroupsSelect</code><details>グループ選択。</details>       | グループ項目を表示する [IgxSelect](../../select.md)。       |
-|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-in-form newFormSelect</code><details>フォームの IgxSelect。</details>       | フォームで使用する [IgxSelect](../../select.md) コンポーネント。       |
-|input group        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c input-group newInputGroup</code><br />Ignite UI CLI:<br /><code>ig add input-group newInputGroup</code><details>基本 IgxInputGroup フォーム ビュー。</details>| [IgxInputGroup](../../input-group.md) で作成したフォーム。|
+|chip               |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c chip newChip</code><br />Ignite UI CLI:<br /><code>ig add chip newChip</code><details>基本 IgxChip。</details>                             | igx-chips-area 内の [IgxChip](../../chip.mdx) コンポーネント。                             |
+|dropdown           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c dropdown newDropDown</code><br />Ignite UI CLI:<br /><code>ig add dropdown newDropDown</code><details>基本 IgxDropDown。</details>                 | 項目のリストを表示する基本 [IgxDropDown](../../drop-down.mdx)。                 |
+|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select newSelect</code><br />Ignite UI CLI:<br /><code>ig add select newSelect</code><details>基本 IgxSelect。</details>| 項目のリストを表示する基本 [IgxSelect](../../select.mdx)。|
+|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-groups newGroupsSelect</code><details>グループ選択。</details>       | グループ項目を表示する [IgxSelect](../../select.mdx)。       |
+|select (v4.1.0)    |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c select-in-form newFormSelect</code><br />Ignite UI CLI:<br /><code>ig add select-in-form newFormSelect</code><details>フォームの IgxSelect。</details>       | フォームで使用する [IgxSelect](../../select.mdx) コンポーネント。       |
+|input group        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c input-group newInputGroup</code><br />Ignite UI CLI:<br /><code>ig add input-group newInputGroup</code><details>基本 IgxInputGroup フォーム ビュー。</details>| [IgxInputGroup](../../input-group.mdx) で作成したフォーム。|
 |<b>インタラクション</b>|
-|dialog             |Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dialog newDialog</code><br />Ignite UI CLI:<br /><code>ig add dialog newDialog</code><details>基本 IgxDialog。</details>                       | 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.md)。                       |
-|tooltip            |Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tooltip newTooltip</code><br />Ignite UI CLI:<br /><code>ig add tooltip newTooltip</code><details>フルカスタマイズ可能なツールチップ。</details>        | [IgxTooltip](../../tooltip.md) で作成される基本 ツールチップ。        |
+|dialog             |Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c dialog newDialog</code><br />Ignite UI CLI:<br /><code>ig add dialog newDialog</code><details>基本 IgxDialog。</details>                       | 標準の確認ダイアログとして使用される [IgxDialog](../../dialog.mdx)。                       |
+|tooltip            |Ignite UI Schematics collection:<br /><code>ng g @igniteui/angular-schematics:c tooltip newTooltip</code><br />Ignite UI CLI:<br /><code>ig add tooltip newTooltip</code><details>フルカスタマイズ可能なツールチップ。</details>        | [IgxTooltip](../../tooltip.mdx) で作成される基本 ツールチップ。        |
 |<b>スケジュール</b>  |                                                                                               |
-|date-picker        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c date-picker newDatePicker</code><br />Ignite UI CLI:<br /><code>ig add date-picker newDatePicker</code><details>基本 IgxDatePicker。</details>          | 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.md)。          |
-|time-picker        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c time-picker newTimePicker</code><br />Ignite UI CLI:<br /><code>ig add time-picker newTimePicker</code><details>基本 IgxTimePicker。</details>          | 初期値設定と一方向データ バインディングを含む基本 [IgxTimePicker](../../time-picker.md)。           |
-|calendar           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c calendar newCalendar</code><br />Ignite UI CLI:<br /><code>ig add calendar newCalendar</code><details>単一選択を含む IgxCalendar。</details> | 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.md)。          |
+|date-picker        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c date-picker newDatePicker</code><br />Ignite UI CLI:<br /><code>ig add date-picker newDatePicker</code><details>基本 IgxDatePicker。</details>          | 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.mdx)。          |
+|time-picker        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c time-picker newTimePicker</code><br />Ignite UI CLI:<br /><code>ig add time-picker newTimePicker</code><details>基本 IgxTimePicker。</details>          | 初期値設定と一方向データ バインディングを含む基本 [IgxTimePicker](../../time-picker.mdx)。           |
+|calendar           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c calendar newCalendar</code><br />Ignite UI CLI:<br /><code>ig add calendar newCalendar</code><details>単一選択を含む IgxCalendar。</details> | 一方向データ バインディングを含む基本 [IgxDatePicker](../../date-picker.mdx)。          |
 
 
 ## シナリオ テンプレート
 
 | テンプレート          |  コードとテンプレート                                                                         | デモ               |
 | ----------------- | -------------------------------------------------------------------------------------------------------------------|------------------- |
-|awesome-grid        |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid</code><br />Ignite UI CLI:<br /><code>ig add awesome-grid newAwesomeGrid</code><details>カスタムセルテンプレートを含む IgxGrid。</details>          | セル テンプレートを含み、コントロールをセルに埋め込める [IgxGrid](../../grid/grid.md)。          |
-|crm-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c crm-grid newCrmGrid</code><br />Ignite UI CLI:<br /><code>ig add crm-grid newCrmGrid</code><details>カスタム検索実装を含む IgxGrid。</details>          | カスタム検索実装を含む [IgxGrid](../../grid/grid.md)。           |
-|fintech-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid</code><br />Ignite UI CLI:<br /><code>ig add fintech-grid newFinTechGrid</code><details>毎秒数千のライブ更新が可能な IgxGrid。</details>          | [IgxGrid](../../grid/live-data.md) 1 秒あたり数千の更新を処理するライブ更新デモ。           |
-|fintech-tree-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add fintech-tree-grid newFinTechTreeGrid</code><details>毎秒数千のライブ更新が可能な IgxGrid </details>          | [IgxTreeGrid](../../treegrid/live-data.md) 1 秒あたり数千の更新を処理するライブ更新デモ。          |
-|login           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c login newLogin</code><br />Ignite UI CLI:<br /><code>ig add login newLogin</code><details>IgxInputGroup で作成された登録およびログインフォーム。</details> | [IgxInputGroup](../../input-group.md) で作成された登録およびログインフォーム。          |
-|weather-forecast           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast</code><br />Ignite UI CLI:<br /><code>ig add weather-forecast newWeatherForecast</code><details>テンプレートを含む igxExpansionPanel。</details> | テンプレートは [IgxExpansionPanel](../../expansion-panel.md) を使用して、毎日の天気予報の詳細を表示します。          |
+|awesome-grid        |Ignite UI Schematics コレクション:<br /><code style="white-space: nowrap;">ng g @igniteui/angular-schematics:c awesome-grid newAwesomeGrid</code><br />Ignite UI CLI:<br /><code>ig add awesome-grid newAwesomeGrid</code><details>カスタムセルテンプレートを含む IgxGrid。</details>          | セル テンプレートを含み、コントロールをセルに埋め込める [IgxGrid](../../grid/grid.mdx)。          |
+|crm-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c crm-grid newCrmGrid</code><br />Ignite UI CLI:<br /><code>ig add crm-grid newCrmGrid</code><details>カスタム検索実装を含む IgxGrid。</details>          | カスタム検索実装を含む [IgxGrid](../../grid/grid.mdx)。           |
+|fintech-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c fintech-grid newFinTechGrid</code><br />Ignite UI CLI:<br /><code>ig add fintech-grid newFinTechGrid</code><details>毎秒数千のライブ更新が可能な IgxGrid。</details>          | [IgxGrid](../../grid/live-data.mdx) 1 秒あたり数千の更新を処理するライブ更新デモ。           |
+|fintech-tree-grid        |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c fintech-tree-grid newFinTechTreeGrid</code><br />Ignite UI CLI:<br /><code>ig add fintech-tree-grid newFinTechTreeGrid</code><details>毎秒数千のライブ更新が可能な IgxGrid </details>          | [IgxTreeGrid](../../treegrid/live-data.mdx) 1 秒あたり数千の更新を処理するライブ更新デモ。          |
+|login           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c login newLogin</code><br />Ignite UI CLI:<br /><code>ig add login newLogin</code><details>IgxInputGroup で作成された登録およびログインフォーム。</details> | [IgxInputGroup](../../input-group.mdx) で作成された登録およびログインフォーム。          |
+|weather-forecast           |Ignite UI Schematics コレクション:<br /><code>ng g @igniteui/angular-schematics:c weather-forecast newWeatherForecast</code><br />Ignite UI CLI:<br /><code>ig add weather-forecast newWeatherForecast</code><details>テンプレートを含む igxExpansionPanel。</details> | テンプレートは [IgxExpansionPanel](../../expansion-panel.mdx) を使用して、毎日の天気予報の詳細を表示します。          |
diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
index 9bb1b4e9bd..990afc82e0 100644
--- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -49,7 +49,7 @@ Schematics コレクションにはプロジェクト作成のために 2 つの
 ng new --collection="@igniteui/angular-schematics"
 ```
 
-ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md)を参照してください。
+ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx)を参照してください。
 
 ### 直接プロジェクトを作成する
 
@@ -77,8 +77,8 @@ ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-
 
 | テンプレートの ID        | テンプレートの説明 |
 | :----------------- | --- |
-| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 |
-| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 |
+| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
+| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
 
 プロジェクトを作成する際に以下の**引数**を指定できます。
 
@@ -154,13 +154,13 @@ ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-
 
 ## コンポーネント テンプレートの追加
 
-[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、Ignite UI for Angular コレクションと `component` schematic を使用して `ng generate` を実行し、テンプレート ID と新しいコンポーネントの名前を指定します:
+[利用可能な Ignite UI Angular テンプレート](component-templates.mdx)を追加するには、Ignite UI for Angular コレクションと `component` schematic を使用して `ng generate` を実行し、テンプレート ID と新しいコンポーネントの名前を指定します:
 
 ```cmd
 ng g @igniteui/angular-schematics:component grid newGrid
 ```
 
-テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.md#ビューの追加)を参照してください。
+テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx#ビューの追加)を参照してください。
 
 テンプレートを追加する際に以下の**引数**を指定できます。
 
@@ -339,4 +339,4 @@ ig ai-config
 `ig ai-config` コマンドは `igniteui-cli` と `igniteui-theming` の 2 つの Ignite UI エントリのみを設定し、`angular-cli` は登録しません。3 つのサーバーをすべて一括設定するには `ng generate @igniteui/angular-schematics:ai-config` を使用してください。
 </DocsAside>
 
-すべての AI クライアントおよび Agent Skills の設定手順の詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。
+すべての AI クライアントおよび Agent Skills の設定手順の詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.mdx) を参照してください。
diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
index c19724c76a..8b5efc0363 100644
--- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
@@ -67,7 +67,7 @@ ig new
     <p style="text-align:center;">最初の Ignite UI CLI アプリを作成</p>
 </div>
 
-ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md)を参照してください。
+ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx)を参照してください。
 
 ### 直接プロジェクトを作成する
 
@@ -111,8 +111,8 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 
 | テンプレートの ID        | テンプレートの説明 |
 | :----------------- | --- |
-| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 |
-| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.md)をご覧ください。 |
+| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
+| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
 
 プロジェクトを作成する際に以下の**引数**を指定できます。
 
@@ -198,7 +198,7 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 
 ## コンポーネント テンプレートの追加
 
-[利用可能な Ignite UI Angular テンプレート](component-templates.md)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。
+[利用可能な Ignite UI Angular テンプレート](component-templates.mdx)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。
 
 `ig add [template] [name]` コマンドを使用します。
 
@@ -206,9 +206,9 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 ig add grid newGrid
 ```
 
-すべての[利用可能なテンプレート](component-templates.md)のリストを取得するには、プロジェクトディレクトリで [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) コマンドを実行することもできます。
+すべての[利用可能なテンプレート](component-templates.mdx)のリストを取得するには、プロジェクトディレクトリで [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) コマンドを実行することもできます。
 
-テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.md#add-view)を参照してください。
+テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx#add-view)を参照してください。
 
 テンプレートを追加する際に以下の**引数**を指定できます。
 
@@ -273,7 +273,7 @@ ig ai-config --assistants generic vscode --agents claude copilot
 1. **コーディング アシスタントの選択** - MCP サーバー設定の対象を 1 つ以上選択 (Generic、VS Code、Cursor、Gemini、Junie)、またはスキップするには None。
 2. **AI エージェントの選択** - スキル ファイルと手順ファイルのエージェントを 1 つ以上選択 (Generic、Claude、Copilot、Cursor、Codex、Windsurf、Gemini、Junie)、またはスキップするには None。
 
-インタラクティブ モードのデフォルトは、アシスタントは **Generic**、エージェントは **Generic + Claude** です。ウィザードのプロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定](step-by-step-guide-using-cli.md#ai-コーディング-アシスタントの設定)を参照してください。
+インタラクティブ モードのデフォルトは、アシスタントは **Generic**、エージェントは **Generic + Claude** です。ウィザードのプロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定](step-by-step-guide-using-cli.mdx#ai-コーディング-アシスタントの設定)を参照してください。
 
 AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください。
 
@@ -281,7 +281,7 @@ AI クライアントを手動で設定する場合、または VS Code 以外
 ig mcp
 ```
 
-クライアント設定 (VS Code、Claude Desktop、Cursor など) および利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。
+クライアント設定 (VS Code、Claude Desktop、Cursor など) および利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.mdx) を参照してください。
 
 ## Ignite UI CLI コマンド
 
@@ -298,5 +298,5 @@ ig mcp
 | [ig list](https://github.com/IgniteUI/igniteui-cli/wiki/list) | l |  指定したフレームワークとタイプのすべてのテンプレートをリストします。プロジェクト フォルダー内でコマンド実行時にプロジェクトのフレームワークとタイプのテンプレートをすべてリストします。
 | [ig test](https://github.com/IgniteUI/igniteui-cli/wiki/test) |  | 現在のプロジェクトのテストを実行します。
 | ig version | -v | ローカル (ローカルがない場合はグローバル) にインストールされた Ignite UI CLI バージョンを示します。 |
-| ig mcp |  | Ignite UI MCP サーバーを起動し、接続された AI アシスタントにコンポーネント ドキュメント検索および API リファレンス ツールを提供します。[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。 |
+| ig mcp |  | Ignite UI MCP サーバーを起動し、接続された AI アシスタントにコンポーネント ドキュメント検索および API リファレンス ツールを提供します。[Ignite UI CLI MCP](../../ai/cli-mcp.mdx) を参照してください。 |
 | ig ai-config |  | `.claude/skills/` に Ignite UI for Angular Agent Skills をコピーし、`.vscode/mcp.json` に Ignite UI MCP サーバー設定を書き込むことで、既存のプロジェクトの AI 統合をセットアップします。 |
diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
index 55bc07b613..c6cdf40fc6 100644
--- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド
 
-利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI Angular Schematics](getting-started-with-angular-schematics.md) で以前作成したプロジェクトを更新できます。
+利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI Angular Schematics](getting-started-with-angular-schematics.mdx) で以前作成したプロジェクトを更新できます。
 
 Schematics コレクションを使用してガイドをアクティブにするには、以下のコマンドを実行します。
 
@@ -75,7 +75,7 @@ ng new --collection="@igniteui/angular-schematics"
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step prompt: choose project template" class="responsive-img" />
 
-**side-nav** または **side-nav-mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.md)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**empty** を選択した場合、認証のプロンプトはスキップされます。
+**side-nav** または **side-nav-mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**empty** を選択した場合、認証のプロンプトはスキップされます。
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step prompt: auth question" class="responsive-img" />
 
@@ -84,7 +84,7 @@ ng new --collection="@igniteui/angular-schematics"
 2 つのテーマ オプションが利用可能です。
 
 - **default** - `angular.json` に Ignite UI for Angular Material ベースのデフォルト テーマのプリコンパイル済み CSS ファイル (`igniteui-angular.css`) を含めます。
-- **custom** - `app/styles.scss` にカスタマイズ可能な [Theming API](../../themes.md) を使用したカラーパレットとテーマ設定を生成します。
+- **custom** - `app/styles.scss` にカスタマイズ可能な [Theming API](../../themes.mdx) を使用したカラーパレットとテーマ設定を生成します。
 
 <Image src={igStepByStepNewProjectTheme} alt="Step by step prompt: choose default or custom theme" class="responsive-img" />
 
@@ -102,7 +102,7 @@ Schematics コレクションを使用してステップバイステップ モ
 ng g @igniteui/angular-schematics:component
 ```
 
-新しいコントロールを追加することを選択した場合、カテゴリにグループ化された[使用可能なテンプレート](component-templates.md#コンポーネント-テンプレート)のリストが提供されます。
+新しいコントロールを追加することを選択した場合、カテゴリにグループ化された[使用可能なテンプレート](component-templates.mdx#コンポーネント-テンプレート)のリストが提供されます。
 
 <Image src={igStepByStepTemplateGroup} alt="Step by step template group" class="responsive-img" />
 
@@ -112,7 +112,7 @@ ng g @igniteui/angular-schematics:component
 
 <Image src={igStepByStepComponentFeatures} alt="Step by step component features" class="responsive-img" />
 
-アプリケーションにシナリオを追加することを選択した場合、使用可能な[シナリオ テンプレート](component-templates.md#シナリオ-テンプレート)のリストも取得できます。
+アプリケーションにシナリオを追加することを選択した場合、使用可能な[シナリオ テンプレート](component-templates.mdx#シナリオ-テンプレート)のリストも取得できます。
 
 <Image src={igStepByStepScenarioTemplates} alt="Scenario templates" class="responsive-img" />
 
@@ -167,4 +167,4 @@ Angular schematic 経由で実行した場合、Ignite UI サーバーと並ん
 非インタラクティブなプロジェクト作成時に AI 設定のプロンプトを完全にスキップするには、`ng new` に `--assistants none --agents none` を渡します。後で AI 設定を再実行するには、プロジェクト ルートから `ng generate @igniteui/angular-schematics:ai-config` を使用してください。
 </DocsAside>
 
-MCP クライアント設定と利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.md) を参照してください。
+MCP クライアント設定と利用可能なツールの詳細については、[Ignite UI CLI MCP](../../ai/cli-mcp.mdx) を参照してください。
diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
index 7b8b44118d..1bc039f2c5 100644
--- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Ignite UI CLI を使用したステップ バイ ステップ ガイド
 
-利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI CLI](getting-started-with-cli.md) で以前作成したプロジェクトを更新できます。
+利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI CLI](getting-started-with-cli.mdx) で以前作成したプロジェクトを更新できます。
 
 Ignite UI CLI を使用してガイドを開始するには、`ig` コマンドを実行します。
 
@@ -66,11 +66,11 @@ ig new
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step new project template selection" class="responsive-img" />
 
-**Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.md)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**Empty Project** を選択した場合、認証のプロンプトはスキップされます。
+**Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**Empty Project** を選択した場合、認証のプロンプトはスキップされます。
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step auth question prompt" class="responsive-img" />
 
-次のステップでは、アプリケーションのテーマを選択します。デフォルトのオプションを選択すると、Ignite UI for Angular のデフォルト テーマの Ignite UI がプリコンパイルされた CSS ファイル (`igniteui-angular.css`) がプロジェクトの `angular.json` に含まれます。カスタムオプションは、`app/styles.scss` の [Theming API](../../themes) を使用して、カラーパレットとテーマのコードを生成します。
+次のステップでは、アプリケーションのテーマを選択します。デフォルトのオプションを選択すると、Ignite UI for Angular のデフォルト テーマの Ignite UI がプリコンパイルされた CSS ファイル (`igniteui-angular.css`) がプロジェクトの `angular.json` に含まれます。カスタムオプションは、`app/styles.scss` の [Theming API](../../themes.mdx) を使用して、カラーパレットとテーマのコードを生成します。
 
 <Image src={igStepByStepNewProjectTheme} alt="Step by step new project theme selection" class="responsive-img" />
 
@@ -88,7 +88,7 @@ Ignite UI CLI を使用する場合、`add` コマンドを実行します。
 ig add
 ```
 
-新しいコントロールを追加することを選択した場合、カテゴリにグループ化された[使用可能なテンプレート](component-templates.md#コンポーネント-テンプレート)のリストが提供されます。
+新しいコントロールを追加することを選択した場合、カテゴリにグループ化された[使用可能なテンプレート](component-templates.mdx#コンポーネント-テンプレート)のリストが提供されます。
 
 <Image src={igStepByStepTemplateGroup} alt="Step by step template group selection" class="responsive-img" />
 
@@ -98,7 +98,7 @@ ig add
 
 <Image src={igStepByStepComponentFeatures} alt="Step by step component feature toggles" class="responsive-img" />
 
-アプリケーションにシナリオを追加することを選択した場合、使用可能な[シナリオ テンプレート](component-templates.md#シナリオ-テンプレート)のリストも取得できます。
+アプリケーションにシナリオを追加することを選択した場合、使用可能な[シナリオ テンプレート](component-templates.mdx#シナリオ-テンプレート)のリストも取得できます。
 
 <Image src={igStepByStepScenarioTemplates} alt="Scenario templates" class="responsive-img" />
 
diff --git a/docs/angular/src/content/jp/components/general/code-splitting-and-multiple-entry-points.mdx b/docs/angular/src/content/jp/components/general/code-splitting-and-multiple-entry-points.mdx
index 0417314c5c..a9e936a3bb 100644
--- a/docs/angular/src/content/jp/components/general/code-splitting-and-multiple-entry-points.mdx
+++ b/docs/angular/src/content/jp/components/general/code-splitting-and-multiple-entry-points.mdx
@@ -313,7 +313,7 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
 ## その他のリソース
 
 - [Angular パッケージ形式 - エントリ ポイントとコード分割](https://angular.io/guide/angular-package-format#entrypoints-and-code-splitting)
-- [Ignite UI for Angular アップデート ガイド](update-guide.md)
+- [Ignite UI for Angular アップデート ガイド](update-guide.mdx)
 - [Ignite UI for Angular CHANGELOG (英語)](https://github.com/IgniteUI/igniteui-angular/blob/master/CHANGELOG.md)
 - [Ignite UI for Angular GitHub リポジトリ](https://github.com/IgniteUI/igniteui-angular)
 
@@ -321,7 +321,7 @@ ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
 
 特定のコンポーネントとその API の詳細については、コンポーネント ドキュメントを参照してください。
 
-- [Grid](../grid/grid.md)
-- [Tree Grid](../treegrid/tree-grid.md)
-- [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.md)
-- [Pivot Grid](../pivotGrid/pivot-grid.md)
\ No newline at end of file
+- [Grid](../grid/grid.mdx)
+- [Tree Grid](../treegrid/tree-grid.mdx)
+- [Hierarchical Grid](../hierarchicalgrid/hierarchical-grid.mdx)
+- [Pivot Grid](../pivotgrid/pivot-grid.mdx)
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/components/general/data-analysis.mdx b/docs/angular/src/content/jp/components/general/data-analysis.mdx
index 8b2afd4fcb..855f68915b 100644
--- a/docs/angular/src/content/jp/components/general/data-analysis.mdx
+++ b/docs/angular/src/content/jp/components/general/data-analysis.mdx
@@ -28,12 +28,12 @@ import containsFormatting from '../../images/general/contains-formatting.png';
 
 ## Dock Manager のデータ分析
 
-選択したデータに基づいて `Chart Types ビュー`を有効にするには、`セル範囲の選択`または`列の選択`を実行します。このビューは、[Dock Manager](../dock-manager.md) の右ペインの一部です。以下のオプションを選択できます。
+選択したデータに基づいて `Chart Types ビュー`を有効にするには、`セル範囲の選択`または`列の選択`を実行します。このビューは、[Dock Manager](../dock-manager.mdx) の右ペインの一部です。以下のオプションを選択できます。
 - 特定のチャート タイプを選択し、別のペインで可視化します。
 - または、`Data Analysis` コンテキスト ボタンを使用して、さまざまなテキスト書式設定オプションを表示します。
 
 <DocsAside type="info" title="情報">
-[Dock Manager Web コンポーネント](../dock-manager.md)は、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。データを選択した後、いくつかのチャートを作成し、利用可能な領域にドラッグしてピン固定します。
+[Dock Manager Web コンポーネント](../dock-manager.mdx)は、ペインでアプリケーションのレイアウトを管理する方法を提供します。エンド ユーザーはペインをピン固定、サイズ変更、移動、非表示にすることでカスタマイズできます。データを選択した後、いくつかのチャートを作成し、利用可能な領域にドラッグしてピン固定します。
 </DocsAside>
 
 <Sample src="/grid-dynamic-chart-data/data-analysis-dock-manager" height={580} lob iframeOnly fullscreenBtn />
@@ -51,7 +51,7 @@ Keep in mind (sample related):
 
 ## データ分析パッケージ
 
-この機能を使用できるには、以下の手順を実行します。**igniteui-angular-extras** パッケージは [プライベート npm フィード](https://packages.infragistics.com/npm/js-licensed/) でのみ利用できます。[有効な商用ライセンス](ignite-ui-licensing.md#license-agreements) がある場合、プライベート フィードにアクセスできます。
+この機能を使用できるには、以下の手順を実行します。**igniteui-angular-extras** パッケージは [プライベート npm フィード](https://packages.infragistics.com/npm/js-licensed/) でのみ利用できます。[有効な商用ライセンス](ignite-ui-licensing.mdx#license-agreements) がある場合、プライベート フィードにアクセスできます。
 
 始めましょう:
 
@@ -104,15 +104,15 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
 <Sample src="/grid-dynamic-chart-data/data-analysis" height={750} lob iframeOnly fullscreenBtn />
 
 以下のチャート タイプをサポートします。
-- [縦棒チャート](../charts/types/column-chart.md)、
-[エリア チャート](../charts/types/stacked-chart.md)、
-[折れ線チャート](../charts/types/line-chart.md)、
-[棒チャート](../charts/types/line-chart.md)、
-- [積層型チャート](../charts/types/stacked-chart.md)、
-[積層型 100% チャート](../charts/types/stacked-chart.md)、
-- [円チャート](../charts/types/pie-chart.md)、
-[散布図](../charts/types/stacked-chart.md)、
-[バブル チャート](../charts/types/bubble-chart.md)
+- [縦棒チャート](../charts/types/column-chart.mdx)、
+[エリア チャート](../charts/types/stacked-chart.mdx)、
+[折れ線チャート](../charts/types/line-chart.mdx)、
+[棒チャート](../charts/types/line-chart.mdx)、
+- [積層型チャート](../charts/types/stacked-chart.mdx)、
+[積層型 100% チャート](../charts/types/stacked-chart.mdx)、
+- [円チャート](../charts/types/pie-chart.mdx)、
+[散布図](../charts/types/stacked-chart.mdx)、
+[バブル チャート](../charts/types/bubble-chart.mdx)
 意味のあるバブル チャートを表示するために、データが有効な形式でない場合、プレビューを無効にします。
 
 - [Column Chart](/charts/types/column-chart),
@@ -211,6 +211,6 @@ npm install @infragistics/igniteui-angular igniteui-angular-core igniteui-angula
 - [Angular Universal ガイド (英語)](https://angular.io/guide/universal)
 - [Ignite UI スタート キット (英語)](https://github.com/IgniteUI/ng-universal-example)
 - [サーバー サイド レンダリング用語](https://web.dev/articles/rendering-on-the-web?hl=ja)
-- [Ignite UI を使用した作業の開始](getting-started.md)
-- [Ignite UI CLI ガイド](cli/step-by-step-guide.md)
-- [Ignite UI for Angular Schematics ガイド](cli/step-by-step-guide-using-angular-schematics.md)
+- [Ignite UI を使用した作業の開始](getting-started.mdx)
+- [Ignite UI CLI ガイド](./cli/step-by-step-guide-using-cli.mdx)
+- [Ignite UI for Angular Schematics ガイド](./cli/step-by-step-guide-using-angular-schematics.mdx)
diff --git a/docs/angular/src/content/jp/components/general/getting-started.mdx b/docs/angular/src/content/jp/components/general/getting-started.mdx
index 613833bc19..440da311c7 100644
--- a/docs/angular/src/content/jp/components/general/getting-started.mdx
+++ b/docs/angular/src/content/jp/components/general/getting-started.mdx
@@ -21,7 +21,7 @@ import igniteuiProject from '../../images/general/igniteui-project.png';
 
 [`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) は、マテリアルベース UI ウィジェット、コンポーネント & Figma UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップ ブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブ ウェブアプリ (PWA) を作成できます。
 
-Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープン ソース ライセンスが適用されます。詳細については、[Ignite UI のライセンス](./ignite-ui-licensing.md)と[オープン ソースとプレミアム](./open-source-vs-premium.md)のトピックを参照してください。
+Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープン ソース ライセンスが適用されます。詳細については、[Ignite UI のライセンス](./ignite-ui-licensing.mdx)と[オープン ソースとプレミアム](./open-source-vs-premium.mdx)のトピックを参照してください。
 
 ## 前提条件
 
@@ -48,7 +48,7 @@ Angular CLI を使用して Angular アプリケーションを作成するに
 ng new <project name> --style=scss
 ```
 
-`--style` オプションでアプリケーションのスタイルフ ァイルに使用するファイル拡張子またはプリプロセッサを指定できます。コンポーネントのスタイルは [Ignite UI for Angular テーマ ライブラリ](../themes.md) に基づいているため、SCSS を使用することをお勧めします。後で、Ignite UI for Angular パッケージをインストールすると、アプリケーションはデフォルトのスタイリング テーマを使用するように構成され、すべてのコンポーネント インスタンスまたは特定のコンポーネント インスタンスに対して簡単にカスタマイズできます。
+`--style` オプションでアプリケーションのスタイルフ ァイルに使用するファイル拡張子またはプリプロセッサを指定できます。コンポーネントのスタイルは [Ignite UI for Angular テーマ ライブラリ](../themes.mdx) に基づいているため、SCSS を使用することをお勧めします。後で、Ignite UI for Angular パッケージをインストールすると、アプリケーションはデフォルトのスタイリング テーマを使用するように構成され、すべてのコンポーネント インスタンスまたは特定のコンポーネント インスタンスに対して簡単にカスタマイズできます。
 
 その後、次のコマンドを実行して、Ignite UI for Angular パッケージを、その依存関係、フォントのインポートおよびプロジェクトへのスタイル参照とともにインストールできます。
 
@@ -70,7 +70,7 @@ ng add igniteui-angular
 
 - Grid Lite - オープン ソース
 
-[Grid Lite コンポーネント](../grid-lite/overview.md)は、MIT ライセンスで利用できる最小限の機能セットを提供し、軽量で高速なデータ表示を必要とする幅広いプロジェクトに適しています。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。商用版 `IgxGrid` と似た API を持つため、アップグレードも容易です。
+[Grid Lite コンポーネント](../grid-lite/overview.mdx)は、MIT ライセンスで利用できる最小限の機能セットを提供し、軽量で高速なデータ表示を必要とする幅広いプロジェクトに適しています。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。商用版 `IgxGrid` と似た API を持つため、アップグレードも容易です。
 
 ```cmd
 ng add igniteui-grid-lite
@@ -86,7 +86,7 @@ ng add igniteui-dockmanager
 
 ### トライアル版からライセンス版へのアップグレード
 
-**ライセンス版の Ignite UI for Angular パッケージ**の使用を開始する場合、[Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイド](ignite-ui-licensing.md#angular-schematics-または-ignite-ui-cli-を使用したパッケージのアップグレード)に従うことをお勧めします。
+**ライセンス版の Ignite UI for Angular パッケージ**の使用を開始する場合、[Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイド](ignite-ui-licensing.mdx#angular-schematics-または-ignite-ui-cli-を使用したパッケージのアップグレード)に従うことをお勧めします。
 
 以下は、**ライセンス版の Ignite UI for Angular** の使用を開始するために実行する必要がある手順の概要です。プロジェクトのセットアップに応じて、プロジェクトで以下の schematic を実行します。
 
@@ -101,18 +101,18 @@ ig upgrade-packages
 ```
 
 Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。
-[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。
+[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
 
 #### 新しいセットアップで npm レジストリにログイン
 
 上記の方法は、Ignite UI for Angular トライアル版パッケージが既にインストールされているシナリオのみを対象としています。プロジェクトの新しいセットアップを実行する場合、または Ignite UI for Angular を使用する場合は、以下のガイダンスに従ってください。
 
-次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です:
+次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です:
 
 - プライベート レジストリの有効なセットアップを確認します。
 - トライアル版以外のユーザー アカウントとパスワードを指定して npm を使用してプライベート フィードにログインします。
 
-プロセス全体の詳細は[こちらにあります](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。
+プロセス全体の詳細は[こちらにあります](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
 
 ### Angular Schematics & Ignite UI CLI のクイック スタート
 
@@ -128,7 +128,7 @@ npm i -g @igniteui/angular-schematics
 npm install -g igniteui-cli
 ```
 
-[Ignite UI CLI を使用したガイド付きエクスペリエンス](cli/step-by-step-guide-using-cli.md)または [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md) は、構成したアプリケーションをブートストラップする最も簡単な方法です。
+[Ignite UI CLI を使用したガイド付きエクスペリエンス](cli/step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.mdx) は、構成したアプリケーションをブートストラップする最も簡単な方法です。
 
 Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。
 
@@ -143,7 +143,7 @@ ig
 ```
 
 <DocsAside type="info" title="情報">
-[まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.md#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.md#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。
+[まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.mdx#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。
 </DocsAside>
 
 <div style="display:inline-block;">
@@ -154,7 +154,7 @@ ig
     <p style="text-align:center;">はじめての Ignite UI CLI アプリ開発</p>
 </div>
 
-[Angular Schematics & Ignite UI CLI](cli-overview.md) についての詳細。
+[Angular Schematics & Ignite UI CLI](cli-overview.mdx) についての詳細。
 
 ## Ignite UI for Angular の使用
 
@@ -190,7 +190,7 @@ npm start
 
 ### コンポーネントの自動追加
 
-Angular 19 以降では、スタンドアロン コンポーネントが Angular アプリを構築するためのデフォルトの方法となり、`NgModules` が不要になりました。これにより、コンポーネントの追加プロセスが大幅に簡略化されます。ここでは、この仕組みを利用してアプリに [**igxGrid**](../grid/grid.md) コンポーネントを追加してみましょう。
+Angular 19 以降では、スタンドアロン コンポーネントが Angular アプリを構築するためのデフォルトの方法となり、`NgModules` が不要になりました。これにより、コンポーネントの追加プロセスが大幅に簡略化されます。ここでは、この仕組みを利用してアプリに [**igxGrid**](../grid/grid.mdx) コンポーネントを追加してみましょう。
 
 開始する前にご注意ください。一部のコンポーネントにはアニメーションがあり、それらを利用するには `bootstrapApplication` 呼び出しの一部としてプロバイダーが必要です。
 
@@ -298,15 +298,15 @@ The final result should look something like this:
 
 Ignite UI for Angular には**エージェントのスキル**が付属しています。これは、AI コーディング アシスタント (GitHub Copilot、Cursor、Windsurf、Claude、JetBrains AI など) にライブラリの使用方法を教える構造化された知識ファイルです。スキルには、コンポーネント、データ グリッド、グリッド データ操作、テーマ設定が含まれます。
 
-詳細については、[Ignite UI for Angular スキル](../ai/skills.md)トピックを参照してください。
+詳細については、[Ignite UI for Angular スキル](../ai/skills.mdx)トピックを参照してください。
 
 ## その他のリソース
 
-- [Ignite UI for Angular スキル](../ai/skills.md)
+- [Ignite UI for Angular スキル](../ai/skills.mdx)
 - [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli)
 - [Ignite UI CLI コマンド](https://github.com/IgniteUI/igniteui-cli/wiki#available-commands)
-- [Grid の概要](../grid/grid.md)
-- [Grid Lite の概要](../grid-lite/overview.md)
+- [Grid の概要](../grid/grid.mdx)
+- [Grid Lite の概要](../grid-lite/overview.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/general/how-to/general-how-to-mcp-e2e.mdx b/docs/angular/src/content/jp/components/general/how-to/general-how-to-mcp-e2e.mdx
index 5a8e5d7d46..18b4a59c8c 100644
--- a/docs/angular/src/content/jp/components/general/how-to/general-how-to-mcp-e2e.mdx
+++ b/docs/angular/src/content/jp/components/general/how-to/general-how-to-mcp-e2e.mdx
@@ -40,7 +40,7 @@ CLI MCP と Theming MCP は、Ignite UI for Angular 開発ワークフローに
 
 この手順は、Ignite UI CLI がプロジェクトをスキャフォールドし、VS Code の最初の MCP 構成を自動的に準備する **CLI ファースト** のセットアップで最も効果的に機能します。
 
-各クライアントの詳細なセットアップ リファレンスが必要な場合は、「[Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md)」および「[Ignite UI Theming MCP](~/components/ai/theming-mcp.md)」を参照してください。
+各クライアントの詳細なセットアップ リファレンスが必要な場合は、「[Angular Schematics & Ignite UI CLI](../cli-overview.mdx)」および「[Ignite UI Theming MCP](../../ai/theming-mcp.mdx)」を参照してください。
 
 ## 手順 1: Ignite UI CLI から開始する
 
@@ -247,9 +247,9 @@ npx ig new my-app --framework=angular
 
 ## 関連トピック
 
-- [Angular Schematics & Ignite UI CLI](~/components/general/cli-overview.md)
-- [Ignite UI Theming MCP](~/components/ai/theming-mcp.md)
-- [Ignite UI for Angular スキル](~/components/ai/skills.md)
+- [Angular Schematics & Ignite UI CLI](../cli-overview.mdx)
+- [Ignite UI Theming MCP](../../ai/theming-mcp.mdx)
+- [Ignite UI for Angular スキル](../../ai/skills.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx b/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx
index fa172fce4e..be8fba914f 100644
--- a/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx
+++ b/docs/angular/src/content/jp/components/general/how-to/how-to-customize-theme.mdx
@@ -39,7 +39,7 @@ import optimizingAfterModuleLazyload from '../../../images/general/theming-walkt
 
 <Image src={gettingStartedRunningApp} alt="Getting Started Running App" class="responsive-img" />
 
-ご覧のとおり、アプリケーションはデフォルトのテーマ [Material Light バリアント](../../themes/sass/presets/material.md)を適用しています。生成された `styles.scss` ファイルは以下のようになります。
+ご覧のとおり、アプリケーションはデフォルトのテーマ [Material Light バリアント](../../themes/sass/presets/material.mdx)を適用しています。生成された `styles.scss` ファイルは以下のようになります。
 
 ```scss
 /* You can add global styles to this file, and also import other style files */
@@ -74,7 +74,7 @@ html, body {
 
 ## テーマのカスタマイズ
 
-同じテーマのダーク バリエーションが必要で、独自の[カラー パレット](../../themes/palettes.md)をブランディングに合わせて追加し、フォントをデフォルトの `Titillium Web` ではなく `Poppins` に変更します。これらはすべて App Builder から直接変更でき、その変更を App Builder からプル リクエストとしてリポジトリにプッシュできます。
+同じテーマのダーク バリエーションが必要で、独自の[カラー パレット](../../themes/palettes.mdx)をブランディングに合わせて追加し、フォントをデフォルトの `Titillium Web` ではなく `Poppins` に変更します。これらはすべて App Builder から直接変更でき、その変更を App Builder からプル リクエストとしてリポジトリにプッシュできます。
 
 <Image src={gettingStartedAppbuilderTheming} alt="Getting Started App Builder Theming" class="responsive-img" />
 
@@ -97,11 +97,11 @@ $custom-palette: palette(
 );
 ```
 
-ご覧のように、コード生成は特定の `@include light-theme($light-material-palette);` (これは[デフォルト テーマ](../../themes/sass/presets/material.md)と[カラー パレット](../../themes/palettes.md))から、一般的な <ApiLink kind="sass" module="themes" type="mixin-theme" label="theme()" code={true} /> include に変わり、パラメーターとしてカスタム カラー パレットとテーマ構造のための [dark material schema](../../themes/sass/schemas.md) が提供されるようになりました。実行中の Angular アプリの結果は以下のようになります。
+ご覧のように、コード生成は特定の `@include light-theme($light-material-palette);` (これは[デフォルト テーマ](../../themes/sass/presets/material.mdx)と[カラー パレット](../../themes/palettes.mdx))から、一般的な <ApiLink kind="sass" module="themes" type="mixin-theme" label="theme()" code={true} /> include に変わり、パラメーターとしてカスタム カラー パレットとテーマ構造のための [dark material schema](../../themes/sass/schemas.mdx) が提供されるようになりました。実行中の Angular アプリの結果は以下のようになります。
 
 <Image src={gettingStartedDarkApp} alt="Getting Started Dark App" class="responsive-img" />
 
-アプリケーションで特定の[コンポーネント テーマ](../../themes/sass/component-themes.md)をさらに掘り下げてカスタマイズしたいので、個々のコンポーネント テーマの CSS 変数を取り込んでこれを行います。この場合、グリッド ツールバーのテーマです。
+アプリケーションで特定の[コンポーネント テーマ](../../themes/sass/component-themes.mdx)をさらに掘り下げてカスタマイズしたいので、個々のコンポーネント テーマの CSS 変数を取り込んでこれを行います。この場合、グリッド ツールバーのテーマです。
 
 ```scss
 @include core();
@@ -226,11 +226,11 @@ $custom-palette-light: palette(
 
 Ignite UI テーマは、複数の次元のテーマを抽象化し、非常に堅牢なテーマ変更機能を提供します。開発者とデザイナーは、テーマ エンジン API を利用して、アプリケーションに合わせたビジュアル デザインを作成できます。これにより、Ignite UI for Angular を使用する際に独自のルック アンド フィールが得られます。テーマ エンジンは、各ディメンションからの変数も公開します。これを使用して、Ignite UI for Angular コンポーネントで UI として直接構築されていない残りのアプリケーション構造にテーマを適用できます。変更のために公開されるディメンションは次のとおりです。
 
-- [色](../../themes/sass/palettes.md) (カラー パレット)
-- [形状](../../themes/sass/roundness.md) (境界線と半径)
-- [標高](../../themes/sass/elevations.md) (影)
-- [タイポグラフィ](../../themes/sass/typography.md) (フォントとフォント サイズ)
-- [サイズ](../../display-density.md) (画面に収まる情報のサイズ)
+- [色](../../themes/sass/palettes.mdx) (カラー パレット)
+- [形状](../../themes/sass/roundness.mdx) (境界線と半径)
+- [標高](../../themes/sass/elevations.mdx) (影)
+- [タイポグラフィ](../../themes/sass/typography.mdx) (フォントとフォント サイズ)
+- [サイズ](../../display-density.mdx) (画面に収まる情報のサイズ)
 
 <DocsAside type="info" title="情報">
 完全にカスタマイズされたビジュアル デザインが必要な場合は、サポートされているすべてのテーマ ディメンションを変更する必要があり、Sass API を最大限に活用できます。  
@@ -430,10 +430,10 @@ $include: (
 
 関連トピック:
 
-- [パレット](../../themes/sass/palettes.md)
-- [エレベーション](../../themes/sass/elevations.md)
-- [タイポグラフィ](../../themes/sass/typography.md)
-- [Sass を使用したテーマ](../../themes/sass/index.md)
+- [パレット](../../themes/sass/palettes.mdx)
+- [エレベーション](../../themes/sass/elevations.mdx)
+- [タイポグラフィ](../../themes/sass/typography.mdx)
+- [Sass を使用したテーマ](../../themes/sass/index.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx b/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx
index d98c4442da..b5c2eabc93 100644
--- a/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx
+++ b/docs/angular/src/content/jp/components/general/how-to/how-to-perform-crud.mdx
@@ -69,14 +69,14 @@ export class CRUDService {
 }
 ```
 
-上記のサービスに欠けているのは、フィルタリング / ソート / ページングなどの構成です。エンドポイントの正確な API 実装によっては、サーバーへのリクエストで、フィルタリング / ソート / ページングを処理するためのオプションのパラメーターが必要になる場合があります。コード例を伴うデモについては、[リモート データ操作](../../grid/remote-data-operations.md)を参照してください。
+上記のサービスに欠けているのは、フィルタリング / ソート / ページングなどの構成です。エンドポイントの正確な API 実装によっては、サーバーへのリクエストで、フィルタリング / ソート / ページングを処理するためのオプションのパラメーターが必要になる場合があります。コード例を伴うデモについては、[リモート データ操作](../../grid/remote-data-operations.mdx)を参照してください。
 
 その他の例とガイダンスについては、公式の Angular ドキュメントの [HTTP Services (英語)](https://angular.io/tutorial/toh-pt6) チュートリアルを参照してください。
 
 
 ## グリッドを使用した CRUD 操作
 
-グリッドで CRUD を有効にするということは、ユーザーがグリッド内からこれらの CRUD 操作を実行するための UI を提供することを意味します。これは非常に簡単です。グリッドには、[**セル編集**](../../grid/cell-editing.md)、[**行編集**](../../grid/row-editing.md)、[**行追加**](../../grid/row-adding.md)、**行削除** UI が用意されており、これを独自に実行するための強力な API が用意されています。次に、各編集アクションの結果を取得し、それを CRUD サービスの対応するメソッドに伝達して、元のデータベースへのすべての変更を保持します。これを完了することで、グリッドで CRUD が有効になっていると言えます。
+グリッドで CRUD を有効にするということは、ユーザーがグリッド内からこれらの CRUD 操作を実行するための UI を提供することを意味します。これは非常に簡単です。グリッドには、[**セル編集**](../../grid/cell-editing.mdx)、[**行編集**](../../grid/row-editing.mdx)、[**行追加**](../../grid/row-adding.mdx)、**行削除** UI が用意されており、これを独自に実行するための強力な API が用意されています。次に、各編集アクションの結果を取得し、それを CRUD サービスの対応するメソッドに伝達して、元のデータベースへのすべての変更を保持します。これを完了することで、グリッドで CRUD が有効になっていると言えます。
 
 
 このセクションは、グリッドで CRUD 操作を有効にするためのチュートリアルであり、コード スニペットを取得してコードにコピーし貼り付けることができます。
@@ -84,7 +84,7 @@ export class CRUDService {
 
 ## 操作方法
 
-まず、rowEditing 動作を有効にし、編集アクションに必要な UI を用意して、`IgxActionStrip` ([`IgxActionStrip`](../../action-strip.md) の詳細を参照) を利用し、イベント ハンドラーをアタッチします。
+まず、rowEditing 動作を有効にし、編集アクションに必要な UI を用意して、`IgxActionStrip` ([`IgxActionStrip`](../../action-strip.mdx) の詳細を参照) を利用し、イベント ハンドラーをアタッチします。
 
 ```html
 <igx-grid 
@@ -139,7 +139,7 @@ this._crudService.delete(event.data).subscribe({
 ```
 
 <DocsAside type="info" title="情報">
-上記の例は、アクションを編集するためのデフォルトのグリッド UI に基づいています。もう 1 つの有効なアプローチは、独自の外部 UI を提供する場合です。このような場合、UI を使用したユーザーの操作への応答は、グリッド編集 API で機能する必要があります (**グリッドに primaryKey が設定されていることを確認してください**)。参考のために [**API**](how-to-perform-crud.md#api-の編集) セクションを参照してください。
+上記の例は、アクションを編集するためのデフォルトのグリッド UI に基づいています。もう 1 つの有効なアプローチは、独自の外部 UI を提供する場合です。このような場合、UI を使用したユーザーの操作への応答は、グリッド編集 API で機能する必要があります (**グリッドに primaryKey が設定されていることを確認してください**)。参考のために [**API**](how-to-perform-crud.mdx#api-の編集) セクションを参照してください。
 </DocsAside>
 
 ```typescript
@@ -162,15 +162,15 @@ this._crudService.delete(event.data).subscribe({
 ## カスタマイズ
 
 豊富な Grid API を使用すると、ニーズに合わせて編集プロセスをほぼすべての方法でカスタマイズできます。これには以下が含まれますが、これらに限定されません:
-- [**一括編集**](how-to-perform-crud.md#一括編集):  一括編集を有効にすると、すべての更新を一括処理し、単一のリクエストですべてをコミットできます。
-- [**テンプレート**](how-to-perform-crud.md#テンプレート):  セル編集用のテンプレートを追加するか、行 / セル編集、行追加、および行削除に独自の外部 UI を使用します。
-- [**イベント**](how-to-perform-crud.md#イベント):  編集フローを監視し、それに応じて対応します。編集中に発行されたすべてのイベントにイベント ハンドラーをアタッチすると、次のことが可能になります:
+- [**一括編集**](how-to-perform-crud.mdx#一括編集):  一括編集を有効にすると、すべての更新を一括処理し、単一のリクエストですべてをコミットできます。
+- [**テンプレート**](how-to-perform-crud.mdx#テンプレート):  セル編集用のテンプレートを追加するか、行 / セル編集、行追加、および行削除に独自の外部 UI を使用します。
+- [**イベント**](how-to-perform-crud.mdx#イベント):  編集フローを監視し、それに応じて対応します。編集中に発行されたすべてのイベントにイベント ハンドラーをアタッチすると、次のことが可能になります:
   - セルごとのデータ検証
   - 行ごとのデータ検証
   - 予想される入力タイプの入力をユーザーにプロンプト
   - ビジネス ルールに基づいて、それ以上の処理をキャンセル
   - 変更の手動コミット
-- [**リッチな API**](how-to-perform-crud.md#api-の編集)
+- [**リッチな API**](how-to-perform-crud.mdx#api-の編集)
 
 - [**Batch Editing**](/general/how-to/how-to-perform-crud#batch-editing): Enable Batch Editing to batch all updates, and commit everything with single request.
 - [**Templating**](/general/how-to/how-to-perform-crud#templates): Add templates for cell editing, or use your own external UI for row/cell editing, row adding and row deleting.
@@ -190,11 +190,11 @@ this._crudService.delete(event.data).subscribe({
  <igx-grid [batchEditing]="'true'" ...>
  ```
 
-詳細とデモ サンプルについては、[一括編集](../../grid/batch-editing.md)にアクセスしてください。
+詳細とデモ サンプルについては、[一括編集](../../grid/batch-editing.mdx)にアクセスしてください。
 
 ## テンプレート
 
-デフォルトのセル編集テンプレートの詳細については、[一般的な編集トピック](../../grid/editing.md#テンプレートの編集)を参照してください。
+デフォルトのセル編集テンプレートの詳細については、[一般的な編集トピック](../../grid/editing.mdx#テンプレートの編集)を参照してください。
 
 セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、<ApiLink type="CellTemplateDirective" label="igxCellEditor` ディレクティブ" />を使用できます。これを行うには、`igxCellEditor` ディレクティブでマークされた `ng-template` を渡し、カスタム コントロールを <ApiLink type="GridCell" member="editValue" label="cell.editValue" /> に適切にバインドする必要があります。
 
@@ -210,11 +210,11 @@ this._crudService.delete(event.data).subscribe({
 </igx-column>
 ```
 
-詳細とデモについては、[セル編集](../../grid/cell-editing.md)のトピックを参照してください。
+詳細とデモについては、[セル編集](../../grid/cell-editing.mdx)のトピックを参照してください。
 
 ## イベント
 
-グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行編集**](../../grid/row-editing.md)および[**セル編集**](../../grid/cell-editing.md)のライフサイクル中、つまり編集アクションを開始、コミット、またはキャンセルするときに発生します。
+グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行編集**](../../grid/row-editing.mdx)および[**セル編集**](../../grid/cell-editing.mdx)のライフサイクル中、つまり編集アクションを開始、コミット、またはキャンセルするときに発生します。
 
  | イベント | 説明 | 引数 | キャンセル可能 |
 |-------|-------------|-----------|-------------|
@@ -227,7 +227,7 @@ this._crudService.delete(event.data).subscribe({
 | <ApiLink type="Grid" member="rowEditDone" label="rowEditDone" /> | `rowEditing` が有効になっている場合、行が編集され、新しい行の値が**コミットされた後に**発生します。 | <ApiLink kind="interface" type="IGridEditEventArgs" /> | `false` |
 | <ApiLink type="Grid" member="rowEditExit" label="rowEditExit" /> | `rowEditing` が有効になっている場合、行が**編集モードを終了する**と発生します。 | <ApiLink kind="interface" type="IGridEditEventArgs" /> | `false` |
 
-詳細とデモ サンプルについては、[イベント](../../grid/editing.md#イベントの引数とシーケンス)にアクセスしてください。
+詳細とデモ サンプルについては、[イベント](../../grid/editing.mdx#イベントの引数とシーケンス)にアクセスしてください。
 
 ## API の編集
 
@@ -239,7 +239,7 @@ this._crudService.delete(event.data).subscribe({
 
 また、<ApiLink type="GridCell" /> インスタンスと <ApiLink type="GridRow" /> インスタンスによって公開される `update` メソッドによって実現されます:
 
-グリッド API の使用に関する詳細と情報は、[セル編集 CRUD 操作](../../grid/cell-editing.md#crud-操作)セクションにあります。
+グリッド API の使用に関する詳細と情報は、[セル編集 CRUD 操作](../../grid/cell-editing.mdx#crud-操作)セクションにあります。
 
 ```typescript
 // Through the grid methods
diff --git a/docs/angular/src/content/jp/components/general/how-to/how-to-use-standalone-components.mdx b/docs/angular/src/content/jp/components/general/how-to/how-to-use-standalone-components.mdx
index c6f86ac2d7..89e10fbdd9 100644
--- a/docs/angular/src/content/jp/components/general/how-to/how-to-use-standalone-components.mdx
+++ b/docs/angular/src/content/jp/components/general/how-to/how-to-use-standalone-components.mdx
@@ -104,8 +104,8 @@ import { IgxGridModule } from 'igniteui-angular/grids/grid';
 関連トピック:
 
 - [スタンドアロン コンポーネント](https://angular.io/guide/standalone-components)
-- [Ignite UI を使用した作業の開始](../getting-started.md)
-- [Angular のサーバー サイド レンダリング](../ssr-rendering.md)
+- [Ignite UI を使用した作業の開始](../getting-started.mdx)
+- [Angular のサーバー サイド レンダリング](../ssr-rendering.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx b/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx
index eb487dc2fa..a25439b4e6 100644
--- a/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx
+++ b/docs/angular/src/content/jp/components/general/ignite-ui-licensing.mdx
@@ -18,7 +18,7 @@ import azureCiAddTokenVariable1 from '../../images/general/azure-ci-add-token-va
 
 Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープン ソース ライセンスが適用されます。
 
-どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープン ソースとプレミアム](./open-source-vs-premium.md) トピックに詳しく記載されています。
+どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープン ソースとプレミアム](./open-source-vs-premium.mdx) トピックに詳しく記載されています。
 
 ## 使用許諾契約
 
@@ -41,7 +41,7 @@ Ignite UI for Angular はデュアルライセンス モデルで提供され、
 
 Npm は Node.js ランタイム環境で使用する一般的なデフォルト パッケージ マネージャーです。広く採用されており、プロジェクトに依存するパッケージをすばやく簡単に処理できます。npm の使用方法の詳細については、[npm ヘルプ](https://docs.npmjs.com/)を参照してください。
 
-Infragistics Ignite UI for Angular は npm パッケージとして提供され、[`Ignite UI CLI`](./cli/step-by-step-guide-using-cli.md) または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.md) でプロジェクトに依存関係として追加できます。Ignite UI for Angular のコンポーネントを MIT ライセンスのコンポーネントのみ利用する場合、追加の手続きは不要です。ただし、商用ライセンス コンポーネントを使用する場合 npm からパッケージをダウンロードすると[トライアル期間](https://jp.infragistics.com/products/ignite-ui-angular)が開始されます。
+Infragistics Ignite UI for Angular は npm パッケージとして提供され、[`Ignite UI CLI`](./cli/step-by-step-guide-using-cli.mdx) または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) でプロジェクトに依存関係として追加できます。Ignite UI for Angular のコンポーネントを MIT ライセンスのコンポーネントのみ利用する場合、追加の手続きは不要です。ただし、商用ライセンス コンポーネントを使用する場合 npm からパッケージをダウンロードすると[トライアル期間](https://jp.infragistics.com/products/ignite-ui-angular)が開始されます。
 
 <DocsAside type="info" title="情報">
 トライアル版の使用を開始するとはどういう意味ですか? これは、Web ビューの**ウォーターマーク**部分を含む製品バージョンを使用することを意味します。ライセンス パッケージを有効期限が切れる前に一定期間 (たとえば、1 か月間) 使用するという意味ではありません。
@@ -49,14 +49,14 @@ Infragistics Ignite UI for Angular は npm パッケージとして提供され
 
 Infragistics Ignite UI Dock Manager Web コンポーネントは、別の npm パッケージとして利用できます。インストールすると、製品の [Ignite UI Dock Manager Web コンポーネント トライアル版](https://jp.infragistics.com/products/ignite-ui-angular)の使用が開始されます。
 
-> Ignite UI for Angular npm パッケージの使用方法の詳細については、[このトピック](getting-started.md#ignite-ui-for-angular-のインストール)を参照してください。Ignite UI Dock Manager Web コンポーネントの詳細については、[こちら](../dock-manager.md)を参照してください。
+> Ignite UI for Angular npm パッケージの使用方法の詳細については、[このトピック](getting-started.mdx#ignite-ui-for-angular-のインストール)を参照してください。Ignite UI Dock Manager Web コンポーネントの詳細については、[こちら](../dock-manager.mdx)を参照してください。
 
 ### Angular Schematics または Ignite UI CLI を使用したパッケージのアップグレード
 
-Ignite UI for Angular が [`ng add`](./getting-started.md) を使用してプロジェクトに追加された場合、またはプロジェクトが [schematic コレクション](./cli/getting-started-with-angular-schematics.md)または [Ignite UI CLI](./cli/getting-started-with-cli.md) を使用して作成された場合、`upgrade-packages` を使用して、ライセンス パッケージを使用するようにアプリを自動的にアップグレードできます。プロジェクト パッケージの依存関係には、`@igniteui/angular-schematics` または `igniteui-cli` が含まれ、どちらも upgrade コマンドをサポートします。
+Ignite UI for Angular が [`ng add`](./getting-started.mdx) を使用してプロジェクトに追加された場合、またはプロジェクトが [schematic コレクション](./cli/getting-started-with-angular-schematics.mdx)または [Ignite UI CLI](./cli/getting-started-with-cli.mdx) を使用して作成された場合、`upgrade-packages` を使用して、ライセンス パッケージを使用するようにアプリを自動的にアップグレードできます。プロジェクト パッケージの依存関係には、`@igniteui/angular-schematics` または `igniteui-cli` が含まれ、どちらも upgrade コマンドをサポートします。
 
 <DocsAside type="info" title="情報">
-パッケージが変更されるため、切り替える前にプロジェクトを更新することをお勧めします。このように、Ignite UI Angular の高いバージョンを使用せず、更新の移行のトラブルを防止します。[アップデート ガイド](./update-guide.md)を参照してください。
+パッケージが変更されるため、切り替える前にプロジェクトを更新することをお勧めします。このように、Ignite UI Angular の高いバージョンを使用せず、更新の移行のトラブルを防止します。[アップデート ガイド](./update-guide.mdx)を参照してください。
 </DocsAside>
 
 プロジェクトのセットアップに応じて、プロジェクトで以下の schematic を実行します。
diff --git a/docs/angular/src/content/jp/components/general/open-source-vs-premium.mdx b/docs/angular/src/content/jp/components/general/open-source-vs-premium.mdx
index 64a70fd6fb..d57bf9a634 100644
--- a/docs/angular/src/content/jp/components/general/open-source-vs-premium.mdx
+++ b/docs/angular/src/content/jp/components/general/open-source-vs-premium.mdx
@@ -27,14 +27,14 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
 
 ### グリッドと高度なコンポーネント
 
-- [データ グリッド](../grid/grid.md)、[階層グリッド](../hierarchicalgrid/hierarchical-grid.md)、[ツリー グリッド](../treegrid/tree-grid.md)、[ピボット グリッド](../pivotgrid/pivot-grid.md)
-- [ドック マネージャー](../dock-manager.md)
-- [クエリ ビルダー](../query-builder.md)
-- [チャート ライブラリ](../charts/chart-overview.md)
-- [マップ ライブラリ](../geo-map.md)
-- [Excel ライブラリ](../excel-library.md)
-- [スプレッドシート](../spreadsheet-overview.md)
-- ゲージ - [ブレットグラフ](../bullet-graph.md)、[リニアゲージ](../linear-gauge.md)および[ラジアルゲージ](../radial-gauge.md)
+- [データ グリッド](../grid/grid.mdx)、[階層グリッド](../hierarchicalgrid/hierarchical-grid.mdx)、[ツリー グリッド](../treegrid/tree-grid.mdx)、[ピボット グリッド](../pivotgrid/pivot-grid.mdx)
+- [ドック マネージャー](../dock-manager.mdx)
+- [クエリ ビルダー](../query-builder.mdx)
+- [チャート ライブラリ](../charts/chart-overview.mdx)
+- [マップ ライブラリ](../geo-map.mdx)
+- [Excel ライブラリ](../excel-library.mdx)
+- [スプレッドシート](../spreadsheet-overview.mdx)
+- ゲージ - [ブレットグラフ](../bullet-graph.mdx)、[リニアゲージ](../linear-gauge.mdx)および[ラジアルゲージ](../radial-gauge.mdx)
 
 すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。<Badge variant="premium" />
 
diff --git a/docs/angular/src/content/jp/components/general/ssr-rendering.mdx b/docs/angular/src/content/jp/components/general/ssr-rendering.mdx
index 958d294fca..6d4c61e387 100644
--- a/docs/angular/src/content/jp/components/general/ssr-rendering.mdx
+++ b/docs/angular/src/content/jp/components/general/ssr-rendering.mdx
@@ -55,7 +55,7 @@ ng serve
 
 ## ゼロから新しいアプリケーションを作成する
 
-1. `ng new` または [Ignite UI CLI](./cli/getting-started-with-cli.md) `ig new` コマンドを使用します。または、`ng new --ssr` を使用して、手順 3 をスキップし、新しい Angular SSR プロジェクトを直接作成します。
+1. `ng new` または [Ignite UI CLI](./cli/getting-started-with-cli.mdx) `ig new` コマンドを使用します。または、`ng new --ssr` を使用して、手順 3 をスキップし、新しい Angular SSR プロジェクトを直接作成します。
 2. ライブラリの npm パッケージをワークスペースにインストールし、そのライブラリを使用するように現在の作業ディレクトリにプロジェクトを構成する `ng add igniteui-angular` コマンドを実行します。
 3. `ng add @angular/ssr` を使用して Angular SSR を追加します。
 4. Ignite UI for Angular コンポーネント (Grid、Calendar など) を追加します。
@@ -75,6 +75,6 @@ ng serve
 
 - [Angular SSR ガイド (英語)](https://angular.jp/guide/ssr)
 - [サーバー サイド レンダリング用語](https://web.dev/articles/rendering-on-the-web?hl=ja)
-- [Ignite UI for Angular を使用した作業の開始](getting-started.md)
-- [Ignite UI CLI ガイド](cli/step-by-step-guide-using-cli.md)
-- [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.md)
+- [Ignite UI for Angular を使用した作業の開始](getting-started.mdx)
+- [Ignite UI CLI ガイド](cli/step-by-step-guide-using-cli.mdx)
+- [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.mdx)
diff --git a/docs/angular/src/content/jp/components/general/update-guide.mdx b/docs/angular/src/content/jp/components/general/update-guide.mdx
index b1a5be9d38..950242e66c 100644
--- a/docs/angular/src/content/jp/components/general/update-guide.mdx
+++ b/docs/angular/src/content/jp/components/general/update-guide.mdx
@@ -174,7 +174,7 @@ ng update igniteui-angular
 ng update igniteui-angular --migrate-only --from=20.1.0 --to=21.0.0
 ```
 
-エントリ ポイント、移行オプション、破壊的変更、および使用例の詳細については、[コード分割とマルチ エントリ ポイント ガイド](code-splitting-and-multiple-entry-points.md)を参照してください。
+エントリ ポイント、移行オプション、破壊的変更、および使用例の詳細については、[コード分割とマルチ エントリ ポイント ガイド](code-splitting-and-multiple-entry-points.mdx)を参照してください。
 
 ### 依存性注入のリファクタリング
 
@@ -1027,7 +1027,7 @@ To get a better grasp on the Sass Module System, you can read [this great articl
 ### グリッド
 
 - 重大な変更:
-  - <ApiLink type="Paginator" /> - グリッドでページネーターがインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`[paging]="true"` プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。[ページング トピック](../grid/paging.md)で説明されているように、`Grid Paging` 機能を有効にするためのガイドに従うことをお勧めします。
+  - <ApiLink type="Paginator" /> - グリッドでページネーターがインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`[paging]="true"` プロパティはすべてのグリッドから削除され、グリッド内のページネーターに関連する他のすべてのプロパティは非推奨です。[ページング トピック](../grid/paging.mdx)で説明されているように、`Grid Paging` 機能を有効にするためのガイドに従うことをお勧めします。
   - <ApiLink type="PageSizeSelector" /> および <ApiLink type="PageNavigation" /> が導入され、カスタム コンテンツの実装が容易になりました。
 
     ```html
@@ -1352,7 +1352,7 @@ grid.getRowByIndex(0).expanded = false;
 
 - IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
   - グリッドでツール バーをインスタンス化される方法が変更されました。グリッド ツリーに投影される別個のコンポーネントになりました。したがって、`showToolbar` プロパティはすべてのグリッドから削除され、グリッド内のツールバーに関連する他のすべてのプロパティは非推奨です。
-    [ツールバー トピック](../grid/toolbar.md)で説明されているように、ツールバー機能を有効にするための推奨される方法に従うことをお勧めします。
+    [ツールバー トピック](../grid/toolbar.mdx)で説明されているように、ツールバー機能を有効にするための推奨される方法に従うことをお勧めします。
   - `igxToolbarCustomContent` ディレクティブが削除されました。移行により、テンプレート コンテンツがツールバー コンテンツ内に移動しますが、テンプレート バインディングは解決されません。移行後は、必ずテンプレート ファイルを確認してください。
   - ツールバー コンポーネントの API はリファクタリング中に変更され、古いプロパティの多くが削除されました。残念ながら、これらの変更に対して適切な移行を行うことはとても複雑であるため、エラーはプロジェクト レベルで処理する必要があります。
 
@@ -1370,7 +1370,7 @@ grid.getRowByIndex(0).expanded = false;
 ## 10.0.x から 10.1.x の場合
 
 - IgxGrid、IgxTreeGrid、IgxHierarchicalGrid
-  - Excel スタイル フィルター メニューを再テンプレート化するための `IgxExcelStyleSortingTemplateDirective`、`IgxExcelStyleHidingTemplateDirective`、`IgxExcelStyleMovingTemplateDirective`、`IgxExcelStylePinningTemplateDirective`、`IgxExcelStyleSelectingTemplateDirective` ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ - `IgxExcelStyleColumnOperationsTemplateDirective` と `IgxExcelStyleFilterOperationsTemplateDirective` を使用できます。テンプレート内で使用するために、Excel スタイル フィルター メニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、この[トピック](../grid/excel-style-filtering.md#テンプレート)をご覧ください。
+  - Excel スタイル フィルター メニューを再テンプレート化するための `IgxExcelStyleSortingTemplateDirective`、`IgxExcelStyleHidingTemplateDirective`、`IgxExcelStyleMovingTemplateDirective`、`IgxExcelStylePinningTemplateDirective`、`IgxExcelStyleSelectingTemplateDirective` ディレクティブは削除されたため、列操作とフィルター操作領域を再テンプレート化するために新しく追加されたディレクティブ - `IgxExcelStyleColumnOperationsTemplateDirective` と `IgxExcelStyleFilterOperationsTemplateDirective` を使用できます。テンプレート内で使用するために、Excel スタイル フィルター メニューのすべての内部コンポーネントも公開しました。新しいテンプレートディレクティブの使用に関する詳細は、この[トピック](../grid/excel-style-filtering.mdx#テンプレート)をご覧ください。
 - IgxGrid
   - `selectedRows()` メソッドは、`selectedRows`入力プロパティに変更されました。この重大な変更により、ユーザーは実行時にグリッドの選択状態を簡単に変更できます。行の事前選択もサポートされています。`selectedRows()` メソッドが呼び出されるすべてのインスタンスは、括弧なしで書き換える必要があります。
   - `selectedRows` 入力のバインディングは次のようになります:
diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx
index e6f4c02f00..4339565c62 100644
--- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx
+++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/one-way-binding.mdx
@@ -150,7 +150,7 @@ Angular のプロパティ バインディングは、HTML 要素またはディ
 ## その他のリソース
 
 - [デスクトップから Web: Angular 補間とプロパティバインディングによる一方向データバインディング](https://www.youtube.com/watch?v=fP7iVhFNTOk&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
-- [双方向バインディング](two-way-binding.md)
+- [双方向バインディング](two-way-binding.mdx)
 - [Angular データの表示](https://angular.io/guide/displaying-data#displaying-data)
 
 <hr/>
diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/two-way-binding.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/two-way-binding.mdx
index 88f8d8aaa3..1e70685699 100644
--- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/two-way-binding.mdx
+++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/two-way-binding.mdx
@@ -86,7 +86,7 @@ import { FormsModule } from '@angular/forms';
 ## その他のリソース
 
 - [デスクトップから Web: デスクトップから Web: ngModel を使用した Angular 双方向バインディング](https://www.youtube.com/watch?v=MrjTTDEj7cA&list=PLG8rj6Rr0BU-AqcJMuwggKy0GMIkjkt3j)
-- [Angular 一方向バインディング](one-way-binding.md)
+- [Angular 一方向バインディング](one-way-binding.mdx)
 - [Angular NgModel](https://angular.io/api/forms/NgModel)
 
 <hr/>
diff --git a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.mdx b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.mdx
index acc80a88a7..24a8885c25 100644
--- a/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.mdx
+++ b/docs/angular/src/content/jp/components/general/wpf-to-angular-guide/wpf-to-angular-guide.mdx
@@ -21,35 +21,35 @@ import wpfToAngularGuide from '../../../images/general/wpf_to_angular_guide.png'
 
 ガイドは以下のトピックで構成されています:
 
-## [はじめての Angular アプリを作成](create-first-angular-app.md)
+## [はじめての Angular アプリを作成](create-first-angular-app.mdx)
 
 はじめに、Angular を使用した最新の Web アプリ開発の前提条件をインストールする必要があります。このセクションでは、Node.js パッケージ マネージャの使用、Visual Studio Code IDE のインストール、および最新の Web 開発に必要な基本概念について説明します。このトピックの[ビデオ チュートリアル](https://youtu.be/dhjrAPPad54)をご覧ください。
 
-## [Angular コンポーネントを使用した UI の作成](create-ui-with-components.md)
+## [Angular コンポーネントを使用した UI の作成](create-ui-with-components.mdx)
 
 Angularで UI を作成する方法は、WPF で UI を作成する方法と非常に似ています。通常、UserControl クラスで表されるユーザー コントロールを使用します。UserControl は、マークアップとコードを再利用可能なコンテナーにグループ化し、複数の異なる場所で同じインターフェイスと機能を使用できるようにします。Angular のコンポーネントの理解は、このシリーズの残りの部分に重要です。はじめに、WPF コンポーネントがどのように Angular のコンポーネントに変換されるかを説明します。このトピックの[ビデオ チュートリアル](https://youtu.be/z1SZUezpRXY)をご覧ください。
 
-## [Angular 一方向バインディング](one-way-binding.md)
+## [Angular 一方向バインディング](one-way-binding.mdx)
 
 WPF で最も強力で広く使用されている機能の 1 つは、データ バインディングです。これにより、ビジネス ロジックとビューの同期や非同期が最小限のコードで可能なため、開発者の負荷を大幅に軽減できます。この機能なしでは、WPF は見栄えの良い Windows Forms のようなものです。Angular ではデータ バインディングをサポートしており、一方向バインディングと双方向バインディングの 2 種類をサポートします。このセクションでは、一方向データバインディングを実現する方法と、WPF との比較方法を示します。このトピックの[ビデオ チュートリアル](https://youtu.be/fP7iVhFNTOk)をご覧ください。
 
-## [Angular イベント](angular-events.md)
+## [Angular イベント](angular-events.mdx)
 
 ユーザー入力イベントへのバインドは、アプリで大変重要です。ユーザー インタラクションに反応しないアプリを作成するユースケースはほぼないでしょう。応答で最も一般的な方法は、イベント システムを使用することです。WPF は、ルーティング イベント、CLR イベント、およびコマンドを提供します。Angular では、DOM イベントがあります。このセクションでは、DOM イベントとユーザー入力の処理方法について説明します。このトピックの[ビデオ チュートリアル](https://youtu.be/V1Futz4W400)をご覧ください。
 
-## [Angular 双方向バインディング](two-way-binding.md)
+## [Angular 双方向バインディング](two-way-binding.mdx)
 
 Angular 一方向バインディングは、コンポーネント クラスからのデータでビューを更新します。WPF の場合と同様に、反対の操作を実行してビューからコンポーネント クラスを更新します。その場合、双方向バインディングを使用する必要があります。このセクションでは、WPF の双方向バインディングを比較します。このトピックの[ビデオ チュートリアル](https://youtu.be/MrjTTDEj7cA)をご覧ください。
 
-## [Angular パイプでデータを変換](angular-pipes.md)
+## [Angular パイプでデータを変換](angular-pipes.mdx)
 
 WPF で は、IValueConverter を使用してデータを変換します。Angular アプリケーションでは、Angular Pipes を使用します。パイプは WPF コンバーターに似ています。データを入力として受け取り、そのデータを表示用の目的の出力に変換します。このセクションでは、定義済みの Angular パイプのいくつかと、それらをアプリで使用する方法を示します。このトピックの[ビデオ チュートリアル](https://youtu.be/Gmz5kio50FE)をご覧ください。
 
-## [Angular の構造ディレクティブ](structural-directives.md)
+## [Angular の構造ディレクティブ](structural-directives.mdx)
 
 WPF 開発者として、ビジュアル ツリーから要素を追加または削除するには、コード ビハインドにジャンプして C# を記述するか、バインディングと表示コンバーターの組み合わせを使用でき、カスタムロジックと静的リソースが必要となります。これは WPF で常に行ってきた方法ですが、Angular を使用すると非常に簡単になります。このセクションでは、構造ディレクティブを使用して、Angular アプリの要素を操作する方法を示します。このトピックの[ビデオ チュートリアル](https://youtu.be/vQe7R78Od8k)をご覧ください。
 
-## [レイアウト要素](layout.md)
+## [レイアウト要素](layout.mdx)
 
 WPF では、アプリケーション内で要素をレイアウトするには、要素を Panel 内に配置する必要があります。Angular では、CSS を使用します。このトピックでは、レイアウト、および Flexbox や CSS Grid などの CSS 機能の使用方法について説明します。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/binding.mdx b/docs/angular/src/content/jp/components/grid-lite/binding.mdx
index 6a6376c920..0cbaa17d32 100644
--- a/docs/angular/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/binding.mdx
@@ -72,10 +72,10 @@ Grid Lite コンポーネントのソート/フィルター状態は、この方
 
 ## その他のリソース
 
-- [列の構成](/grid-lite/column-configuration)
-- [ソート](/grid-lite/sorting)
-- [フィルタリング](/grid-lite/filtering)
-- [テーマ設定とスタイル設定](/grid-lite/theming)
+- [列の構成](./column-configuration.mdx)
+- [ソート](./sorting.mdx)
+- [フィルタリング](./filtering.mdx)
+- [テーマ設定とスタイル設定](./theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
index 52e9309f83..9a8ee85051 100644
--- a/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/cell-template.mdx
@@ -158,10 +158,10 @@ export interface IgxGridLiteCellTemplateContext<T extends object> {
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](column-configuration.mdx)
+- [ソート](sorting.mdx)
+- [フィルタリング](filtering.mdx)
+- [テーマ設定とスタイル設定](theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx
index 13126cf6ae..931029cd10 100644
--- a/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/column-configuration.mdx
@@ -57,7 +57,7 @@ const data: Record[] = [
 追加のカスタマイズを行わずに一部のデータをすばやくレンダリングする場合に便利です。
 
 <DocsAside type="info" title="情報">
-これはグリッドが初めて DOM に追加されたときに一度だけ実行されます。空のデータ ソースを渡すか、遅延バインドされたデータ ソース (HTTP リクエストなど) を使用すると、通常列設定は空になります。既存の列設定が存在する場合、このプロパティは無視されます。データ ソースに基づいて列構成を自動生成する方法の詳細については、[データ バインディング](./binding.md)のトピックを参照してください。
+これはグリッドが初めて DOM に追加されたときに一度だけ実行されます。空のデータ ソースを渡すか、遅延バインドされたデータ ソース (HTTP リクエストなど) を使用すると、通常列設定は空になります。既存の列設定が存在する場合、このプロパティは無視されます。データ ソースに基づいて列構成を自動生成する方法の詳細については、[データ バインディング](./binding.mdx)のトピックを参照してください。
 </DocsAside>
 
 ## 追加の列設定
@@ -109,10 +109,10 @@ Grid Lite コンポーネントの各列は、列要素の `resizable` プロパ
 
 ## その他のリソース
 
-- [データ バインディング](binding.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [データ バインディング](binding.mdx)
+- [ソート](sorting.mdx)
+- [フィルタリング](filtering.mdx)
+- [テーマ設定とスタイル設定](theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
index 48623dc2a3..c2dbae0ecb 100644
--- a/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/filtering.mdx
@@ -192,8 +192,8 @@ grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams<T>) => T[
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
+- [列の構成](column-configuration.mdx)
+- [ソート](sorting.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
index 5e008233ea..15f73c2020 100644
--- a/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/header-template.mdx
@@ -73,9 +73,9 @@ import { IgxGridLiteComponent, IgxGridLiteColumnComponent, IgxGridLiteCellTempla
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [セル テンプレート](cell-template.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](column-configuration.mdx)
+- [セル テンプレート](cell-template.mdx)
+- [テーマ設定とスタイル設定](theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/overview.mdx b/docs/angular/src/content/jp/components/grid-lite/overview.mdx
index d538ef71c4..333237c83d 100644
--- a/docs/angular/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/overview.mdx
@@ -21,7 +21,7 @@ Ignite UI for Angular Grid Lite は、軽量で高パフォーマンスな Angul
 
 ## 無料 Angular データ グリッドで利用可能な機能
 
-無料のオープン ソース Angular Grid Lite には、次の列ベースの機能が含まれています: ソート、フィルタリング、非表示、サイズ変更、およびさまざまな事前定義されたデータ タイプ。行仮想化を使用することで、非常に高速なパフォーマンスが実現されます。さらに、コンポーネントはキーボード ナビゲーションと [Ignite UI のテーマ フレームワーク](../themes.md)を通じたテーマ化をサポートしています。
+無料のオープン ソース Angular Grid Lite には、次の列ベースの機能が含まれています: ソート、フィルタリング、非表示、サイズ変更、およびさまざまな事前定義されたデータ タイプ。行仮想化を使用することで、非常に高速なパフォーマンスが実現されます。さらに、コンポーネントはキーボード ナビゲーションと [Ignite UI のテーマ フレームワーク](../themes.mdx)を通じたテーマ化をサポートしています。
 
 Angular はカスタム要素を<a href="https://custom-elements-everywhere.com/#angular" target="_blank">サポート</a>しているため、Grid Lite を容易に利用できます。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
index 55feca1061..c0ddd3c693 100644
--- a/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/sorting.mdx
@@ -220,8 +220,8 @@ grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams<T>) => T[]
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [フィルタリング](filtering.md)
+- [列の構成](column-configuration.mdx)
+- [フィルタリング](filtering.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid-lite/theming.mdx b/docs/angular/src/content/jp/components/grid-lite/theming.mdx
index cf91394a3a..b8bfdfe6de 100644
--- a/docs/angular/src/content/jp/components/grid-lite/theming.mdx
+++ b/docs/angular/src/content/jp/components/grid-lite/theming.mdx
@@ -91,9 +91,9 @@ $my-light-palette: palette(
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
+- [列の構成](column-configuration.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid/grid.mdx b/docs/angular/src/content/jp/components/grid/grid.mdx
index 222ae6408a..3fe4b25c9c 100644
--- a/docs/angular/src/content/jp/components/grid/grid.mdx
+++ b/docs/angular/src/content/jp/components/grid/grid.mdx
@@ -62,7 +62,7 @@ import landingGridPage from '../../images/general/landing-grid-page.png';
 
 ## Angular データ グリッドの例
 
-Boston Marathon 2021 – この Angular グリッドの例では、ユーザーが基本スタイルと Excel スタイルの両方のフィルタリング、ライブ データのソート、および[スパークライン](../charts/types/sparkline-chart.md) コンポーネント、[Circular Progress Indicator](../circular-progress.md) コンポーネントと [Icons](../icon.md) を含むグリッド集計とセル テンプレートの使用を実行する方法を確認できます。デモには、[Angular ページネーション](paging.md)のカスタム ページングとページごとの使用法も含まれています。
+Boston Marathon 2021 – この Angular グリッドの例では、ユーザーが基本スタイルと Excel スタイルの両方のフィルタリング、ライブ データのソート、および[スパークライン](../charts/types/sparkline-chart.mdx) コンポーネント、[Circular Progress Indicator](../circular-progress.mdx) コンポーネントと [Icons](../icon.mdx) を含むグリッド集計とセル テンプレートの使用を実行する方法を確認できます。デモには、[Angular ページネーション](paging.mdx)のカスタム ページングとページごとの使用法も含まれています。
 
 <Sample lob src="/grid/grid" height={700} alt="Angular データ グリッドの例" />
 
@@ -75,7 +75,7 @@ Ignite UI for Angular Data Grid コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](../general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxGridModule` をインポートします。
 
@@ -158,7 +158,7 @@ Ignite UI for Angular Grid モジュールまたはディレクティブをイ
 
 <p>Each operation for Angular grid editing includes Batch operations, meaning the API gives you the option to group edits into a single server call, or you can perform grid edit / update operations as they occur with grid interactions. Along with a great developer experience as an editable Angular grid with CRUD operations, the Angular grid includes Excel-like keyboard navigation. Common default grid navigation is included, plus the option to override any navigation option to meet the needs of your customers. An editable grid in Angular with a great navigation scheme is critical to any modern line of business application, with the Ignite UI grid we make it easy.</p>
 
-このトピックに続いて、[セル テンプレート](grid.md#セル-テンプレート)と[セル編集テンプレート](grid.md#セル編集テンプレート)および編集について詳しく学習します。
+このトピックに続いて、[セル テンプレート](grid.mdx#セル-テンプレート)と[セル編集テンプレート](grid.mdx#セル編集テンプレート)および編集について詳しく学習します。
 
 ## Angular Grid 列の構成
 
@@ -267,7 +267,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
 <igx-grid>
 ```
 
-`ngModel` を使用して**セル テンプレート**を介してデータを変更する場合、適切な API メソッドを呼び出して、Angular グリッドの基になるデータ コレクションで値が正しく更新されることを確認する必要があります。上記のスニペットでは、`ngModelChange` 呼び出しはグリッドの[編集 API](cell-editing.md#api-を介した編集) を通過し、グリッドの編集パイプラインを通過し、トランザクション (該当する場合) を適切にトリガーし、[集計](summaries.md)、[選択](selection.md) などの処理を行います。ただし、この `ngModelChange` はユーザーが編集を完了したときだけでなく、セルが変更され、より多くの API 呼び出しが発生します。
+`ngModel` を使用して**セル テンプレート**を介してデータを変更する場合、適切な API メソッドを呼び出して、Angular グリッドの基になるデータ コレクションで値が正しく更新されることを確認する必要があります。上記のスニペットでは、`ngModelChange` 呼び出しはグリッドの[編集 API](cell-editing.mdx#api-を介した編集) を通過し、グリッドの編集パイプラインを通過し、トランザクション (該当する場合) を適切にトリガーし、[集計](summaries.mdx)、[選択](selection.mdx) などの処理を行います。ただし、この `ngModelChange` はユーザーが編集を完了したときだけでなく、セルが変更され、より多くの API 呼び出しが発生します。
 
 <DocsAside type="info" title="情報">
 グリッドは、数値、文字列、日付、およびブール列タイプのデフォルトの処理を公開します。例えば、ブール列タイプの場合に列はデフォルトで true/false の代わりに`チェック`または`閉じる`アイコンを表示します。
@@ -275,7 +275,7 @@ public contextObject = { firstProperty: 'testValue', secondProperty: 'testValue1
 
 セル内のデータが `[(ngModel)]` でバインドされていて、値の変更が処理されない場合、新しい値は Angular グリッドの基になるデータソースで適切に**更新されません**。カスタム テンプレートを使用してセルの編集を行う場合は、セルの**セル編集テンプレート**を使用することを強くお勧めします。
 
-適切に実装されると、セル編集テンプレートは、セルの `editValue` がグリッド[編集イベント サイクル](editing.md#イベントの引数とシーケンス) を正しく渡します。
+適切に実装されると、セル編集テンプレートは、セルの `editValue` がグリッド[編集イベント サイクル](editing.mdx#イベントの引数とシーケンス) を正しく渡します。
 
 ### セル編集テンプレート
 
@@ -371,7 +371,7 @@ const pipeArgs: IColumnPipeArgs = {
 
 `OrderDate` 列は `format` および `timezone` プロパティのみに遵守しますが、`UnitPrice` は `digitsInfo` のみに遵守します。詳細については、[「Localizing your app (英語)」](https://angular.io/guide/i18n)で Angular の公式ドキュメントを参照してください。
 
-すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.md#デフォルトのテンプレート)にあります。
+すべての利用可能な列データ型は、公式の[列タイプ トピック](column-types.mdx#デフォルトのテンプレート)にあります。
 
 ## Angular Grid データ構造
 
@@ -766,9 +766,9 @@ export const DATA: any[] = [
 ## キーボード ナビゲーション
 
 Grid のキーボード ナビゲーションは、さまざまなキーボード操作をユーザーに提供します。アクセシビリティが向上し、内部の要素 (セル、行、列ヘッダー、ツールバー、フッターなど) を直感的にナビゲートできます。詳細については、これらのリソースを参照してください。
-- [Grid キーボード ナビゲーション](../grid/keyboard-navigation.md)
-- [TreeGrid キーボード ナビゲーション](../treegrid/keyboard-navigation.md)
-- [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.md)
+- [Grid キーボード ナビゲーション](../grid/keyboard-navigation.mdx)
+- [TreeGrid キーボード ナビゲーション](../treegrid/keyboard-navigation.mdx)
+- [Hierarchical Grid キーボード ナビゲーション](../hierarchicalgrid/keyboard-navigation.mdx)
  -「Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation」の[ブロク](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility)
 
 - [Grid Keyboard Navigation](/grid/keyboard-navigation)
@@ -778,11 +778,11 @@ Grid のキーボード ナビゲーションは、さまざまなキーボー
 
 ## パーシステンス (永続化) 状態
 
-新しい組み込みの [`IgxGridState`](state-persistence.md) ディレクティブを使用することで、状態永続フレームワークの実装が更に簡単になりました。
+新しい組み込みの [`IgxGridState`](state-persistence.mdx) ディレクティブを使用することで、状態永続フレームワークの実装が更に簡単になりました。
 
 ## サイズ変更
 
-[グリッドのサイズ変更](sizing.md) トピックをご覧ください。
+[グリッドのサイズ変更](sizing.mdx) トピックをご覧ください。
 
 ## パフォーマンス (試験中)
 
@@ -811,7 +811,7 @@ platformBrowserDynamic()
 | ビューに描画されていないセル高さは行の高さに影響しません。|仮想化のため、セルの高さを変更するビューにないカスタム テンプレートの列は行の高さに影響しません。関連する列がビューにスクロールされるときのみ行の高さに影響します。
 
 <DocsAside type="info" title="情報">
-`igxGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.html#既知の問題と制限) のセクションを参照してください。
+`igxGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.mdx#既知の問題と制限) のセクションを参照してください。
 </DocsAside>
 
 ## テーマ設定
@@ -906,19 +906,19 @@ Angular データ グリッドの作成について詳しくは、このビデ
 ## その他のリソース
 
 
-- [グリッドのサイズ変更](sizing.md)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-- [列のデータ型](column-types.md#デフォルトのテンプレート)
-- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
+- [グリッドのサイズ変更](sizing.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
+- [列のデータ型](column-types.mdx#デフォルトのテンプレート)
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.mdx)
+- [Ignite UI for Angular スキル](../ai/skills.mdx) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid/groupby.mdx b/docs/angular/src/content/jp/components/grid/groupby.mdx
index e305f4861f..2aec32f535 100644
--- a/docs/angular/src/content/jp/components/grid/groupby.mdx
+++ b/docs/angular/src/content/jp/components/grid/groupby.mdx
@@ -186,7 +186,7 @@ export interface IGroupByRecord {
 
 ## 集計でグループ化
 
-グループ化と要約の統合については、[集計](summaries.md#グループの集計)トピックで説明しています。
+グループ化と要約の統合については、[集計](summaries.mdx#グループの集計)トピックで説明しています。
 
 ## キーボード ナビゲーション
 
@@ -309,7 +309,7 @@ public sortByGroup() {
 
 ## スタイル設定
 
-igxGridを使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md)でスタイルを設定できます。グリッドの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxGridを使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.mdx)でスタイルを設定できます。グリッドの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下の手順では、グリッドの Group By スタイルをカスタマイズする手順を実行しています。
 
@@ -396,7 +396,7 @@ $custom-chips-theme: chip-theme(
 
 ### カスタム スキーマの定義
 
-さらに進んで、[**スキーマ**](../themes/sass/schemas.md)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
+さらに進んで、[**スキーマ**](../themes/sass/schemas.mdx)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
 すべてのコンポーネントに提供される 2 つの事前定義されたスキーマの 1 つを拡張します。この場合、<ApiLink kind="sass" module="schemas" type="variable-light-material-schema" label="light-grid" code={true} /> を使用します。
 
 ```scss
@@ -450,7 +450,7 @@ $custom-theme: grid-theme(
 このように、Angular の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。
 
  <DocsAside type="info" title="情報">
- コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド内のコンポーネントをスタイル設定するためには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [`Emulated`](../themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド内のコンポーネントをスタイル設定するためには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  </DocsAside>
 
 この例では、チップ テーマに `::ng-deep` を使用する必要があります。
@@ -493,15 +493,15 @@ $custom-theme: grid-theme(
 ## その他のリソース
 
 
-- [Grid 概要](grid.md)
-- [可視化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [列移動](column-moving.md)
-- [集計](summaries.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [Grid 概要](grid.mdx)
+- [可視化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [列移動](column-moving.mdx)
+- [集計](summaries.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid/paste-excel.mdx b/docs/angular/src/content/jp/components/grid/paste-excel.mdx
index 17aad1d36e..35de92c882 100644
--- a/docs/angular/src/content/jp/components/grid/paste-excel.mdx
+++ b/docs/angular/src/content/jp/components/grid/paste-excel.mdx
@@ -231,7 +231,7 @@ export class PasteHandler {
 ## その他のリソース
 
 
-- [Excel エクスポーター](export-excel.md) - Excel エクスポーター サービスを使用して、IgxGrid から Excel にデータをエクスポートします。選択したデータのみを IgxGrid からエクスポートするオプションもあります。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService の export メソッドを呼び出して最初の引数として IgxGrid コンポーネントを渡します。
+- [Excel エクスポーター](export-excel.mdx) - Excel エクスポーター サービスを使用して、IgxGrid から Excel にデータをエクスポートします。選択したデータのみを IgxGrid からエクスポートするオプションもあります。エクスポート機能は、IgxExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、IgxExcelExporterService の export メソッドを呼び出して最初の引数として IgxGrid コンポーネントを渡します。
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
index 1bbfd7251a..b8049b637b 100644
--- a/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
+++ b/docs/angular/src/content/jp/components/grid/selection-based-aggregates.mdx
@@ -20,7 +20,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 ## トピックの概要
 
-選択に基づいた集計機能を実現するには、[グリッド選択](/components/grid/grid/selection)機能と[グリッド集計](/components/grid/grid/summaries)を使用できます。
+選択に基づいた集計機能を実現するには、[グリッド選択](/grid/selection)機能と[グリッド集計](/grid/summaries)を使用できます。
 集計では、列のデータ タイプとニーズに応じて、<ApiLink type="SummaryOperand" />、<ApiLink type="NumberSummaryOperand" />、<ApiLink type="DateSummaryOperand" /> のいずれかの基本クラスを拡張することにより、基本的な集計機能をカスタマイズできます。
 
 ## 選択
@@ -67,14 +67,14 @@ const dates = data.filter(rec => isDate(rec));
 ## その他のリソース
 
 
-- [Grid の概要](grid.md)
+- [Grid の概要](grid.mdx)
 - <ApiLink type="GridSelectionService" label="Selection Service" />
-- [行選択](row-selection.md)
-- [セル選択](cell-selection.md)
+- [行選択](row-selection.mdx)
+- [セル選択](cell-selection.mdx)
 - <ApiLink type="NumberSummaryOperand" />
 - <ApiLink type="DateSummaryOperand" />
-- [集計](summaries.md)
-- [ページング](paging.md)
+- [集計](summaries.mdx)
+- [ページング](paging.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/grids-and-lists.mdx b/docs/angular/src/content/jp/components/grids-and-lists.mdx
index 2e1cf2250b..0c6ebbfcf1 100644
--- a/docs/angular/src/content/jp/components/grids-and-lists.mdx
+++ b/docs/angular/src/content/jp/components/grids-and-lists.mdx
@@ -105,21 +105,21 @@ Ignite UI for Angular のデータ グリッドは、大量のリアルタイム
 <hr/>
 <div id="features-list">
 
-- 数百万のレコードをロードできる[**仮想化された行と列**](grid/virtualization.md)
+- 数百万のレコードをロードできる[**仮想化された行と列**](grid/virtualization.mdx)
 
-- [**セル**](grid/cell-editing.md)、[**行**](grid/row-editing.md)、および[**一括更新**](grid/batch-editing.md)オプションを使用した[**インライン編集**](grid/row-editing.md)
+- [**セル**](grid/cell-editing.mdx)、[**行**](grid/row-editing.mdx)、および[**一括更新**](grid/batch-editing.mdx)オプションを使用した[**インライン編集**](grid/row-editing.mdx)
 
-- [**Excel スタイル フィルタリング**](grid/excel-style-filtering.md)と [**Excel キーボード ナビゲーション**](grid/keyboard-navigation.md)機能
+- [**Excel スタイル フィルタリング**](grid/excel-style-filtering.mdx)と [**Excel キーボード ナビゲーション**](grid/keyboard-navigation.mdx)機能
 
-- インタラクティブな [**Outlook スタイルのようなグループ化**](grid/groupby.md)
+- インタラクティブな [**Outlook スタイルのようなグループ化**](grid/groupby.mdx)
 
-- グリッド セルまたは列のデータに基づいた[**列集計**](grid/summaries.md)
+- グリッド セルまたは列のデータに基づいた[**列集計**](grid/summaries.mdx)
 
-- [**Excel へのエクスポート**](grid/export-excel.md) ([**データ可視化**](excel-library-working-with-charts.md)を含む)
+- [**Excel へのエクスポート**](grid/export-excel.mdx) ([**データ可視化**](excel-library-working-with-charts.mdx)を含む)
 
-- 行の高さとサイズ変更を調整する[**サイズ**](grid/display-density.md)
+- 行の高さとサイズ変更を調整する[**サイズ**](grid/display-density.mdx)
 
-- [**スパークライン列**](sparkline.md#デモ)や画像列などの列テンプレート
+- [**スパークライン列**](sparkline.mdx#デモ)や画像列などの列テンプレート
 </div>
 
 <igc-divider></igc-divider>
@@ -143,17 +143,17 @@ Ignite UI for Angular のデータ グリッドは、大量のリアルタイム
 
 ### Angular グリッドのページング、ソート、フィルタリング & 検索
 
-ユーザーがデフォルトの[ページャー](grid/paging.md)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.md)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.md) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
+ユーザーがデフォルトの[ページャー](grid/paging.mdx)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.mdx)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.mdx) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
 
 ### インライン Angular グリッド編集
 
-ユーザーがデフォルトの[ページャー](grid/paging.md)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.md)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.md) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
+ユーザーがデフォルトの[ページャー](grid/paging.mdx)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.mdx)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.mdx) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
 
     <img class="b-lazy b-lazy-gifs b-loaded responsive-img" title="Animation of filtering capabilities within Angular Data Grid" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-inline-grid-editing-1100.jpg?v=201808021304" alt="Animation of filtering capabilities within Angular Data Grid"/>
 
 ### Angular グリッドでのキーボード ナビゲーションと行/セルの選択
 
-上、下、右、左、タブ、および Enter キーを使用して、Angular データ グリッドで Excel のような[キーボード ナビゲーション](grid/keyboard-navigation.md)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Angular グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、<a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">こちら</a>をご覧ください。
+上、下、右、左、タブ、および Enter キーを使用して、Angular データ グリッドで Excel のような[キーボード ナビゲーション](grid/keyboard-navigation.mdx)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Angular グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、<a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">こちら</a>をご覧ください。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-lazy-gifs b-loaded responsive-img" title="Animation of keyboard navigation functionality" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-keyboard-navigation-1100.gif?v=201808021304" alt="Animation of keyboard navigation functionality within Angular Data Grid"/></div>
 
@@ -168,13 +168,13 @@ Ignite UI for Angular の各 Angular コンポーネントは、最新のアク
 
 ### Angular Grid の列のグループ化、ピン固定、集計、移動
 
-組み込みの列[集計](grid/summaries.md)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](grid/column-pinning.md)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](grid/column-hiding.md)または[移動](grid/column-moving.md)できます。
+組み込みの列[集計](grid/summaries.mdx)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](grid/column-pinning.mdx)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](grid/column-hiding.mdx)または[移動](grid/column-moving.mdx)できます。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-loaded responsive-img" title="Grid of data with column grouping, pinning and summary features enabled" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-cell-summaries-1100.jpg?v=201808021304" alt="Grid of data with column grouping, pinning and summary features enabled for Angular Data Grid component"/></div>
 
 ### Angular Grid の複数列ヘッダー
 
-[複数列ヘッダー](grid/multi-column-headers.md)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。
+[複数列ヘッダー](grid/multi-column-headers.mdx)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-loaded responsive-img" title="Grid of data with Multi-Column Headers feature enabled" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-multi-column-headers-1100.jpg?v=201808021304" alt="Grid of data with Multi-Column Headers feature enabled on the Angular Data Grid component"/></div>
 
@@ -199,14 +199,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
 <igc-divider></igc-divider>
 <FeatureList>
 
-- [インライン編集](grid/editing.md)
-- [行と列のフィルタリング](grid/filtering.md)
-- [グリッドのソート](grid/sorting.md)
-- [列のグループ化](grid/groupby.md)
-- [列の集計](grid/summaries.md)
-- [ピン固定列](grid/column-pinning.md)
-- [サイズ変更可能な列](grid/column-resizing.md)
-- [列の非表示](grid/column-hiding.md)
+- [インライン編集](grid/editing.mdx)
+- [行と列のフィルタリング](grid/filtering.mdx)
+- [グリッドのソート](grid/sorting.mdx)
+- [列のグループ化](grid/groupby.mdx)
+- [列の集計](grid/summaries.mdx)
+- [ピン固定列](grid/column-pinning.mdx)
+- [サイズ変更可能な列](grid/column-resizing.mdx)
+- [列の非表示](grid/column-hiding.mdx)
 
 </FeatureList>
 
@@ -227,14 +227,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
 
 </div>
 <hr/>
-- [列移動](grid/column-moving.md)
-- [セルのコピーおよび貼り付け](grid/clipboard-interactions.md)
-- [セルのスタイル設定](grid/conditional-cell-styling.md)
-- [リアルタイム/ライブ データのテーマ](grid/live-data.md)
-- [カスタム ツールバー](grid/toolbar.md)
-- [グリッド ページング](grid/paging.md)
-- [行選択](grid/selection.md)
-- [セル選択](grid/cell-selection.md)
+- [列移動](grid/column-moving.mdx)
+- [セルのコピーおよび貼り付け](grid/clipboard-interactions.mdx)
+- [セルのスタイル設定](grid/conditional-cell-styling.mdx)
+- [リアルタイム/ライブ データのテーマ](grid/live-data.mdx)
+- [カスタム ツールバー](grid/toolbar.mdx)
+- [グリッド ページング](grid/paging.mdx)
+- [行選択](grid/selection.mdx)
+- [セル選択](grid/cell-selection.mdx)
 
 </div>
     <div class="support-section">
@@ -242,14 +242,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
         <h2>Ignite UI for Angular Support Options</h2>
     </div>
 
-- [グリッド レベルの検索](grid/search.md)
-- [Excel、CSV、TSV エクスポート](exporter-excel.md)
-- [複数列ヘッダー](grid/multi-column-headers.md)
-- [コンボ ボックス/ドロップダウン](combo.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [リモート データのロードオンデマンド](grid/virtualization.md#リモート仮想化)
-- [セル テンプレート](grid/grid.md#cell-template)
-- [ARIA/a11y サポート](interactivity/accessibility-compliance.md)
+- [グリッド レベルの検索](grid/search.mdx)
+- [Excel、CSV、TSV エクスポート](exporter-excel.mdx)
+- [複数列ヘッダー](grid/multi-column-headers.mdx)
+- [コンボ ボックス/ドロップダウン](combo.mdx)
+- [仮想化とパフォーマンス](grid/virtualization.mdx)
+- [リモート データのロードオンデマンド](grid/virtualization.mdx#リモート仮想化)
+- [セル テンプレート](grid/grid.mdx#cell-template)
+- [ARIA/a11y サポート](interactivity/accessibility-compliance.mdx)
 </div>
 
 </div>
@@ -277,7 +277,7 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
         <span class="igd-expansion-title" slot="title">Angular と Infragistics Ignite UI for Angular Data Grid コントロールのインストール方法を教えてください。</span>
-        <p>Angular Data Grid の使用を開始するには、[作業の開始ガイド](general/getting-started.md)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、Angular 開発のベスト プラクティス ガイドです。</p>
+        <p>Angular Data Grid の使用を開始するには、[作業の開始ガイド](general/getting-started.mdx)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、Angular 開発のベスト プラクティス ガイドです。</p>
     </igc-expansion-panel>
 </FaqAccordion>
 
diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
index be0e64cb7c..9dd5d73873 100644
--- a/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
+++ b/docs/angular/src/content/jp/components/hierarchicalgrid/hierarchical-grid.mdx
@@ -21,7 +21,7 @@ Ignite UI for Angular Hierarchical Data Grid は、階層表形式データの
 
 ## Angular 階層グリッドの例
 
-この Angular グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用して[スパークライン](../sparkline.md)などの他の視覚的コンポーネントを追加する方法を確認できます。
+この Angular グリッドの例では、ユーザーがデータの階層セットを視覚化し、セル テンプレートを使用して[スパークライン](../sparkline.mdx)などの他の視覚的コンポーネントを追加する方法を確認できます。
 
 <Sample lob src="/hierarchical-grid/hierarchical-grid-resizing" height={520} alt="Angular 階層グリッドの例" />
 
@@ -39,7 +39,7 @@ Ignite UI for Angular Hierarchical Data Grid コンポーネントを使用し
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](../general/getting-started.md)」ピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](../general/getting-started.mdx)」ピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxHierarchicalGridModule` をインポートします。
 
@@ -303,7 +303,7 @@ export class RemoteLoDService {
 
 ## サイズ変更
 
-詳細については、[Grid サイズ変更](sizing.md)トピックをご覧ください。
+詳細については、[Grid サイズ変更](sizing.mdx)トピックをご覧ください。
 
 ## CRUD 操作
 
@@ -313,11 +313,11 @@ export class RemoteLoDService {
 
 CRUD API メソッドの呼び出しは,各グリッド インスタンスで可能です。
 
-igxGrid を使用して [CRUD 操作を構築する方法](../general/how-to/how-to-perform-crud.md)のトピックをご覧ください。
+igxGrid を使用して [CRUD 操作を構築する方法](../general/how-to/how-to-perform-crud.mdx)のトピックをご覧ください。
 
 ## スタイル設定
 
-igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.md) でスタイルを設定できます。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxHierarchicalGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](../themes/sass/component-themes.mdx) でスタイルを設定できます。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下の手順では、igxHierarchicalGrid スタイルをカスタマイズする手順を実行しています。
 
@@ -355,7 +355,7 @@ $custom-grid: grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](../themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 ### カスタム テーマの適用
diff --git a/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx b/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
index 9604d242e0..799863931d 100644
--- a/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
+++ b/docs/angular/src/content/jp/components/hierarchicalgrid/load-on-demand.mdx
@@ -227,7 +227,7 @@ private buildUrl(event: IGridCreatedEventArgs) {
 ## その他のリソース
 
 
-- [Hierarchical Grid コンポーネント](hierarchical-grid.md)
+- [Hierarchical Grid コンポーネント](hierarchical-grid.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/icon-button.mdx b/docs/angular/src/content/jp/components/icon-button.mdx
index 3958409354..cc26c5fd73 100644
--- a/docs/angular/src/content/jp/components/icon-button.mdx
+++ b/docs/angular/src/content/jp/components/icon-button.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Icon Button ディレクティブを初期化するには
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
 
 次の手順は、`IgxIconButtonDirective` をスタンドアロンの依存関係としてインポートすることです:
 
@@ -114,7 +114,7 @@ Contained アイコン ボタンを作成するには、`igxIconButton` プロ
 
 ### SVG アイコン
 
-マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず <ApiLink type="IconService" /> 依存関係を挿入し、次に <ApiLink type="IconService" member="addSvgIcon" label="addSvgIcon" /> メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.md#svg-アイコン)を参照してください。
+マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず <ApiLink type="IconService" /> 依存関係を挿入し、次に <ApiLink type="IconService" member="addSvgIcon" label="addSvgIcon" /> メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.mdx#svg-アイコン)を参照してください。
 
 ```typescript
 constructor(private _iconService: IgxIconService) { }
@@ -378,7 +378,7 @@ $custom-contained: contained-icon-button-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/icon.mdx b/docs/angular/src/content/jp/components/icon.mdx
index d4e656480a..3300621ec3 100644
--- a/docs/angular/src/content/jp/components/icon.mdx
+++ b/docs/angular/src/content/jp/components/icon.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Icon コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxIconModule` をインポートします。
 
@@ -308,11 +308,11 @@ igx-icon {
 }
 ```
 
-詳細については、[サイズ](display-density.md)の記事をご覧ください。
+詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx
index 22cdacfd35..4961624b84 100644
--- a/docs/angular/src/content/jp/components/input-group.mdx
+++ b/docs/angular/src/content/jp/components/input-group.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Input Group コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxInputGroupModule` をインポートします。
 
@@ -95,7 +95,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
 
 ### Label および Input
 
-<ApiLink type="LabelDirective" label="igxLabel" />、<ApiLink type="InputDirective" label="igxInput" /> ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.md)を参照してください。
+<ApiLink type="LabelDirective" label="igxLabel" />、<ApiLink type="InputDirective" label="igxInput" /> ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.mdx)を参照してください。
 
 ### Prefix および Suffix
 
@@ -752,7 +752,7 @@ constructor(fb: FormBuilder) {
 以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Indigo Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
+サンプルでは、[Indigo Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 ```scss
@@ -798,7 +798,7 @@ For instance, setting a dark `$box-background` globally could cause the borders
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -869,8 +869,8 @@ For instance, setting a dark `$box-background` globally could cause the borders
 
 関連トピック:
 
-- [Label および Input](label-input.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [Label および Input](label-input.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/label-input.mdx b/docs/angular/src/content/jp/components/label-input.mdx
index 241a3cc291..d635a88d85 100644
--- a/docs/angular/src/content/jp/components/label-input.mdx
+++ b/docs/angular/src/content/jp/components/label-input.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Label & Input ディレクティブを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxInputGroupModule` をインポートします。
 
@@ -167,7 +167,7 @@ public user = {
 
 ## Input Group
 
-Ignite UI for Angular Input Group コンポーネントは、開発者が使いやすく美しフォームを作成するのに役立ちます。詳細については、別のトピック[こちら](input-group.md) を参照してください。
+Ignite UI for Angular Input Group コンポーネントは、開発者が使いやすく美しフォームを作成するのに役立ちます。詳細については、別のトピック[こちら](input-group.mdx) を参照してください。
 
 ## API リファレンス
 
@@ -183,7 +183,7 @@ Ignite UI for Angular Input Group コンポーネントは、開発者が使い
 
 関連トピック:
 
-- [Input Group](input-group.md)
+- [Input Group](input-group.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/linear-progress.mdx b/docs/angular/src/content/jp/components/linear-progress.mdx
index 03da14b10a..90443b9c6f 100644
--- a/docs/angular/src/content/jp/components/linear-progress.mdx
+++ b/docs/angular/src/content/jp/components/linear-progress.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Linear Progress コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxProgressBarModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx
index 34e4c0c14d..aa400be63e 100644
--- a/docs/angular/src/content/jp/components/list.mdx
+++ b/docs/angular/src/content/jp/components/list.mdx
@@ -14,11 +14,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Angular List View (リスト ビュー) コンポーネントの概要
 
-Ignite UI for Angular List コンポーネントは項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)をサポートするテンプレートに設定できます。リスト コンポーネントは、組み込みのパンニング機能、空および読み込み状態のテンプレートも提供し、[`IgxForOf`](for-of.md) ディレクティブを使用した大きなリストの仮想化をサポートします。
+Ignite UI for Angular List コンポーネントは項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)をサポートするテンプレートに設定できます。リスト コンポーネントは、組み込みのパンニング機能、空および読み込み状態のテンプレートも提供し、[`IgxForOf`](for-of.mdx) ディレクティブを使用した大きなリストの仮想化をサポートします。
 
 ## Angular List の例
 
-次の例は、_name_ プロパティと _phone number_ プロパティを持つ連絡先が入力されたリストを表しています。<ApiLink type="List" /> コンポーネントは、[`IgxAvatar`](avatar.md) と [`IgxIcon`](icon.md) を使用して、ユーザー エクスペリエンスを向上させ、**連絡先をお気に入りに追加**にアバター写真とさまざまなアイコンを設定する機能を公開します。さらに、リスト ビューは、フィルタリング パイプを使用して実現されたソート機能を公開します。
+次の例は、_name_ プロパティと _phone number_ プロパティを持つ連絡先が入力されたリストを表しています。<ApiLink type="List" /> コンポーネントは、[`IgxAvatar`](avatar.mdx) と [`IgxIcon`](icon.mdx) を使用して、ユーザー エクスペリエンスを向上させ、**連絡先をお気に入りに追加**にアバター写真とさまざまなアイコンを設定する機能を公開します。さらに、リスト ビューは、フィルタリング パイプを使用して実現されたソート機能を公開します。
 
 <Sample src="/lists/list-sample-4" height={513} alt="" />
 
@@ -32,7 +32,7 @@ Ignite UI for Angular List View コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxListModule` をインポートします。
 
@@ -205,7 +205,7 @@ public contacts = [{
 
 ### アバターおよびアイコンの追加
 
-その他のコンポーネントを <ApiLink type="List" /> と共に使用してエクスペリエンスの向上や機能拡張が可能です。名前や電話番号の値の左に画像のアバターを表示できます。また、連絡先をお気に入りに追加するための星アイコンを右側に追加できます。要素を追加するには、[**IgxAvatar**](avatar.md) および [**IgxIcon**](icon.md) モジュールを app.module.ts ファイルにインポートします。
+その他のコンポーネントを <ApiLink type="List" /> と共に使用してエクスペリエンスの向上や機能拡張が可能です。名前や電話番号の値の左に画像のアバターを表示できます。また、連絡先をお気に入りに追加するための星アイコンを右側に追加できます。要素を追加するには、[**IgxAvatar**](avatar.mdx) および [**IgxIcon**](icon.mdx) モジュールを app.module.ts ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -283,7 +283,7 @@ public contacts = [{
 - `igxListAction` は、スイッチ、ラジオ ボタン、チェックボックスなど、アクションまたはメタデータを持つリスト項目に使用します。この場合、アクションは `igx-icon` で表示されます。ディレクティブは、正しい位置と間隔のコンテナーでターゲット要素をラップします。
 - `igxListLine` は、`igxListThumbnail` と `igxListAction` の間にテキストが必要な場合に使用します。このディレクティブは、テキストの位置、間隔、配置が残りのディレクティブと外観がよくなるようにします。
 
-次に、連絡先オブジェクトの isFavorite プロパティを切り替えるために [**IgxIcon**](icon.md) コンポーネントでクリック イベントをリッスンします。
+次に、連絡先オブジェクトの isFavorite プロパティを切り替えるために [**IgxIcon**](icon.mdx) コンポーネントでクリック イベントをリッスンします。
 
 ```typescript
 // contacts.component.ts
@@ -295,7 +295,7 @@ toggleFavorite(item: IgxListItem) {
 }
 ```
 
-また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](button-group.md) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。
+また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](button-group.mdx) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。
 
 ```typescript
 // app.module.ts
@@ -657,7 +657,7 @@ $my-list-theme: list-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/mask.mdx b/docs/angular/src/content/jp/components/mask.mdx
index 5fd0ea28e0..a2b6e191d4 100644
--- a/docs/angular/src/content/jp/components/mask.mdx
+++ b/docs/angular/src/content/jp/components/mask.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Mask ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。
 
@@ -209,7 +209,7 @@ private notify(snackbar, message, input) {
 
 ### テキスト選択
 
-<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.md#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
+<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.mdx#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
 
 **app.module.ts** ファイルに `IgxTextSelectionModule` をインポートします:
 
diff --git a/docs/angular/src/content/jp/components/month-picker.mdx b/docs/angular/src/content/jp/components/month-picker.mdx
index 9f9ff21afd..3592efbff5 100644
--- a/docs/angular/src/content/jp/components/month-picker.mdx
+++ b/docs/angular/src/content/jp/components/month-picker.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Month Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
@@ -219,7 +219,7 @@ $my-calendar-theme: calendar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/navbar.mdx b/docs/angular/src/content/jp/components/navbar.mdx
index ce616a2021..e65e64150c 100644
--- a/docs/angular/src/content/jp/components/navbar.mdx
+++ b/docs/angular/src/content/jp/components/navbar.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Navbar コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
  はじめに、**app.module.ts** ファイルに `IgxNavbarModule` をインポートします。
 
@@ -95,7 +95,7 @@ Ignite UI for Angular Navbar モジュールまたはディレクティブをイ
 
 ### アイコン ボタンの追加
 
-検索、お気に入りなどのオプションを追加するには、[**IgxIconButton**](icon-button.md) と [**IgxIcon**](icon.md) モジュールを **app.module.ts** ファイルにインポートします。
+検索、お気に入りなどのオプションを追加するには、[**IgxIconButton**](icon-button.mdx) と [**IgxIcon**](icon.mdx) モジュールを **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -304,7 +304,7 @@ $custom-navbar-theme: navbar-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後に、新しく作成されたテーマを `tokens` ミックスインに渡します。
@@ -323,7 +323,7 @@ $custom-navbar-theme: navbar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/navdrawer.mdx b/docs/angular/src/content/jp/components/navdrawer.mdx
index d5be6cbafd..0430c95712 100644
--- a/docs/angular/src/content/jp/components/navdrawer.mdx
+++ b/docs/angular/src/content/jp/components/navdrawer.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Navigation Drawer コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。
 
@@ -126,7 +126,7 @@ Drawer のコンテンツを `igxDrawer` ディレクティブでデコレート
 - `active` - 項目を選択済みとしてスタイル設定します。
 - `isHeader` - 項目をグループ ヘッダーとしてスタイル設定します。active に設定できません。
 
-[`igxRipple`](ripple.md) ディレクティブは使用感を向上します。
+[`igxRipple`](ripple.mdx) ディレクティブは使用感を向上します。
 
 ```html
 <!-- app.component.html -->
@@ -188,7 +188,7 @@ Navigation drawer に要素を追加して選択するためには、typescript
 
 Drawer を開く/閉じる方法が複数あります。入力プロパティをアプリケーション状態にバインドするか、[`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) 参照を使用してコンポーネントの API へコードでアクセス、あるいはこのような場合では `#drawer` [テンプレート参照変数](https://angular.io/guide/template-syntax#ref-vars)を使用できます。
 
-Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`igxToggleAction`](toggle.md#トグル自動操作) ディレクティブで id によって対象にされます。
+Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`igxToggleAction`](toggle.mdx#トグル自動操作) ディレクティブで id によって対象にされます。
 
 ```html
 <main>
@@ -198,7 +198,7 @@ Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`i
 </main>
 ```
 
-**app.component.html** の `<main>` を以下のコードと置き換えます。トグルをスタイル設定するために [`igxIconButton`](icon-button.md) および [Icon コンポーネント](icon.md)を追加します。
+**app.component.html** の `<main>` を以下のコードと置き換えます。トグルをスタイル設定するために [`igxIconButton`](icon-button.mdx) および [Icon コンポーネント](icon.mdx)を追加します。
 
 ```ts
 /* app.component.ts */
@@ -389,7 +389,7 @@ import { RouterModule } from '@angular/router';
 
 ## 階層ナビゲーション
 
-`IgxNavigationDrawerComponent` を使用してマルチレベル階層ナビゲーションを作成するには、`igxDrawer` テンプレートの [IgxTreeComponent](tree.md) を使用できます。ツリーはアプリケーションの `Routes` オブジェクトから直接作成できます。以下はその方法です。
+`IgxNavigationDrawerComponent` を使用してマルチレベル階層ナビゲーションを作成するには、`igxDrawer` テンプレートの [IgxTreeComponent](tree.mdx) を使用できます。ツリーはアプリケーションの `Routes` オブジェクトから直接作成できます。以下はその方法です。
 
 ```html
 <igx-nav-drawer [isOpen]="true" [enableGestures]="true" width="280px">
@@ -435,7 +435,7 @@ export const menusRoutes: Routes = [
 ];
 ```
 
-ルートの `children` プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、[ツリー ノード テンプレート](tree.md#テンプレート化)で 2 番目の下のレベルを定義するだけです。
+ルートの `children` プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、[ツリー ノード テンプレート](tree.mdx#テンプレート化)で 2 番目の下のレベルを定義するだけです。
 
 <DocsAside type="info" title="情報">
 空のルート リダイレクト、エラー ルート、ページが見つからないなどの一部のルートは、可視化に直接適さない場合があることに注意してください。ツリーをルーティング オブジェクトにバインドする前に、コンポーネント ロジックでオブジェクトからそれらのルートを削除できます。
@@ -479,7 +479,7 @@ $custom-theme: navdrawer-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/components/overlay-position.mdx b/docs/angular/src/content/jp/components/overlay-position.mdx
index 823533f797..54c134b041 100644
--- a/docs/angular/src/content/jp/components/overlay-position.mdx
+++ b/docs/angular/src/content/jp/components/overlay-position.mdx
@@ -211,8 +211,8 @@ overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set);
 
 ## その他のリソース
 
-- [オーバーレイ メイン トピック](overlay.md)
-- [スクロール ストラテジ](overlay-scroll.md)
-- [スタイル設定](overlay-styling.md)
+- [オーバーレイ メイン トピック](overlay.mdx)
+- [スクロール ストラテジ](overlay-scroll.mdx)
+- [スタイル設定](overlay-styling.mdx)
 - <ApiLink type="OverlayService" />
 - <ApiLink kind="sass" module="themes" type="function-overlay-theme" label="IgxOverlay スタイル" />
diff --git a/docs/angular/src/content/jp/components/overlay-scroll.mdx b/docs/angular/src/content/jp/components/overlay-scroll.mdx
index 0212526191..baad66a77a 100644
--- a/docs/angular/src/content/jp/components/overlay-scroll.mdx
+++ b/docs/angular/src/content/jp/components/overlay-scroll.mdx
@@ -110,8 +110,8 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
 
 ## その他のリソース
 
-- [オーバーレイ メイン トピック](overlay.md)
-- [配置ストラテジ](overlay-position.md)
-- [スタイル設定](overlay-styling.md)
+- [オーバーレイ メイン トピック](overlay.mdx)
+- [配置ストラテジ](overlay-position.mdx)
+- [スタイル設定](overlay-styling.mdx)
 - <ApiLink type="OverlayService" />
 - <ApiLink kind="sass" module="themes" type="function-overlay-theme" label="IgxOverlay スタイル" />
diff --git a/docs/angular/src/content/jp/components/overlay-styling.mdx b/docs/angular/src/content/jp/components/overlay-styling.mdx
index 3fa3f5f770..fedb2b1a15 100644
--- a/docs/angular/src/content/jp/components/overlay-styling.mdx
+++ b/docs/angular/src/content/jp/components/overlay-styling.mdx
@@ -17,13 +17,13 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 <div class="highlight">
 
-[`IgxOverlayService`](overlay.md) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](drop-down.md)、[コンボ](combo.md)、[日付ピッカー](date-picker.md)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
+[`IgxOverlayService`](overlay.mdx) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](drop-down.mdx)、[コンボ](combo.mdx)、[日付ピッカー](date-picker.mdx)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
 他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本体の最後にアタッチされています)。この動作は、[特定のコンテナーにスコープされた](#スコープ-コンポーネント-スタイル) スタイルに影響を与える可能性があります。
 </div>
 
 ## オーバーレイ コンポーネントのスタイル設定
 
-ほとんどの場合、[グローバル](themes/sass/global-themes.md) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル <ApiLink kind="sass" module="themes" type="mixin-tokens" label="tokens" code={true} /> ミックスインで[スタイル設定された](drop-down.md#スタイル設定)ドロップダウンを見てみましょう。
+ほとんどの場合、[グローバル](themes/sass/global-themes.mdx) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル <ApiLink kind="sass" module="themes" type="mixin-tokens" label="tokens" code={true} /> ミックスインで[スタイル設定された](drop-down.mdx#スタイル設定)ドロップダウンを見てみましょう。
 
 ```html
 <!-- overlay-styling.component.html -->
@@ -55,7 +55,7 @@ $my-drop-down-theme: drop-down-theme(
 
 オーバーレイに表示される要素のスタイルをスコーピングする際に DOM のオーバーレイ `アウトレット`の位置を指定する必要があります。スコープが設定された CSS ルールには、要素の特定の階層構造が必要です - オーバーレイ コンテンツが、適用するスタイルの正しいコンテキストで表示されることを確認してください。
 
-たとえば、`igx-combo` を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目の[スタイル設定](combo.md#スタイル設定)は `igx-drop-down` テーマを使用します。
+たとえば、`igx-combo` を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目の[スタイル設定](combo.mdx#スタイル設定)は `igx-drop-down` テーマを使用します。
 
 ```scss
 // overlay-styling.component.scss
@@ -66,7 +66,7 @@ $my-drop-down-theme: drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -122,7 +122,7 @@ $my-overlay-theme: overlay-theme(
 これで、**すべて**のモーダル オーバーレイの背景が紫色になります。
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -136,7 +136,7 @@ $my-overlay-theme: overlay-theme(
 
 ### スコープ オーバーレイ スタイル
 
-特定のコンポーネントの下に**のみ**特定の背景をオーバーレイに表示したい場合は、テーマを[スコープできます](#スコープ-コンポーネント-スタイル)。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの[制限](overlay.md#前提事項と制限)があります。
+特定のコンポーネントの下に**のみ**特定の背景をオーバーレイに表示したい場合は、テーマを[スコープできます](#スコープ-コンポーネント-スタイル)。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの[制限](overlay.mdx#前提事項と制限)があります。
 オーバーフロークリッピング、z-index、およびビューポートの問題のリスクを最小限に抑えるために、より高いレベルのコンポーネントでのみモーダルオーバーレイのアウトレットを使用することをお勧めします。
 
 ```scss
@@ -149,12 +149,12 @@ $my-overlay-theme: overlay-theme(
 
 ## API リファレンス
 
-- [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
+- [IgniteUI for Angular - テーマ ライブラリ](themes/index.mdx)
 - <ApiLink kind="sass" module="themes" type="function-overlay-theme" label="IgxOverlay スタイル" />
 
 ## その他のリソース
 
-- [IgniteUI for Angular - テーマ ライブラリ](themes/index.md)
-- [オーバーレイ メイン トピック](overlay.md)
-- [配置ストラテジ](overlay-position.md)
-- [スクロール ストラテジ](overlay-scroll.md)
+- [IgniteUI for Angular - テーマ ライブラリ](themes/index.mdx)
+- [オーバーレイ メイン トピック](overlay.mdx)
+- [配置ストラテジ](overlay-position.mdx)
+- [スクロール ストラテジ](overlay-scroll.mdx)
diff --git a/docs/angular/src/content/jp/components/overlay.mdx b/docs/angular/src/content/jp/components/overlay.mdx
index 8f5f04a40c..d455e943ba 100644
--- a/docs/angular/src/content/jp/components/overlay.mdx
+++ b/docs/angular/src/content/jp/components/overlay.mdx
@@ -145,7 +145,7 @@ Finally calling <ApiLink type="OverlayService" member="detach" label="detach(id)
 
 ## コンポーネントのアタッチ
 
-閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.md#angular-card-の例) コンポーネントをオーバーレイ サービスの <ApiLink type="OverlayService" member="attach" label="attach()" /> メソッドに渡し、IDを生成します。次に、提供された ID で <ApiLink type="OverlayService" member="show" label="show()" /> メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
+閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.mdx#angular-card-の例) コンポーネントをオーバーレイ サービスの <ApiLink type="OverlayService" member="attach" label="attach()" /> メソッドに渡し、IDを生成します。次に、提供された ID で <ApiLink type="OverlayService" member="show" label="show()" /> メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
 
 <Sample src="/interactions/overlay-sample-main-1" height={400} alt="" />
 
@@ -354,6 +354,6 @@ export class ExampleComponent {
 
 ## その他のリソース
 
-- [配置方法](overlay-position.md)
-- [スクロール方法](overlay-scroll.md)
-- [スタイル設定](overlay-styling.md)
+- [配置方法](overlay-position.mdx)
+- [スクロール方法](overlay-scroll.mdx)
+- [スタイル設定](overlay-styling.mdx)
diff --git a/docs/angular/src/content/jp/components/paginator.mdx b/docs/angular/src/content/jp/components/paginator.mdx
index 702250adab..301b5f7f24 100644
--- a/docs/angular/src/content/jp/components/paginator.mdx
+++ b/docs/angular/src/content/jp/components/paginator.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Paginator コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxPaginatorModule` をインポートします。
 
@@ -203,11 +203,11 @@ public ngOnInit(): void {
 
 <hr/>
 
-- [グリッド](grid/grid.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [フィルタリング](grid/filtering.md)
-- [ソート](grid/sorting.md)
-- [集計](grid/summaries.md)
+- [グリッド](grid/grid.mdx)
+- [仮想化とパフォーマンス](grid/virtualization.mdx)
+- [フィルタリング](grid/filtering.mdx)
+- [ソート](grid/sorting.mdx)
+- [集計](grid/summaries.mdx)
 
 
 <hr/>
diff --git a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-custom.mdx b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-custom.mdx
index 1dd09d3513..d10006cc43 100644
--- a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-custom.mdx
+++ b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-custom.mdx
@@ -138,8 +138,8 @@ public noopSortStrategy = NoopSortingStrategy.instance();
 ## その他のリソース
 
 
-- [Angular ピボット グリッド機能](pivot-grid-features.md)
-- [Angular ピボット グリッドの概要](pivot-grid.md)
+- [Angular ピボット グリッド機能](pivot-grid-features.mdx)
+- [Angular ピボット グリッドの概要](pivot-grid.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx
index 8917f1c1ac..12c0055f55 100644
--- a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx
+++ b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid-features.mdx
@@ -219,8 +219,8 @@ public pivotUI: IPivotUISettings = { rowLayout: PivotRowLayoutType.Horizontal, h
 ## その他のリソース
 
 
-- [Angular ピボット グリッド機能](pivot-grid-features.md)
-- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
+- [Angular ピボット グリッド機能](pivot-grid-features.mdx)
+- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx
index 3bbf65a104..c470ab8996 100644
--- a/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx
+++ b/docs/angular/src/content/jp/components/pivotgrid/pivot-grid.mdx
@@ -44,7 +44,7 @@ ng add igniteui-angular
 このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
-Ignite UI for Angular については、「[はじめに](../general/getting-started.md)」 トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](../general/getting-started.mdx)」 トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxPivotGridModule` をインポートします。
 
@@ -410,9 +410,9 @@ igx-pivot-grid {
 ## その他のリソース
 
 
-- [Angular ピボット グリッド機能](pivot-grid-features.md)
-- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.md)
-- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
+- [Angular ピボット グリッド機能](pivot-grid-features.mdx)
+- [Angular ピボット グリッド カスタム集計](pivot-grid-custom.mdx)
+- [Ignite UI for Angular スキル](../ai/skills.mdx) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/query-builder.mdx b/docs/angular/src/content/jp/components/query-builder.mdx
index 31d581ec47..184986b211 100644
--- a/docs/angular/src/content/jp/components/query-builder.mdx
+++ b/docs/angular/src/content/jp/components/query-builder.mdx
@@ -41,7 +41,7 @@ Ignite UI for Angular Query Builder コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxQueryBuilderModule` をインポートします。
 
@@ -157,7 +157,7 @@ ngAfterViewInit(): void {
 
 ## 式のドラッグ
 
-条件チップは、マウスの[**ドラッグ アンド ドロップ**](drag-drop.md)または[**キーボードによる並べ替え**](#キーボード操作)アプローチを使用して簡単に再配置できます。これらを使用すると、ユーザーはクエリ ロジックを動的に調整できます。
+条件チップは、マウスの[**ドラッグ アンド ドロップ**](drag-drop.mdx)または[**キーボードによる並べ替え**](#キーボード操作)アプローチを使用して簡単に再配置できます。これらを使用すると、ユーザーはクエリ ロジックを動的に調整できます。
 - チップをドラッグしても、その状態や内容は変更されず、位置のみが変更されます。
 - チップはグループやサブグループにドラッグすることもできます。たとえば、式のグループ化/グループ解除は、式のドラッグ機能によって実行されます。
 既存の条件をグループ化するには、まず「追加」グループ ボタンを使用して新しいグループを追加する必要があります。次に、ドラッグすることで、必要な式をそのグループに移動できます。グループを解除するには、すべての条件を現在のグループの外にドラッグします。最後の条件を移動したら、グループは削除されます。
@@ -345,7 +345,7 @@ $custom-icon-button: outlined-icon-button-theme(
 この例では、リストされたコンポーネントのパラメーターの一部のみを変更しましたが、<ApiLink kind="sass" module="themes" type="function-button-theme" label="button-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-chip-theme" label="chip-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" code={true} />、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" code={true} /> テーマは、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後に、`tokens` ミックスインを使用して新しいコンポーネント テーマを**含めます**。
@@ -364,7 +364,7 @@ $custom-icon-button: outlined-icon-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、クエリ ビルダー コンポーネント内のコンポーネント (ボタン、チップ、ドロップダウンなど) のスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、クエリ ビルダー コンポーネント内のコンポーネント (ボタン、チップ、ドロップダウンなど) のスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
 </DocsAside>
 
 ### デモ
@@ -379,7 +379,7 @@ $custom-icon-button: outlined-icon-button-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx
index 4d7ff089ee..51fc602b8e 100644
--- a/docs/angular/src/content/jp/components/radio-button.mdx
+++ b/docs/angular/src/content/jp/components/radio-button.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Radio Button コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxRadioModule` をインポートします。
 
@@ -194,14 +194,14 @@ $custom-radio-theme: radio-theme(
 <Sample src="/data-entries/radio-styling-sample" height={300} alt="" />
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Fluent Light](themes/sass/schemas.md#predefined-schemas) スキーマを使用します。
+サンプルでは、[Fluent Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 <hr/>
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/ripple.mdx b/docs/angular/src/content/jp/components/ripple.mdx
index 1ff17b5ad6..bd0689cade 100644
--- a/docs/angular/src/content/jp/components/ripple.mdx
+++ b/docs/angular/src/content/jp/components/ripple.mdx
@@ -35,7 +35,7 @@ Ignite UI for Angular Ripple ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxRippleModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/select.mdx b/docs/angular/src/content/jp/components/select.mdx
index 74e5e958a2..5f35d8a0a7 100644
--- a/docs/angular/src/content/jp/components/select.mdx
+++ b/docs/angular/src/content/jp/components/select.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Select コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSelectModule` をインポートします。
 
@@ -127,7 +127,7 @@ public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
 
 ### 入力プロパティ
 
-Select コンポーネントは、[入力グループ](input-group.md)に適用可能な次のディレクティブをサポートしています。
+Select コンポーネントは、[入力グループ](input-group.mdx)に適用可能な次のディレクティブをサポートしています。
 
 - `igxLabel` - Angular Select 入力とのリンクは `aria-labelledby` を介して自動的に処理されるため、`for` プロパティを設定する必要はありません。
 - `igx-prefix`/`igxPrefix`
@@ -385,7 +385,7 @@ export class MyClass implements OnInit {
 各コンポーネントには独自のテーマ関数があります。
 
 Select コンポーネントのスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> と <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" /> を使用する必要があります。
-[`Input Group`](input-group.md#スタイル設定) と [`Drop Down`](drop-down.md#スタイル設定) のスタイル設定セクションを参照して、これら 2 つのコンポーネントのスタイル設定方法をより深く理解してください。
+[`Input Group`](input-group.mdx#スタイル設定) と [`Drop Down`](drop-down.mdx#スタイル設定) のスタイル設定セクションを参照して、これら 2 つのコンポーネントのスタイル設定方法をより深く理解してください。
 
 また、Select コンポーネントのボタンのスタイル設定にのみ使用される <ApiLink kind="sass" module="themes" type="function-select-theme" label="select-theme" code={true} /> 関数もあります。 <br />
 Select コンポーネントのボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
@@ -417,7 +417,7 @@ $custom-select-theme: select-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/simple-combo.mdx b/docs/angular/src/content/jp/components/simple-combo.mdx
index 0511208c37..a737f69c21 100644
--- a/docs/angular/src/content/jp/components/simple-combo.mdx
+++ b/docs/angular/src/content/jp/components/simple-combo.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Angular Single Select ComboBox (単一選択のコンボボックス) コンポーネントの概要
 
-Angular Single Select ComboBox コンポーネントは、単一の選択を可能にする [ComboBox コンポーネント](combo.md)の変更です。これを「シンプルなコンボ」と呼びます。元の ComboBox コンポーネントの単一選択モードに対する需要が高かったため、ユーザーが事前定義された項目リストからオプションを選択し、カスタム値を入力できるようにする編集可能な検索入力を提供する拡張コンポーネントを作成しました。
+Angular Single Select ComboBox コンポーネントは、単一の選択を可能にする [ComboBox コンポーネント](combo.mdx)の変更です。これを「シンプルなコンボ」と呼びます。元の ComboBox コンポーネントの単一選択モードに対する需要が高かったため、ユーザーが事前定義された項目リストからオプションを選択し、カスタム値を入力できるようにする編集可能な検索入力を提供する拡張コンポーネントを作成しました。
 
 ## Angular Simple ComboBox の例
 
@@ -45,7 +45,7 @@ Ignite UI for Angular Simple ComboBox コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSimpleComboModule` をインポートします。
 
@@ -248,7 +248,7 @@ Simple ComboBox が開かれ、リスト項目がフォーカスされている
 
 <Sample src="/lists/simple-combo-cascading" height={620} alt="Angular カスケーディングの例" />
 
-[カスケード コンボを使用した Angular Grid のサンプル](../components/grid/cascading-combos.md)を参照してください。
+[カスケード コンボを使用した Angular Grid のサンプル](../components/grid/cascading-combos.mdx)を参照してください。
 
 <hr/>
 
@@ -320,13 +320,13 @@ Ignite UI for Angular Simple ComboBox コンポーネントは、コンボボッ
 
 ### デモ
 
-以下のサンプルは、<ApiLink type="SimpleCombo" member="dataPreLoad" label="dataPreLoad" /> プロパティを使用してリモート データの新しいチャンクをロードし、[ComboBox リモート バインディング](combo-remote.md)で説明されている手順に従うリモート バインディングを示しています。
+以下のサンプルは、<ApiLink type="SimpleCombo" member="dataPreLoad" label="dataPreLoad" /> プロパティを使用してリモート データの新しいチャンクをロードし、[ComboBox リモート バインディング](combo-remote.mdx)で説明されている手順に従うリモート バインディングを示しています。
 
 <Sample src="/lists/simple-combo-remote" height={400} alt="Angular Simple Combo リモート バインディングの例" />
 
 ## スタイル設定
 
-[`Ignite UI for Angular テーマ`](themes/index.md) を使用すると、Simple ComboBox の外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
+[`Ignite UI for Angular テーマ`](themes/index.mdx) を使用すると、Simple ComboBox の外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
 
 ```scss
 @use 'igniteui-angular/theming' as *;
@@ -375,7 +375,7 @@ $custom-drop-down-theme: drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-<ApiLink type="SimpleCombo" /> コンポーネントは、[`IgxOverlay`](overlay.md) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.md)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
+<ApiLink type="SimpleCombo" /> コンポーネントは、[`IgxOverlay`](overlay.mdx) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.mdx)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
 </DocsAside>
 
 ### サンプル
@@ -392,7 +392,7 @@ $custom-drop-down-theme: drop-down-theme(
 - シンプルなコンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。
 
 <DocsAside type="info" title="情報">
-Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](for-of.md#既知の制限) の既知の問題のセクションを参照してください。
+Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](for-of.mdx#既知の制限) の既知の問題のセクションを参照してください。
 </DocsAside>
 
 ## API リファレンス
@@ -417,11 +417,11 @@ Simple ComboBox は内部で `igxForOf` ディレクティブを使用するた
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo-features.md)
-- [コンボボックス リモート バインディング](combo-remote.md)
-- [コンボボックス テンプレート](combo-templates.md)
-- [テンプレート駆動フォームの統合](input-group.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [コンボボックス コンポーネント](combo-features.mdx)
+- [コンボボックス リモート バインディング](combo-remote.mdx)
+- [コンボボックス テンプレート](combo-templates.mdx)
+- [テンプレート駆動フォームの統合](input-group.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/slider/slider-ticks.mdx b/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
index 5be2e17667..dafea12cef 100644
--- a/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
+++ b/docs/angular/src/content/jp/components/slider/slider-ticks.mdx
@@ -25,7 +25,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [Slider の概要](slider.md)
+- [Slider の概要](slider.mdx)
 
 <hr/>
 
diff --git a/docs/angular/src/content/jp/components/slider/slider.mdx b/docs/angular/src/content/jp/components/slider/slider.mdx
index c0ebe4a087..ff681a9d05 100644
--- a/docs/angular/src/content/jp/components/slider/slider.mdx
+++ b/docs/angular/src/content/jp/components/slider/slider.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Slider コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](../general/getting-started.md)」 トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](../general/getting-started.mdx)」 トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSliderModule` をインポートします。
 
@@ -572,7 +572,7 @@ This is the final result from applying our new theme.
 
 ### Styling with Tailwind
 
-You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes/) first.
+You can style the `slider` using our custom Tailwind utility classes. Make sure to [set up Tailwind](../themes/misc/tailwind-classes.mdx) first.
 
 Along with the tailwind import in your global stylesheet, you can apply the desired theme utilities as follows:
 
diff --git a/docs/angular/src/content/jp/components/snackbar.mdx b/docs/angular/src/content/jp/components/snackbar.mdx
index 7a3398295c..daffa5a024 100644
--- a/docs/angular/src/content/jp/components/snackbar.mdx
+++ b/docs/angular/src/content/jp/components/snackbar.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Snackbar コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSnackbarModule` をインポートします。
 
@@ -329,7 +329,7 @@ $dark-snackbar: snackbar-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
@@ -348,7 +348,7 @@ $dark-snackbar: snackbar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/splitter.mdx b/docs/angular/src/content/jp/components/splitter.mdx
index 9962b4cfff..9b4a13a6c9 100644
--- a/docs/angular/src/content/jp/components/splitter.mdx
+++ b/docs/angular/src/content/jp/components/splitter.mdx
@@ -29,7 +29,7 @@ Ignite UI for Angular Splitter コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSplitterModule` をインポートします。
 
@@ -278,7 +278,7 @@ $splitter-theme: splitter-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/stepper.mdx b/docs/angular/src/content/jp/components/stepper.mdx
index a122662e76..5ba58e6e20 100644
--- a/docs/angular/src/content/jp/components/stepper.mdx
+++ b/docs/angular/src/content/jp/components/stepper.mdx
@@ -40,7 +40,7 @@ Ignite UI for Angular Stepper コンポーネントを初期化するには、Ig
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module** ファイルに `IgxStepperModule` をインポートします。
 
@@ -179,7 +179,7 @@ For each step the user has the ability to configure indicator, title, subtitle a
 </igx-stepper>
 ```
 
-以下のサンプルは、実行時にステッパーの<ApiLink type="Stepper" member="orientation" label="向き" />と[タイトルの位置](stepper.md#ステップのカスタマイズ)を変更する方法を示しています。
+以下のサンプルは、実行時にステッパーの<ApiLink type="Stepper" member="orientation" label="向き" />と[タイトルの位置](stepper.mdx#ステップのカスタマイズ)を変更する方法を示しています。
 
 <Sample src="/layouts/stepper-label-position-and-orientation-sample" height={528} alt="Angular Stepper 向きの例" />
 
@@ -265,7 +265,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな
 
 ステップのインジケーターのみを表示する場合は、<ApiLink type="Stepper" member="stepType" label="stepType" /> オプションを `indicator` に設定します。
 
-ステップ インジケーターはすべてのコンテンツをサポートしますが、サイズが常に **24 ピクセル**になるという制限があります。この点に注意して、ステップ インジケーターとして [IgxIconComponent](icon.md) または [IgxAvatarComponent](avatar.md) を使用することをお勧めします。
+ステップ インジケーターはすべてのコンテンツをサポートしますが、サイズが常に **24 ピクセル**になるという制限があります。この点に注意して、ステップ インジケーターとして [IgxIconComponent](icon.mdx) または [IgxAvatarComponent](avatar.mdx) を使用することをお勧めします。
 
 **Title (タイトル)**
 
@@ -393,7 +393,7 @@ Stepper コンポーネントは、ローコード [ドラッグアンドドロ
 |  | $complete-title-focus-color | The color of the complete step title on focus |
 |  | $complete-subtitle-focus-color | The color of the complete step subtitle on focus |
 
-[Ignite UI for Angular テーマ](themes/index.md)を使用して、`igx-stepper` の外観を変更できます。
+[Ignite UI for Angular テーマ](themes/index.mdx)を使用して、`igx-stepper` の外観を変更できます。
 
 はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
 
@@ -426,13 +426,13 @@ $stepper-theme: stepper-theme(
 
 ### デモ
 
-以下のサンプルは、[Ignite UI for Angular テーマ](themes/index.md)で適用されるシンプルなスタイル設定を示します。
+以下のサンプルは、[Ignite UI for Angular テーマ](themes/index.mdx)で適用されるシンプルなスタイル設定を示します。
 
 <Sample src="/layouts/stepper-styling-sample" height={264} alt="Angular Stepper スタイル設定の例" />
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/style-guide.mdx b/docs/angular/src/content/jp/components/style-guide.mdx
index ae109d09f8..f05dd5d52a 100644
--- a/docs/angular/src/content/jp/components/style-guide.mdx
+++ b/docs/angular/src/content/jp/components/style-guide.mdx
@@ -87,7 +87,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 [jp.infragistics.com](https://jp.infragistics.com/)
 
-[別のトピックへのリンク](general/getting-started.md)
+[別のトピックへのリンク](general/getting-started.mdx)
 
 [内部リンク](#色)
 
diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx
index cd513c2f40..a9d68b8b02 100644
--- a/docs/angular/src/content/jp/components/switch.mdx
+++ b/docs/angular/src/content/jp/components/switch.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Switch コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSwitchModule` をインポートします。
 
@@ -337,7 +337,7 @@ In the sample below, you can see how using the switch component with customized
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/tabbar.mdx b/docs/angular/src/content/jp/components/tabbar.mdx
index 9312436196..ab8bbc2827 100644
--- a/docs/angular/src/content/jp/components/tabbar.mdx
+++ b/docs/angular/src/content/jp/components/tabbar.mdx
@@ -42,7 +42,7 @@ Ignite UI for Angular Bottom Navigation コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBottomNavModule` をインポートします。
 
@@ -461,7 +461,7 @@ $dark-bottom-nav: bottom-nav-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 <ApiLink kind="sass" module="themes" type="function-bottom-nav-theme" label="bottom-nav-theme" code={true} /> は、tabs コンポーネントのスタイル設定で多くのパラメーターが利用できます。
@@ -484,7 +484,7 @@ $dark-bottom-nav: bottom-nav-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/tabs.mdx b/docs/angular/src/content/jp/components/tabs.mdx
index f0b2313db2..6a8ce38b2b 100644
--- a/docs/angular/src/content/jp/components/tabs.mdx
+++ b/docs/angular/src/content/jp/components/tabs.mdx
@@ -40,7 +40,7 @@ Ignite UI for Angular Tabs コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTabsModule` をインポートします。
 
@@ -525,7 +525,7 @@ $dark-tabs: tabs-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 次に、<ApiLink kind="sass" module="themes" type="function-tabs-theme" label="tabs-theme" code={true} /> を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。
@@ -548,7 +548,7 @@ $dark-tabs: tabs-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/texthighlight.mdx b/docs/angular/src/content/jp/components/texthighlight.mdx
index d0d9131314..3104b82dc2 100644
--- a/docs/angular/src/content/jp/components/texthighlight.mdx
+++ b/docs/angular/src/content/jp/components/texthighlight.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Text Highlight ディレクティブを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTextHighlightModule` をインポートします。
 
@@ -82,7 +82,7 @@ Ignite UI for Angular Text Highlight モジュールまたはディレクティ
 
 ## Angular Text Highlight ディレクティブの使用
 
-次にテキストの様々な部分を強調表示するためにハイライトできる検索ボックスを作成します。Ignite UI for Angular の [InputGroup](input-group.md) コンポーネントは、一致のクリア、次の一致、前の一致へ移動するためのボタン、検索で大文字と小文字を区別を指定するボタンを追加します。また一致がいくつ見つかったかを示すラベルがあります。
+次にテキストの様々な部分を強調表示するためにハイライトできる検索ボックスを作成します。Ignite UI for Angular の [InputGroup](input-group.mdx) コンポーネントは、一致のクリア、次の一致、前の一致へ移動するためのボタン、検索で大文字と小文字を区別を指定するボタンを追加します。また一致がいくつ見つかったかを示すラベルがあります。
 
 ```html
 <div class="search-container">
@@ -384,7 +384,7 @@ $dark-highlight: highlight-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/hemes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](./themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ### カスタム スタイル
@@ -453,7 +453,7 @@ TextHighlight ディレクティブの API に関する詳細な情報は、以
 
 ## その他のリソース
 
-- [Grid 検索](grid/search.md)
+- [Grid 検索](grid/search.mdx)
 
 <hr/>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/themes/elevations.mdx b/docs/angular/src/content/jp/components/themes/elevations.mdx
index 68e6200869..34bed806e3 100644
--- a/docs/angular/src/content/jp/components/themes/elevations.mdx
+++ b/docs/angular/src/content/jp/components/themes/elevations.mdx
@@ -96,7 +96,7 @@ igx-card {
 
 関連トピック:
 
-- [Sass エレベーション](./sass/elevations.md)
+- [Sass エレベーション](./sass/elevations.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/index.mdx b/docs/angular/src/content/jp/components/themes/index.mdx
index 2abafb9569..e5aafb52c1 100644
--- a/docs/angular/src/content/jp/components/themes/index.mdx
+++ b/docs/angular/src/content/jp/components/themes/index.mdx
@@ -82,7 +82,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de
 }
 ```
 
-これらのカラー変数の名前を分解してみましょう。`ig` プレフィックスは、この変数が Ignite UI for Angular テーマの一部であることを示す一意の識別子として存在し、`primary` はカラー変数名、`500` はカラーのバリエーションを表します。ドキュメントの[パレット](./palettes.md) セクションでパレットについて詳しく見ていきます。今のところ知っておく必要があるのは、メインのカラー バリエーションから生成されるさまざまな色合いまたはバリアントを含む、いくつかの基本カラー変数 (primary、secondary、surface、success、info など) があることだけです。上記の例で設定した `500` カラー バリエーションはメイン変数カラーと見なされ、指定されたカラー変数の他のすべてのバリアントは `500` バリアントから生成されます。
+これらのカラー変数の名前を分解してみましょう。`ig` プレフィックスは、この変数が Ignite UI for Angular テーマの一部であることを示す一意の識別子として存在し、`primary` はカラー変数名、`500` はカラーのバリエーションを表します。ドキュメントの[パレット](./palettes.mdx) セクションでパレットについて詳しく見ていきます。今のところ知っておく必要があるのは、メインのカラー バリエーションから生成されるさまざまな色合いまたはバリアントを含む、いくつかの基本カラー変数 (primary、secondary、surface、success、info など) があることだけです。上記の例で設定した `500` カラー バリエーションはメイン変数カラーと見なされ、指定されたカラー変数の他のすべてのバリアントは `500` バリアントから生成されます。
 
 これらのバリエーションを変更すると、パレット全体を完全に見直すことができます。
 
@@ -108,7 +108,7 @@ Sass が適切でない場合は、[カスタム CSS プロパティ](https://de
 }
 ```
 
-これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、<ApiLink kind="sass" module="themes" label="コンポーネントのドキュメント" />を参照してください。ドキュメントの[エレベーション](./elevations.md)でエレベーションを詳しく見ていきます。
+これらは基本的に積層された CSS [`box-shadow`](https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow) 宣言です。それらを他の有効な `box-shadow` 値に置き換えることができます。エレベーション レベルの数値が高いほど、シャドウが大きくなります。この場合も、コンポーネントごとに異なるエレベーション レベルが使用されます。コンポーネントが使用するエレベーション レベルを確認するには、<ApiLink kind="sass" module="themes" label="コンポーネントのドキュメント" />を参照してください。ドキュメントの[エレベーション](./elevations.mdx)でエレベーションを詳しく見ていきます。
 
 ## 構成
 
@@ -212,10 +212,10 @@ igx-avatar {
 
 関連トピック:
 
-- [パレット](./palettes.md)
-- [エレベーション](./elevations.md)
-- [タイポグラフィ](./typography.md)
-- [Sass のテーマ](./sass/index.md)
+- [パレット](./palettes.mdx)
+- [エレベーション](./elevations.mdx)
+- [タイポグラフィ](./typography.mdx)
+- [Sass のテーマ](./sass/index.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
index 3f0a1eeddf..9bf1b5b5a0 100644
--- a/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/angular-material-theming.mdx
@@ -75,7 +75,7 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
 )}
 ```
 
-既存のプロジェクトで Ignite UI for Angular を使用する方法については、[`「作業の開始」`](../../general/getting-started.md)トピックを参照してください。各コンポーネントをインポートして使用する方法の詳細およびガイド付きの例は、コンポーネントのドキュメントを参照してください。
+既存のプロジェクトで Ignite UI for Angular を使用する方法については、[`「作業の開始」`](../../general/getting-started.mdx)トピックを参照してください。各コンポーネントをインポートして使用する方法の詳細およびガイド付きの例は、コンポーネントのドキュメントを参照してください。
 
 ## Ignite UI と Angular Material コンポーネント
 
@@ -205,7 +205,7 @@ $custom-mat-light-theme: mat.define-light-theme((
 ```
 
 <DocsAside type="info" title="情報">
-Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.md) セクションを参照してください。
+Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.mdx) セクションを参照してください。
 </DocsAside>
 
 #### ダーク テーマ パレット
@@ -264,7 +264,7 @@ Angular Material コンポーネントの場合、前述のカスタム マテ
 ```
 
 <DocsAside type="warning" title="警告">
-[`Emulated`](../sass/component-themes.md#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
+[`Emulated`](../sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
 </DocsAside>
 
 #### ライト モード
@@ -414,14 +414,14 @@ $custom-mat-light-theme: mat.define-light-theme((
 
 関連トピック:
 
-- [パレット](../sass/palettes.md)
-- [コンポーネント テーマ](../sass/component-themes.md)
-- [タイポグラフィ](../sass/typography.md)
-- [Avatar コンポーネント](../../avatar.md)
-- [Button コンポーネント](../../button.md)
-- [Dialog コンポーネント](../../dialog.md)
-- [Icon コンポーネント](../../icon.md)
-- [Expansion Panel コンポーネント](../../expansion-panel.md)
+- [パレット](../sass/palettes.mdx)
+- [コンポーネント テーマ](../sass/component-themes.mdx)
+- [タイポグラフィ](../sass/typography.mdx)
+- [Avatar コンポーネント](../../avatar.mdx)
+- [Button コンポーネント](../../button.mdx)
+- [Dialog コンポーネント](../../dialog.mdx)
+- [Icon コンポーネント](../../icon.mdx)
+- [Expansion Panel コンポーネント](../../expansion-panel.mdx)
 
 ## その他のリソース
 
diff --git a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
index d390d0874a..0468a79346 100644
--- a/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/bootstrap-theming.mdx
@@ -83,7 +83,7 @@ import { IgxAvatarModule } from 'igniteui-angular/avatar';
 )}
 ```
 
-既存のプロジェクトで Ignite UI for Angular を使用する方法については、[`「作業の開始」`](../../general/getting-started.md)トピックを参照してください。各コンポーネントをインポートして使用する方法の詳細およびガイド付きの例は、コンポーネントのドキュメントを参照してください。
+既存のプロジェクトで Ignite UI for Angular を使用する方法については、[`「作業の開始」`](../../general/getting-started.mdx)トピックを参照してください。各コンポーネントをインポートして使用する方法の詳細およびガイド付きの例は、コンポーネントのドキュメントを参照してください。
 
 ## コンポーネント
 
@@ -176,7 +176,7 @@ $dark-secondary: color($custom-dark-palette, "secondary");
 ```
 
 <DocsAside type="info" title="情報">
-Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.md) セクションを参照してください。
+Ignite UI for Angular が提供するパレットと新しいパレットの作成方法については、[`Sass のパレット`](../sass/palettes.mdx) セクションを参照してください。
 </DocsAside>
 
 ### テーマ
@@ -314,7 +314,7 @@ Ignite UI for Angular のすべてのコンポーネントは渡されたパレ
 `$theme-colors` マップの変更終了後、bootstrap コンポーネントはすでに igx `$light-bootstrap-palette` のカラーを light モードに使用し、`$custom-dark-palette` を dark モードに使用します。
 
 <DocsAside type="warning" title="警告">
-[`Emulated`](../sass/component-themes.md#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
+[`Emulated`](../sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を`解除する`ために、上記のコードを `::ng-deep` セレクター内に配置してください。
 </DocsAside>
 
 ### クラスの生成
@@ -364,14 +364,14 @@ Ignite UI for Angular は、テーマごとに 4 つのデフォルト タイプ
 
 ## 関連トピック
 
-- [パレット](../sass/palettes.md)
-- [コンポーネント テーマ](../sass/component-themes.md)
-- [タイポグラフィ](../sass/typography.md)
-- [Avatar コンポーネント](../../avatar.md)
-- [Button コンポーネント](../../button.md)
-- [Dialog コンポーネント](../../dialog.md)
-- [Icon コンポーネント](../../icon.md)
-- [List コンポーネント](../../list.md)
+- [パレット](../sass/palettes.mdx)
+- [コンポーネント テーマ](../sass/component-themes.mdx)
+- [タイポグラフィ](../sass/typography.mdx)
+- [Avatar コンポーネント](../../avatar.mdx)
+- [Button コンポーネント](../../button.mdx)
+- [Dialog コンポーネント](../../dialog.mdx)
+- [Icon コンポーネント](../../icon.mdx)
+- [List コンポーネント](../../list.mdx)
 
 ## その他のリソース
 
diff --git a/docs/angular/src/content/jp/components/themes/misc/printing-styles.mdx b/docs/angular/src/content/jp/components/themes/misc/printing-styles.mdx
index de0079de63..283eb65e12 100644
--- a/docs/angular/src/content/jp/components/themes/misc/printing-styles.mdx
+++ b/docs/angular/src/content/jp/components/themes/misc/printing-styles.mdx
@@ -55,4 +55,4 @@ SCSS を使用してボタンを印刷スタイルで非表示にできます。
 
 白黒で印刷したい場合、任意の要素で `.igx-bw-print` クラスを使用できます。その要素とその要素内のすべてが印刷時に白黒になります。
 
-[`igx-grid`](../../grid/grid.md) を印刷するには、[`Excel へエクスポート`](../../grid/export-excel.md) 機能を使用することをお勧めします。あるいは、グリッドのスクリーンショットを作成して印刷することもできます。
+[`igx-grid`](../../grid/grid.mdx) を印刷するには、[`Excel へエクスポート`](../../grid/export-excel.mdx) 機能を使用することをお勧めします。あるいは、グリッドのスクリーンショットを作成して印刷することもできます。
diff --git a/docs/angular/src/content/jp/components/themes/palettes.mdx b/docs/angular/src/content/jp/components/themes/palettes.mdx
index 378e7bde91..c34c330171 100644
--- a/docs/angular/src/content/jp/components/themes/palettes.mdx
+++ b/docs/angular/src/content/jp/components/themes/palettes.mdx
@@ -210,7 +210,7 @@ _Material Dark:_
 
 関連トピック:
 
-- [Sass を使用したパレット](./sass/palettes.md)
+- [Sass を使用したパレット](./sass/palettes.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/roundness.mdx b/docs/angular/src/content/jp/components/themes/roundness.mdx
index e303972bad..86dd22a1e7 100644
--- a/docs/angular/src/content/jp/components/themes/roundness.mdx
+++ b/docs/angular/src/content/jp/components/themes/roundness.mdx
@@ -22,7 +22,7 @@ Ignite UI for Angular では、丸みを 0 から 1 の間の値で調整する
 `--ig-radius-factor` を 0 に設定すると、コンポーネントは最小の border-radius を使用し、角がシャープなブロック状に表示されます。1 に設定すると、最大の border-radius が適用され、より丸みを帯びた外観になります。
 
 以下は、定義済みの最小および最大の境界半径値を持ち、`--ig-radius-factor` 変数を使用して変更できるコンポーネントのリストです。 <br />
-• [Action Strip](../action-strip.md) • [Button](../button.md) • [Button Group](../button-group.md) • [Calendar](../calendar.md) • [Card](../card.md) • [Carousel](../carousel.md) • [Checkbox](../checkbox.md) • [Chip](../chip.md) • [Combo](../combo.md) • [Date Picker](../date-picker.md) • [Date Range Picker](../date-range-picker.md) • [Grid](../grid/grid.md) • [Input Group](../input-group.md) • [Linear Progress](../linear-progress.md) • [List](../list.md) • [Month Picker](../month-picker.md) • [Navigation Drawer](../navdrawer.md) • [Radio](../radio-button.md) • [Ripple](../ripple.md) • [Snackbar](../snackbar.md) • [Switch](../switch.md) • [Toast](../toast.md)
+• [Action Strip](../action-strip.mdx) • [Button](../button.mdx) • [Button Group](../button-group.mdx) • [Calendar](../calendar.mdx) • [Card](../card.mdx) • [Carousel](../carousel.mdx) • [Checkbox](../checkbox.mdx) • [Chip](../chip.mdx) • [Combo](../combo.mdx) • [Date Picker](../date-picker.mdx) • [Date Range Picker](../date-range-picker.mdx) • [Grid](../grid/grid.mdx) • [Input Group](../input-group.mdx) • [Linear Progress](../linear-progress.mdx) • [List](../list.mdx) • [Month Picker](../month-picker.mdx) • [Navigation Drawer](../navdrawer.mdx) • [Radio](../radio-button.mdx) • [Ripple](../ripple.mdx) • [Snackbar](../snackbar.mdx) • [Switch](../switch.mdx) • [Toast](../toast.mdx)
 
 ## 使用方法
 
@@ -34,7 +34,7 @@ igx-chip {
 }
 ```
 
-これにより、事前定義された最小の border-radius が適用され、[Chip](../chip.md) コンポーネントの角が直線になります。
+これにより、事前定義された最小の border-radius が適用され、[Chip](../chip.mdx) コンポーネントの角が直線になります。
 
 ```css
 igx-chip {
@@ -42,7 +42,7 @@ igx-chip {
 }
 ```
 
-値を 1 に設定すると、定義済みの最大の border-radius が適用され、[Chip](../chip.md) コンポーネントの角が丸くなります。
+値を 1 に設定すると、定義済みの最大の border-radius が適用され、[Chip](../chip.mdx) コンポーネントの角が丸くなります。
 
 最小値と最大値の間にしたい場合は、`--ig-radius-factor` を 0 ～ 1 の小数値に設定できます。
 たとえば、`0.5` に設定すると、コンポーネントの最大許容値の 50% の border-radius が適用されます。
@@ -61,7 +61,7 @@ igx-chip {
 
 関連トピック:
 
-- [Sass による丸み設定](./sass/roundness.md)
+- [Sass による丸み設定](./sass/roundness.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx b/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
index bddf6fd209..c6f867ae4d 100644
--- a/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
@@ -82,7 +82,7 @@ igx-avatar {
 ```
 
 アバターのデフォルトテーマに設定するテーマと異なる背景色を持つ新規のグローバル アバター テーマを作成する場合、[**概要セクション**](#概要)のようにコンポーネント テーマを作成する 2 つの一般的な方法があります。
-コンポーネントテーマを体系化し、スコープする方法があります。最も簡単な方法は、[**グローバル テーマ**](./global-themes.md)を定義した同じファイルで行う方法です。
+コンポーネントテーマを体系化し、スコープする方法があります。最も簡単な方法は、[**グローバル テーマ**](./global-themes.mdx)を定義した同じファイルで行う方法です。
 
 アバター テーマの定義:
 
@@ -230,7 +230,7 @@ CSS 変数を使用する間は、`::ng-deep` 擬似セレクターは必要あ
 
 グローバル テーマの設定方法:
 
-- [グローバル テーマ](./global-themes.md)
+- [グローバル テーマ](./global-themes.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/configuration.mdx b/docs/angular/src/content/jp/components/themes/sass/configuration.mdx
index 18248d449c..0a242180ff 100644
--- a/docs/angular/src/content/jp/components/themes/sass/configuration.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/configuration.mdx
@@ -48,19 +48,19 @@ $my-scrollbar-theme: scrollbar-theme($sb-size: 16px, $sb-thumb-bg-color: pink, $
 
 概念の学習:
 
-- [パレット](./palettes.md)
-- [タイポグラフィ](./typography.md)
-- [エレベーション](./elevations.md)
-- [スキーマ](./schemas.md)
-- [アニメーション](./animations.md)
+- [パレット](./palettes.mdx)
+- [タイポグラフィ](./typography.mdx)
+- [エレベーション](./elevations.mdx)
+- [スキーマ](./schemas.mdx)
+- [アニメーション](./animations.mdx)
 
 アプリケーション全体のテーマを作成する方法の詳細:
 
-- [グローバル テーマ](./global-themes.md)
+- [グローバル テーマ](./global-themes.mdx)
 
 コンポーネント固有のテーマを作成する方法の詳細:
 
-- [コンポーネント テーマ](./component-themes.md)
+- [コンポーネント テーマ](./component-themes.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/elevations.mdx b/docs/angular/src/content/jp/components/themes/sass/elevations.mdx
index eab61ed09d..85b0e1f16f 100644
--- a/docs/angular/src/content/jp/components/themes/sass/elevations.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/elevations.mdx
@@ -17,7 +17,7 @@ Elevations are used to establish and maintain functional boundaries between Docu
 
 ## 概要
 
-Ignite UI for Angular のエレベーションは、25 要素のマップとして宣言されています。各要素はキーと値のペアであり、キーはエレベーション レベル名 (0..24) であり、値は 3 つの `box-shadow` 宣言のリストです。シャドウの色を定義できる新しいエレベーションのセットを生成できます。さらに、エレベーション マップから特定のエレベーション レベルを取得するための関数を公開します。デフォルトでコンポーネント間で使用されるグローバル変数 `$elevations` を公開します。エレベーションに関連する CSS 変数の[ドキュメント](../elevations.md)を読んでいない場合は、先に進む前にまず読んでおくことをお勧めします。
+Ignite UI for Angular のエレベーションは、25 要素のマップとして宣言されています。各要素はキーと値のペアであり、キーはエレベーション レベル名 (0..24) であり、値は 3 つの `box-shadow` 宣言のリストです。シャドウの色を定義できる新しいエレベーションのセットを生成できます。さらに、エレベーション マップから特定のエレベーション レベルを取得するための関数を公開します。デフォルトでコンポーネント間で使用されるグローバル変数 `$elevations` を公開します。エレベーションに関連する CSS 変数の[ドキュメント](../elevations.mdx)を読んでいない場合は、先に進む前にまず読んでおくことをお勧めします。
 
 ## 使用方法
 
@@ -117,7 +117,7 @@ $elevations: (
 
 ## エレベーション スキーマの宣言
 
-エレベーション レベルは、テーマ スキーマの宣言でも使用されます。詳細については、ドキュメントの[スキーマ](schemas.md) セクションをご覧ください。
+エレベーション レベルは、テーマ スキーマの宣言でも使用されます。詳細については、ドキュメントの[スキーマ](schemas.mdx) セクションをご覧ください。
 
 ## API リファレンス
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
index f18e836f3d..5006b03016 100644
--- a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
@@ -151,14 +151,14 @@ Ignite UI for Angular には、事前定義されたテーマのセットから
 
 | テーマ                                                             | スキーマ                             | カラー パレット                                                                          |
 | ----------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
-| [**Material Light**](presets/material.md#default-theme)           |  `$light-material-schema`          | $light-material-palette                                                                |
-| [**Material Dark**](presets/material.md#material-dark-theme)      |  `$dark-material-schema`           | $dark-material-palette                                                                 |
-| [**Fluent Light**](presets/fluent.md)                             | `$light-fluent-schema`             | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
-| [**Fluent Dark**](presets/fluent.md#fluent-dark-theme)            |  `$dark-fluent-schema`             | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
-| [**Bootstrap Light**](presets/bootstrap.md)                       | `$light-bootstrap-schema`          | $light-bootstrap-palette                                                               |
-| [**Bootstrap Dark**](presets/bootstrap.md#bootstrap-dark-theme)   |  `$dark-bootstrap-schema`         | $dark-bootstrap-palette                                                                |
-| [**Indigo Light**](presets/indigo.md)                             | `$light-indigo-schema`             | $light-indigo-palette                                                                  |
-| [**Indigo Dark**](presets/indigo.md#indigo-dark-theme)            |   `$dark-indigo-schema`           | $dark-indigo-palette                                                                   |
+| [**Material Light**](presets/material.mdx#default-theme)           |  `$light-material-schema`          | $light-material-palette                                                                |
+| [**Material Dark**](presets/material.mdx#material-dark-theme)      |  `$dark-material-schema`           | $dark-material-palette                                                                 |
+| [**Fluent Light**](presets/fluent.mdx)                             | `$light-fluent-schema`             | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
+| [**Fluent Dark**](presets/fluent.mdx#fluent-dark-theme)            |  `$dark-fluent-schema`             | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
+| [**Bootstrap Light**](presets/bootstrap.mdx)                       | `$light-bootstrap-schema`          | $light-bootstrap-palette                                                               |
+| [**Bootstrap Dark**](presets/bootstrap.mdx#bootstrap-dark-theme)   |  `$dark-bootstrap-schema`         | $dark-bootstrap-palette                                                                |
+| [**Indigo Light**](presets/indigo.mdx)                             | `$light-indigo-schema`             | $light-indigo-palette                                                                  |
+| [**Indigo Dark**](presets/indigo.mdx#indigo-dark-theme)            |   `$dark-indigo-schema`           | $dark-indigo-palette                                                                   |
 
 
 ## その他のリソース
@@ -167,7 +167,7 @@ Ignite UI for Angular には、事前定義されたテーマのセットから
 
 各コンポーネント テーマの作成する方法:
 
-- [コンポーネント テーマ](component-themes.md)
+- [コンポーネント テーマ](component-themes.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/index.mdx b/docs/angular/src/content/jp/components/themes/sass/index.mdx
index 48f530acd9..d14ad14102 100644
--- a/docs/angular/src/content/jp/components/themes/sass/index.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/index.mdx
@@ -64,20 +64,20 @@ Sass テーマ システムは、各コンポーネントの最小丸みと最
 
 概念の学習:
 
-- [構成](./configuration.md)
-- [パレット](./palettes.md)
-- [タイポグラフィ](./typography.md)
-- [エレベーション](./elevations.md)
-- [スキーマ](./schemas.md)
-- [アニメーション](./animations.md)
+- [構成](./configuration.mdx)
+- [パレット](./palettes.mdx)
+- [タイポグラフィ](./typography.mdx)
+- [エレベーション](./elevations.mdx)
+- [スキーマ](./schemas.mdx)
+- [アニメーション](./animations.mdx)
 
 アプリケーション全体のテーマを作成する方法の詳細:
 
-- [アプリケーション テーマ](./global-themes.md)
+- [アプリケーション テーマ](./global-themes.mdx)
 
 コンポーネント固有のテーマを作成する方法の詳細:
 
-- [コンポーネント テーマ](./component-themes.md)
+- [コンポーネント テーマ](./component-themes.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/palettes.mdx b/docs/angular/src/content/jp/components/themes/sass/palettes.mdx
index 2d7e1f9b6b..8b59de3b9a 100644
--- a/docs/angular/src/content/jp/components/themes/sass/palettes.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/palettes.mdx
@@ -38,7 +38,7 @@ $melon-palette: palette(
 `$primary`、`$secondary`、`surface`、またはその他のカラーに渡す値は、**color タイプである必要があります**。CSS 変数は Sass ビルド時に解決できないため、引数として渡すことはできません。
 </DocsAside>
 
-すべてのカラー バリエーションを含むパレットを作成しました。各バリエーションには自動的に作成されたテキストのコントラスト カラーが含まれます。CSS 変数を使用したパレットに関するドキュメントをまだ読んでいない場合は、[こちら](../palettes.md)を参照してください。パレットのすべてのカラー バリエーションに関する情報が含まれています。
+すべてのカラー バリエーションを含むパレットを作成しました。各バリエーションには自動的に作成されたテキストのコントラスト カラーが含まれます。CSS 変数を使用したパレットに関するドキュメントをまだ読んでいない場合は、[こちら](../palettes.mdx)を参照してください。パレットのすべてのカラー バリエーションに関する情報が含まれています。
 
 `palette` 関数は、ビルド時に `.scss` ドキュメントで再利用できるカラーを作成するために内部的に多くの機能を果たします。この関数は豊かなカラー マップを作成するという点で優れていますが、カラー バリエーションを生成するためのアルゴリズムは厳密であり、ニーズに完全に一致しない場合があります。コンポーネント テーマは、パレットの生成方法に関係なく、マップの形状のみに関係します。
 
@@ -285,7 +285,7 @@ CSS クラスを使用して Web 要素 (テキストや背景など) にカラ
 
 ## CSS 変数
 
-ドキュメントの [CSS 変数](../palettes.md)セクションでカラー パレットについて読むと、すべてのパレット カラーが CSS 変数として含まれています。`theme` ミックスインを使用してテーマを生成するたびに内部で行います。`theme` は本体で `palette` ミックスインを呼び出します。パレットを取得し、パレット内のカラーを CSS 変数に変換します。
+ドキュメントの [CSS 変数](../palettes.mdx)セクションでカラー パレットについて読むと、すべてのパレット カラーが CSS 変数として含まれています。`theme` ミックスインを使用してテーマを生成するたびに内部で行います。`theme` は本体で `palette` ミックスインを呼び出します。パレットを取得し、パレット内のカラーを CSS 変数に変換します。
 
 このパレットは、カスタム パレット カラーを CSS 変数として含める場合に使用します。
 
@@ -307,7 +307,7 @@ $my-palette: palette(
 - <ApiLink kind="sass" module="palettes" type="function-color" label="パレット カラーの取得" />
 - <ApiLink kind="sass" module="palettes" type="function-contrast-color" label="コントラスト カラーの取得" />
 - <ApiLink kind="sass" module="utilities" type="mixin-color-classes" label="カラー クラスの生成" />
-- [スキーマ](./schemas.md)
+- [スキーマ](./schemas.mdx)
 
 ## その他のリソース
 
diff --git a/docs/angular/src/content/jp/components/themes/sass/typography.mdx b/docs/angular/src/content/jp/components/themes/sass/typography.mdx
index c2d978243c..84246f4867 100644
--- a/docs/angular/src/content/jp/components/themes/sass/typography.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/typography.mdx
@@ -23,7 +23,7 @@ The Ignite UI for Angular Typography Sass module allows you to modify the typogr
 
 Ignite UI for Angular は、テーマごとに 4 つのデフォルトのタイプ スケールを公開します: `$material-type-scale`、`$fluent-type-scale`、`$bootstrap-type-scale`、`$indigo-type-scale` です。これらは、`typography` ミックスインでタイポグラフィ スタイルを設定するために使用します。ただし、追加のタイプ スケールを作成できます。
 
-多くの場合、タイポグラフィを少し変更するだけで済みます。CSS 変数のドキュメントの[タイポグラフィ](../typography.md) セクションを最初に読んでおくことを推奨します。Sass を使用してタイポグラフィを変更する必要があるのは、タイポグラフィ スケール全体に関連するより深い変更を行う場合のみです。
+多くの場合、タイポグラフィを少し変更するだけで済みます。CSS 変数のドキュメントの[タイポグラフィ](../typography.mdx) セクションを最初に読んでおくことを推奨します。Sass を使用してタイポグラフィを変更する必要があるのは、タイポグラフィ スケール全体に関連するより深い変更を行う場合のみです。
 
 ## 使用方法
 
diff --git a/docs/angular/src/content/jp/components/themes/typography.mdx b/docs/angular/src/content/jp/components/themes/typography.mdx
index fb938ed04e..3c6291b8a1 100644
--- a/docs/angular/src/content/jp/components/themes/typography.mdx
+++ b/docs/angular/src/content/jp/components/themes/typography.mdx
@@ -93,7 +93,7 @@ body 要素で `ig-typography` クラスを設定してタイポグラフィ ス
 
 ## その他のリソース
 
-- [Sass を使用したタイポグラフィ](./sass/typography.md)
+- [Sass を使用したタイポグラフィ](./sass/typography.mdx)
 
 <hr/>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/tile-manager.mdx b/docs/angular/src/content/jp/components/tile-manager.mdx
index c0a9158415..3ab2ecd877 100644
--- a/docs/angular/src/content/jp/components/tile-manager.mdx
+++ b/docs/angular/src/content/jp/components/tile-manager.mdx
@@ -67,7 +67,7 @@ export class AppComponent {
 - `IgcTileComponent` - このコンポーネントは、タイル マネージャー内に表示される個々のタイルを表します。
 - `IgcTileManagerComponent` - これはすべてのタイル コンポーネントを含むメイン コンポーネントであり、タイル レイアウト全体のコンテナーとして機能します。
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
 
 ```html
 <igc-tile-manager>
diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx
index e4066a6bf3..b95ec70167 100644
--- a/docs/angular/src/content/jp/components/time-picker.mdx
+++ b/docs/angular/src/content/jp/components/time-picker.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Time Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTimePickerModule` をインポートします。
 
@@ -145,9 +145,9 @@ export class SampleFormComponent {
 
 ### コンポーネントの投影
 
-Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは <ApiLink type="InputGroup" /> と同じです: <ApiLink type="InputDirective" /> を除いて、[`igxLabel`](label-input.md)、[`IgxHint`](input-group.md#hint)、[`igxPrefix`](input-group.md#prefix-および-suffix)、[`igxSuffix`](input-group.md#prefix-および-suffix)。詳細については、[Label および Input](label-input.md) トピックを参照してください。
+Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは <ApiLink type="InputGroup" /> と同じです: <ApiLink type="InputDirective" /> を除いて、[`igxLabel`](label-input.mdx)、[`IgxHint`](input-group.mdx#hint)、[`igxPrefix`](input-group.mdx#prefix-および-suffix)、[`igxSuffix`](input-group.mdx#prefix-および-suffix)。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
 
-デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。<ApiLink type="PickerToggle" /> コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](input-group.md#prefix-および-suffix) または [`igxSuffix`](input-group.md#prefix-および-suffix) で設定できます。
+デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。<ApiLink type="PickerToggle" /> コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](input-group.mdx#prefix-および-suffix) または [`igxSuffix`](input-group.mdx#prefix-および-suffix) で設定できます。
 
 次の例では、カスタム ラベルとヒントを追加し、サフィックスとして表示されるようにデフォルトのトグル アイコンの位置を変更しました。
 
@@ -293,13 +293,13 @@ Time Picker コンポーネントは、さまざまな表示形式と入力形
 
 Time Picker は、パブリックの <ApiLink type="TimePicker" member="increment" label="increment" /> メソッドと <ApiLink type="TimePicker" member="decrement" label="decrement" /> メソッドを公開します。それらは 2 つのオプションのパラメターを受け入れます: 変更される `DatePart` とそれが変更される `delta` です。指定しない場合、`DatePart` はデフォルトで `Hours` になり、`delta` はデフォルトで <ApiLink type="TimePicker" member="itemsdelta" label="itemsDelta" /> になります。
 
-[Date Time Editor ディレクティブ](date-time-editor.md#増加および減少)で、両方の方法の使用法を示すサンプルを見つけることができます。
+[Date Time Editor ディレクティブ](date-time-editor.mdx#増加および減少)で、両方の方法の使用法を示すサンプルを見つけることができます。
 
 ### フォームと検証
 
 Time Picker コンポーネントは、コア FormsModule [NgModel](https://angular.io/api/forms/NgModel) および [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) (FormControl, FormGroup など) からのすべてのディレクティブをサポートします。これには、[フォーム バリデータ](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの[最小値と最大値](#最小値と最大値)はフォーム バリデータとしても機能します。
 
-[リアクティブ フォームの統合](angular-reactive-form-validation.md)サンプルは、ReactiveForms で igxTimePicker を使用する方法を示しています。
+[リアクティブ フォームの統合](angular-reactive-form-validation.mdx)サンプルは、ReactiveForms で igxTimePicker を使用する方法を示しています。
 
 #### 最小値と最大値
 
@@ -369,7 +369,7 @@ public onValidationFailed() {
 
 #### 日付ピッカーとタイム ピッカーを併用する
 
-[`IgxDatePicker`](date-picker.md) と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
+[`IgxDatePicker`](date-picker.mdx) と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
 
 テンプレート駆動フォームでこれを実現するには、`ngModel` を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。
 
@@ -407,10 +407,10 @@ $my-time-picker-theme: time-picker-theme(
 ```
 
 <DocsAside type="info" title="情報">
-Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
-Time Picker ウィンドウは [`IgxOverlayService`](overlay.md) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+Time Picker ウィンドウは [`IgxOverlayService`](overlay.mdx) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の <ApiLink kind="interface" type="OverlaySettings" member="outlet" /> プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
 
@@ -431,7 +431,7 @@ export class TimepickerStylingComponent {
 Time Picker の項目がコンポーネントのホスト**内**に適切にレンダリングされます。つまり、カスタム テーマが有効になります。
 
 <DocsAside type="info" title="情報">
-[`IgxOverlayService`](overlay.md) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.md)をご覧ください。
+[`IgxOverlayService`](overlay.mdx) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.mdx)をご覧ください。
 </DocsAside>
 
 ```scss
@@ -441,7 +441,7 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -479,9 +479,9 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
 
 ## その他のリソース
 
-- [Date Time Editor](date-time-editor.md)
-- [Label および Input](label-input.md)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.md)
+- [Date Time Editor](date-time-editor.mdx)
+- [Label および Input](label-input.mdx)
+- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/toast.mdx b/docs/angular/src/content/jp/components/toast.mdx
index aec380af92..0340fc02e6 100644
--- a/docs/angular/src/content/jp/components/toast.mdx
+++ b/docs/angular/src/content/jp/components/toast.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Toast コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxToastModule` をインポートします。
 
@@ -227,7 +227,7 @@ $custom-toast-theme: toast-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後に Toast のカスタム テーマを設定します。
@@ -244,7 +244,7 @@ $custom-toast-theme: toast-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/toggle.mdx b/docs/angular/src/content/jp/components/toggle.mdx
index 785d95b703..a537af72ff 100644
--- a/docs/angular/src/content/jp/components/toggle.mdx
+++ b/docs/angular/src/content/jp/components/toggle.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Toggle ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxToggleModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/tooltip.mdx b/docs/angular/src/content/jp/components/tooltip.mdx
index 74202ba15f..7e66619d67 100644
--- a/docs/angular/src/content/jp/components/tooltip.mdx
+++ b/docs/angular/src/content/jp/components/tooltip.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular Tooltip ディレクティブを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTooltipModule` をインポートします。
 
@@ -85,7 +85,7 @@ Ignite UI for Angular Tooltip モジュールまたはディレクティブを
 
 ## Angular Tooltip の使用
 
-上記のようにシンプルなテキスト ツールチップを作成します。`IgxAvatarModule` をインポートして要素として [`IgxAvatar`](avatar.md) を使用します。
+上記のようにシンプルなテキスト ツールチップを作成します。`IgxAvatarModule` をインポートして要素として [`IgxAvatar`](avatar.mdx) を使用します。
 
 ```typescript
 // app.module.ts
@@ -159,7 +159,7 @@ avatar をターゲットにして、<ApiLink type="TooltipTargetDirective" labe
 
 ツールチップのコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。
 
-<ApiLink type="TooltipDirective" label="igxTooltip" /> を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.md)、マップの場所アイコンに [`IgxIcon`](icon.md) を使用します。この目的のためには、各モジュールを取得する必要があります。
+<ApiLink type="TooltipDirective" label="igxTooltip" /> を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.mdx)、マップの場所アイコンに [`IgxIcon`](icon.mdx) を使用します。この目的のためには、各モジュールを取得する必要があります。
 
 ```typescript
 // app.module.ts
@@ -303,7 +303,7 @@ export class AppModule {}
 
 ### オーバーレイ構成
 
-<ApiLink type="TooltipDirective" label="igxTooltip" /> と <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.md) を使用してツールチップ要素を開閉します。
+<ApiLink type="TooltipDirective" label="igxTooltip" /> と <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.mdx) を使用してツールチップ要素を開閉します。
 
 <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> ディレクティブは <ApiLink type="TooltipTargetDirective" member="positionsettings" label="positionSettings" /> プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。
 
@@ -466,10 +466,10 @@ $dark-tooltip: tooltip-theme(
 ```
 
 <DocsAside type="info" title="情報">
-ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.md)、[`IgxSwitch`](switch.md) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx)、[`IgxSwitch`](switch.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
-ツールチップは [`IgxOverlayService`](overlay.md) を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+ツールチップは [`IgxOverlayService`](overlay.mdx) を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 ```html
 <igx-avatar
@@ -500,7 +500,7 @@ $dark-tooltip: tooltip-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/transaction-classes.mdx b/docs/angular/src/content/jp/components/transaction-classes.mdx
index b13d0d32e2..753aac37ff 100644
--- a/docs/angular/src/content/jp/components/transaction-classes.mdx
+++ b/docs/angular/src/content/jp/components/transaction-classes.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 トランザクションの <ApiLink kind="interface" type="Transaction" member="id" /> はデータレコードごとに一意である必要があり、このトランザクションが影響するレコードを定義します。<ApiLink kind="enum" type="TransactionType" member="Type" /> は、実行する操作に応じて、`ADD`、`DELETE`、`UPDATE` の 3 つのトランザクションタイプのいずれかになります。<ApiLink kind="interface" type="Transaction" member="newValue" /> には、`ADD` トランザクションを追加する場合の新しいレコードの値が含まれます。既存のレコードを更新する場合、<ApiLink kind="interface" type="Transaction" member="newValue" /> には変更のみが含まれます。同じ ID の `UPDATE` タイプのトランザクションが複数あるレコードを削除する場合、<ApiLink kind="interface" type="Transaction" member="newValue" /> には削除されたレコードの値が含まれます。
 
-各タイプのトランザクションを追加する方法の例は、[トランザクションサービスの使用方法](transaction-how-to-use.md)のトピックで見ることができます。
+各タイプのトランザクションを追加する方法の例は、[トランザクションサービスの使用方法](transaction-how-to-use.mdx)のトピックで見ることができます。
 
 操作 (トランザクション) を実行するたびに、トランザクション ログと取り消しスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは集計された <ApiLink type="State" kind="interface" /> を維持します。<ApiLink type="State" kind="interface" /> は一意のレコードで構成され、すべてのレコードは上記のサポートされているトランザクション タイプのいずれかです。
 
@@ -33,15 +33,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下のトピックには、行編集を有効にするために <ApiLink type="BaseTransactionService" label="igxBaseTransactionService" /> を使用する方法の詳細な例が含まれます。
 
-- [Grid 行編集](grid/row-editing.md)
-- [Tree Grid 行編集](treegrid/row-editing.md)
-- [Hierarchical Grid 行編集](hierarchicalgrid/row-editing.md)
+- [Grid 行編集](grid/row-editing.mdx)
+- [Tree Grid 行編集](treegrid/row-editing.mdx)
+- [Hierarchical Grid 行編集](hierarchicalgrid/row-editing.mdx)
 
 ## igxTransactionService および igxHierarchicalTransactionService に関する一般情報
 
 <ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionFactory" /> は、<ApiLink kind="interface" type="TransactionService" label="Transaction Service" />インターフェイスを実装する注入可能なミドルウェアです。コンポーネントはこれらを使用して、基になるデータに影響を与えることなく変更を蓄積できます。プロバイダーは、_access_、_manipulate_ (元に戻すとやり直し)、およびデータへの 1 つまたはすべての変更を_破棄またはコミット_するための API を公開します。
 
-より具体的な例では、<ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionFactory" /> は、[`IgxGrid`](grid/grid.md) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは <ApiLink kind="interface" type="TransactionService" member="startPending" /> を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
+より具体的な例では、<ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionService" kind="interface" /> は、[`IgxGrid`](grid/grid.mdx) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは <ApiLink kind="interface" type="TransactionService" member="startPending" /> を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
 
 いずれのケース (セル編集と行編集) も、グリッド編集の状態は、更新、追加、削除されたすべての行とその最後の状態で構成されます。これらは、後で一度に、または ID ごとに検査、操作、および送信できます。編集モードに応じて、個々のセルまたは行の変更が収集され、データ行/レコードごとに蓄積されます。
 
@@ -55,7 +55,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下のトピックで、一括編集を使用した igxGrid の実装方法の詳細な例を見つけることができます。
 
-- [Grid 一括編集](grid/batch-editing.md)
+- [Grid 一括編集](grid/batch-editing.mdx)
 
 ## igxHierarchicalTransactionService の使用
 
@@ -75,12 +75,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下は、<ApiLink type="TreeGrid" label="igxTreeGrid" /> と <ApiLink type="HierarchicalGrid" label="igxHierarchicalGrid" /> で一括編集を実装する方法の詳細な例を含むトピックです。
 
-- [Tree Grid 一括編集](treegrid/batch-editing.md)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.md)
+- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
+- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
 
 ## トランザクション ファクトリ
 
-Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](grid/batch-editing.md) と [`Hierarchical Grid`](hierarchicalgrid/batch-editing.md) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](treegrid/batch-editing.md) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
+Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](grid/batch-editing.mdx) と [`Hierarchical Grid`](hierarchicalgrid/batch-editing.mdx) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](treegrid/batch-editing.mdx) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
 
 ## トランザクション ファクトリの使用
 
@@ -161,8 +161,8 @@ export class GridViewComponent {
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス](transaction.md)
-- [トランザクション サービスの使用方法](transaction-how-to-use.md)
-- [Grid 一括編集](grid/batch-editing.md)
-- [Tree Grid 一括編集](treegrid/batch-editing.md)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.md)
+- [トランザクション サービス](transaction.mdx)
+- [トランザクション サービスの使用方法](transaction-how-to-use.mdx)
+- [Grid 一括編集](grid/batch-editing.mdx)
+- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
+- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
diff --git a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
index 2a7d6d8ea2..1c8bd43d1e 100644
--- a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
+++ b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
@@ -315,5 +315,5 @@ public onClear(): void {
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス](transaction.md)
-- [トランザクション サービス クラス階層](transaction-classes.md)
+- [トランザクション サービス](transaction.mdx)
+- [トランザクション サービス クラス階層](transaction-classes.mdx)
diff --git a/docs/angular/src/content/jp/components/transaction.mdx b/docs/angular/src/content/jp/components/transaction.mdx
index 724940af98..f0c9e43c85 100644
--- a/docs/angular/src/content/jp/components/transaction.mdx
+++ b/docs/angular/src/content/jp/components/transaction.mdx
@@ -27,9 +27,9 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス" /> 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、<ApiLink type="BaseTransactionService" label="igxBaseTransactionService" />、<ApiLink type="TransactionService" />、<ApiLink type="HierarchicalTransactionService" kind="interface" /> です。
 
 <ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionService" kind="interface" /> は、<ApiLink type="Grid" label="igxGrid" />、<ApiLink type="HierarchicalGrid" label="igxHierarchicalGrid" />、および <ApiLink type="TreeGrid" label="igxTreeGrid" /> コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。
-- [igxGrid 一括編集とトランザクション](grid/batch-editing.md)
-- [igxHierarchicalGrid 一括編集とトランザクション](hierarchicalgrid/batch-editing.md)
-- [igxTreeGrid 一括編集とトランザクション](treegrid/batch-editing.md)
+- [igxGrid 一括編集とトランザクション](grid/batch-editing.mdx)
+- [igxHierarchicalGrid 一括編集とトランザクション](hierarchicalgrid/batch-editing.mdx)
+- [igxTreeGrid 一括編集とトランザクション](treegrid/batch-editing.mdx)
 
 <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス" />が提供する利点に関する詳細については、[Building a transaction service for managing large scale editing experiences](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) ブログ (英語) をご覧ください。
 
@@ -40,10 +40,10 @@ A more detailed overview of the opportunities that the <ApiLink kind="interface"
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス クラス階層](transaction-classes.md)
-- [トランザクション サービスの使用方法](transaction-how-to-use.md)
-- [igxGrid を使用して CRUD 操作の構築](general/how-to/how-to-perform-crud.md)
-- [Grid 一括編集](grid/batch-editing.md)
-- [Tree Grid 一括編集](treegrid/batch-editing.md)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.md)
+- [トランザクション サービス クラス階層](transaction-classes.mdx)
+- [トランザクション サービスの使用方法](transaction-how-to-use.mdx)
+- [igxGrid を使用して CRUD 操作の構築](general/how-to/how-to-perform-crud.mdx)
+- [Grid 一括編集](grid/batch-editing.mdx)
+- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
+- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
 - [「Building a transaction service for managing large scale editing experiences」 ブログ](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) (英語)
diff --git a/docs/angular/src/content/jp/components/tree.mdx b/docs/angular/src/content/jp/components/tree.mdx
index 2f82e75c02..9bd99dadc1 100644
--- a/docs/angular/src/content/jp/components/tree.mdx
+++ b/docs/angular/src/content/jp/components/tree.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Tree コンポーネントの使用を開始するには
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.md)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
 
 次に、app.module ファイルに `IgxTreeModule` をインポートします。
 
@@ -394,7 +394,7 @@ Ignite UI for Angular IgxTree は、サーバーから最小限のデータの
 | **$background-active-selected** | $foreground-active-selected | The color used for the content of the active selected tree node. |
 | **$background-disabled** | $foreground-disabled | The color used for the content of the disabled tree node. |
 
-[Ignite UI for Angular テーマ](themes/index.md)を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
+[Ignite UI for Angular テーマ](themes/index.mdx)を使用すると、ツリーの外観を大幅に変更できます。はじめに、テーマ エンジンによって公開されている関数を使用するために、スタイル ファイルに `index` ファイルをインポートする必要があります。
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -425,7 +425,7 @@ $custom-tree-theme: tree-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.md)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -472,7 +472,7 @@ $custom-tree-theme: tree-theme(
 
 |制限|説明|
 |--- |--- |
-| 再帰的なテンプレート ノード | `igx-tree` は、テンプレートを介した igx-tree-nodes の再帰的な作成をサポートしていません。[詳細](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification#assumptions-and-limitations)をご覧ください。すべてのノードを手動で宣言する必要があります。つまり、非常に深い階層を視覚化する場合は、テンプレート ファイルのサイズに影響します。ツリーは、主にレイアウト/ナビゲーション コンポーネントとして使用することを目的としています。多数のレベルの深度と同種のデータを含む階層データ ソースを視覚化する必要がある場合は、[**IgxTreeGrid**](treegrid/tree-grid.md) を使用できます。|
+| 再帰的なテンプレート ノード | `igx-tree` は、テンプレートを介した igx-tree-nodes の再帰的な作成をサポートしていません。[詳細](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification#assumptions-and-limitations)をご覧ください。すべてのノードを手動で宣言する必要があります。つまり、非常に深い階層を視覚化する場合は、テンプレート ファイルのサイズに影響します。ツリーは、主にレイアウト/ナビゲーション コンポーネントとして使用することを目的としています。多数のレベルの深度と同種のデータを含む階層データ ソースを視覚化する必要がある場合は、[**IgxTreeGrid**](treegrid/tree-grid.mdx) を使用できます。|
 |古い ViewEngine (Ivy 以前) での IgxTreeNodes の使用|`enableIvy:false` が tsconfig.json に設定されている場合、Angular の View Engine (Ivy以前) にツリーが使用されないという問題があります。|
 |FireFox のタブ ナビゲーション|ツリーにスクロールバーがある場合、キーボード ナビゲーションを介してツリーにタブで移動すると、最初に igx-tree-node 要素にフォーカスされます。これは FireFox のデフォルトの動作ですが、ツリーに明示的な `tabIndex = -1` を設定することで解決できます。
 
diff --git a/docs/angular/src/content/jp/components/treegrid/groupby.mdx b/docs/angular/src/content/jp/components/treegrid/groupby.mdx
index 2b806e78a9..7b48976380 100644
--- a/docs/angular/src/content/jp/components/treegrid/groupby.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/groupby.mdx
@@ -122,7 +122,7 @@ public sorting = IgxGroupedTreeGridSorting.instance();
 
 ### 実装
 
-このサンプルでは、データを部分的に読み込みます。最初は最上位のカテゴリのみが表示され、親行が展開されると子データが提供されます。このアプローチの詳細については、[ツリー グリッド ロードオンデマンド](load-on-demand.md) トピックを参照してください。データは、**ShipCountry**、**ShipCity**、**Discontinued** フィールドによってグループ化され、結果の階層が別の列に表示されます。グループ化はリモート サービスで実行されます。データが変更され、対応する子キーと親キーが割り当てられ、最終データを階層ビューで表示するために使用されます。このサービスの仕組みについて詳しくは、`remoteService.ts` ファイルの `TreeGridGroupingLoadOnDemandService` クラスをご覧ください。
+このサンプルでは、データを部分的に読み込みます。最初は最上位のカテゴリのみが表示され、親行が展開されると子データが提供されます。このアプローチの詳細については、[ツリー グリッド ロードオンデマンド](load-on-demand.mdx) トピックを参照してください。データは、**ShipCountry**、**ShipCity**、**Discontinued** フィールドによってグループ化され、結果の階層が別の列に表示されます。グループ化はリモート サービスで実行されます。データが変更され、対応する子キーと親キーが割り当てられ、最終データを階層ビューで表示するために使用されます。このサービスの仕組みについて詳しくは、`remoteService.ts` ファイルの `TreeGridGroupingLoadOnDemandService` クラスをご覧ください。
 
 ロードオンデマンドの使用方法の例を次に示します。
 
@@ -193,9 +193,9 @@ private reloadData() {
 ## その他のリソース
 
 
-- [TreeGrid 概要](tree-grid.md)
-- [TreeGrid 集計](summaries.md)
-- [Grid 集計](../grid/summaries.md)
+- [TreeGrid 概要](tree-grid.mdx)
+- [TreeGrid 集計](summaries.mdx)
+- [Grid 集計](../grid/summaries.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/treegrid/load-on-demand.mdx b/docs/angular/src/content/jp/components/treegrid/load-on-demand.mdx
index 53d3d9aece..977273ba1d 100644
--- a/docs/angular/src/content/jp/components/treegrid/load-on-demand.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/load-on-demand.mdx
@@ -26,7 +26,7 @@ Ignite UI for Angular <ApiLink type="TreeGrid" /> は、サーバーから最小
 
 ### 使用方法
 
-ロードオンデマンド機能は、ツリーグリッド データソースの両方のタイプ ([`プライマリと外部キー`](tree-grid.md#プライマリと外部キー)、または[`子コレクション`](tree-grid.md#子コレクション)) と互換性があります。ツリー グリッドにルート レベルのデータをロードし、いずれかのデータソース タイプに必要なキーを指定するだけです。ツリーグリッドは、ユーザーが行を展開したときに子行をロードするためのコールバック入力プロパティ <ApiLink type="TreeGrid" member="loadChildrenOnDemand" label="loadChildrenOnDemand" /> を提供します。
+ロードオンデマンド機能は、ツリーグリッド データソースの両方のタイプ ([`プライマリと外部キー`](tree-grid.mdx#プライマリと外部キー)、または[`子コレクション`](tree-grid.mdx#子コレクション)) と互換性があります。ツリー グリッドにルート レベルのデータをロードし、いずれかのデータソース タイプに必要なキーを指定するだけです。ツリーグリッドは、ユーザーが行を展開したときに子行をロードするためのコールバック入力プロパティ <ApiLink type="TreeGrid" member="loadChildrenOnDemand" label="loadChildrenOnDemand" /> を提供します。
 
 ```html
 <igx-tree-grid #treeGrid [data]="data" primaryKey="ID" foreignKey="ParentID"
@@ -85,8 +85,8 @@ public loadChildren = (parentID: any, done: (children: any[]) => void) => {
 ## その他のリソース
 
 
-- [Tree Grid 概要](tree-grid.md)
-- [Tree Grid 可視化とパフォーマンス](virtualization.md)
+- [Tree Grid 概要](tree-grid.mdx)
+- [Tree Grid 可視化とパフォーマンス](virtualization.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
index 37226170f0..e546e82ff7 100644
--- a/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
+++ b/docs/angular/src/content/jp/components/treegrid/tree-grid.mdx
@@ -19,7 +19,7 @@ Ignite UI for Angular Tree Grid は、階層データまたはフラットな自
 
 ## Angular ツリー グリッドの例
 
-この例では、ユーザーが階層データを表示する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel、CSV および PDF へのエクスポート、[スパークライン](../sparkline.md)コンポーネントを使用したセル テンプレートが含まれています。さらに、[Angular 改ページ](paging.md)を使用したカスタム改ページの例を見ることができます。
+この例では、ユーザーが階層データを表示する方法を確認できます。フィルタリングとソートのオプション、ピン固定と非表示、行の選択、Excel、CSV および PDF へのエクスポート、[スパークライン](../sparkline.mdx)コンポーネントを使用したセル テンプレートが含まれています。さらに、[Angular 改ページ](paging.mdx)を使用したカスタム改ページの例を見ることができます。
 
 <Sample lob src="/tree-grid/treegrid-childdatakey" height={850} alt="Angular ツリー グリッドの例" />
 
@@ -32,7 +32,7 @@ Ignite UI for Angular Tree Grid コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、[はじめに](../general/getting-started.md)トピックをご覧ください。
+Ignite UI for Angular については、[はじめに](../general/getting-started.mdx)トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTreeGridModule` をインポートします。
 
@@ -368,7 +368,7 @@ platformBrowserDynamic()
 ```
 
 <DocsAside type="info" title="情報">
-`igxTreeGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxTreeGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.md#既知の問題と制限) のセクションを参照してください。
+`igxTreeGrid` は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限が `igxTreeGrid` で有効です。詳細については、[igxForOf 既知の問題](../for-of.mdx#既知の問題と制限) のセクションを参照してください。
 </DocsAside>
 
 
@@ -398,10 +398,10 @@ platformBrowserDynamic()
 ## その他のリソース
 
 
-- [Grid サイズ変更](sizing.md)
-- [Data Grid](../grid/grid.md)
-- [行編集](row-editing.md)
-- [Ignite UI for Angular スキル](../ai/skills.md) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
+- [Grid サイズ変更](sizing.mdx)
+- [Data Grid](../grid/grid.mdx)
+- [行編集](row-editing.mdx)
+- [Ignite UI for Angular スキル](../ai/skills.mdx) - グリッド、データ操作、テーマ設定向けのエージェントのスキル
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/docfx.json b/docs/angular/src/content/jp/docfx.json
deleted file mode 100644
index 3e7ddcae18..0000000000
--- a/docs/angular/src/content/jp/docfx.json
+++ /dev/null
@@ -1,109 +0,0 @@
-{
-    "build": {
-        "content": [
-            {
-                "files": [
-                    "components/**.md",
-                    "components/**/toc.json",
-                    "components/themes/**.md",
-                    "components/general/**.md",
-                    "toc.json",
-                    "*.md"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**",
-                    "components/grids_templates/**"
-                ]
-            }
-        ],
-        "resource": [
-            {
-                "files": [
-                    "images/**",
-                    "web.config"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**"
-                ]
-            }
-        ],
-        "overwrite": [
-            {
-                "files": [
-                    "apidoc/**.md"
-                ],
-                "exclude": [
-                    "obj/**",
-                    "_site/**"
-                ]
-            }
-        ],
-        "dest": "_site",
-        "globalMetadataFiles": [
-            "global.json",
-            "../node_modules/igniteui-docfx-template/template/bundling.global.json"
-        ],
-        "fileMetadataFiles": [],
-        "template": [
-            "../node_modules/igniteui-docfx-template/template"
-        ],
-        "noLangKeyword": false,
-        "keepFileLink": false,
-        "cleanupCacheHistory": true,
-        "disableGitFeatures": true,
-        "sitemap": {
-            "baseUrl": "https://www.infragistics.com/products/ignite-ui-angular/angular/",
-            "changefreq": "weekly",
-            "priority": 0.7,
-            "fileOptions":{
-                "**/grid/**": {
-                    "priority": 0.8
-                },
-                "**/grid.md": {
-                    "priority": 0.9
-                },
-                "**/hierarchical-grid.md": {
-                    "priority": 0.9
-                },
-                "**/tree-grid.md": {
-                    "priority": 0.9
-                },
-                "**/grids-and-lists.md": {
-                    "priority": 0.9
-                },
-                "**/combo.md": {
-                    "priority": 0.9
-                },
-                "**/spreadsheet_overview.md": {
-                    "priority": 0.9
-                },
-                "**/category-chart.md": {
-                    "priority": 0.9
-                },
-                "**/data-chart.md": {
-                    "priority": 0.9
-                },
-                "**/financial-chart.md": {
-                    "priority": 0.9
-                },
-                "**/ignite-ui-licensing.md": {
-                    "priority": 0.9
-                },
-                "**/getting-started.md": {
-                    "priority": 0.9
-                },
-                "**/accessibility-compliance.md": {
-                    "priority": 0.9
-                },
-                "**/ssr-rendering.md": {
-                    "priority": 0.9
-                },
-                "**/data-analysis.md": {
-                    "priority": 0.9
-                }
-            }
-        }
-    }
-}
\ No newline at end of file
diff --git a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
index d26ef23f24..d6cf8c1d24 100644
--- a/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/advanced-filtering.mdx
@@ -52,7 +52,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## インタラクション
 
-**高度なフィルタリング** ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために <ApiLink type="QueryBuilder" /> コンポーネントを使用しています。インタラクション プロセスの詳細については、[`Query Builder トピック`](../query-builder.md#ignite-ui-for-angular-query-builder-を使用した作業の開始)を参照してください。
+**高度なフィルタリング** ダイアログを開くには、グリッドツールバーの高度なフィルタリングボタンをクリックする必要があります。ダイアログはフィルタリング ロジックを生成、表示、編集するために <ApiLink type="QueryBuilder" /> コンポーネントを使用しています。インタラクション プロセスの詳細については、[`Query Builder トピック`](../query-builder.mdx#ignite-ui-for-angular-query-builder-を使用した作業の開始)を参照してください。
 
 フィルタリング条件とグループを作成する準備後にデータをフィルタリングするには、**[適用]** ボタンをクリックします。拡張フィルターを変更後、変更を保存したくない場合は、**[キャンセル]** ボタンをクリックします。**[フィルターのクリア]** ボタンをクリックして、高度なフィルターをクリアすることもできます。
 
@@ -151,7 +151,7 @@ ngAfterViewInit(): void {
 }
 ```
 
-`IgxHierarchicalGrid` の高度なフィルタリングでは、_IN / NOT-IN_ 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.md#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル <ApiLink type="FilteringExpressionsTree" /> です。
+`IgxHierarchicalGrid` の高度なフィルタリングでは、_IN / NOT-IN_ 演算子を使用して、子グリッド データに基づいてルート グリッド データをフィルタリングできます。この演算子により、サブクエリを作成して、より複雑なフィルタリング ロジックを定義できます。この機能の詳細については、[クエリ ビルダーの「サブクエリの使用」セクション](../query-builder-model.mdx#サブクエリの使用)を参照してください。以下はサブクエリを含むサンプル <ApiLink type="FilteringExpressionsTree" /> です。
 
 ```TypeScript
 ngAfterViewInit(): void {
@@ -173,7 +173,7 @@ ngAfterViewInit(): void {
 }
 ```
 
-リモート データを使用する場合は、`IgxHierarchicalGrid` の <ApiLink type="HierarchicalGrid" member="schema" label="schema" /> プロパティを設定する必要があります。詳細なガイダンスについては、[`ロードオンデマンド`](../hierarchicalgrid/load-on-demand.md)のトピックを参照してください。
+リモート データを使用する場合は、`IgxHierarchicalGrid` の <ApiLink type="HierarchicalGrid" member="schema" label="schema" /> プロパティを設定する必要があります。詳細なガイダンスについては、[`ロードオンデマンド`](../hierarchicalgrid/load-on-demand.mdx)のトピックを参照してください。
 </ComponentBlock>
 
 {ComponentTitle} ツールバーを表示したくない場合は、<ApiLink type="{ComponentApiType}" member="openAdvancedFilteringDialog" label="openAdvancedFilteringDialog" /> および <ApiLink type="{ComponentApiType}" member="closeAdvancedFilteringDialog" label="closeAdvancedFilteringDialog" /> メソッドを使用して、高度なフィルタリング ダイアログをコーディングを使用して開いたり閉じたりできます。
@@ -260,7 +260,7 @@ $custom-query-builder: query-builder-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
@@ -276,7 +276,7 @@ igx-advanced-filtering-dialog {
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -323,16 +323,18 @@ igx-advanced-filtering-dialog {
 
 
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
-- [フィルタリング](/{igPath}/filtering)
 - [Excel スタイル フィルタリング](/{igPath}/excel-style-filtering)
-- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ページング](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [フィルタリング](/{igPath}/filtering)
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ソート](/{igPath}/sorting)
 - [集計](/{igPath}/summaries)
 - [列移動](/{igPath}/column-moving)
 - [列固定](/{igPath}/column-pinning)
 - [列サイズ変更](/{igPath}/column-resizing)
 - [選択](/{igPath}/selection)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
index 651b3a2e2e..24d01f48d1 100644
--- a/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/batch-editing.mdx
@@ -23,7 +23,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <ComponentBlock for="TreeGrid">
 
-The Batch Editing feature of the {ComponentName} is based on the <ApiLink kind="interface" type="HierarchicalTransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
+The Batch Editing feature of the {ComponentName} is based on the <ApiLink kind="interface" type="HierarchicalTransactionService" />. Follow the [`Transaction Service class hierarchy`](../transaction-classes.mdx) topic to see an overview of the `igxHierarchicalTransactionService` and details how it is implemented.
 </ComponentBlock>
 <ComponentBlock for="HierarchicalGrid">
 
@@ -85,7 +85,7 @@ export class AppModule {}
 </{ComponentSelector}>
 ```
 
-これにより、{ComponentSelector} に `Transaction` サービスの適切なインスタンスが提供されます。適切な `TransactionService` は `TransactionFactory` を通じて提供されます。この内部実装の詳細については、[トランザクション トピック](/transaction-classes.md#トランザクション-ファクトリ)を参照してください。
+これにより、{ComponentSelector} に `Transaction` サービスの適切なインスタンスが提供されます。適切な `TransactionService` は `TransactionFactory` を通じて提供されます。この内部実装の詳細については、[トランザクション トピック](/transaction-classes#トランザクション-ファクトリ)を参照してください。
 
 一括編集を有効にした後、バインドされたデータ ソースと <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" /> を true に設定して `{ComponentName}` を定義し、バインドします。
 
@@ -287,9 +287,11 @@ Disabling <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEdit
 
 ## その他のリソース
 
-- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud.md)
+- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} 編集](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} 行編集](/{igPath}/row-editing)
 - [{ComponentTitle} 行追加](/{igPath}/row-adding)
 
diff --git a/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx b/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
index 1a724074e4..5adbf29e20 100644
--- a/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cascading-combos.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # カスケード コンボを使用した Angular Grid
 
-グリッドの編集機能は、[カスケード コンボ](/simple-combo.md#カスケーディング)を使用する機会を提供します。前の[コンボ](/combo.md)で値を選択することにより、ユーザーは次のコンボ内の選択に関連するデータのみを受け取ります。
+グリッドの編集機能は、[カスケード コンボ](/simple-combo#カスケーディング)を使用する機会を提供します。前の[コンボ](/combo)で値を選択することにより、ユーザーは次のコンボ内の選択に関連するデータのみを受け取ります。
 
 ## カスケード コンボを使用した Angular Grid サンプルの概要
 
@@ -28,9 +28,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 列の編集を有効にするには、<ApiLink type="Column" member="editable" label="editable" /> プロパティが **true** に設定されていることを確認してください。
 
-列の編集が有効になったら、[単一選択コンボ ボックス](/simple-combo.md)を追加します。ここで 1 つの選択のみを使用できるようにするには、igxCombo を変更する代わりに [igxSimpleCombo](/simple-combo.md) を使用する必要があることに注意してください。
+列の編集が有効になったら、[単一選択コンボ ボックス](/simple-combo)を追加します。ここで 1 つの選択のみを使用できるようにするには、igxCombo を変更する代わりに [igxSimpleCombo](/simple-combo) を使用する必要があることに注意してください。
 
-[Simple ComboBox](/simple-combo.md#angular-simple-combobox-の機能) コンポーネントの使用を開始するには、最初に `IgxSimpleComboModule` を **app.module.ts** ファイルにインポートする必要があります。
+[Simple ComboBox](/simple-combo#angular-simple-combobox-の機能) コンポーネントの使用を開始するには、最初に `IgxSimpleComboModule` を **app.module.ts** ファイルにインポートする必要があります。
 
 ```typescript
 import { IgxSimpleComboModule } from 'igniteui-angular/simple-combo';
@@ -79,7 +79,7 @@ public countryChanging(event: IComboSelectionChangeEventArgs) {
 }
 ```
 
-最後に、[リニア プログレス](../linear-progress.md)を追加します。これは、データのリストをの読み込むときに必要です。
+最後に、[リニア プログレス](../linear-progress.mdx)を追加します。これは、データのリストをの読み込むときに必要です。
 <ApiLink type="LinearProgressBar" member="id" label="id" /> は、`id` 属性の値を設定するために必要です。
 
 ```html
@@ -100,7 +100,9 @@ public countryChanging(event: IComboSelectionChangeEventArgs) {
 
 ## その他のリソース
 
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} 編集](/{igPath}/editing)
-- [単一選択コンボボックス](/simple-combo.md)
-- [カスケード コンボ](/simple-combo.md#カスケーディング)
-- [リニア プログレス](/linear-progress.md)
+</ComponentBlock>
+- [単一選択コンボボックス](/simple-combo)
+- [カスケード コンボ](/simple-combo#カスケーディング)
+- [リニア プログレス](/linear-progress)
diff --git a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
index 2df2c5a705..8bd8f56646 100644
--- a/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/cell-editing.mdx
@@ -61,7 +61,7 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、Angular CRUD 
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
-任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select.md)、[`igxCombo`](/combo.md) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の`流暢な編集フロー`が維持されます。
+任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select)、[`igxCombo`](/combo) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の`流暢な編集フロー`が維持されます。
 </DocsAside>
 
 ## セルの編集
@@ -178,25 +178,25 @@ public updateCell() {
 </igx-column>
 ```
 
-このコードは、`Race`、`Class`、および `Alignment` 列のセルに [`IgxSelectComponent`](../select.md) を実装する以下のサンプルで使用されています。
+このコードは、`Race`、`Class`、および `Alignment` 列のセルに [`IgxSelectComponent`](../select.mdx) を実装する以下のサンプルで使用されています。
 
 <Sample src="/grid/grid-select" height={625} alt="" />
 
 
 <DocsAside type="info" title="情報">
-編集モードでセルの <ApiLink type="GridCell" member="editValue" label="editValue" /> に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、[トランザクション状態](./batch-editing.md)に適用されます (トランザクションが有効な場合)。
+編集モードでセルの <ApiLink type="GridCell" member="editValue" label="editValue" /> に加えられた変更は、終了時に適切な[編集イベント](/{igPath}/editing#イベントの引数とシーケンス)をトリガーし、[トランザクション状態](/{igPath}/batch-editing)に適用されます (トランザクションが有効な場合)。
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-セルテンプレート [`igxCell`](/grid/grid.md#セル-テンプレート) は、編集モード外での列のセルの表示方法を制御します。
+セルテンプレート [`igxCell`](/grid/grid#セル-テンプレート) は、編集モード外での列のセルの表示方法を制御します。
 `igxCellEditor` セル編集テンプレート ディレクティブは、編集モードでの列のセルの表示方法を処理し、編集されたセルの編集値を制御します。
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select.md)、[`igxCombo`](/combo.md) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の `流暢な編集フロー`が維持されます。
+任意のタイプのエディター コンポーネントで `igxCellEditor` を使用すると、キーボード ナビゲーション フローが中断されます。同じことが、編集モードに入るカスタム セルの直接編集にも当てはまります。これは、追加したエディター コンポーネント ([`igxSelect`](/select)、[`igxCombo`](/combo) など) ではなく、セル要素にフォーカスが残るためです。これが、`igxFocus` ディレクティブを利用する必要がある理由です。これにより、フォーカスがセル内コンポーネントに直接移動し、セル/行の `流暢な編集フロー`が維持されます。
 </DocsAside>
 
-列とそのテンプレートの構成方法の詳細については、[グリッド列構成](../grid/grid.md#angular-grid-列の構成)のドキュメントを参照してください。
+列とそのテンプレートの構成方法の詳細については、[グリッド列構成](../grid/grid.mdx#angular-grid-列の構成)のドキュメントを参照してください。
 
 <ComponentBlock for="Grid">
 
@@ -436,7 +436,7 @@ row.delete();
 ### 編集イベントでのセル検証
 
 グリッドの編集イベントを使用して、ユーザーがグリッドを操作する方法を変更できます。
-この例では、<ApiLink type="{ComponentApiType}" member="cellEdit" label="cellEdit" /> イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします (`event.cancel = true`)。また、[`IgxToast`](../toast.md) を使用してカスタム エラーメッセージを表示します。
+この例では、<ApiLink type="{ComponentApiType}" member="cellEdit" label="cellEdit" /> イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします (`event.cancel = true`)。また、[`IgxToast`](../toast.mdx) を使用してカスタム エラーメッセージを表示します。
 
 最初に必要なことは、グリッドのイベントにバインドすることです。
 
@@ -542,11 +542,11 @@ export class MyHGridEventsComponent {
 
 ## スタイル設定
 
-{ComponentName} で [`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes.md)を使用してセルのスタイルを設定できます。グリッドの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。
+{ComponentName} で [`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes)を使用してセルのスタイルを設定できます。グリッドの <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。
 
 以下の手順では、編集モードでグリッドのセルのスタイルを設定する方法と、それらのスタイルの範囲を設定する方法について説明します。
 
-[`Ignite UI テーマ ライブラリ`](/themes/sass/component-themes.md)を使用するには、まずグローバル スタイルでテーマ `index` ファイルをインポートする必要があります。
+[`Ignite UI テーマ ライブラリ`](/themes/sass/component-themes)を使用するには、まずグローバル スタイルでテーマ `index` ファイルをインポートする必要があります。
 
 ### スタイル ライブラリのインポート
 
@@ -561,7 +561,7 @@ export class MyHGridEventsComponent {
 
 ### パレットの定義
 
-インデックス ファイルをインポート後、カスタム パレットを作成します。好きな 3 つの色を定義し、それらを使用して [`palette`](/themes/palettes.md) でパレットを作成しましょう。
+インデックス ファイルをインポート後、カスタム パレットを作成します。好きな 3 つの色を定義し、それらを使用して [`palette`](/themes/palettes) でパレットを作成しましょう。
 
 ```scss
 $white: #fff;
@@ -626,7 +626,7 @@ igx-hierarchical-grid {
 
 ### デモ
 
-上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group.md#スタイル設定)、[`datepicker`](/date-picker.md#スタイル設定) および [`checkbox`](/checkbox.md#スタイル設定))。
+上記の手順に加えて、セルの編集テンプレートに使用されるコントロールのスタイルを設定することもできます ([`input-group`](/input-group#スタイル設定)、[`datepicker`](/date-picker#スタイル設定) および [`checkbox`](/checkbox#スタイル設定))。
 
 <ComponentBlock for="Grid">
 
@@ -664,7 +664,7 @@ igx-hierarchical-grid {
 ## その他のリソース
 
 
-- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud.md)
+- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
 - [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ページング](/{igPath}/paging)
diff --git a/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx b/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx
index 9f9d3c1680..a167513854 100644
--- a/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx
+++ b/docs/angular/src/content/jp/grids_templates/collapsible-column-groups.mdx
@@ -61,9 +61,10 @@ import collapsedIndicator from '../../images/general/collapsed_indicator.png';
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](/{igPath}/general/getting-started)」トピックをご覧ください。
-
-次に app.module.ts ファイルに `{ComponentName}Module` をインポートします。そのため、[複数列グループ](./multi-column-headers.md)のトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+次に app.module.ts ファイルに `{ComponentName}Module` をインポートします。そのため、[複数列グループ](/{igPath}/multi-column-headers)のトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。
+</ComponentBlock>
 
 ## 使用方法
 
@@ -162,14 +163,16 @@ igxGrid のデフォルトの展開インジケーターは次のとおりです
 
 
 - [{ComponentTitle} の概要](/{igPath}/{ComponentMainTopic})
-- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ページング](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [フィルタリング](/{igPath}/filtering)
 - [ソート](/{igPath}/sorting)
 - [集計](/{igPath}/summaries)
 - [列移動](/{igPath}/column-moving)
 - [列のピン固定](/{igPath}/column-pinning)
 - [選択](/{igPath}/selection)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
index 651ea912c3..a9acadf1cc 100644
--- a/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-hiding.mdx
@@ -392,7 +392,7 @@ export class AppModule {}
 - **Alphabetical** (列をアルファベット順でソート)
 - **DisplayOrder** (列をグリッドで表示される順序によってソート)
 
-このオプションにラジオ ボタンを追加します。[**IgxRadio**](/radio-button.md) モジュールを追加します。
+このオプションにラジオ ボタンを追加します。[**IgxRadio**](/radio-button) モジュールを追加します。
 
 ```typescript
 // app.module.ts
@@ -512,7 +512,7 @@ $custom-button: flat-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 この例では、フラットボタンのテキストの色とボタンの無効な色のみを変更しましたが、<ApiLink kind="sass" module="themes" type="function-button-theme" label="button-theme" code={true} /> の方がより多くの方法を提供します。ボタンのスタイルを制御するパラメーター。
@@ -534,7 +534,7 @@ $custom-button: flat-button-theme(
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、列アクション コンポーネント内のコンポーネント (ボタン、チェックボックスなど) に対して `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、列アクション コンポーネント内のコンポーネント (ボタン、チェックボックスなど) に対して `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
 </DocsAside>
 
 ```scss
@@ -570,7 +570,7 @@ $custom-button: flat-button-theme(
 ## API リファレンス
 
 <ComponentBlock for="Grid, TreeGrid, PivotGrid">
-このトピックでは、{ComponentTitle} のツールバーの定義済みの列非表示 UI の使用方法や別のコンポーネントとして定義する方法について説明しました。その他の列順序から選択する機能を提供する UI を実装し、カスタム タイトルおよびフィルター プロンプト テキストを設定しました。[**IgxRadio**](/radio-button.md) ボタンなどその他の Ignite UI for Angular コンポーネントも使用しています。
+このトピックでは、{ComponentTitle} のツールバーの定義済みの列非表示 UI の使用方法や別のコンポーネントとして定義する方法について説明しました。その他の列順序から選択する機能を提供する UI を実装し、カスタム タイトルおよびフィルター プロンプト テキストを設定しました。[**IgxRadio**](/radio-button) ボタンなどその他の Ignite UI for Angular コンポーネントも使用しています。
 </ComponentBlock>
 <ComponentBlock for="HierarchicalGrid">
 このトピックでは、{ComponentTitle} のツールバーの定義済みの列非表示 UI の使用方法について学びました。
diff --git a/docs/angular/src/content/jp/grids_templates/column-moving.mdx b/docs/angular/src/content/jp/grids_templates/column-moving.mdx
index d656b17ca1..b854347aff 100644
--- a/docs/angular/src/content/jp/grids_templates/column-moving.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-moving.mdx
@@ -216,7 +216,7 @@ $dark-grid-column-moving-theme: grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
diff --git a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
index e63e0d61a7..980770b2ef 100644
--- a/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-pinning.mdx
@@ -379,7 +379,7 @@ public toggleColumn(col: ColumnType) {
 
 ## スタイル設定
 
-igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](/themes/sass/component-themes.md) でスタイルを設定できます。グリッドの<ApiLink kind="sass" module="themes" type="function-grid-theme" label="テーマ" />は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxGridを使用すると、[Ignite UI for Angular テーマ ライブラリ](/themes/sass/component-themes) でスタイルを設定できます。グリッドの<ApiLink kind="sass" module="themes" type="function-grid-theme" label="テーマ" />は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下の手順では、グリッドのピン固定スタイルをカスタマイズする手順を実行しています。
 
@@ -408,7 +408,7 @@ $custom-theme: grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 ### カスタム テーマの適用
diff --git a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
index 01aca054e2..600e4a1b59 100644
--- a/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-resizing.mdx
@@ -348,7 +348,7 @@ $custom-grid-theme: grid-theme(
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後のステップは、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
diff --git a/docs/angular/src/content/jp/grids_templates/column-selection.mdx b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
index 45d40d0a47..2ef6ee003e 100644
--- a/docs/angular/src/content/jp/grids_templates/column-selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-selection.mdx
@@ -69,7 +69,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 デフォルトの選択モードは `none` です。`single` または `multiple` に設定されると、すべての列は <ApiLink type="Column" member="selectable" label="selectable" /> になります。列を選択するには、列をクリックして <ApiLink type="Column" member="selected" label="selected" /> としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
 
 <DocsAside type="info" title="情報">
-[`複数列ヘッダー`](multi-column-headers.md) は <ApiLink type="Column" member="selectable" label="selectable" /> 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、<ApiLink type="ColumnGroup" /> は <ApiLink type="Column" member="selectable" label="selectable" /> です。さらに、すべての `selectable` 子孫が <ApiLink type="Column" member="selected" label="selected" /> である場合、コンポーネントは <ApiLink type="ColumnGroup" member="selected" label="selected" /> としてマークされます。
+[`複数列ヘッダー`](/{igPath}/multi-column-headers) は <ApiLink type="Column" member="selectable" label="selectable" /> 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、<ApiLink type="ColumnGroup" /> は <ApiLink type="Column" member="selectable" label="selectable" /> です。さらに、すべての `selectable` 子孫が <ApiLink type="Column" member="selected" label="selected" /> である場合、コンポーネントは <ApiLink type="ColumnGroup" member="selected" label="selected" /> としてマークされます。
 </DocsAside>
 
 <ComponentBlock for="Grid">
diff --git a/docs/angular/src/content/jp/grids_templates/column-types.mdx b/docs/angular/src/content/jp/grids_templates/column-types.mdx
index af1da05033..d537a6cb9d 100644
--- a/docs/angular/src/content/jp/grids_templates/column-types.mdx
+++ b/docs/angular/src/content/jp/grids_templates/column-types.mdx
@@ -81,7 +81,7 @@ public formatOptions = this.options;
 - **timezone** - ユーザーのローカル システム タイムゾーンがデフォルト値です。タイムゾーン オフセットまたは標準の UTC/GMT または米国本土のタイムゾーンの略語も渡すことができます。世界の任意の場所の対応する時間を表示するさまざまなタイムゾーンの例:
 
 <DocsAside type="info" title="情報">
-20.2.x 以降、Angular のローカリゼーションを無効にしている場合、利用可能な形式オプションの一覧は新しい[ローカライズ トピック](../general/localization.md#書式設定)を参照してください。
+20.2.x 以降、Angular のローカリゼーションを無効にしている場合、利用可能な形式オプションの一覧は新しい[ローカライズ トピック](../general/localization.mdx#書式設定)を参照してください。
 </DocsAside>
 
 ```ts
@@ -116,7 +116,16 @@ public formatOptions = this.options;
 | India Standard Time       |‘UTC+4’                    |
 
 
-{ComponentTitle} は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](grid.md#カスタム表示形式)を示します。
+<ComponentBlock for="Grid">
+
+{ComponentTitle} は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](/{igPath}/grid#カスタム表示形式)を示します。
+
+</ComponentBlock>
+<ComponentBlock for="TreeGrid, HierarchicalGrid, PivotGrid">
+
+{ComponentTitle} は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](../grid/grid.mdx#カスタム表示形式)を示します。
+
+</ComponentBlock>
 
 サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの _time_ 部分の書式設定オプションのサンプルです。
 
diff --git a/docs/angular/src/content/jp/grids_templates/editing.mdx b/docs/angular/src/content/jp/grids_templates/editing.mdx
index d165cb9309..c7f7c391e0 100644
--- a/docs/angular/src/content/jp/grids_templates/editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/editing.mdx
@@ -74,7 +74,7 @@ Ignite UI for Angular {ComponentTitle} コンポーネントは、レコード
 - `boolean` データ型ではデフォルトのテンプレートは <ApiLink type="Checkbox" label="igxCheckbox" /> を使用します。
 - `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の <ApiLink type="InputGroup" /> を使用します。
 - `percent` パーセント データ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ <ApiLink type="InputGroup" /> を使用します。
-- カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
+- カスタム テンプレートについては、[セル編集トピック](/{igPath}/cell-editing#セル編集テンプレート)を参照してください。
 
 すべての利用可能な列データ型は、公式の[列タイプ トピック](/{igPath}/column-types#デフォルトのテンプレート)にあります。
 
@@ -179,17 +179,17 @@ public onSorting(event: ISortingEventArgs) {
 ## その他のリソース
 
 
-- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.md)
-- [{ComponentTitle} 概要]({ComponentMainTopic}.md)
-- [列のデータ型](column-types.md#デフォルトのテンプレート)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [igxGrid を使用して CRUD 操作の構築](../general/how-to/how-to-perform-crud.mdx)
+- [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+- [列のデータ型](/{igPath}/column-types#デフォルトのテンプレート)
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
+- [ページング](/{igPath}/paging)
+- [フィルタリング](/{igPath}/filtering)
+- [ソート](/{igPath}/sorting)
+- [集計](/{igPath}/summaries)
+- [列のピン固定](/{igPath}/column-pinning)
+- [列のサイズ変更](/{igPath}/column-resizing)
+- [選択](/{igPath}/selection)
 </ComponentBlock>
 <ComponentBlock for="Grid, TreeGrid, PivotGrid">
 * [検索](/{igPath}/search)
diff --git a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
index 7d3cfeaa05..45db1e1e1c 100644
--- a/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/excel-style-filtering.mdx
@@ -353,7 +353,7 @@ Excel スタイル フィルタリングをオンにするには、2 つの入
 
 ## 一意の列値ストラテジ
 
-Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。詳細については、[`{ComponentTitle} リモート データ操作`](/{igPath}/remote-data-operations#一意の列値ストラテジ)で説明されています。
+Excel スタイル フィルタリング ダイアログ内のリスト 項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">詳細については、[`{ComponentTitle} リモート データ 操作`](/{igPath}/remote-data-operations#一意の列値ストラテジ)で説明されています。</ComponentBlock>
 
 ## 書式設定された値のフィルタリング ストラテジ
 
@@ -533,7 +533,11 @@ Excel スタイル フィルタリング ダイアログの背景色と前景色
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+`.igx-excel-filter` と `.igx-excel-filter__secondary` 内のほとんどのコンポーネントのミックスインをスコープするため、これらのカスタムテーマは、Excel スタイル フィルタリング ダイアログとそのすべてのサブダイアログにネストされたコンポーネントのみに影響します。そうでない場合、他のボタン、チェックボックス、入力グループ、およびリストも影響を受けます。
+</DocsAside>
+
+<DocsAside type="info" title="情報">
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -581,14 +585,16 @@ Excel スタイル フィルタリング ダイアログの背景色と前景色
 
 
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
-- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ページング](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ソート](/{igPath}/sorting)
 - [集計](/{igPath}/summaries)
 - [列移動](/{igPath}/column-moving)
 - [列のピン固定](/{igPath}/column-pinning)
 - [列のサイズ変更](/{igPath}/column-resizing)
 - [選択](/{igPath}/selection)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/export-excel.mdx b/docs/angular/src/content/jp/grids_templates/export-excel.mdx
index 38156f0e95..58cb7c3ada 100644
--- a/docs/angular/src/content/jp/grids_templates/export-excel.mdx
+++ b/docs/angular/src/content/jp/grids_templates/export-excel.mdx
@@ -216,7 +216,7 @@ public exportButtonHandler() {
 
 ## 複数列ヘッダー グリッドのエクスポート
 
-ダッシュボードは、多くの場合、[複数列ヘッダー](multi-column-headers.md)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、<ApiLink kind="interface" type="IGridToolbarExportEventArgs" label="エクスポーター オプション" /> <ApiLink type="ExcelExporterOptions" member="ignoremulticolumnheaders" label="ignoreMultiColumnHeaders" /> フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。
+ダッシュボードは、多くの場合、[複数列ヘッダー](/{igPath}/multi-column-headers)に依存してコンテキストを追加します。個々の月列の上に 「Q1/Q2/Q3」 バンドを配置することを考えてください。エクスポーターはこの構造をミラーリングするため、スプレッドシート ユーザーはグループ化ロジックをすぐに理解できます。ダウンストリーム ワークフローで単純な列名を優先する場合は、<ApiLink kind="interface" type="IGridToolbarExportEventArgs" label="エクスポーター オプション" /> <ApiLink type="ExcelExporterOptions" member="ignoremulticolumnheaders" label="ignoreMultiColumnHeaders" /> フラグを `true` に反転すると、出力にはリーフ ヘッダーのみが含まれます。
 
 <DocsAside type="info" title="情報">
 Excel テーブルは複数の行ヘッダーをサポートしていないため、エクスポートされた {ComponentTitle} はテーブルとしてフォーマットされません。
@@ -305,7 +305,7 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
 |制限|説明|
 |--- |--- |
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
-|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 </ComponentBlock>
@@ -316,7 +316,7 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
 |--- |--- |
 |階層レベル|エクスポーターは最大 8 レベルの階層をサポートします。より深い構造が必要な場合は、ファイルを読みやすく保つために、データをフラット化するか、サブセットをエクスポートしてください。|
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
-|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 </ComponentBlock>
@@ -328,7 +328,7 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
 |階層レベル|エクスポーターは最大 8 レベルの階層をサポートします。より深い構造が必要な場合は、ファイルを読みやすく保つために、データをフラット化するか、サブセットをエクスポートしてください。|
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
 |ピン固定列のエクスポート|エクスポートされた Excel ファイルでは、ピン固定列は凍結されませんが、順序は保持されます。凍結が重要な場合は、エクスポート後に手動でシートを調整してください。|
-|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 </ComponentBlock>
@@ -338,7 +338,7 @@ this.excelExportService.export(this.{ComponentObjectRef}, new IgxExcelExporterOp
 |制限|説明|
 |--- |--- |
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。これらの制限内に収まるように、非常に大きなエクスポートを日付範囲またはセグメントでスライスすることを検討してください。|
-|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel Exporter サービスは、セル コンポーネントに直接適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、きめ細かい書式設定のために、より豊富な [Excel ライブラリ](/excel-library)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広いエクスポートは、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 </ComponentBlock>
diff --git a/docs/angular/src/content/jp/grids_templates/filtering.mdx b/docs/angular/src/content/jp/grids_templates/filtering.mdx
index 23a7a59a2e..8266600dc5 100644
--- a/docs/angular/src/content/jp/grids_templates/filtering.mdx
+++ b/docs/angular/src/content/jp/grids_templates/filtering.mdx
@@ -108,7 +108,7 @@ IgniteUI for [Angular {ComponentTitle} コンポーネント](https://jp.infragi
 
 </ComponentBlock>
 
-ただし、[高度なフィルタリング](advanced-filtering.md)を有効にするには、<ApiLink type="{ComponentApiType}" member="allowAdvancedFiltering" label="allowAdvancedFiltering" /> 入力プロパティを `true` に設定します。
+ただし、[高度なフィルタリング](/{igPath}/advanced-filtering)を有効にするには、<ApiLink type="{ComponentApiType}" member="allowAdvancedFiltering" label="allowAdvancedFiltering" /> 入力プロパティを `true` に設定します。
 
 ```html
 <{ComponentSelector} [data]="data" [autoGenerate]="true" [allowAdvancedFiltering]="true">
@@ -600,7 +600,7 @@ $dark-button: flat-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 この例では、入力グループとボタンのパラメーターの一部のみを変更しましたが、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" code={true} /> と <ApiLink kind="sass" module="themes" type="function-flat-button-theme" label="flat-button-theme" code={true} /> は、それぞれのスタイルを制御するためのより多くのパラメーターを提供します。
@@ -627,7 +627,7 @@ $dark-button: flat-button-theme(
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/grids_templates/live-data.mdx b/docs/angular/src/content/jp/grids_templates/live-data.mdx
index ca0aac79eb..3ad2a0e567 100644
--- a/docs/angular/src/content/jp/grids_templates/live-data.mdx
+++ b/docs/angular/src/content/jp/grids_templates/live-data.mdx
@@ -34,7 +34,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 ## Angular ライブ データ更新の例
 
 以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の {ComponentTitle} のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。
-同じデータを[カテゴリ チャート](/category-chart.md)に入力して、Ignite UI forAngular の強力なチャート作成機能を体験してください。`Chart` ボタンには、選択した行の `Category Prices per Region` データが表示され、`Chart` 列ボタンには現在の行の同じデータが表示されます。
+同じデータを[ライン チャート](/charts/types/line-chart)に入力して、Ignite UI forAngular の強力なチャート作成機能を体験してください。`Chart` ボタンには、選択した行の `Category Prices per Region` データが表示され、`Chart` 列ボタンには現在の行の同じデータが表示されます。
 <ComponentBlock for="Grid">
 
 <Sample src="/grid-finjs?theme-switch=false" height={700} alt="Angular 更新のライブデ例" lob />
@@ -128,7 +128,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
 
 ### DockManager コンポーネント
 
-[Dock Manager](/dock-manager.md) WebComponent を利用し、ドケットまたはフローティング パネルを使用して独自の Web ビューを作成します。新しいフローティング パネルを追加するには、右側のアクション ペインを開き、[フローティング ペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。
+[Dock Manager](/dock-manager) WebComponent を利用し、ドケットまたはフローティング パネルを使用して独自の Web ビューを作成します。新しいフローティング パネルを追加するには、右側のアクション ペインを開き、[フローティング ペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。
 
 ## API リファレンス
 
@@ -177,7 +177,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
 ## その他のリソース
 
 
-- [データ グリッド](/grid/grid.md)
+- [データ グリッド](/grid/grid)
 - [行編集](/{igPath}/row-editing)
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
index 22f0e57de9..2966e5f0e4 100644
--- a/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
+++ b/docs/angular/src/content/jp/grids_templates/multi-column-headers.mdx
@@ -161,7 +161,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 </ComponentBlock>
 
-各 <ApiLink type="ColumnGroup" label="igx-column-group" /> は、[`移動`](column-moving.md)、[`ピン固定`](column-pinning.md)と[`非表示`](column-hiding.md)をサポートします。
+各 <ApiLink type="ColumnGroup" label="igx-column-group" /> は、[`移動`](/{igPath}/column-moving)、[`ピン固定`](/{igPath}/column-pinning)と[`非表示`](/{igPath}/column-hiding)をサポートします。
 
 <DocsAside type="info" title="情報">
 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。ネストした `column groups` や `columns` のピン固定はできません。<br />
@@ -331,7 +331,7 @@ $custom-theme: grid-theme(
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
diff --git a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
index 8886e8cea2..31dca0005d 100644
--- a/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
+++ b/docs/angular/src/content/jp/grids_templates/multi-row-layout.mdx
@@ -129,7 +129,7 @@ import multiRowLayout1 from '../../images/multi-row-layout-1.png';
 
 ## スタイル設定
 
-igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes.md)でスタイルを設定できます。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxGrid を使用すると、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes)でスタイルを設定できます。<ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下は、グリッドの複数行レイアウト スタイルをカスタマイズする手順です。
 
@@ -163,7 +163,7 @@ $custom-theme: grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 ### カスタム テーマの適用
@@ -201,11 +201,13 @@ $custom-theme: grid-theme(
 
 
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
-- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ページング](/{igPath}/paging)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [ソート](/{igPath}/sorting)
 - [列のサイズ変更](/{igPath}/column-resizing)
 - [選択](/{igPath}/selection)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/paging.mdx b/docs/angular/src/content/jp/grids_templates/paging.mdx
index fe88650947..55517b6cec 100644
--- a/docs/angular/src/content/jp/grids_templates/paging.mdx
+++ b/docs/angular/src/content/jp/grids_templates/paging.mdx
@@ -177,7 +177,7 @@ IgxHierarchicalGrid の子グリッドの実装方法および DI スコープ
 
 ## リモート ページング
 
-リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、[`{ComponentTitle} リモート データ操作`](/{igPath}/remote-data-operations#リモート-ページング)トピックをご覧ください。
+リモート ページングは、データ取得を担当するサービスと、グリッドの構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">詳細については、[`{ComponentTitle} リモート データ 操作`](/{igPath}/remote-data-operations#リモート-ページング)トピックをご覧ください。</ComponentBlock>
 
 <ComponentBlock for="Grid">
 
@@ -250,7 +250,8 @@ igx-paginator {
 
 
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
-- [Paginator](/paginator.md)
+- [Paginator](/paginator)
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [仮想化とパフォーマンス](/{igPath}/virtualization)
 - [フィルタリング](/{igPath}/filtering)
 - [ソート](/{igPath}/sorting)
@@ -259,6 +260,7 @@ igx-paginator {
 - [列ピン固定](/{igPath}/column-pinning)
 - [列サイズ変更](/{igPath}/column-resizing)
 - [選択](/{igPath}/selection)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/row-actions.mdx b/docs/angular/src/content/jp/grids_templates/row-actions.mdx
index 2c952188ec..1af56af97a 100644
--- a/docs/angular/src/content/jp/grids_templates/row-actions.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-actions.mdx
@@ -28,7 +28,7 @@ The tree grid component in Ignite UI for Angular provides the ability to use [Ac
 
 # Angular Hierarchical Grid の行操作
 
-Ignite UI for Angular の階層グリッド コンポーネントは、[ActionStrip](/action-strip.md) を使用し、行/セルコンポーネントおよび行のピン固定に CRUD を使用する機能を提供します。
+Ignite UI for Angular の階層グリッド コンポーネントは、[ActionStrip](/action-strip) を使用し、行/セルコンポーネントおよび行のピン固定に CRUD を使用する機能を提供します。
 デフォルトで 2 つのグリッド アクションが提供されます。アクション ストリップ コンポーネントは、これらの操作用に事前定義された UI コントロールをホストできます。
 </ComponentBlock>
 
diff --git a/docs/angular/src/content/jp/grids_templates/row-adding.mdx b/docs/angular/src/content/jp/grids_templates/row-adding.mdx
index d8e5cb23d0..77c66a0eba 100644
--- a/docs/angular/src/content/jp/grids_templates/row-adding.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-adding.mdx
@@ -31,10 +31,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 # Angular {ComponentTitle} での行追加
 
 <ComponentBlock for="Grid, HierarchicalGrid, PivotGrid">
-{ComponentTitle} コンポーネントはインライン行追加や Angular CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている[アクション ストリップ](/action-strip.md)コンポーネントを追加し、行にホバーして提供されたボタンを使用するか、<kbd>ALT</kbd> + <kbd>+</kbd> を押して、行追加 UI を生成します。
+{ComponentTitle} コンポーネントはインライン行追加や Angular CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている[アクション ストリップ](/action-strip)コンポーネントを追加し、行にホバーして提供されたボタンを使用するか、<kbd>ALT</kbd> + <kbd>+</kbd> を押して、行追加 UI を生成します。
 </ComponentBlock>
 <ComponentBlock for="TreeGrid">
-{ComponentTitle} コンポーネントはインライン行追加や Angular CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている[アクションストリップ](/action-strip.md)コンポーネントを追加し、ホバーして提供されたボタンを使用するか、<kbd>ALT</kbd> + <kbd>+</kbd> を押して、行追加 UI を生成するか、<kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>+</kbd> を押して、選択した行に子を追加するための UI を生成します。
+{ComponentTitle} コンポーネントはインライン行追加や Angular CRUD 操作のための強力な API を通して便利なデータ操作方法を提供します。グリッドのテンプレートで編集アクションが有効になっている[アクションストリップ](/action-strip)コンポーネントを追加し、ホバーして提供されたボタンを使用するか、<kbd>ALT</kbd> + <kbd>+</kbd> を押して、行追加 UI を生成するか、<kbd>ALT</kbd> + <kbd>SHIFT</kbd> + <kbd>+</kbd> を押して、選択した行に子を追加するための UI を生成します。
 </ComponentBlock>
 
 ## Angular {ComponentTitle} 行追加の例
@@ -75,7 +75,7 @@ import { {ComponentName}Module } from 'igniteui-angular';
 export class AppModule {}
 ```
 
-次に、バインドしたデータソースに {ComponentTitle} を定義をして <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" /> を true に設定し、編集アクションを有効にした[アクション ストリップ](../action-strip.md) コンポーネントを定義します。<ApiLink type="GridEditingActions" member="addRow" label="addRow" /> 入力は、行追加 UI を生成するボタンの表示状態を制御します。
+次に、バインドしたデータソースに {ComponentTitle} を定義をして <ApiLink type="{ComponentApiType}" member="rowEditable" label="rowEditable" /> を true に設定し、編集アクションを有効にした[アクション ストリップ](../action-strip.mdx) コンポーネントを定義します。<ApiLink type="GridEditingActions" member="addRow" label="addRow" /> 入力は、行追加 UI を生成するボタンの表示状態を制御します。
 
 <ComponentBlock for="Grid">
 
@@ -308,8 +308,8 @@ this.treeGrid.beginAddRowByIndex(null);       // spawns the add row UI as the fi
 行追加 UI は `IgxActionStrip` 編集操作のボタン、編集エディター、オーバーレイ、エンドユーザーが新しく追加された行にスクロールできるスナックバーが構成されます。これらのコンポーネントのスタイル設定には、それぞれのトピックのガイドを参照してください。
 
 - [{ComponentTitle} 行追加](/{igPath}/row-editing#スタイル設定)
-- [IgxSnackbar](/snackbar.md#スタイル設定)
-- [IgxActionStrip](/action-strip.md#スタイル設定)
+- [IgxSnackbar](/snackbar#スタイル設定)
+- [IgxActionStrip](/action-strip#スタイル設定)
 
 ## API リファレンス
 
@@ -328,7 +328,9 @@ this.treeGrid.beginAddRowByIndex(null);       // spawns the add row UI as the fi
 
 
 - [{ComponentTitle} の概要](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} 編集](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} トランザクション](/{igPath}/batch-editing)
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/grids_templates/row-drag.mdx b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
index 3350841d40..60fa98b464 100644
--- a/docs/angular/src/content/jp/grids_templates/row-drag.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-drag.mdx
@@ -87,7 +87,7 @@ Ignite UI for Angular {ComponentTitle} では、**RowDrag** がルート `{Compo
 ### ドロップ エリア
 
 行ドラッグを簡単に有効にできました。次は行ドロップを処理する方法を設定する必要があります。
-[`igxDrop` ディレクティブ](/drag-drop.md)を使用して、行をドロップする場所を定義できます。
+[`igxDrop` ディレクティブ](/drag-drop)を使用して、行をドロップする場所を定義できます。
 
 はじめに、アプリ モジュールに `IgxDragDropModule` をインポートする必要があります。
 
diff --git a/docs/angular/src/content/jp/grids_templates/row-editing.mdx b/docs/angular/src/content/jp/grids_templates/row-editing.mdx
index 8b32a9b932..21f2e5d773 100644
--- a/docs/angular/src/content/jp/grids_templates/row-editing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-editing.mdx
@@ -321,13 +321,13 @@ export class HGridRowEditingSampleComponent implements OnInit {
 
 ## スタイル設定
 
-[Ignite UI for Angular テーマ ライブラリ](/themes/index.md)を使用して、行編集オーバーレイを大幅に変更できます。
+[Ignite UI for Angular テーマ ライブラリ](/themes)を使用して、行編集オーバーレイを大幅に変更できます。
 行編集オーバーレイは複合要素です。UI は、他の 2 つのコンポーネントで構成されています。
-    - コンテンツをレンダリングするための [`igx-banner`](/banner.md)
-    - [`igx-button`](/button.md) はデフォルトのテンプレートでレンダリングされます (`[完了]` ボタンと `[キャンセル]` ボタンの場合)。
+    - コンテンツをレンダリングするための [`igx-banner`](/banner)
+    - [`igx-button`](/button) はデフォルトのテンプレートでレンダリングされます (`[完了]` ボタンと `[キャンセル]` ボタンの場合)。
 
-以下の例では、これら 2 つのコンポーネントのスタイル設定オプション ([`ボタンのスタイル設定`](/button.md#スタイル設定) & [`バナーのスタイル設定`](/banner.md#スタイル設定)) を使用して、{ComponentName} の行編集のエクスペリエンスをカスタマイズします。
-次に、現在のセルのエディターと背景をより明確にするためにスタイルを設定します。セル スタイリングの詳細については、[こちら](/{igPath}/cell-editing#スタイル設定)をご覧ください。
+以下の例では、これら 2 つのコンポーネントのスタイル設定オプション ([`ボタンのスタイル設定`](/button#スタイル設定) & [`バナーのスタイル設定`](/banner#スタイル設定)) を使用して、{ComponentName} の行編集のエクスペリエンスをカスタマイズします。
+次に、現在のセルのエディターと背景をより明確にするためにスタイルを設定します。<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">セル スタイリングの詳細については、[こちら](/{igPath}/cell-editing#スタイル設定)をご覧ください。</ComponentBlock>
 
 ### テーマのインポート
 
@@ -371,7 +371,7 @@ $banner-theme: banner-theme(
 行編集オーバーレイは他の多くのコンポーネントのテーマを利用するため、グローバル スタイルでスタイル設定するとアプリケーションの他の部分 (バナー、ボタンなど) に影響を与える可能性があります。それを防ぐ最善の方法は、バナー テーマを適用する特定のコンポーネントのスタイル ファイルにスコープすることです。
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド行編集オーバーレイのスタイルを設定するには、`::ng-deep`を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド行編集オーバーレイのスタイルを設定するには、`::ng-deep`を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -406,7 +406,7 @@ $banner-theme: banner-theme(
 </{ComponentSelector}>
 ```
 
-カスタム ボタンを定義した後は、<ApiLink kind="sass" module="themes" type="function-flat-icon-button-theme" label="flat-icon-button-theme" code={true} /> を使用してスタイルを設定できます。You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](/icon-button.md#icon-button-styling).`[完了]` と `[キャンセル]` のカスタム テーマを作成できます。
+カスタム ボタンを定義した後は、<ApiLink kind="sass" module="themes" type="function-flat-icon-button-theme" label="flat-icon-button-theme" code={true} /> を使用してスタイルを設定できます。You can learn more about `igx-icon-button` styling in the [Icon Button Styling documentation](/icon-button#icon-button-styling).`[完了]` と `[キャンセル]` のカスタム テーマを作成できます。
 
 ```scss
 // custom.component.scss
@@ -426,7 +426,7 @@ $button-theme: flat-icon-button-theme(
 
 ### デモ
 
-バナーとボタンのスタイルを設定後、[編集モードのセル](/{igPath}/cell-editing#スタイル設定)のカスタム スタイルも定義します。以下は、すべてのスタイルを組み合わせた結果です。
+バナーとボタンのスタイルを設定後、<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">[編集モードのセル](/{igPath}/cell-editing#スタイル設定)のカスタム スタイルも定義します。</ComponentBlock>以下は、すべてのスタイルを組み合わせた結果です。
 
 <ComponentBlock for="Grid">
 
@@ -475,9 +475,11 @@ $button-theme: flat-icon-button-theme(
 ## その他のリソース
 
 
-- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud.md)
+- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} 編集](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} トランザクション](/{igPath}/batch-editing)
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
index 550db4ca7d..121b5b5a95 100644
--- a/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
+++ b/docs/angular/src/content/jp/grids_templates/row-pinning.mdx
@@ -412,7 +412,7 @@ public onDropAllowed(args) {
 
 ## スタイル設定
 
-{ComponentName} は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes.md)でスタイルを設定できます。{ComponentTitle} の <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、{ComponentTitle} のすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+{ComponentName} は、[`Ignite UI for Angular テーマ ライブラリ`](/themes/sass/component-themes)でスタイルを設定できます。{ComponentTitle} の <ApiLink kind="sass" module="themes" type="function-grid-theme" label="grid-theme" code={true} /> は、{ComponentTitle} のすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下では、{ComponentTitle} の行ピン固定スタイルをカスタマイズする手順を示します。
 
diff --git a/docs/angular/src/content/jp/grids_templates/search.mdx b/docs/angular/src/content/jp/grids_templates/search.mdx
index 179ecbe144..960f7f1d8e 100644
--- a/docs/angular/src/content/jp/grids_templates/search.mdx
+++ b/docs/angular/src/content/jp/grids_templates/search.mdx
@@ -253,7 +253,7 @@ public updateExactSearch() {
 ### アイコンの追加
 
 その他のコンポーネントを使用するためにユーザー インターフェイスを作成し、検索バー全体のデザインを向上します。検索入力の左側に検索または削除アイコン、検索オプションのチップ、右側にはマテリアル デザイン アイコンと Ripple スタイルのボタンを組み合わせたナビゲーションを表示できます。入力グループ内のコンポーネントをラップしてより洗練されたデザインにすることができます。
-[**IgxInputGroup**](/input-group.md)、[**IgxIcon**](/icon.md)、[**IgxRipple**](/ripple.md)、[**IgxButton**](/button.md)、[**IgxChip**](/chip.md) のモジュールを使用します。
+[**IgxInputGroup**](/input-group)、[**IgxIcon**](/icon)、[**IgxRipple**](/ripple)、[**IgxButton**](/button)、[**IgxChip**](/chip) のモジュールを使用します。
 
 ```typescript
 // app.module.ts
@@ -284,7 +284,7 @@ export class AppModule {}
 
 テンプレートを新しいコンポーネントで更新します。
 
-[**IgxInputGroup**](../input-group.md) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに **searchText** を更新し、グリッドの <ApiLink type="{ComponentApiType}" member="clearSearch" label="clearSearch" /> メソッドを呼び出して強調表示をクリアします。
+[**IgxInputGroup**](../input-group.mdx) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに **searchText** を更新し、グリッドの <ApiLink type="{ComponentApiType}" member="clearSearch" label="clearSearch" /> メソッドを呼び出して強調表示をクリアします。
 
 ```html
 <!--searchgrid.component.html-->
diff --git a/docs/angular/src/content/jp/grids_templates/selection.mdx b/docs/angular/src/content/jp/grids_templates/selection.mdx
index fbdef420cc..7804783cc0 100644
--- a/docs/angular/src/content/jp/grids_templates/selection.mdx
+++ b/docs/angular/src/content/jp/grids_templates/selection.mdx
@@ -64,7 +64,7 @@ Ignite UI for Angular {ComponentTitle} を使用して、さまざまなイベ
 
 ## Angular Grid 選択のオプション
 
-Ignite UI for Angular {ComponentTitle} コンポーネントは、[行選択](row-selection.md)、[セル選択](cell-selection.md)、[列選択](column-selection.md)の 3 つの選択モードを提供します。デフォルトでは、{ComponentTitle} で**複数セル選択**モードのみが有効になっています。選択モードを変更/有効化するには、<ApiLink type="Grid" member="rowSelection" label="rowSelection" />、<ApiLink type="Grid" member="cellSelection" label="cellSelection" /> 、または <ApiLink type="Column" member="selectable" label="selectable" /> プロパティを使用できます。
+Ignite UI for Angular {ComponentTitle} コンポーネントは、[行選択](/{igPath}/row-selection)、[セル選択](/{igPath}/cell-selection)、[列選択](/{igPath}/column-selection)の 3 つの選択モードを提供します。デフォルトでは、{ComponentTitle} で**複数セル選択**モードのみが有効になっています。選択モードを変更/有効化するには、<ApiLink type="Grid" member="rowSelection" label="rowSelection" />、<ApiLink type="Grid" member="cellSelection" label="cellSelection" /> 、または <ApiLink type="Column" member="selectable" label="selectable" /> プロパティを使用できます。
 
 ### Angular 行選択
 
diff --git a/docs/angular/src/content/jp/grids_templates/sizing.mdx b/docs/angular/src/content/jp/grids_templates/sizing.mdx
index 0882fc8db2..d1d8cde5a1 100644
--- a/docs/angular/src/content/jp/grids_templates/sizing.mdx
+++ b/docs/angular/src/content/jp/grids_templates/sizing.mdx
@@ -323,7 +323,7 @@ llms:
 
 ## グリッド セルのスペーシング制御
 
-<ApiLink type="{ComponentApiType}" /> は、[size](display-density.md) 設定に基づいて内部のスペーシングを自動的に適応させます。さらに、CSS カスタム プロパティを使用することで、グリッドのヘッダー セルやボディ セルのパディングやマージンをカスタマイズすることができます。
+<ApiLink type="{ComponentApiType}" /> は、[size](/{igPath}/display-density) 設定に基づいて内部のスペーシングを自動的に適応させます。さらに、CSS カスタム プロパティを使用することで、グリッドのヘッダー セルやボディ セルのパディングやマージンをカスタマイズすることができます。
 
 ### グローバル グリッド スペーシング
 
diff --git a/docs/angular/src/content/jp/grids_templates/sorting.mdx b/docs/angular/src/content/jp/grids_templates/sorting.mdx
index 86c74a3f41..ef24990b75 100644
--- a/docs/angular/src/content/jp/grids_templates/sorting.mdx
+++ b/docs/angular/src/content/jp/grids_templates/sorting.mdx
@@ -298,7 +298,7 @@ $custom-theme: grid-theme(
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後の手順は、それぞれのテーマを持つコンポーネント ミックスインを**含める**ことです。
diff --git a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
index 84fa24be0b..5af90c921c 100644
--- a/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
+++ b/docs/angular/src/content/jp/grids_templates/state-persistence.mdx
@@ -79,7 +79,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
 </ComponentBlock>
   - 列の順序
   - <ApiLink type="IColumnState" kind="interface" /> インターフェイスによって定義される列プロパティ。
-  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](/{igPath}/state-persistence#列の復元)セクションを参照してください。
 </ComponentBlock>
 
 <ComponentBlock for="TreeGrid">
@@ -97,7 +97,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
   - **新規**: 複数列ヘッダーが標準でサポートされるようになりました。
   - 列の順序
   - <ApiLink type="IColumnState" kind="interface" /> インターフェイスによって定義される列プロパティ。
-  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](/{igPath}/state-persistence#列の復元)セクションを参照してください。
 </ComponentBlock>
 
 <ComponentBlock for="HierarchicalGrid">
@@ -116,7 +116,7 @@ igxGridState ディレクティブによって開発者がグリッドの状態
   - 複数列ヘッダー
   - 列の順序
   - <ApiLink type="IColumnState" kind="interface" /> インターフェイスによって定義される列プロパティ。
-  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](state-persistence.md#列の復元)セクションを参照してください。
+  - 列テンプレートおよび関数はアプリケーション レベルのコードを使用して復元されます。[列の復元](/{igPath}/state-persistence#列の復元)セクションを参照してください。
 </ComponentBlock>
 
 <ComponentBlock for="PivotGrid">
@@ -128,14 +128,14 @@ igxGridState ディレクティブによって開発者がグリッドの状態
 - `展開`
 - `ピボット構成`
   - <ApiLink type="IPivotConfiguration" kind="interface" /> インターフェイスによって定義されるピボット構成プロパティ。
-  - ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](state-persistence.md#ピボット構成の復元)」セクションを参照してください。
-  - ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボット ストラテジの復元](state-persistence.md#ピボット-ストラテジの復元)」セクションを参照してください。
+  - ピボットのディメンションと値の関数は、アプリケーションレベルのコードを使用して復元されます。「[ピボット構成の復元](/{igPath}/state-persistence#ピボット構成の復元)」セクションを参照してください。
+  - ピボットの行と列のストラテジもアプリケーション レベルのコードを使用して復元されます。「[ピボット ストラテジの復元](/{igPath}/state-persistence#ピボット-ストラテジの復元)」セクションを参照してください。
 </ComponentBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 
 <DocsAside type="info" title="情報">
-<ApiLink type="GridStateDirective" /> ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「[列の復元](state-persistence.md#列の復元)」セクションを参照してください。
+<ApiLink type="GridStateDirective" /> ディレクティブはテンプレートを処理しません。列テンプレートの復元方法については、「[列の復元](/{igPath}/state-persistence#列の復元)」セクションを参照してください。
 </DocsAside>
 </ComponentBlock>
 
@@ -297,7 +297,7 @@ public onColumnInit(column: IgxColumnComponent) {
 <ComponentBlock for="PivotGrid">
 ## ピボット構成の復元
 
-<ApiLink type="GridStateDirective" /> は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません ([`制限`](state-persistence.md#制限)を参照)。`IgxPivotGrid` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (<ApiLink type="{ComponentApiType}" member="dimensionInit" label="dimensionInit" /> と <ApiLink type="{ComponentApiType}" member="valueInit" label="valueInit" />) を公開します。以下はその方法です。
+<ApiLink type="GridStateDirective" /> は、デフォルトではピボット ディメンション関数、値フォーマッターなどを保持しません ([`制限`](/{igPath}/state-persistence#制限)を参照)。`IgxPivotGrid` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (<ApiLink type="{ComponentApiType}" member="dimensionInit" label="dimensionInit" /> と <ApiLink type="{ComponentApiType}" member="valueInit" label="valueInit" />) を公開します。以下はその方法です。
 
 - `dimensionInit` および `valueInit` イベントのイベント ハンドラーを割り当てます。
 
@@ -408,7 +408,7 @@ this.state.setState(state, ['filtering', 'rowIslands']);
 <ComponentBlock for="PivotGrid">
 ## ピボット ストラテジの復元
 
-<ApiLink type="GridStateDirective" /> は、デフォルトで は ([`制限`](state-persistence.md#制限)を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、[Pivot Grid リモート操作](pivot-grid-custom.md)のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、<ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
+<ApiLink type="GridStateDirective" /> は、デフォルトで は ([`制限`](/{igPath}/state-persistence#制限)を参照) リモート ピボット操作もカスタム ディメンション ストラテジも保持しません (詳細については、[Pivot Grid リモート操作](/{igPath}/pivot-grid-custom)のサンプルを参照してください)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、<ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> と呼ばれるイベントを公開します。このイベントはグリッド状態が適用される前に追加で変更するために使用できます。以下はその方法です。
 
 > <ApiLink type="GridStateDirective" /> は、文字列引数で <ApiLink type="GridStateDirective" member="setState" label="setState" /> を使用している場合にのみ発行します。
 
@@ -457,7 +457,7 @@ public restoreState() {
 <ComponentBlock for="Grid">
 ## ストラテジの復元
 
-<ApiLink type="GridStateDirective" /> はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](remote-data-operations.md)サンプルを参照) も保持しません ([`制限`](state-persistence.md#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、<ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。
+<ApiLink type="GridStateDirective" /> はデフォルトでは、リモート操作もカスタム ディメンション ストラテジ (詳細については、[グリッド リモート操作](/{igPath}/remote-data-operations)サンプルを参照) も保持しません ([`制限`](/{igPath}/state-persistence#制限) を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`IgxGridState` は、<ApiLink type="GridStateDirective" member="stateParsed" label="stateParsed" /> と呼ばれるイベントを公開します。このイベントはグリッド状態に追加の変更を、それが適用される前に行なうために使用できます。
 以下はその方法です。
 
 <DocsAside type="info" title="情報">
@@ -545,8 +545,8 @@ state.setState(gridState.columnSelection);
 - [選択](/{igPath}/selection)
 </ComponentBlock>
 <ComponentBlock for="PivotGrid">
-- [{ComponentTitle} 概要]({ComponentMainTopic}.md)
-- [ピボット グリッドのリモート操作](pivot-grid-custom.md)
-- [ピボット グリッド機能](pivot-grid-features.md)
+- [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+- [ピボット グリッドのリモート操作](/{igPath}/pivot-grid-custom)
+- [ピボット グリッド機能](/{igPath}/pivot-grid-features)
 </ComponentBlock>
 
diff --git a/docs/angular/src/content/jp/grids_templates/summaries.mdx b/docs/angular/src/content/jp/grids_templates/summaries.mdx
index 0ce99ad762..d23c209757 100644
--- a/docs/angular/src/content/jp/grids_templates/summaries.mdx
+++ b/docs/angular/src/content/jp/grids_templates/summaries.mdx
@@ -767,7 +767,7 @@ $custom-theme: grid-summary-theme(
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes.md)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](/themes/sass/palettes)のトピックをご覧ください。
 </DocsAside>
 
 最後にコンポーネントのカスタム テーマを**含めます**。
@@ -779,7 +779,7 @@ $custom-theme: grid-summary-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、 `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、 `::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
 </DocsAside>
 
  ```scss
@@ -827,17 +827,17 @@ $custom-theme: grid-summary-theme(
 ## その他のリソース
 
 
-- [{ComponentTitle} 概要]({ComponentMainTopic}.md)
-- [列のデータ型](column-types.md#デフォルトのテンプレート)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [列移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-<ComponentBlock for="Grid">- [選択に基づいた集計](selection-based-aggregates)</ComponentBlock>
+- [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+- [列のデータ型](/{igPath}/column-types#デフォルトのテンプレート)
+- [仮想化とパフォーマンス](/{igPath}/virtualization)
+- [ページング](/{igPath}/paging)
+- [フィルタリング](/{igPath}/filtering)
+- [ソート](/{igPath}/sorting)
+- [列移動](/{igPath}/column-moving)
+- [列のピン固定](/{igPath}/column-pinning)
+- [列のサイズ変更](/{igPath}/column-resizing)
+- [選択](/{igPath}/selection)
+<ComponentBlock for="Grid">- [選択に基づいた集計](/{igPath}/selection-based-aggregates)</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/grids_templates/toolbar.mdx b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
index 7e79add871..5c84e55bd3 100644
--- a/docs/angular/src/content/jp/grids_templates/toolbar.mdx
+++ b/docs/angular/src/content/jp/grids_templates/toolbar.mdx
@@ -551,7 +551,7 @@ $grid-toolbar-theme: grid-toolbar-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](/themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド ツールバー コンポーネント内のコンポーネントのスタイルを設定するために、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、グリッド ツールバー コンポーネント内のコンポーネントのスタイルを設定するために、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/grids_templates/validation.mdx b/docs/angular/src/content/jp/grids_templates/validation.mdx
index ad0546a026..5ae7428eca 100644
--- a/docs/angular/src/content/jp/grids_templates/validation.mdx
+++ b/docs/angular/src/content/jp/grids_templates/validation.mdx
@@ -604,7 +604,7 @@ The below sample demonstrates the cross-field validation in action.
 
 ## スタイル設定
 
-[Ignite UI for Angular テーマ ライブラリ](/themes/index.md)を使用して、編集時のデフォルトの検証スタイルを変更できます。
+[Ignite UI for Angular テーマ ライブラリ](/themes)を使用して、編集時のデフォルトの検証スタイルを変更できます。
 
 以下の例では、検証メッセージの公開されたテンプレートを使用します。ツールチップをポップアウトし、および、検証のデフォルトの外観を変更するためにエラー時の色をオーバーライドします。
 また、無効な行をより明確にするために背景のスタイルを設定します。
@@ -761,9 +761,11 @@ public cellStyles = {
 
 ## その他のリソース
 
-- [igxGrid で CRUD 操作を構築する](/general/how-to/how-to-perform-crud.md)
+- [igxGrid で CRUD 操作を構築する](/general/how-to/how-to-perform-crud)
 - [{ComponentTitle} 概要](/{igPath}/{ComponentMainTopic})
+<ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
 - [{ComponentTitle} 編集](/{igPath}/editing)
+</ComponentBlock>
 - [{ComponentTitle} 行編集](/{igPath}/row-editing)
 - [{ComponentTitle} 行追加](/{igPath}/row-adding)
 - [{ComponentTitle} トランザクション](/{igPath}/batch-editing)
diff --git a/docs/angular/src/scripts/grid-configs.mjs b/docs/angular/src/scripts/grid-configs.mjs
index 4e6264744a..7d183e8b30 100644
--- a/docs/angular/src/scripts/grid-configs.mjs
+++ b/docs/angular/src/scripts/grid-configs.mjs
@@ -38,7 +38,7 @@ export const GRID_CONFIGS = {
         ComponentSelector: 'igx-hierarchical-grid',
     },
     pivotGrid: {
-        igPath: 'pivotGrid',
+        igPath: 'pivotgrid',
         componentKey: 'PivotGrid',
         ComponentApiType: 'PivotGrid',
         ComponentMainTopic: 'pivot-grid',
diff --git a/docs/xplat/scripts/generate.mjs b/docs/xplat/scripts/generate.mjs
index 47a532c492..94a1d1961c 100644
--- a/docs/xplat/scripts/generate.mjs
+++ b/docs/xplat/scripts/generate.mjs
@@ -68,7 +68,7 @@ if (!platformConfig) {
 // Build the set of hrefs excluded for the current platform from toc.json.
 //
 // toc.json entries look like:
-//   { "href": "general-changelog-dv-react.md", "exclude": ["Angular", "Blazor"] }
+//   { "href": "general-changelog-dv-react.mdx", "exclude": ["Angular", "Blazor"] }
 //
 // We normalise each href to a slug (no .md/.mdx extension, forward slashes)
 // and store it in a Set for O(1) lookup in processDir / expandSharedFiles.
@@ -612,6 +612,32 @@ function expandSharedFiles(sharedSrcDir, gridsOutDir) {
             // 5. Normalize image paths
             content = normalizeImagePaths(content);
 
+            // 5b. Rewrite ../_shared/X.mdx → ./X.mdx
+            //     After expansion, _shared files land as siblings in the output dir.
+            //     Markdown links: (../_shared/X.mdx) → (./X.mdx)
+            //     JSX href attrs:  href="../_shared/X.mdx" → href="./X.mdx"
+            content = content.replace(/\(\.\.\/_shared\/([^)]+)\)/g, '(./$1)');
+            content = content.replace(/href="\.\.\/_shared\/([^"]+)"/g, 'href="./$1"');
+
+            // 5c. Strip links to pages that are excluded for this platform/component.
+            //     When a _shared template is expanded to e.g. hierarchical-grid/,
+            //     some sibling links point to pages that are excluded (e.g. paging.mdx
+            //     is excluded for hierarchical-grid on all platforms).
+            //     - List items "- [text](target.mdx)" → remove entire line
+            //     - Inline links "[text](target.mdx)" → keep just the text
+            content = content.replace(/^- \[([^\]]+)\]\(([^)]+)\)\s*$/mg, (line, _text, href) => {
+                const base = href.split('#')[0].replace(/^\.\//, '').replace(/\.mdx?$/, '');
+                if (/^https?:|^\//.test(base)) return line;
+                const targetSlug = `grids/${comp.outDir}/${base}`;
+                return EXCLUDED_SLUGS.has(targetSlug) ? '' : line;
+            });
+            content = content.replace(/\[([^\]]+)\]\(([^)]+\.mdx[^)]*)\)/g, (match, text, href) => {
+                const base = href.split('#')[0].replace(/^\.\//, '').replace(/\.mdx?$/, '');
+                if (/^https?:|^\//.test(base)) return match;
+                const targetSlug = `grids/${comp.outDir}/${base}`;
+                return EXCLUDED_SLUGS.has(targetSlug) ? text : match;
+            });
+
             // 6. Check exclusion before writing
             const slug = `grids/${comp.outDir}/${entry.replace(/\.mdx?$/, '')}`;
             if (EXCLUDED_SLUGS.has(slug)) {
@@ -651,7 +677,22 @@ function processDir(srcDir, outDir, relBase = '') {
             }
             const raw = readFileSync(srcPath, 'utf8');
             if (/\.mdx$/.test(entry)) {
-                writeFileSync(path.join(outDir, entry), prepareMarkdownOutput(ensureMdxImports(transformMdxFile(raw))), 'utf8');
+                let content = prepareMarkdownOutput(ensureMdxImports(transformMdxFile(raw)));
+                // Rewrite _shared/ cross-references so generated files resolve correctly.
+                //   top-level (relBase=''):     ./grids/_shared/X.mdx → ./grids/grid/X.mdx
+                //   grids/ level (relBase='grids'):  ./_shared/X.mdx → ./grid/X.mdx
+                //   grid subdir (relBase='grids/grid' etc.): ../_shared/X.mdx → ./X.mdx
+                if (relBase === '') {
+                    content = content.replace(/\(\.\/grids\/_shared\/([^)]+)\)/g, '(./grids/grid/$1)');
+                    content = content.replace(/href="\.\/grids\/_shared\/([^"]+)"/g, 'href="./grids/grid/$1"');
+                } else if (relBase === 'grids') {
+                    content = content.replace(/\(\.\/_shared\/([^)]+)\)/g, '(./grid/$1)');
+                    content = content.replace(/href="\.\/\_shared\/([^"]+)"/g, 'href="./grid/$1"');
+                } else if (relBase.startsWith('grids/')) {
+                    content = content.replace(/\(\.\.\/_shared\/([^)]+)\)/g, '(./$1)');
+                    content = content.replace(/href="\.\.\/_shared\/([^"]+)"/g, 'href="./$1"');
+                }
+                writeFileSync(path.join(outDir, entry), content, 'utf8');
             } else {
                 writeFileSync(path.join(outDir, entry), prepareMarkdownOutput(transformRegularFile(raw)), 'utf8');
             }
diff --git a/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx
index 2172ab9f88..191bb17be8 100644
--- a/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/xplat/src/content/en/components/ai/ai-assisted-development-overview.mdx
@@ -159,7 +159,7 @@ Agent Skills are structured, developer-owned packages that tell AI coding assist
 
 Ignite UI ships dedicated Skill packages for Angular, React, Web Components, and Blazor. The Skill package is developer-owned: edit the `SKILL.md` to match your team's conventions, add project-specific patterns, reference your internal design system, and version the package alongside your codebase.
 
-For full setup instructions and IDE wiring, see [Agent Skills](skills.md).
+For full setup instructions and IDE wiring, see [Agent Skills](skills.mdx).
 
 ## CLI MCP Server
 
@@ -171,7 +171,7 @@ The CLI MCP server runs via `npx` without a global install:
 npx -y igniteui-cli mcp
 ```
 
-Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.md) for the full setup guide.
+Use `ai-config` to write the MCP configuration for your AI client automatically. The server connects to VS Code with GitHub Copilot, Cursor, Claude Desktop, Claude Code, JetBrains AI Assistant, and any other MCP-compatible client that supports STDIO transport. The exact configuration format differs by client - see [CLI MCP](cli-mcp.mdx) for the full setup guide.
 
 It does not generate code autonomously - it exposes tools to the AI agent, which invokes them in response to developer prompts.
 
@@ -187,7 +187,7 @@ npx -y igniteui-theming igniteui-theming-mcp
 
 The Theming MCP server supports Angular, React, Web Components, and Blazor. It updates with every Ignite UI release so agents always work against the current token surface.
 
-For configuration details, see [Theming MCP](theming-mcp.md).
+For configuration details, see [Theming MCP](theming-mcp.mdx).
 
 ## Supported AI Clients
 
@@ -262,7 +262,7 @@ The Skill package for Blazor is copied automatically when `ai-config` detects a
 
 Wire it to your IDE using the persistent setup for your client.
 
-See [Agent Skills](skills.md) for the complete setup.
+See [Agent Skills](skills.mdx) for the complete setup.
 
 ### Step 2 - Connect the CLI MCP Server
 
@@ -294,7 +294,7 @@ Add the `igniteui-cli` MCP server entry to the configuration file for your AI cl
 }
 ```
 
-For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.md).
+For the full setup guide, including VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains, and other MCP-compatible clients, see [CLI MCP](cli-mcp.mdx).
 
 ### Step 3 - Connect the Theming MCP Server (optional)
 
@@ -326,13 +326,13 @@ Add the `igniteui-theming` entry to the same MCP configuration file, alongside `
 }
 ```
 
-For configuration details and theming workflows, see [Theming MCP](theming-mcp.md).
+For configuration details and theming workflows, see [Theming MCP](theming-mcp.mdx).
 
 ## Additional Resources
 
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx
index 020989cc86..47286302b9 100644
--- a/docs/xplat/src/content/en/components/ai/cli-mcp.mdx
+++ b/docs/xplat/src/content/en/components/ai/cli-mcp.mdx
@@ -20,7 +20,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 ## Overview
 
-Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.md). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
+Ignite UI CLI MCP gives AI assistants direct access to Ignite UI CLI project scaffolding, component generation, project modification, and documentation-aware workflows through chat or agent mode. The server works alongside [Ignite UI Theming MCP](./theming-mcp.mdx). CLI MCP handles project and component workflows while Theming MCP handles palettes, themes, tokens, and styling. Most teams connect both servers in the same AI client session.
 
 The recommended setup path is to start with Ignite UI CLI first. That path creates the project, installs the required packages, and prompts you to choose which AI clients and agents to configure. You can also start from an empty folder and let the assistant create the project through MCP, or connect MCP to a project that already exists.
 
@@ -166,7 +166,7 @@ npx ig new my-app --framework=webcomponents --template=side-nav
 In guided mode, Ignite UI CLI prompts for the project name, framework, template, theme, and whether to add a component or complete the setup. In direct mode, you provide the framework and any supported options in the command itself.
 
 <PlatformBlock for="React, WebComponents">
-For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the [Ignite UI CLI documentation](../general-cli-overview.md).
+For more details about project templates, CLI command options, and component scaffolding commands such as `ig add`, see the [Ignite UI CLI documentation](../general-cli-overview.mdx).
 </PlatformBlock>
 
 ### VS Code
@@ -448,9 +448,9 @@ Validate that the JSON uses the `mcpServers` structure and that each local serve
 
 ## Additional Resources
 
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [{ProductName} Skills](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [{ProductName} Skills](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/ai/maker-framework.mdx b/docs/xplat/src/content/en/components/ai/maker-framework.mdx
index d23d68da74..9e4be5ffb7 100644
--- a/docs/xplat/src/content/en/components/ai/maker-framework.mdx
+++ b/docs/xplat/src/content/en/components/ai/maker-framework.mdx
@@ -13,7 +13,7 @@ llms:
 
 The MAKER Framework (`@igniteui/maker-mcp`) is a multi-agent AI orchestration MCP server from Infragistics that decomposes complex tasks into validated, executable step plans using a consensus-based voting algorithm across multiple AI agents. MAKER stands for Maximal Agentic decomposition, first-to-ahead-by-K Error correction, and Red-flagging. The framework is based on the research paper _Solving a million-step LLM task with zero errors_ by Cognizant AI Lab. It runs as an MCP server via `npx` from the `@igniteui` GitHub Packages registry and connects to any MCP-compatible AI client through STDIO transport. Once connected, the AI assistant can invoke three tools - `plan`, `execute`, and `plan_and_execute` - to run long-horizon tasks with automatic error detection and correction.
 
-The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.md). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
+The MAKER Framework is not an Ignite UI component scaffolding tool. For Ignite UI project creation, component generation, and documentation queries, use the [CLI MCP server](cli-mcp.mdx). MAKER is framework-agnostic - it does not target Angular, React, Blazor or Web Components specifically, and it does not read or modify project source files on its own. It requires at least one AI provider API key (OpenAI, Anthropic, or Google AI) and a GitHub Personal Access Token with `read:packages` scope for the `@igniteui` registry.
 
 ## How MAKER Works
 
@@ -225,10 +225,10 @@ The binary cache location can be overridden with the `MAKER_MCP_CACHE` environme
 
 ## Additional Resources
 
-- [AI-Assisted Development Overview](ai-assisted-development-overview.md)
-- [Agent Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development Overview](ai-assisted-development-overview.mdx)
+- [Agent Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/ai/skills.mdx b/docs/xplat/src/content/en/components/ai/skills.mdx
index 79a1bda569..1c367149e8 100644
--- a/docs/xplat/src/content/en/components/ai/skills.mdx
+++ b/docs/xplat/src/content/en/components/ai/skills.mdx
@@ -28,11 +28,11 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo
 
 | Skill | Path | Description |
 |:------|:-----|:------------|
-| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | Standalone components, form controls, overlays, layout |
-| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | Helps with integrating components to the user's platform of choice |
-| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
-| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size |
-| Generate From Image Design | [`skills/igniteui-wc-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.md) | Build Web Components apps from screenshots, mockups, and wireframes using Ignite UI components |
+| Components & Layout | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.mdx) | Standalone components, form controls, overlays, layout |
+| Platform Integration | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.mdx) | Helps with integrating components to the user's platform of choice |
+| Theming & Styling | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.mdx) | Palettes, typography, elevations, component themes, MCP server |
+| Optimization | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.mdx) | Ensuring best practices for tree shaking to optimize bundle size |
+| Generate From Image Design | [`skills/igniteui-wc-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-generate-from-image-design/SKILL.mdx) | Build Web Components apps from screenshots, mockups, and wireframes using Ignite UI components |
 
 </PlatformBlock>
 
@@ -40,10 +40,10 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo
 
 | Skill | Path | Description |
 |:------|:-----|:------------|
-| Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript |
-| Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
-| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | Ensuring best practices for tree shaking to optimize bundle size |
-| Generate From Image Design | [`skills/igniteui-react-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-generate-from-image-design/SKILL.md) | Build React apps from screenshots, mockups, and wireframes using Ignite UI components |
+| Components | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.mdx) | Identify the right components, install, import, and use them - JSX patterns, event handling, refs, forms, TypeScript |
+| Theming & Styling | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.mdx) | Palettes, typography, elevations, component themes, MCP server |
+| Optimization | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.mdx) | Ensuring best practices for tree shaking to optimize bundle size |
+| Generate From Image Design | [`skills/igniteui-react-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-generate-from-image-design/SKILL.mdx) | Build React apps from screenshots, mockups, and wireframes using Ignite UI components |
 
 </PlatformBlock>
 
@@ -51,10 +51,10 @@ The skill files live in the [`skills/`]({GithubLink}/tree/master/skills) directo
 
 | Skill | Path | Description |
 |:------|:-----|:------------|
-| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.md) | Standalone components, form controls, overlays, layout |
-| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data |
-| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
-| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components |
+| Components & Layout | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.mdx) | Standalone components, form controls, overlays, layout |
+| Data Grids | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.mdx) | Grid, Tree Grid, Hierarchical Grid, Pivot Grid, sorting, filtering, grouping, paging, remote data |
+| Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx) | Palettes, typography, elevations, component themes, MCP server |
+| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-generate-from-image-design/SKILL.mdx) | Build Angular apps from screenshots, mockups, and wireframes using Ignite UI components |
 
 <DocsAside type="info">
 Starting with {ProductName} **21.1.0**, these skills are automatically discovered when placed in your agent's skills path (e.g., `.claude/skills`, `.agents/skills`, `.cursor/rules/`). This release ships with an optional migration to add these skills to your project automatically.
@@ -66,10 +66,10 @@ Starting with {ProductName} **21.1.0**, these skills are automatically discovere
 
 | Skill | Path | Description |
 |:------|:-----|:------------|
-| Components & Layout | [`skills/igniteui-blazor-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-components/SKILL.md) | Components, form controls, overlays, layout |
-| Data Grids | [`skills/igniteui-blazor-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-grids/SKILL.md) | Grid, Tree Grid, Hierarchical Grid, Grid Lite, sorting, filtering, grouping, paging, remote data |
-| Theming & Styling | [`skills/igniteui-blazor-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.md) | Palettes, typography, elevations, component themes, MCP server |
-| Generate From Image Design | [`skills/igniteui-blazor-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-generate-from-image-design/SKILL.md) | Build Blazor apps from screenshots, mockups, and wireframes using Ignite UI components |
+| Components & Layout | [`skills/igniteui-blazor-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-components/SKILL.mdx) | Components, form controls, overlays, layout |
+| Data Grids | [`skills/igniteui-blazor-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-grids/SKILL.mdx) | Grid, Tree Grid, Hierarchical Grid, Grid Lite, sorting, filtering, grouping, paging, remote data |
+| Theming & Styling | [`skills/igniteui-blazor-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.mdx) | Palettes, typography, elevations, component themes, MCP server |
+| Generate From Image Design | [`skills/igniteui-blazor-generate-from-image-design/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-blazor-generate-from-image-design/SKILL.mdx) | Build Blazor apps from screenshots, mockups, and wireframes using Ignite UI components |
 
 </PlatformBlock>
 
@@ -566,46 +566,46 @@ Once complete, the skills are ready to use - no manual file copying required.
 
 <PlatformBlock for="WebComponents">
 
-The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
+The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.mdx) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
 
 </PlatformBlock>
 
 <PlatformBlock for="React">
 
-The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
+The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.mdx) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
+The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.md) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
+The **Theming skill** includes setup instructions for the `igniteui-theming` MCP server, which gives AI assistants access to live theming tools such as palette generation and component theme scaffolding. See the [Theming skill file]({GithubLink}/blob/master/skills/igniteui-blazor-theming/SKILL.mdx) for configuration steps for VS Code, Cursor, Claude Desktop, and JetBrains IDEs.
 
 </PlatformBlock>
 
-For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.md) documentation.
+For more information on the Theming MCP, refer to the [Ignite UI Theming MCP](./theming-mcp.mdx) documentation.
 
 ## Additional Resources
 
 
 <PlatformBlock for="React, WebComponents, Blazor">
-- [Getting Started with {ProductName}](../general-getting-started.md)
+- [Getting Started with {ProductName}](../general-getting-started.mdx)
 </PlatformBlock>
 <PlatformBlock for="React, WebComponents">
-- [Ignite UI CLI](../general-cli-overview.md)
+- [Ignite UI CLI](../general-cli-overview.mdx)
 </PlatformBlock>
 <PlatformBlock for="Angular">
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Getting Started with {ProductName}</a>
 - <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
 </PlatformBlock>
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx
index 702b39c230..8dd50be3cd 100644
--- a/docs/xplat/src/content/en/components/ai/theming-mcp.mdx
+++ b/docs/xplat/src/content/en/components/ai/theming-mcp.mdx
@@ -27,7 +27,7 @@ Most tools can produce either **Sass** or **CSS** output. Sass output is the def
 The Ignite UI Theming MCP works alongside the Ignite UI CLI MCP. In practice, the Theming MCP handles palettes, themes, tokens, typography, elevations, and styling workflows, while the CLI MCP handles project creation, project modification, component workflows, and documentation-oriented tasks. Most teams will want both servers connected in the same AI client.
 
 <PlatformBlock for="React, WebComponents">
-For a concrete combined workflow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md).
+For a concrete combined workflow after setup, see [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.mdx).
 </PlatformBlock>
 
 **Example prompts to try once connected:**
@@ -426,12 +426,12 @@ Also confirm that `core()` is called before any other theming mixin in your `sty
 ## Additional Resources
 
 <PlatformBlock for="React, WebComponents">
-- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.md)
+- [Build an App End-to-End with Ignite UI CLI MCP and Ignite UI Theming MCP](../general-how-to-mcp-e2e.mdx)
 </PlatformBlock>
-- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.md)
-- [{ProductName} Skills](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [MAKER Framework](./maker-framework.md)
+- [AI-Assisted Development with Ignite UI](./ai-assisted-development-overview.mdx)
+- [{ProductName} Skills](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [MAKER Framework](./maker-framework.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx b/docs/xplat/src/content/en/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
index 8f7d84647e..d875508b2d 100644
--- a/docs/xplat/src/content/en/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
+++ b/docs/xplat/src/content/en/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
@@ -193,7 +193,7 @@ In terms of Blazor WebAssembly applications where .NET code is processed in an i
 
 ### Tips and Tricks #1 - Pause the automatic calculation of formulas
 
-The Infragistics Blazor Excel library lets you pause the automatic calculation of formulas in order to improve the processing speed when browsing or rewriting cells in an Excel file on a Blazor WebAssembly application. For more information, please refer to [this documentation topic](blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md).
+The Infragistics Blazor Excel library lets you pause the automatic calculation of formulas in order to improve the processing speed when browsing or rewriting cells in an Excel file on a Blazor WebAssembly application. For more information, please refer to [this documentation topic](blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.mdx).
 
 ### Tips and Tricks #2 - Use Ahead-Of-Time (AOT) compilation
 
diff --git a/docs/xplat/src/content/en/components/bullet-graph.mdx b/docs/xplat/src/content/en/components/bullet-graph.mdx
index 2d2d1b700d..ec3cf7957c 100644
--- a/docs/xplat/src/content/en/components/bullet-graph.mdx
+++ b/docs/xplat/src/content/en/components/bullet-graph.mdx
@@ -1174,5 +1174,5 @@ For your convenience, all above code snippets are combined into one code block b
 
 You can find more information about other types of gauges in these topics:
 
-- [Linear Gauge](Linear-gauge.md)
-- [Radial Gauge](radial-gauge.md)
+- [Linear Gauge](linear-gauge.mdx)
+- [Radial Gauge](radial-gauge.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/chart-api.mdx b/docs/xplat/src/content/en/components/charts/chart-api.mdx
index 55ecdf46a0..c6eb417ddb 100644
--- a/docs/xplat/src/content/en/components/charts/chart-api.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-api.mdx
@@ -37,7 +37,7 @@ The {Platform} <ApiLink type="DataChart" /> has the following API members:
 
 | Chart Properties | Axis Classes |
 |------------------|--------------|
-| - <ApiLink type="SeriesViewer" member="title" label="Title" /> <br /> - <ApiLink type="SeriesViewer" member="subtitle" label="Subtitle" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="DataChart" member="axes" label="Axes" /> <br /> - <ApiLink type="SeriesViewer" member="series" label="Series" /> <br /> |  - <ApiLink type="Axis" /> is base class for all axis types <br /> - <ApiLink type="CategoryXAxis" /> used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br /> - <ApiLink type="CategoryYAxis" /> used with [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md) <br /> - <ApiLink type="CategoryAngleAxis" /> used with [Radial Series](types/radial-chart.md) <br /> - <ApiLink type="NumericXAxis" /> used with [Scatter Series](types/scatter-chart.md) and [Bar Series](types/bar-chart.md)   <br /> - <ApiLink type="NumericYAxis" /> used with [Scatter Series](types/scatter-chart.md), [Category Series](types/column-chart.md), [Stacked Series](types/stacked-chart.md), and [Financial Series](types/stock-chart.md) <br /> - <ApiLink type="NumericAngleAxis" /> used with [Polar Series](types/polar-chart.md) <br /> - <ApiLink type="NumericRadiusAxis" /> used with [Polar Series](types/polar-chart.md) and [Radial Series](types/radial-chart.md) <br /> - <ApiLink type="TimeXAxis" /> used with [Category Series](types/column-chart.md) and [Financial Series](types/stock-chart.md) <br /> <br /> |
+| - <ApiLink type="SeriesViewer" member="title" label="Title" /> <br /> - <ApiLink type="SeriesViewer" member="subtitle" label="Subtitle" /> <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - <ApiLink type="DataChart" member="axes" label="Axes" /> <br /> - <ApiLink type="SeriesViewer" member="series" label="Series" /> <br /> |  - <ApiLink type="Axis" /> is base class for all axis types <br /> - <ApiLink type="CategoryXAxis" /> used with [Category Series](types/column-chart.mdx), [Stacked Series](types/stacked-chart.mdx), and [Financial Series](types/stock-chart.mdx) <br /> - <ApiLink type="CategoryYAxis" /> used with [Category Series](types/column-chart.mdx), [Stacked Series](types/stacked-chart.mdx) <br /> - <ApiLink type="CategoryAngleAxis" /> used with [Radial Series](types/radial-chart.mdx) <br /> - <ApiLink type="NumericXAxis" /> used with [Scatter Series](types/scatter-chart.mdx) and [Bar Series](types/bar-chart.mdx)   <br /> - <ApiLink type="NumericYAxis" /> used with [Scatter Series](types/scatter-chart.mdx), [Category Series](types/column-chart.mdx), [Stacked Series](types/stacked-chart.mdx), and [Financial Series](types/stock-chart.mdx) <br /> - <ApiLink type="NumericAngleAxis" /> used with [Polar Series](types/polar-chart.mdx) <br /> - <ApiLink type="NumericRadiusAxis" /> used with [Polar Series](types/polar-chart.mdx) and [Radial Series](types/radial-chart.mdx) <br /> - <ApiLink type="TimeXAxis" /> used with [Category Series](types/column-chart.mdx) and [Financial Series](types/stock-chart.mdx) <br /> <br /> |
 
 The {Platform} <ApiLink type="DataChart" /> can use the following type of series that inherit from <ApiLink type="DataChart" member="Series" label="Series" />:
 
@@ -48,7 +48,7 @@ The {Platform} <ApiLink type="DataChart" /> can use the following type of series
 
 | Scatter Series | Financial Series |
 |----------------|------------------|
-| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - and [many more](types/stock-chart.md) |
+| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - and [many more](types/stock-chart.mdx) |
 
 
 | Radial Series | Polar Series |
@@ -123,8 +123,8 @@ The {Platform} <ApiLink type="Sparkline" /> has the following API members:
 
 You can find more information about charts in these topics:
 
-- [Chart Overview](chart-overview.md)
-- [Chart Features](chart-features.md)
+- [Chart Overview](chart-overview.mdx)
+- [Chart Features](chart-features.mdx)
 
 
 
diff --git a/docs/xplat/src/content/en/components/charts/chart-features.mdx b/docs/xplat/src/content/en/components/charts/chart-features.mdx
index 19a1cfc55f..fc951ce012 100644
--- a/docs/xplat/src/content/en/components/charts/chart-features.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-features.mdx
@@ -18,61 +18,61 @@ The {Platform} Charts offer the following chart features:
 
 ## Axis
 
-Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the {Platform} chart's [Axis Gridlines](features/chart-axis-gridlines.md), [Axis Layouts](features/chart-axis-layouts.md), and [Axis Options](features/chart-axis-options.md) topic.
+Modify or customize all aspects of both the X-Axis and Y-Axis using the different axis properties. You can display gridlines, customize the style of tickmarks, change axis titles, and even modify axis locations and crossing values. You can learn more about customizations of the {Platform} chart's [Axis Gridlines](features/chart-axis-gridlines.mdx), [Axis Layouts](features/chart-axis-layouts.mdx), and [Axis Options](features/chart-axis-options.mdx) topic.
 
 <Sample src="/charts/data-chart/axis-crossing" height={500} alt="{Platform} Axis Crossing Axes Example" />
 
 ## Annotations
 
-These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the [Chart Annotations](features/chart-annotations.md) topic.
+These additional layers are on top of the chart which are mouse / touch dependent. Used individually or combined, they provide powerful interactions that help to highlight certain values within the chart. You can learn more about this feature in the [Chart Annotations](features/chart-annotations.mdx) topic.
 
 <Sample src="/charts/category-chart/line-chart-with-annotations" height={500} alt="{Platform} Annotations Example" />
 
 ## Animations
 
-Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the [Chart Animations](features/chart-animations.md) topic.
+Animate your chart as it loads a new data source by enabling animations. These are customizable by setting different types of animations and the speed at which those animations take place. You can learn more about this feature in the [Chart Animations](features/chart-animations.mdx) topic.
 
 <Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="{Platform} Configuration Options Example" />
 
 ## Highlighting
 
-Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This feature is enabled on all chart types. You can learn more about this feature in the [Chart Highlighting](features/chart-highlighting.md) topic.
+Bring focus to visuals such as lines, columns, or markers by highlighting them as the mouse hovers over the data items. This feature is enabled on all chart types. You can learn more about this feature in the [Chart Highlighting](features/chart-highlighting.mdx) topic.
 
 <Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="{Platform} Highlighting Example" />
 
 ## Markers
 
-Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the [Chart Markers](features/chart-markers.md) topic.
+Identify data points quickly, even if the value falls between major gridlines with the use of markers on the chart series. These are fully customizable in style, color, and shape. You can learn more about this feature in the [Chart Markers](features/chart-markers.mdx) topic.
 
 <Sample src="/charts/category-chart/marker-options" height={500} alt="{Platform} Configuration Options Example" />
 
 ## Navigation
 
-You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the [Chart Navigation](features/chart-navigation.md) topic.
+You can navigate the chart by zooming and panning with the mouse, keyboard, and touch interactions. You can learn more about this feature in the [Chart Navigation](features/chart-navigation.mdx) topic.
 
 <Sample src="/charts/data-chart/chart-navigation" height={500} alt="{Platform} Navigation Example" />
 
 ## Overlays
 
-Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the [Chart Overlays](features/chart-overlays.md) topic.
+Overlays allows you to annotate important values and thresholds by plotting horizontal or vertical lines in charts. You can learn more about this feature in the [Chart Overlays](features/chart-overlays.mdx) topic.
 
 <Sample src="/charts/data-chart/series-value-overlay" height={600} alt="{Platform} Value Overlay Example" />
 
 ## Performance
 
-{Platform} charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the [Chart Performance](features/chart-performance.md) topic.
+{Platform} charts are optimized for high performance of rendering millions of data points and updating them every few milliseconds. However, there are several chart features that affect performance of the charts and they should be considered when optimizing performance in your application. You can learn more about this feature in the [Chart Performance](features/chart-performance.mdx) topic.
 
 <Sample src="/charts/category-chart/high-volume" height={600} alt="{Platform} Chart Performance Example" />
 
 ## Tooltips
 
-Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the [Chart Tooltips](features/chart-tooltips.md) topic.
+Display all information relevant to the particular series type via Tooltips. There are different tooltips that can be enabled, such as Item-level and Category-level tooltips. You can learn more about this feature in the [Chart Tooltips](features/chart-tooltips.mdx) topic.
 
 <Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="{Platform} Tooltip Types Example" />
 
 ## Trendlines
 
-Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the {Platform} chart, such as CubicFit and LinearFit. You can learn more about this feature in the [Chart Trendlines](features/chart-trendlines.md) topic.
+Use trendlines to identify a trend or find patterns in your data. There are many different trendlines supported by the {Platform} chart, such as CubicFit and LinearFit. You can learn more about this feature in the [Chart Trendlines](features/chart-trendlines.mdx) topic.
 
 <Sample src="/charts/financial-chart/trendlines" height={500} alt="{Platform} Trendlines Example" />
 
diff --git a/docs/xplat/src/content/en/components/charts/chart-overview.mdx b/docs/xplat/src/content/en/components/charts/chart-overview.mdx
index b287c92a9c..7b36c6a6e8 100644
--- a/docs/xplat/src/content/en/components/charts/chart-overview.mdx
+++ b/docs/xplat/src/content/en/components/charts/chart-overview.mdx
@@ -62,7 +62,7 @@ We make {Platform} Category and Financial Chart easier to use, the good news you
 
 ### {Platform} Bar Chart
 
-The {Platform} Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our [bar chart](types/bar-chart.md)
+The {Platform} Bar Chart, or Bar Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Learn more about our [bar chart](types/bar-chart.mdx)
 
 <Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="{Platform} Bar Chart Multiple Sources" />
 
@@ -71,7 +71,7 @@ The {Platform} Bar Chart, or Bar Graph is among the most common category chart t
 
 ### {Platform} Pie Chart
 
-The {Platform} Pie Chart, or Pie Graph, is a very common part-to-whole chart type. Part-to-whole charts show how categories (parts) of a data set add up to a total (whole) value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed. A pie chart renders data values as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. The total values represented by the pie slices represent a whole value, like 100 or 100%. Pie charts are perfect for small data sets and are easy to read at a quick glance. Learn more about our [pie chart](types/pie-chart.md)
+The {Platform} Pie Chart, or Pie Graph, is a very common part-to-whole chart type. Part-to-whole charts show how categories (parts) of a data set add up to a total (whole) value. Categories are shown in proportion to other categories based on their value percentage to the total value being analyzed. A pie chart renders data values as sections in a circular, or pie-shaped graph. Each section, or pie slice, has an arc length proportional to its underlying data value. The total values represented by the pie slices represent a whole value, like 100 or 100%. Pie charts are perfect for small data sets and are easy to read at a quick glance. Learn more about our [pie chart](types/pie-chart.mdx)
 
 <Sample src="/charts/pie-chart/overview" height={600} alt="{Platform} Pie Chart Overview" />
 
@@ -80,7 +80,7 @@ The {Platform} Pie Chart, or Pie Graph, is a very common part-to-whole chart typ
 
 ### {Platform} Line Chart
 
-The {Platform} Line Chart, or Line Graph is a type of category line graph shows the continuous data values represented by points connected by straight line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. Learn more about our [line chart](types/line-chart.md)
+The {Platform} Line Chart, or Line Graph is a type of category line graph shows the continuous data values represented by points connected by straight line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. Learn more about our [line chart](types/line-chart.mdx)
 
 <Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="{Platform} Line Chart Multiple Sources" />
 
@@ -89,7 +89,7 @@ The {Platform} Line Chart, or Line Graph is a type of category line graph shows
 
 ### {Platform} Donut Chart
 
-The {Platform} Donut Chart or Donut Graph, is a variant of a Pie Chart, proportionally illustrating the occurrences of a variable in a circle to represents parts of a whole. The donut chart has a circular opening at the center of the pie chart, where a title or category explanation can be displayed. Donut charts can support multiple concentric rings, with built-in support for visualizing hierarchical data. Learn more about our [Donut chart](types/donut-chart.md)
+The {Platform} Donut Chart or Donut Graph, is a variant of a Pie Chart, proportionally illustrating the occurrences of a variable in a circle to represents parts of a whole. The donut chart has a circular opening at the center of the pie chart, where a title or category explanation can be displayed. Donut charts can support multiple concentric rings, with built-in support for visualizing hierarchical data. Learn more about our [Donut chart](types/donut-chart.mdx)
 
 <Sample src="/charts/doughnut-chart/legend" height={600} alt="{Platform} Doughnut Legend" />
 
@@ -98,7 +98,7 @@ The {Platform} Donut Chart or Donut Graph, is a variant of a Pie Chart, proporti
 
 ### {Platform} Area Chart
 
-The {Platform} Area Chart is rendered using a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). Area Charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Learn more about our [area chart](types/area-chart.md)
+The {Platform} Area Chart is rendered using a collection of points connected by straight line segments with the area below the line filled in. Values are represented on the y-axis (labels on the left side) and categories are displayed on the x-axis (bottom labels). Area Charts emphasize the amount of change over a period of time or compare multiple items as well as the relationship of parts of a whole by displaying the total of the plotted values. Learn more about our [area chart](types/area-chart.mdx)
 
 <Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="{Platform} Area Chart Multiple Sources" />
 
@@ -107,7 +107,7 @@ The {Platform} Area Chart is rendered using a collection of points connected by
 
 ### {Platform} Sparkline Chart
 
-The {Platform} Sparkline Chart, or Sparkline Graph is a type of category graph intended for rendering within a small-scale layout such as within a grid cell, or anywhere a word-sized visualization is needed to tell a data story. Like other {Platform} chart types, the Sparkline Chart has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. Sparkline charts can render as a Line Chart, Area Chart, Column Chart or Win / Loss Chart. The difference between the full-sized chart equivalent to the Spark-chart, is the Y-Axis (left side labels) and X-Axis (bottom labels) are not visible. Learn more about our [sparkline chart](types/sparkline-chart.md).
+The {Platform} Sparkline Chart, or Sparkline Graph is a type of category graph intended for rendering within a small-scale layout such as within a grid cell, or anywhere a word-sized visualization is needed to tell a data story. Like other {Platform} chart types, the Sparkline Chart has several visual elements and corresponding features that can be configured and customized such as the chart type, markers, ranges, trendlines, unknown value plotting, and tooltips. Sparkline charts can render as a Line Chart, Area Chart, Column Chart or Win / Loss Chart. The difference between the full-sized chart equivalent to the Spark-chart, is the Y-Axis (left side labels) and X-Axis (bottom labels) are not visible. Learn more about our [sparkline chart](types/sparkline-chart.mdx).
 
 <Sample src="/charts/sparkline/display-types" height={450} alt="{Platform} Sparkline Example" />
 
@@ -116,7 +116,7 @@ The {Platform} Sparkline Chart, or Sparkline Graph is a type of category graph i
 
 ### {Platform} Bubble Chart
 
-The {Platform} Bubble Chart, or Bubble Graph, is used to show data comprising of three numeric values. Two of the values are plotted as an intersecting point using a Cartesian (X, Y) coordinate system, and the third value is rendered as the diameter size of the point. This gives the Bubble Chart its name - a visualization of varying sized bubbles along the X and Y coordinates of the plot. The {Platform} Bubble Chart is used to show relationships of data correlations with the data value differences rendered by size. You can also use a fourth data dimension, typically color, to further differentiate the values in your Bubble chart. Learn more about our [bubble chart](types/bubble-chart.md).
+The {Platform} Bubble Chart, or Bubble Graph, is used to show data comprising of three numeric values. Two of the values are plotted as an intersecting point using a Cartesian (X, Y) coordinate system, and the third value is rendered as the diameter size of the point. This gives the Bubble Chart its name - a visualization of varying sized bubbles along the X and Y coordinates of the plot. The {Platform} Bubble Chart is used to show relationships of data correlations with the data value differences rendered by size. You can also use a fourth data dimension, typically color, to further differentiate the values in your Bubble chart. Learn more about our [bubble chart](types/bubble-chart.mdx).
 
 <Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="{Platform} Bubble Chart" />
 
@@ -125,7 +125,7 @@ The {Platform} Bubble Chart, or Bubble Graph, is used to show data comprising of
 
 ### {Platform} Financial / Stock Chart
 
-The {Platform} Financial or Stock Chart, is a composite visualization that renders stock data and financial data in a time-series chart that includes interactive visual elements in a toolbar like day / week / month filters, chart type selection, volume type selection, indicators selection and trends lines selection. Designed for customization, the {Platform} Stock Chart can be customized in any way to give an easier visualization and interpretation of your data. The financial chart renders the date-time data along the X-Axis (bottom labels) and shows fields like Open, High, Low and Close volumes. The type of chart to render the Time-Series data can be Bar, Candle, Column, or Line. Learn more about our [stock chart](types/stock-chart.md).
+The {Platform} Financial or Stock Chart, is a composite visualization that renders stock data and financial data in a time-series chart that includes interactive visual elements in a toolbar like day / week / month filters, chart type selection, volume type selection, indicators selection and trends lines selection. Designed for customization, the {Platform} Stock Chart can be customized in any way to give an easier visualization and interpretation of your data. The financial chart renders the date-time data along the X-Axis (bottom labels) and shows fields like Open, High, Low and Close volumes. The type of chart to render the Time-Series data can be Bar, Candle, Column, or Line. Learn more about our [stock chart](types/stock-chart.mdx).
 
 <Sample src="/charts/financial-chart/multiple-data" height={600} alt="{Platform} Stock Chart Example" />
 
@@ -134,7 +134,7 @@ The {Platform} Financial or Stock Chart, is a composite visualization that rende
 
 ### {Platform} Column Chart
 
-The {Platform} Column Chart, or Column Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by vertical bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the top to bottom of the chart towards the values of data points. Learn more about our [column chart](types/column-chart.md).
+The {Platform} Column Chart, or Column Graph is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by vertical bars of equal width and differing lengths. They are ideal for showing variations in the value of an item over time, data distribution, sorted data ranking (high to low, worst to best). Data is represented using a collection of rectangles that extend from the top to bottom of the chart towards the values of data points. Learn more about our [column chart](types/column-chart.mdx).
 
 <Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="{Platform} Column Chart Multiple Sources" />
 
@@ -143,7 +143,7 @@ The {Platform} Column Chart, or Column Graph is among the most common category c
 
 ### {Platform} Composite Chart
 
-The {Platform} Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. Learn more about our [composite chart](types/composite-chart.md).
+The {Platform} Composite Chart, also called a Combo Chart, is visualization that combines different types of chart types in the same plot area. It is very useful when presenting two data series that have a very different scale and might be expressed in different units. The most common example is dollars on one axis and percentage on the other axis. Learn more about our [composite chart](types/composite-chart.mdx).
 
 <Sample src="/charts/data-chart/composite-chart" height={600} alt="{Platform} Composite Chart Example" />
 
@@ -152,15 +152,15 @@ The {Platform} Composite Chart, also called a Combo Chart, is visualization that
 
 {/* ### {Platform} Gantt Chart
 
-The {Platform} Gantt Chart is a type of bar chart, that visualizes various categories into time series. Gantt charts illustrate the start and finish time in time period blocks. It is often used in project management as one of the most popular and useful ways of showing activities (tasks or events) displayed against time. On the left of the chart is a list of the activities and along the top is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. Learn more about our [gantt chart](types/gantt-chart.md). */}
+The {Platform} Gantt Chart is a type of bar chart, that visualizes various categories into time series. Gantt charts illustrate the start and finish time in time period blocks. It is often used in project management as one of the most popular and useful ways of showing activities (tasks or events) displayed against time. On the left of the chart is a list of the activities and along the top is a suitable time scale. Each activity is represented by a bar; the position and length of the bar reflects the start date, duration and end date of the activity. Learn more about our [gantt chart](types/gantt-chart.mdx). */}
 
 {/* ### {Platform} Network Chart
 
-The {Platform} Network Chart, also called Network Graph or Polyline Chart, visualizes complex relationships between a large amount of elements. This visualization displays undirected and directed graph structures. It also shows relationships between entities that are displayed as round nodes and lines show the relationships between them. Learn more about our [network chart](types/network-chart.md). */}
+The {Platform} Network Chart, also called Network Graph or Polyline Chart, visualizes complex relationships between a large amount of elements. This visualization displays undirected and directed graph structures. It also shows relationships between entities that are displayed as round nodes and lines show the relationships between them. Learn more about our [network chart](types/network-chart.mdx). */}
 
 ### {Platform} Polar Chart
 
-The {Platform} Polar Area Chart or Polar Graph belongs to a group of polar charts and has a shape of a filled polygon which vertices or corners are located at the polar (angle/radius) coordinates of data points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Chart but wraps data points around a circle rather than stretching them horizontally. Like with other series types, multiple Polar Area Charts can be plotted in the same data chart and they can be overlaid on each other to show differences and similarities between data sets. Learn more about our [polar chart](types/polar-chart.md).
+The {Platform} Polar Area Chart or Polar Graph belongs to a group of polar charts and has a shape of a filled polygon which vertices or corners are located at the polar (angle/radius) coordinates of data points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Chart but wraps data points around a circle rather than stretching them horizontally. Like with other series types, multiple Polar Area Charts can be plotted in the same data chart and they can be overlaid on each other to show differences and similarities between data sets. Learn more about our [polar chart](types/polar-chart.mdx).
 
 <Sample src="/charts/data-chart/polar-line-chart" height={600} alt="{Platform} Polar Line Chart" />
 
@@ -169,11 +169,11 @@ The {Platform} Polar Area Chart or Polar Graph belongs to a group of polar chart
 
 {/* ### {Platform} Pyramid Chart
 
-The {Platform} Pyramid Chart, also called an age pyramid or population pyramid, is a graphical illustration that shows distribution of various age groups in a population, which forms the shape of a pyramid when the population is growing. It is also used in ecology to determine the overall age distribution of a population; an indication of the reproductive capabilities and likelihood of the continuation of a species. Learn more about our [pyramid chart](types/pyramid-chart.md). */}
+The {Platform} Pyramid Chart, also called an age pyramid or population pyramid, is a graphical illustration that shows distribution of various age groups in a population, which forms the shape of a pyramid when the population is growing. It is also used in ecology to determine the overall age distribution of a population; an indication of the reproductive capabilities and likelihood of the continuation of a species. Learn more about our [pyramid chart](types/pyramid-chart.mdx). */}
 
 ### {Platform} Scatter Chart
 
-The {Platform} Scatter Chart, or Scatter Graph, is used to show the relationship between two values using a Cartesian (X, Y) coordinate system to plot data. Each data point is rendered as the intersecting point of the data value on the X and Y Axis. Scatter charts draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The {Platform} Scatter chart organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. Learn more about our [scatter chart](types/scatter-chart.md).
+The {Platform} Scatter Chart, or Scatter Graph, is used to show the relationship between two values using a Cartesian (X, Y) coordinate system to plot data. Each data point is rendered as the intersecting point of the data value on the X and Y Axis. Scatter charts draw attention to uneven intervals or clusters of data. They can highlight the deviation of collected data from predicted results and they are often used to plot scientific and statistical data. The {Platform} Scatter chart organizes and plots data chronologically (even if the data is not in chronological order before binding) on X-Axis and Y-Axis. Learn more about our [scatter chart](types/scatter-chart.mdx).
 
 <Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="{Platform} Scatter Marker Chart" />
 
@@ -182,7 +182,7 @@ The {Platform} Scatter Chart, or Scatter Graph, is used to show the relationship
 
 ### {Platform} Shape Chart
 
-The {Platform} Shape Charts is a group of chart that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. Learn more about our [shape chart](types/shape-chart.md).
+The {Platform} Shape Charts is a group of chart that take array of shapes (array or arrays of X/Y points) and render them as collection of polygons or polylines in Cartesian (x, y) coordinate system. They are often used highlight regions in scientific data or they can be used to plot diagrams, blueprints, or even floor plan of buildings. Learn more about our [shape chart](types/shape-chart.mdx).
 
 <Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="{Platform} Scatter Polygon Chart" />
 
@@ -191,7 +191,7 @@ The {Platform} Shape Charts is a group of chart that take array of shapes (array
 
 ### {Platform} Spline Chart
 
-The {Platform} Spline Chart, or Spline Graph is a type of category line graph shows the continuous data values represented by points connected by smooth line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. The {Platform} Spline chart is identical to the {Platform} Spline chart, the only different being the line chart is points connected by straight lines, and the spline chart points are connected by smooth curves. Learn more about our [spline chart](types/spline-chart.md).
+The {Platform} Spline Chart, or Spline Graph is a type of category line graph shows the continuous data values represented by points connected by smooth line segments of one or more quantities over a period time for showing trends and performing comparative analysis. The Y-Axis (labels on left side) show a numeric value, while the X-Axis (bottom labels) are showing a time-series or comparison category. You can include one or more data sets to compare, which would render as multiple lines in the chart. The {Platform} Spline chart is identical to the {Platform} Spline chart, the only different being the line chart is points connected by straight lines, and the spline chart points are connected by smooth curves. Learn more about our [spline chart](types/spline-chart.mdx).
 
 <Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="{Platform} Spline Chart Multiple Sources" />
 
@@ -200,7 +200,7 @@ The {Platform} Spline Chart, or Spline Graph is a type of category line graph sh
 
 ### {Platform} Step Chart
 
-The {Platform} Step Chart, or Step Graph, is a category charts that renders a collection of data points connected by continuous vertical and horizontal lines forming a step-like progression. Values are represented on the Y-Axis (left labels) and categories are displayed on the X-Axis (bottom labels). The {Platform} Step Line chart emphasizes the amount of change over a period of time or compares multiple items. The {Platform} Step Line chart is identical to the {Platform} Step Area Chart in all aspects except that the area below the step lines is not filled in. Learn more about our [step chart](types/step-chart.md)
+The {Platform} Step Chart, or Step Graph, is a category charts that renders a collection of data points connected by continuous vertical and horizontal lines forming a step-like progression. Values are represented on the Y-Axis (left labels) and categories are displayed on the X-Axis (bottom labels). The {Platform} Step Line chart emphasizes the amount of change over a period of time or compares multiple items. The {Platform} Step Line chart is identical to the {Platform} Step Area Chart in all aspects except that the area below the step lines is not filled in. Learn more about our [step chart](types/step-chart.mdx)
 
 <Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="{Platform} Step Line Chart Multiple Sources" />
 
@@ -213,7 +213,7 @@ A Time-Series Chart, or Timeline Graph, is a visualization that treats the data
 
 ### {Platform} Treemap
 
-The {ProductName} Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node's rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. Learn more about our [treemaps](types/treemap-chart.md).
+The {ProductName} Treemap displays hierarchical (tree-structured) data as a set of nested nodes. Each branch of the tree is given a treemap node, which is then tiled with smaller nodes representing sub-branches. Each node's rectangle has an area proportional to a specified dimension on the data. Often the nodes are colored to show a separate dimension of the data. Learn more about our [treemaps](types/treemap-chart.mdx).
 
 <Sample src="/charts/tree-map/overview" height={600} alt="{Platform} Treemap Example" />
 
@@ -226,19 +226,19 @@ Show how your data changes over time with our built-in Time Axis. We'll dynamica
 
 ### Dynamic Charts
 
-Visualize your data by creating new [Composite Chart](types/Composite-chart.md) and overlapping multiple series in single chart. In the Chart, you can display and overlap multiple chart columns to create stacked columns.
+Visualize your data by creating new [Composite Chart](types/composite-chart.mdx) and overlapping multiple series in single chart. In the Chart, you can display and overlap multiple chart columns to create stacked columns.
 
 ### Custom Tooltips
 
-Visualize your data by creating new composite views and overlapping multiple series in single chart. In the Chart, you can create [Custom Tooltips](features/chart-tooltips.md#{PlatformLower}-chart-tooltip-template) with images, data binding, and even combine tooltips of multiple series into single tooltip.
+Visualize your data by creating new composite views and overlapping multiple series in single chart. In the Chart, you can create [Custom Tooltips](features/chart-tooltips.mdx#{PlatformLower}-chart-tooltip-template) with images, data binding, and even combine tooltips of multiple series into single tooltip.
 
 ### High-Performance, Real-Time Charting
 
-Display thousands of data points with milliseconds-level updates in real time with live, streaming data. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. For a demo, refer to the [Chart with High-Frequency](features/chart-performance.md#{PlatformLower}-chart-with-high-frequency) topic.
+Display thousands of data points with milliseconds-level updates in real time with live, streaming data. You will experience no lag, no screen-flicker, and no visual delays, even as you interact with the chart on a touch-device. For a demo, refer to the [Chart with High-Frequency](features/chart-performance.mdx#{PlatformLower}-chart-with-high-frequency) topic.
 
 ### High-Volume Data Handling
 
-Optimize [Chart Performance](features/chart-performance.md) to render millions of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. For a demo, refer to the [Chart with High-Volume](features/chart-performance.md#{PlatformLower}-chart-with-high-volume) topic.
+Optimize [Chart Performance](features/chart-performance.mdx) to render millions of data points while the chart keeps providing smooth performance when end-users tries zooming in/out or navigating chart content. For a demo, refer to the [Chart with High-Volume](features/chart-performance.mdx#{PlatformLower}-chart-with-high-volume) topic.
 
 ### Modular Design
 
@@ -254,7 +254,7 @@ Let us choose the chart type. Our smart Data Adapter automatically chooses the b
 
 ### Trendlines
 
-{Platform} Charts support all [Trendlines](features/chart-trendlines.md) you'll ever need, including linear (x), quadratic (x2), cubic (x3), quartic (x4), quintic (x5), logarithmic (log x), exponential (ex), and power law (axk + o(xk)) trend lines.
+{Platform} Charts support all [Trendlines](features/chart-trendlines.mdx) you'll ever need, including linear (x), quadratic (x2), cubic (x3), quartic (x4), quintic (x5), logarithmic (log x), exponential (ex), and power law (axk + o(xk)) trend lines.
 
 <Image src={igniteUiAngularFinancialChartTrendlines1100} alt="{Platform} Charts Trendlines" class="responsive-img" />
 
@@ -266,7 +266,7 @@ Use single or multi-touch, keyboard, zoom bar, mouse wheel, drag-select for any
 
 ### Markers, Tooltips, and Templates
 
-Use one of 10 [Marker Types](features/chart-markers.md) or create your own [Marker Template](features/chart-markers.md#{PlatformLower}-chart-marker-templates) to highlight data or use simple [Tooltips](features/chart-tooltips.md) or multi-axis and multi-series chart with [Custom Tooltips](features/chart-tooltips.md#{PlatformLower}-chart-tooltip-template) to give more context and meaning to your data.
+Use one of 10 [Marker Types](features/chart-markers.mdx) or create your own [Marker Template](features/chart-markers.mdx#{PlatformLower}-chart-marker-templates) to highlight data or use simple [Tooltips](features/chart-tooltips.mdx) or multi-axis and multi-series chart with [Custom Tooltips](features/chart-tooltips.mdx#{PlatformLower}-chart-tooltip-template) to give more context and meaning to your data.
 
 <Image src={igniteUiAngularFinancialChartCustomTooltips1100} alt="{Platform} Charts Markers, Tooltips, and Templates" class="responsive-img" />
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
index 99a1621fb6..5f346ecd00 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-animations.mdx
@@ -20,7 +20,7 @@ Animations are disabled in the {ProductName} Charts, but they can be enabled by
 
 ## {Platform} Chart Animation Example
 
-The following example depicts a [Line Chart](../types/line-chart.md) with an animation set to the default <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> - "Auto." The drop-down and slider at the top in this example will allow you to modify the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> and <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" />, respectively, so that you can see what the different supported animations look like at different speeds.
+The following example depicts a [Line Chart](../types/line-chart.mdx) with an animation set to the default <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> - "Auto." The drop-down and slider at the top in this example will allow you to modify the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> and <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" />, respectively, so that you can see what the different supported animations look like at different speeds.
 
 <Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="{Platform} Configuration Options Example" />
 
@@ -28,9 +28,9 @@ The following example depicts a [Line Chart](../types/line-chart.md) with an ani
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Tooltips](chart-tooltips.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Highlighting](chart-highlighting.mdx)
+- [Chart Tooltips](chart-tooltips.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
index 9b59b83008..777cde3828 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
@@ -108,8 +108,8 @@ You can customize how the axis tickmarks are displayed in our {Platform} chats b
 
 You can find more information about related chart features in these topics:
 
-- [Axis Layout](chart-axis-layouts.md)
-- [Axis Options](chart-axis-options.md)
+- [Axis Layout](chart-axis-layouts.mdx)
+- [Axis Options](chart-axis-options.mdx)
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
index 114c24eeee..7aef38aa1f 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
@@ -26,7 +26,7 @@ the following examples can be applied to <ApiLink type="CategoryChart" /> as wel
 
 For all axes, you can specify axis location in relationship to chart plot area. The <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> property of the {Platform} charts, allows you to position x-axis line and its labels on above or below plot area. Similarly, you can use the <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> property to position y-axis on left side or right side of plot area.
 
-The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.md). There is a drop-down that lets you configure the <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
+The following example depicts the amount of renewable electricity produced since 2009, represented by a [Line Chart](../types/line-chart.mdx). There is a drop-down that lets you configure the <ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> so that you can visualize what the axes look like when the labels are placed on the left or right side on the inside or outside of the chart's plot area.
 
 <Sample src="/charts/category-chart/axis-locations" height={450} alt="{Platform} Axis Locations Example" />
 
@@ -47,7 +47,7 @@ For more advanced axis layout scenarios, you can use {Platform} Data Chart to sh
 
 You can share and add multiple axes in the same plot area of the {Platform} <ApiLink type="DataChart" />. It a common scenario to use share <ApiLink type="TimeXAxis" /> and add multiple <ApiLink type="NumericYAxis" /> to plot many data sources that have wide range of values (e.g. stock prices and stock trade volumes).
 
-The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.md) and a [Column Chart](../types/column-chart.md) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.md) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.md), while the X-Axis is shared between the two.
+The following example depicts a stock price and trade volume chart with a [Stock Chart](../types/stock-chart.mdx) and a [Column Chart](../types/column-chart.mdx) plotted. In this case, the Y-Axis on the left is used by the [Column Chart](../types/column-chart.mdx) and the Y-Axis on the right is used by the [Stock Chart](../types/stock-chart.mdx), while the X-Axis is shared between the two.
 
 <Sample src="/charts/data-chart/axis-sharing" height={450} alt="{Platform} Axis Sharing Example" />
 
@@ -60,7 +60,7 @@ The following example depicts a stock price and trade volume chart with a [Stock
 
 In addition to placing axes outside plot area, the {Platform} <ApiLink type="DataChart" /> also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> and <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
 
-The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.md) with the X and Y axes crossing each other at the (0, 0) origin point.
+The following example shows a Sin and Cos wave represented by a [Scatter Spline Chart](../types/scatter-chart.mdx) with the X and Y axes crossing each other at the (0, 0) origin point.
 
 <Sample src="/charts/data-chart/axis-crossing" height={450} alt="{Platform} Axis Crossing Axes Example" />
 
@@ -91,8 +91,8 @@ The following example demonstrates how to style the data chart using the <ApiLin
 
 You can find more information about related chart features in these topics:
 
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Options](chart-axis-options.md)
+- [Axis Gridlines](chart-axis-gridlines.mdx)
+- [Axis Options](chart-axis-options.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
index af1a86c1d5..afc560708c 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
@@ -93,7 +93,7 @@ The <ApiLink type="CategoryChart" member="xAxisMaximumGap" label="XAxisMaximumGa
 
 The <ApiLink type="CategoryChart" member="xAxisMinimumGapSize" label="XAxisMinimumGapSize" /> property of the {Platform} charts, determines the minimum amount of pixels to use for the gap between the categories, if possible.
 
-The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.md) with an <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
+The following example shows the average maximum temperature in Celsius in New York City's Central Park represented by a [Column Chart](../types/column-chart.mdx) with an <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> initially set to 1, and so there will be a full category's width between the columns. There is a slider that allows you to configure the gap in this example so that you can see what the different values do.
 
 <Sample src="/charts/category-chart/axis-gap" height={450} alt="{Platform} Axis Gap Example" />
 
@@ -106,7 +106,7 @@ The following example shows the average maximum temperature in Celsius in New Yo
 
 The <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> property of the {Platform} charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
 
-The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.md) with an <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
+The following example shows a comparison of the highest grossing worldwide film franchises compared by the total world box office revenue of the franchise and the highest grossing movie in the series, represented by a [Column Chart](../types/column-chart.mdx) with an <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> initially set to 1, and so the columns will completely overlap each other. There is a slider that allows you to configure the overlap in this example so that you can see what the different values do.
 
 <Sample src="/charts/category-chart/axis-overlap" height={450} alt="{Platform} Axis Overlap Example" />
 
@@ -119,8 +119,8 @@ The following example shows a comparison of the highest grossing worldwide film
 
 You can find more information about related chart features in these topics:
 
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Layout](chart-axis-layouts.md)
+- [Axis Gridlines](chart-axis-gridlines.mdx)
+- [Axis Layout](chart-axis-layouts.mdx)
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
index 81537cff3e..d08941dd64 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-types.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Axis Types
 
-The {ProductName} Category Chart uses only one <ApiLink type="CategoryXAxis" /> and one <ApiLink type="NumericYAxis" /> type. Similarly, {ProductName} Financial Chart uses only one <ApiLink type="TimeXAxis" /> and one <ApiLink type="NumericYAxis" /> types. However, the {ProductName} Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.md#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.md#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
+The {ProductName} Category Chart uses only one <ApiLink type="CategoryXAxis" /> and one <ApiLink type="NumericYAxis" /> type. Similarly, {ProductName} Financial Chart uses only one <ApiLink type="TimeXAxis" /> and one <ApiLink type="NumericYAxis" /> types. However, the {ProductName} Data Chart provides support for multiple axis types that you can position on any side of the chart by setting [axis location](chart-axis-layouts.mdx#axis-locations-example) or even inside of the chart by using [axis crossing](chart-axis-layouts.mdx#axis-crossing-example) properties. This topic goes over each one, which axes and series are compatible with each other, and some specific properties to the unique axes.
 
 ## Cartesian Axes
 
@@ -53,7 +53,7 @@ The <ApiLink type="CategoryYAxis" /> works very similarly to the <ApiLink type="
 
 ### Numeric X-Axis
 
-The <ApiLink type="NumericXAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the <ApiLink type="NumericXAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> property of the various [Scatter Series](../types/scatter-chart.md) that it supports if combined with a <ApiLink type="NumericYAxis" />. Alternatively, if combined with the <ApiLink type="CategoryXAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the <ApiLink type="BarSeries" />, `RangeBarSeries`, <ApiLink type="StackedBarSeries" />, and <ApiLink type="Stacked100BarSeries" />.
+The <ApiLink type="NumericXAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed horizontally along the X-Axis. The location of the <ApiLink type="NumericXAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> property of the various [Scatter Series](../types/scatter-chart.mdx) that it supports if combined with a <ApiLink type="NumericYAxis" />. Alternatively, if combined with the <ApiLink type="CategoryXAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the <ApiLink type="BarSeries" />, `RangeBarSeries`, <ApiLink type="StackedBarSeries" />, and <ApiLink type="Stacked100BarSeries" />.
 
 The <ApiLink type="NumericXAxis" /> is compatible with the following type of series:
 
@@ -78,7 +78,7 @@ The <ApiLink type="NumericXAxis" /> is compatible with the following type of ser
 
 ### Numeric Y-Axis
 
-The <ApiLink type="NumericYAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the <ApiLink type="NumericYAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> property of the various [ScatterSeries](../types/scatter-chart.md) that is supports if combined with a <ApiLink type="NumericXAxis" />. Alternatively, if combined with the <ApiLink type="CategoryYAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
+The <ApiLink type="NumericYAxis" /> treats its data as continuously varying numerical data items. Labels on this axis are placed vertically along the Y-Axis. The location of the <ApiLink type="NumericYAxis" /> labels depends on the <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> property of the various [ScatterSeries](../types/scatter-chart.mdx) that is supports if combined with a <ApiLink type="NumericXAxis" />. Alternatively, if combined with the <ApiLink type="CategoryYAxis" />, these labels will be placed corresponding to the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> of the category or stacked series mentioned in the table above. If you are using one of the financial series, they will be placed corresponding to the Open/High/Low/Close paths and the series type that you are using.
 
 The <ApiLink type="NumericYAxis" /> is compatible with the following type of series:
 
@@ -123,7 +123,7 @@ The <ApiLink type="DataChart" /> with Polar Axes, allows you to plot data outwar
 
 The <ApiLink type="CategoryAngleAxis" /> treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
 
-The <ApiLink type="CategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot [Radial Series](../types/radial-chart.md).
+The <ApiLink type="CategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot [Radial Series](../types/radial-chart.mdx).
 
 The following example demonstrates usage of the <ApiLink type="CategoryAngleAxis" /> type:
 
@@ -134,7 +134,7 @@ The following example demonstrates usage of the <ApiLink type="CategoryAngleAxis
 
 The <ApiLink type="ProportionalCategoryAngleAxis" /> treats its data as a sequence of category data items. The labels on this axis are placed along the edge of a circle according to their position in that sequence. This type of axis can display almost any type of data including strings and numbers.
 
-The <ApiLink type="ProportionalCategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot a pie chart eg. [Radial Series](../types/radial-chart.md).
+The <ApiLink type="ProportionalCategoryAngleAxis" /> is generally used with the <ApiLink type="NumericRadiusAxis" /> to plot a pie chart eg. [Radial Series](../types/radial-chart.mdx).
 
 The following example demonstrates usage of the <ApiLink type="ProportionalCategoryAngleAxis" /> type:
 
@@ -143,9 +143,9 @@ The following example demonstrates usage of the <ApiLink type="ProportionalCateg
 
 ### Numeric Angle Axis
 
-The <ApiLink type="NumericAngleAxis" /> treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the <ApiLink type="NumericAngleAxis" /> varies according to the value in the data column mapped using the <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> property of the [Polar Series](../types/polar-chart.md) object or the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> property of the [Radial Series](../types/radial-chart.md) object.
+The <ApiLink type="NumericAngleAxis" /> treats its data as continuously varying numerical data items. The labels on this axis area placed along a radius line starting from the center of the circular plot. The location of the labels on the <ApiLink type="NumericAngleAxis" /> varies according to the value in the data column mapped using the <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> property of the [Polar Series](../types/polar-chart.mdx) object or the <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> property of the [Radial Series](../types/radial-chart.mdx) object.
 
-The The <ApiLink type="NumericAngleAxis" /> can be used with either the <ApiLink type="CategoryAngleAxis" /> to plot [Radial Series](../types/radial-chart.md) or with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.md) respectively.
+The The <ApiLink type="NumericAngleAxis" /> can be used with either the <ApiLink type="CategoryAngleAxis" /> to plot [Radial Series](../types/radial-chart.mdx) or with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.mdx) respectively.
 
 The following example demonstrates usage of the <ApiLink type="NumericAngleAxis" /> type:
 
@@ -156,7 +156,7 @@ The following example demonstrates usage of the <ApiLink type="NumericAngleAxis"
 
 The <ApiLink type="NumericRadiusAxis" /> treats the data as continuously varying numerical data items. The labels on this axis are placed around the circular plot. The location of the labels varies according to the value in a data column mapped using the `AngleMemberPath` property of the corresponding polar series.
 
-The <ApiLink type="NumericRadiusAxis" /> can be used with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.md).
+The <ApiLink type="NumericRadiusAxis" /> can be used with the <ApiLink type="NumericRadiusAxis" /> to plot [Polar Series](../types/polar-chart.mdx).
 
 The following example demonstrates usage of the <ApiLink type="NumericRadiusAxis" /> type:
 
@@ -167,6 +167,6 @@ The following example demonstrates usage of the <ApiLink type="NumericRadiusAxis
 
 You can find more information about related chart features in these topics:
 
-- [Axis Gridlines](chart-axis-gridlines.md)
-- [Axis Layouts](chart-axis-layouts.md)
-- [Axis Options](chart-axis-options.md)
+- [Axis Gridlines](chart-axis-gridlines.mdx)
+- [Axis Layouts](chart-axis-layouts.mdx)
+- [Axis Options](chart-axis-options.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
index fe104f6aa7..14331e8374 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-aggregations.mdx
@@ -19,7 +19,7 @@ In the {ProductName} <ApiLink type="CategoryChart" /> control Data Aggregations
 
 ## {Platform} Data Aggregations Example
 
-The following example depicts a [Column Chart](../types/column-chart.md) that groups by the Country member of the <ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.
+The following example depicts a [Column Chart](../types/column-chart.mdx) that groups by the Country member of the <ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> and can be changed to other properties within each data item such as Product, MonthName, and Year to aggregate the sales data. Also a summary and sort option is available to get a desirable order for the grouped property.
 
 Note, the abbreviated functions found within the dropdowns for <ApiLink type="CategoryChart" member="initialSummaries" label="InitialSummaries" /> and <ApiLink type="CategoryChart" member="groupSorts" label="GroupSorts" /> have be applied as shown to get a correct result based on the property you assign. eg. Sum(sales) as Sales | Sales Desc
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
index 0ae0b3ad59..9e6701fec1 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-filtering.mdx
@@ -24,7 +24,7 @@ A complete list of valid expressions and keywords to form a query string can be
 
 ## {Platform} Chart Data Filter Example
 
-The following example depicts a [Column Chart](../types/column-chart.md) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> property, to update the chart visual and thus filtering out the other decades out.
+The following example depicts a [Column Chart](../types/column-chart.mdx) of annual birth rates across several decades. The drop-down allows you to select a decade, which inserts an expression via the <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> property, to update the chart visual and thus filtering out the other decades out.
 
 <Sample src="/charts/category-chart/data-filter" height={500} alt="{Platform} Data Filter Example" />
 
@@ -45,9 +45,9 @@ eg. Concatenating more than one expression:
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Tooltips](chart-tooltips.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Highlighting](chart-highlighting.mdx)
+- [Chart Tooltips](chart-tooltips.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
index 5ff796b6c1..d575ca83d3 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-highlight-filter.mdx
@@ -71,9 +71,9 @@ HighlightedHighMemberPath, HighlightedLowMemberPath, HighlightedOpenMemberPath,
 
 You can find more information about related chart features in these topics:
 
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Data Tooltip](chart-data-tooltip.md)
-- [Chart Data Aggregations](chart-data-aggregations.md)
+- [Chart Highlighting](chart-highlighting.mdx)
+- [Chart Data Tooltip](chart-data-tooltip.mdx)
+- [Chart Data Aggregations](chart-data-aggregations.mdx)
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx b/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
index e21f51801c..07d89679cc 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-highlighting.mdx
@@ -63,9 +63,9 @@ The following example demonstrates the different highlighting layers that are av
 
 You can find more information about related chart features in these topics:
 
-- [Chart Animations](chart-animations.md)
-- [Chart Annotations](chart-annotations.md)
-- [Chart Tooltips](chart-tooltips.md)
+- [Chart Animations](chart-animations.mdx)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Tooltips](chart-tooltips.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
index 30172b8e05..12952bb326 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
@@ -19,7 +19,7 @@ In {ProductName}, markers are visual elements that display the values of data po
 
 ## {Platform} Chart Marker Example
 
-In the following example, the [Line Chart](../types/line-chart.md) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> property to <ApiLink type="MarkerType" member="Circle" label="Circle" /> enum value.
+In the following example, the [Line Chart](../types/line-chart.mdx) is comparing the generation of renewable electricity for the countries Europe, China, and USA over the years of 2009 to 2019 with markers enabled by setting the <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> property to <ApiLink type="MarkerType" member="Circle" label="Circle" /> enum value.
 
 The colors of the markers are also managed by setting the <ApiLink type="CategoryChart" member="markerBrushes" label="MarkerBrushes" /> and <ApiLink type="CategoryChart" member="markerOutlines" label="MarkerOutlines" /> properties in the sample below. The markers and <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> is configurable in this sample by using the drop-downs as well.
 
@@ -127,8 +127,8 @@ In addition to marker properties, you can implement your own marker by setting a
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Highlighting](chart-highlighting.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
index 01654a8267..0e44ff846a 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-navigation.mdx
@@ -88,8 +88,8 @@ The {Platform} data chart provides several navigation properties that are update
 
 You can find more information about related chart features in these topics:
 
-- [Chart Tooltips](chart-tooltips.md)
-- [Chart Trendlines](chart-trendlines.md)
+- [Chart Tooltips](chart-tooltips.mdx)
+- [Chart Trendlines](chart-trendlines.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
index c50ee40a8e..9584bd9d82 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-overlays.mdx
@@ -20,7 +20,7 @@ The {Platform} <ApiLink type="DataChart" /> allows for placement of horizontal o
 
 ## {Platform} Value Overlay Example
 
-The following example depicts a [Column Chart](../types/column-chart.md) with a few horizontal value overlays plotted.
+The following example depicts a [Column Chart](../types/column-chart.mdx) with a few horizontal value overlays plotted.
 
 <Sample src="/charts/data-chart/series-value-overlay" height={600} alt="{Platform} Value Overlay Example" />
 
@@ -65,7 +65,7 @@ The following sample demonstrates usage of the different <ApiLink type="Category
 
 ## {Platform} Financial Overlays
 
-You can also plot built-in financial overlays and indicators in {Platform} [Stock Chart](../types/stock-chart.md).
+You can also plot built-in financial overlays and indicators in {Platform} [Stock Chart](../types/stock-chart.mdx).
 
 ## Chart Overlay Text <Badge variant="preview" />
 
@@ -134,10 +134,10 @@ public Series StylingOverlayText()
 
 You can find more information about related chart types in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Column Chart](../types/area-chart.md)
-- [Line Chart](../types/line-chart.md)
-- [Stock Chart](../types/stock-chart.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Column Chart](../types/area-chart.mdx)
+- [Line Chart](../types/line-chart.mdx)
+- [Stock Chart](../types/stock-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
index 5e836fba8e..33ceefc0a7 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-performance.mdx
@@ -47,9 +47,9 @@ This section lists guidelines and chart features that add to the overhead and pr
 
 If you need to plot data sources with large number of data points (e.g. 10,000+), we recommend using {Platform} <ApiLink type="DataChart" /> with one of the following type of series which where designed for specially for that purpose.
 
-- [Scatter HD Chart](../types/scatter-chart.md#{PlatformLower}-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.md) or [Scatter Marker Chart](../types/scatter-chart.md#{PlatformLower}-scatter-marker-chart)
-- [Scatter Polyline Chart](../types/shape-chart.md#{PlatformLower}-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.md#{PlatformLower}-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.md#{PlatformLower}-scatter-line-chart)
-- [Scatter Polygon Chart](../types/shape-chart.md#{PlatformLower}-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.md#{PlatformLower}-area-chart-example) or [Column Chart](../types/column-chart.md#{PlatformLower}-column-chart-example)
+- [Scatter HD Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-high-density-chart) instead of [Category Point Chart](../types/point-chart.mdx) or [Scatter Marker Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-marker-chart)
+- [Scatter Polyline Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polyline-chart) instead of [Category Line Chart](../types/line-chart.mdx#{PlatformLower}-line-chart-example) or [Scatter Line Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-line-chart)
+- [Scatter Polygon Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polygon-chart) instead of [Category Area Chart](../types/area-chart.mdx#{PlatformLower}-area-chart-example) or [Column Chart](../types/column-chart.mdx#{PlatformLower}-column-chart-example)
 
 ### Data Structure
 
@@ -161,38 +161,38 @@ this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
 
 ### Chart Types
 
-Simpler chart types such as [Line Chart](../types/line-chart.md) have faster performance than using [Spline Chart](../types/spline-chart.md) because of the complex interpolation of spline lines between data points. Therefore, you should use <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property of {Platform} <ApiLink type="CategoryChart" /> or the <ApiLink type="FinancialChart" /> control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in {Platform} <ApiLink type="DataChart" /> control.
+Simpler chart types such as [Line Chart](../types/line-chart.mdx) have faster performance than using [Spline Chart](../types/spline-chart.mdx) because of the complex interpolation of spline lines between data points. Therefore, you should use <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property of {Platform} <ApiLink type="CategoryChart" /> or the <ApiLink type="FinancialChart" /> control to select type of chart that renders faster. Alternatively, you can change a type of series to a faster series in {Platform} <ApiLink type="DataChart" /> control.
 
 The following table lists chart types in order from the fastest performance to slower performance in each group of charts:
 
 | Chart Group     | Chart Type |
 | ----------------|--------------------------------- |
-| Pie Charts       | - [Pie Chart](../types/pie-chart.md) <br /> - [Donut Chart](../types/donut-chart.md) <br /> - [Radial Pie Chart](../types/radial-chart.md#{PlatformLower}-radial-pie-chart) |
-| Line Charts      | - [Category Line Chart](../types/line-chart.md#{PlatformLower}-line-chart-example) <br /> - [Category Spline Chart](../types/spline-chart.md#{PlatformLower}-spline-chart-example) <br /> - [Step Line Chart](../types/step-chart.md#{PlatformLower}-step-line-chart) <br /> - [Radial Line Chart](../types/radial-chart.md#{PlatformLower}-radial-line-chart) <br /> - [Polar Line Chart](../types/polar-chart.md#{PlatformLower}-polar-line-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.md#{PlatformLower}-scatter-line-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.md#{PlatformLower}-scatter-polyline-chart) (\*)  <br /> - [Scatter Contour Chart](../types/scatter-chart.md#{PlatformLower}-scatter-contour-chart) <br /> - [Stacked Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-line-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-line-chart) <br /> |
-| Area Charts      | - [Category Area Chart](../types/area-chart.md#{PlatformLower}-area-chart-example) <br /> - [Step Area Chart](../types/step-chart.md#{PlatformLower}-step-area-chart) <br /> - [Range Area Chart](../types/area-chart.md#{PlatformLower}-range-area-chart) <br /> - [Radial Area Chart](../types/radial-chart.md#{PlatformLower}-radial-area-chart) <br /> - [Polar Area Chart](../types/polar-chart.md#{PlatformLower}-polar-area-chart) <br /> - [Scatter Polygon Chart](../types/shape-chart.md#{PlatformLower}-scatter-polygon-chart) (\*) <br /> - [Scatter Area Chart](../types/scatter-chart.md#{PlatformLower}-scatter-area-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-area-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-area-chart) <br /> |
-| Column Charts    | - [Column Chart](../types/column-chart.md#{PlatformLower}-column-chart-example) <br /> - [Bar Chart](../types/bar-chart.md#{PlatformLower}-bar-chart-example) <br /> - [Waterfall Chart](../types/column-chart.md#{PlatformLower}-waterfall-chart) <br /> - [Range Column Chart](../types/column-chart.md#{PlatformLower}-range-column-chart) <br /> - [Range Bar Chart](../types/bar-chart.md#{PlatformLower}-range-bar-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#{PlatformLower}-radial-column-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-bar-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-bar-chart) |
-| Spline Charts    | - [Category Spline Chart](../types/spline-chart.md#{PlatformLower}-spline-chart-example) <br /> - [Polar Spline Chart](../types/polar-chart.md#{PlatformLower}-polar-spline-chart) <br /> - [Scatter Spline Chart](../types/scatter-chart.md#{PlatformLower}-scatter-spline-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-spline-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-spline-chart) <br /> |
-| Point Charts     | - [Category Point Chart](../types/point-chart.md) <br /> - [Scatter HD Chart](../types/scatter-chart.md#{PlatformLower}-scatter-high-density-chart)  <br /> - [Scatter Marker Chart](../types/scatter-chart.md#{PlatformLower}-scatter-marker-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.md) <br /> - [Polar Marker Chart](../types/polar-chart.md#{PlatformLower}-polar-marker-chart) <br /> |
-| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.md) <br /> - [Stock Chart in Column Mode](../types/stock-chart.md) <br /> - [Stock Chart in Bar Mode](../types/stock-chart.md) <br /> - [Stock Chart in Candle Mode](../types/stock-chart.md) <br /> - [Stock Chart with Overlays](../types/stock-chart.md) <br /> - [Stock Chart with Zoom Pane](../types/stock-chart.md) <br /> - [Stock Chart with Volume Pane](../types/stock-chart.md#volume-pane) <br /> - [Stock Chart with Indicator Pane](../types/stock-chart.md#indicator-pane) <br /> |
-| Scatter Charts   | - [Scatter HD Chart](../types/scatter-chart.md#{PlatformLower}-scatter-high-density-chart) <br /> - [Scatter Marker Chart](../types/scatter-chart.md#{PlatformLower}-scatter-marker-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.md#{PlatformLower}-scatter-line-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.md) <br /> - [Scatter Spline Chart](../types/scatter-chart.md#{PlatformLower}-scatter-spline-chart) <br /> - [Scatter Area Chart](../types/scatter-chart.md#{PlatformLower}-scatter-area-chart) <br /> - [Scatter Contour Chart](../types/scatter-chart.md#{PlatformLower}-scatter-contour-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.md#{PlatformLower}-scatter-polyline-chart) (\*) <br /> - [Scatter Polygon Chart](../types/shape-chart.md#{PlatformLower}-scatter-polygon-chart) (\*) <br /> |
-| Radial Charts    | - [Radial Line Chart](../types/radial-chart.md#{PlatformLower}-radial-line-chart) <br /> - [Radial Area Chart](../types/radial-chart.md#{PlatformLower}-radial-area-chart) <br /> - [Radial Pie Chart](../types/radial-chart.md#{PlatformLower}-radial-pie-chart) <br /> - [Radial Column Chart](../types/radial-chart.md#{PlatformLower}-radial-column-chart) <br /> |
-| Polar Charts     | - [Polar Marker Chart](../types/polar-chart.md#{PlatformLower}-polar-marker-chart) <br /> - [Polar Line Chart](../types/polar-chart.md#{PlatformLower}-polar-line-chart) <br /> - [Polar Area Chart](../types/polar-chart.md#{PlatformLower}-polar-area-chart) <br /> - [Polar Spline Chart](../types/polar-chart.md#{PlatformLower}-polar-spline-chart) <br /> - [Polar Spline Area Chart](../types/polar-chart.md#{PlatformLower}-polar-spline-area-chart) <br /> |
-| Stacked Charts   | - [Stacked Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-line-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-area-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-bar-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-spline-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-line-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-area-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-bar-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.md#{PlatformLower}-stacked-100-spline-chart) <br /> |
+| Pie Charts       | - [Pie Chart](../types/pie-chart.mdx) <br /> - [Donut Chart](../types/donut-chart.mdx) <br /> - [Radial Pie Chart](../types/radial-chart.mdx#{PlatformLower}-radial-pie-chart) |
+| Line Charts      | - [Category Line Chart](../types/line-chart.mdx#{PlatformLower}-line-chart-example) <br /> - [Category Spline Chart](../types/spline-chart.mdx#{PlatformLower}-spline-chart-example) <br /> - [Step Line Chart](../types/step-chart.mdx#{PlatformLower}-step-line-chart) <br /> - [Radial Line Chart](../types/radial-chart.mdx#{PlatformLower}-radial-line-chart) <br /> - [Polar Line Chart](../types/polar-chart.mdx#{PlatformLower}-polar-line-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-line-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polyline-chart) (\*)  <br /> - [Scatter Contour Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-contour-chart) <br /> - [Stacked Line Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-line-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-line-chart) <br /> |
+| Area Charts      | - [Category Area Chart](../types/area-chart.mdx#{PlatformLower}-area-chart-example) <br /> - [Step Area Chart](../types/step-chart.mdx#{PlatformLower}-step-area-chart) <br /> - [Range Area Chart](../types/area-chart.mdx#{PlatformLower}-range-area-chart) <br /> - [Radial Area Chart](../types/radial-chart.mdx#{PlatformLower}-radial-area-chart) <br /> - [Polar Area Chart](../types/polar-chart.mdx#{PlatformLower}-polar-area-chart) <br /> - [Scatter Polygon Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polygon-chart) (\*) <br /> - [Scatter Area Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-area-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-area-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-area-chart) <br /> |
+| Column Charts    | - [Column Chart](../types/column-chart.mdx#{PlatformLower}-column-chart-example) <br /> - [Bar Chart](../types/bar-chart.mdx#{PlatformLower}-bar-chart-example) <br /> - [Waterfall Chart](../types/column-chart.mdx#{PlatformLower}-waterfall-chart) <br /> - [Range Column Chart](../types/column-chart.mdx#{PlatformLower}-range-column-chart) <br /> - [Range Bar Chart](../types/bar-chart.mdx#{PlatformLower}-range-bar-chart) <br /> - [Radial Column Chart](../types/radial-chart.mdx#{PlatformLower}-radial-column-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-bar-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-bar-chart) |
+| Spline Charts    | - [Category Spline Chart](../types/spline-chart.mdx#{PlatformLower}-spline-chart-example) <br /> - [Polar Spline Chart](../types/polar-chart.mdx#{PlatformLower}-polar-spline-chart) <br /> - [Scatter Spline Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-spline-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-spline-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-spline-chart) <br /> |
+| Point Charts     | - [Category Point Chart](../types/point-chart.mdx) <br /> - [Scatter HD Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-high-density-chart)  <br /> - [Scatter Marker Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-marker-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.mdx) <br /> - [Polar Marker Chart](../types/polar-chart.mdx#{PlatformLower}-polar-marker-chart) <br /> |
+| Financial Charts | - [Stock Chart in Line Mode](../types/stock-chart.mdx) <br /> - [Stock Chart in Column Mode](../types/stock-chart.mdx) <br /> - [Stock Chart in Bar Mode](../types/stock-chart.mdx) <br /> - [Stock Chart in Candle Mode](../types/stock-chart.mdx) <br /> - [Stock Chart with Overlays](../types/stock-chart.mdx) <br /> - [Stock Chart with Zoom Pane](../types/stock-chart.mdx) <br /> - [Stock Chart with Volume Pane](../types/stock-chart.mdx#volume-pane) <br /> - [Stock Chart with Indicator Pane](../types/stock-chart.mdx#indicator-pane) <br /> |
+| Scatter Charts   | - [Scatter HD Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-high-density-chart) <br /> - [Scatter Marker Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-marker-chart) <br /> - [Scatter Line Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-line-chart) <br /> - [Scatter Bubble Chart](../types/bubble-chart.mdx) <br /> - [Scatter Spline Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-spline-chart) <br /> - [Scatter Area Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-area-chart) <br /> - [Scatter Contour Chart](../types/scatter-chart.mdx#{PlatformLower}-scatter-contour-chart) <br /> - [Scatter Polyline Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polyline-chart) (\*) <br /> - [Scatter Polygon Chart](../types/shape-chart.mdx#{PlatformLower}-scatter-polygon-chart) (\*) <br /> |
+| Radial Charts    | - [Radial Line Chart](../types/radial-chart.mdx#{PlatformLower}-radial-line-chart) <br /> - [Radial Area Chart](../types/radial-chart.mdx#{PlatformLower}-radial-area-chart) <br /> - [Radial Pie Chart](../types/radial-chart.mdx#{PlatformLower}-radial-pie-chart) <br /> - [Radial Column Chart](../types/radial-chart.mdx#{PlatformLower}-radial-column-chart) <br /> |
+| Polar Charts     | - [Polar Marker Chart](../types/polar-chart.mdx#{PlatformLower}-polar-marker-chart) <br /> - [Polar Line Chart](../types/polar-chart.mdx#{PlatformLower}-polar-line-chart) <br /> - [Polar Area Chart](../types/polar-chart.mdx#{PlatformLower}-polar-area-chart) <br /> - [Polar Spline Chart](../types/polar-chart.mdx#{PlatformLower}-polar-spline-chart) <br /> - [Polar Spline Area Chart](../types/polar-chart.mdx#{PlatformLower}-polar-spline-area-chart) <br /> |
+| Stacked Charts   | - [Stacked Line Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-line-chart) <br /> - [Stacked Area Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-area-chart) <br /> - [Stacked Column Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-column-chart) <br /> - [Stacked Bar Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-bar-chart) <br /> - [Stacked Spline Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-spline-chart) <br /> - [Stacked 100% Line Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-line-chart) <br /> - [Stacked 100% Area Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-area-chart) <br /> - [Stacked 100% Column Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-column-chart) <br /> - [Stacked 100% Bar Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-bar-chart) <br /> - [Stacked 100% Spline Chart](../types/stacked-chart.mdx#{PlatformLower}-stacked-100-spline-chart) <br /> |
 
 
-\* Note that the [Scatter Polygon Chart](../types/shape-chart.md) and [Scatter Polyline Chart](../types/shape-chart.md) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
+\* Note that the [Scatter Polygon Chart](../types/shape-chart.mdx) and [Scatter Polyline Chart](../types/shape-chart.mdx) have better performance than rest of charts if you have a lot of data sources bound to the chart. For more info, see [Series Collection](#series-collection) section. Otherwise, other chart types are faster.
 
 ### Chart Animations
 
-Enabling [Chart Animations](chart-animations.md) will slightly delay final rendering series in the {Platform} charts while they play transition-in animations.
+Enabling [Chart Animations](chart-animations.mdx) will slightly delay final rendering series in the {Platform} charts while they play transition-in animations.
 
 ### Chart Annotations
 
-Enabling [Chart Annotations](chart-annotations.md) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the {Platform} chart.
+Enabling [Chart Annotations](chart-annotations.mdx) such as the Callout Annotations, Crosshairs Annotations, or Final Value Annotations, will slightly decrease performance of the {Platform} chart.
 
 ### Chart Highlighting
 
-Enabling the [Chart Highlighting](chart-highlighting.md) will slightly decrease performance of the {Platform} chart.
+Enabling the [Chart Highlighting](chart-highlighting.mdx) will slightly decrease performance of the {Platform} chart.
 
 ### Chart Legend
 
@@ -200,7 +200,7 @@ Adding a legend to the {Platform} charts might decrease performance if titles of
 
 ### Chart Markers
 
-In {Platform} charts, [Markers](chart-markers.md) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
+In {Platform} charts, [Markers](chart-markers.mdx) are especially expensive when it comes to chart performance because they add to the layout complexity of the chart, and perform data binding to obtain certain information. Also, markers decrease performance when there are a lot of data points or if there are many data sources bound. Therefore, if markers are not needed, they should be removed from the chart.
 
 This code snippet shows how to remove markers from the {Platform} charts.
 
@@ -263,11 +263,11 @@ this.LineSeries.Resolution = 10;
 
 ### Chart Overlays
 
-Enabling [Chart Overlays](chart-overlays.md) will slightly decrease performance of the {Platform} chart.
+Enabling [Chart Overlays](chart-overlays.mdx) will slightly decrease performance of the {Platform} chart.
 
 ### Chart Trendlines
 
-Enabling [Chart Trendlines](chart-trendlines.md) will slightly decrease performance of the {Platform} chart.
+Enabling [Chart Trendlines](chart-trendlines.mdx) will slightly decrease performance of the {Platform} chart.
 
 ### Axis Types
 
@@ -665,7 +665,7 @@ In addition to the general performance guidelines, the {Platform} <ApiLink type=
 
 ### Axes Collection
 
-Adding too many axis to the <ApiLink type="DataChart" member="Axes" label="Axes" /> collection of the <ApiLink type="DataChart" /> control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.md#axis-sharing-example) between series.
+Adding too many axis to the <ApiLink type="DataChart" member="Axes" label="Axes" /> collection of the <ApiLink type="DataChart" /> control will decrease chart performance and we recommend [Sharing Axes](chart-axis-layouts.mdx#axis-sharing-example) between series.
 
 ### Series Collection
 
@@ -687,27 +687,27 @@ Also, adding a lot of series to the <ApiLink type="DataChart" member="Series" la
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](../types/area-chart.md)
-- [Bar Chart](../types/bar-chart.md)
-- [Bubble Chart](../types/bubble-chart.md)
-- [Column Chart](../types/column-chart.md)
-- [Donut Chart](../types/donut-chart.md)
-- [Pie Chart](../types/pie-chart.md)
-- [Point Chart](../types/point-chart.md)
-- [Polar Chart](../types/polar-chart.md)
-- [Radial Chart](../types/radial-chart.md)
-- [Shape Chart](../types/shape-chart.md)
-- [Spline Chart](../types/spline-chart.md)
-- [Scatter Chart](../types/scatter-chart.md)
-- [Stacked Chart](../types/stacked-chart.md)
-- [Step Chart](../types/shape-chart.md)
-- [Stock Chart](../types/stock-chart.md)
-- [Chart Animations](chart-animations.md)
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
-- [Chart Markers](chart-markers.md)
-- [Chart Overlays](chart-overlays.md)
-- [Chart Trendlines](chart-trendlines.md)
+- [Area Chart](../types/area-chart.mdx)
+- [Bar Chart](../types/bar-chart.mdx)
+- [Bubble Chart](../types/bubble-chart.mdx)
+- [Column Chart](../types/column-chart.mdx)
+- [Donut Chart](../types/donut-chart.mdx)
+- [Pie Chart](../types/pie-chart.mdx)
+- [Point Chart](../types/point-chart.mdx)
+- [Polar Chart](../types/polar-chart.mdx)
+- [Radial Chart](../types/radial-chart.mdx)
+- [Shape Chart](../types/shape-chart.mdx)
+- [Spline Chart](../types/spline-chart.mdx)
+- [Scatter Chart](../types/scatter-chart.mdx)
+- [Stacked Chart](../types/stacked-chart.mdx)
+- [Step Chart](../types/shape-chart.mdx)
+- [Stock Chart](../types/stock-chart.mdx)
+- [Chart Animations](chart-animations.mdx)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Highlighting](chart-highlighting.mdx)
+- [Chart Markers](chart-markers.mdx)
+- [Chart Overlays](chart-overlays.mdx)
+- [Chart Trendlines](chart-trendlines.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx b/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
index a2449d4ba4..fb4c07db30 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-tooltips.mdx
@@ -18,7 +18,7 @@ In {Platform} charts, tooltips provide details about bound data and they are ren
 
 ## {Platform} Chart Tooltip Types
 
-{Platform} Chart provide three types of tooltips that you can with tooltips enabled by setting the <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> property. The following example shows the [Column Chart](../types/column-chart.md) with a combo-box that you can use to change type of tooltips.
+{Platform} Chart provide three types of tooltips that you can with tooltips enabled by setting the <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> property. The following example shows the [Column Chart](../types/column-chart.mdx) with a combo-box that you can use to change type of tooltips.
 
 <Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="{Platform} Tooltip Types Example" />
 
@@ -60,8 +60,8 @@ This example shows how to create custom tooltips for each series in {Platform} D
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Markers](chart-markers.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Markers](chart-markers.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
index 2237ca96b8..acf5a2479d 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-trendlines.mdx
@@ -68,8 +68,8 @@ The following are the options for the <ApiLink type="TrendLineLayer" member="app
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Highlighting](chart-highlighting.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Highlighting](chart-highlighting.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
index 1d32941288..449574f88c 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-user-annotations.mdx
@@ -91,5 +91,5 @@ The tooltip is designed to work in tandem with the `UserAnnotationInformationReq
 
 You can find more information about related chart features in these topics:
 
-- [Chart Annotations](chart-annotations.md)
-- [Chart Data Annotations](chart-data-annotations.md)
+- [Chart Annotations](chart-annotations.mdx)
+- [Chart Data Annotations](chart-data-annotations.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
index e79ce5b1df..e4d682eaec 100644
--- a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
@@ -71,7 +71,7 @@ There are several common use cases for choosing an Area Chart:
 
 ## {Platform} Area Chart with Multiple Series
 
-Similarly to how you can show multiple [Line Chart](line-chart.md) and [Spline Chart](spline-chart.md), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property of the <ApiLink type="CategoryChart" /> control.
+Similarly to how you can show multiple [Line Chart](line-chart.mdx) and [Spline Chart](spline-chart.mdx), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property of the <ApiLink type="CategoryChart" /> control.
 
 <Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="{Platform} Area Chart with Multiple Sources" />
 
@@ -165,7 +165,7 @@ The {Platform} Stacked 100% Spline Area Chart is identical to the Stacked Spline
 
 ## {Platform} Radial Area Chart
 
-The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-chart.md) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
+The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-chart.mdx) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
 
 
 <Sample src="/charts/data-chart/radial-area-chart" height={600} alt="{Platform} Radial Area Chart" />
@@ -176,7 +176,7 @@ The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-cha
 
 ## {Platform} Polar Area Chart
 
-The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarAreaSeries" />, as shown in the example below.
+The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.mdx) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarAreaSeries" />, as shown in the example below.
 
 
 <Sample src="/charts/data-chart/polar-area-chart" height={600} alt="{Platform} Polar Area Chart" />
@@ -187,7 +187,7 @@ The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.
 
 ## {Platform} Polar Spline Area Chart
 
-The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.md) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarSplineAreaSeries" />, as shown in the example below.
+The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.mdx) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarSplineAreaSeries" />, as shown in the example below.
 
 <Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="{Platform} Polar Spline Area Chart" />
 
@@ -200,12 +200,12 @@ The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar
 
 You can find more information about related chart types in these topics:
 
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Bar Chart](bar-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Polar Chart](polar-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
+- [Spline Chart](spline-chart.mdx)
+- [Stacked Chart](stacked-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
index 664a694737..d59aa923fc 100644
--- a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
@@ -12,7 +12,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Bar Chart
-The {ProductName} Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.md) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.md) has vertical orientation (up and down)
+The {ProductName} Bar Chart, Bar Graph, or Horizontal Bar Chart, is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by horizontal bars with equal heights but different lengths. This chart is ideal for showing variations in the value of an item over time. Data is represented using a collection of rectangles that extend from the left to right of the chart towards the values of data points. Bar Chart is very similar to [Column Chart](column-chart.mdx) except that Bar Chart renders with 90 degrees clockwise rotation and therefore it has horizontal orientation (left to right) while [Column Chart](column-chart.mdx) has vertical orientation (up and down)
 
 ## {Platform} Bar Chart Example
 You can create {Platform} Bar Chart in the <ApiLink type="DataChart" /> control by binding your data sources to multiple <ApiLink type="BarSeries" />, as shown in the example below:
@@ -54,7 +54,7 @@ These use cases are commonly used for the following scenarios:
 
 ### When Not to Use Bar Chart
 - You have too much data so the Y-Axis can't fit in the space or is not legible.
-- You need a detailed Time-Series analysis  - consider a [Line Chart](line-chart.md) with a Time-Series for this type of data.
+- You need a detailed Time-Series analysis  - consider a [Line Chart](line-chart.mdx) with a Time-Series for this type of data.
 
 ### Bar Chart Data Structure
 - The data source must be an array or a list of data items.
@@ -81,7 +81,7 @@ The Bar Chart is able to render multiple bars per category for comparison purpos
 
 ## {Platform} Bar Chart Styling
 
-The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.md) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="BarSeries" /> and adding a <ApiLink type="CalloutLayer" />, as shown in the example below:
+The Bar Chart can be styled, and allows for the ability to use [annotation values](../features/chart-annotations.mdx) for each bar, for example, to demonstrate percent comparisons. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="BarSeries" /> and adding a <ApiLink type="CalloutLayer" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/bar-chart-styling" height={600} alt="{Platform} Bar Chart Styling" />
 
@@ -115,11 +115,11 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Range Bar Chart
 
-The {Platform} Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.md#{PlatformLower}-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items.
+The {Platform} Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.mdx#{PlatformLower}-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items.
 
 Range values are represented on the X-Axis and categories are displayed on the Y-Axis. Because each bar visualizes both a low value and a high value, this chart is useful for scenarios such as showing daily temperature ranges, minimum and maximum prices, or any bounded measurements where a single value is not sufficient.
 
-The Range Bar Chart is identical to the [Range Column Chart](column-chart.md#{PlatformLower}-range-column-chart) in all aspects except that the ranges are represented as a set of horizontal bars rather than vertical columns.
+The Range Bar Chart is identical to the [Range Column Chart](column-chart.mdx#{PlatformLower}-range-column-chart) in all aspects except that the ranges are represented as a set of horizontal bars rather than vertical columns.
 
 You can create this type of chart in the <ApiLink pkg="charts" type="DataChart" /> control by binding your data to a <ApiLink pkg="charts" type="RangeBarSeries" />. The series reads low and high values from `LowMemberPath` and `HighMemberPath`, and it typically uses a `NumericXAxis` with a `CategoryYAxis`, as shown in the example below:
 
@@ -131,11 +131,11 @@ You can create this type of chart in the <ApiLink pkg="charts" type="DataChart"
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Area Chart](area-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Line Chart](line-chart.mdx)
+- [Spline Chart](spline-chart.mdx)
+- [Stacked Chart](stacked-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
index ad7d42226c..abeea77439 100644
--- a/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/bubble-chart.mdx
@@ -12,7 +12,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Bubble Chart
-The {ProductName} Bubble Chart is a type of [Scatter Chart](scatter-chart.md) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart) but with the option to have various radius scale sizes.
+The {ProductName} Bubble Chart is a type of [Scatter Chart](scatter-chart.mdx) that show markers with variable scaling to represent the relationship among items in several distinct series of data or to plot data items using x and y coordinates. These coordinates of the data point are determined by two numeric data columns. The Bubble Chart draws attention to uneven intervals or clusters of data. This chart is often used to plot scientific data, and can highlight the deviation of collected data from predicted results. The Bubble Chart has many of the characteristics of the [Scatter Marker Chart](scatter-chart.mdx#{PlatformLower}-scatter-marker-chart) but with the option to have various radius scale sizes.
 
 ## {Platform} Bubble Chart Example
 You can create {ProductName} Bubble Chart in <ApiLink type="DataChart" /> control using the <ApiLink type="BubbleSeries" /> and two numeric axes, as shown in the example below.
@@ -36,8 +36,8 @@ In {Platform} Bubble Chart, you can customize shape of bubble markers using <Api
 
 ## Additional Resources
 
-- [Scatter Chart](scatter-chart.md)
-- [Shape Chart](shape-chart.md)
+- [Scatter Chart](scatter-chart.mdx)
+- [Shape Chart](shape-chart.mdx)
 
 ## API References
 <ApiLink type="DataChart" />
diff --git a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
index ff00b5b6f0..eef4a839f0 100644
--- a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
@@ -13,7 +13,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Column Chart
 
-The {ProductName} Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to [Bar Chart](bar-chart.md) except that Column Chart renders in vertical orientation (up and down) while [Bar Chart](bar-chart.md) has horizontal orientation (left to right) or 90 degrees clockwise rotation.
+The {ProductName} Column Char, Column Graph, or Vertical Bar Chart is among the most common category chart types used to quickly compare frequency, count, total, or average of data in different categories with data encoded by columns with equal widths but different heights. These columns extend from the bottom to top of the chart towards the values of data points. This chart emphasizes the amount of change over a period of time or compares multiple items. Column Chart is very similar to [Bar Chart](bar-chart.mdx) except that Column Chart renders in vertical orientation (up and down) while [Bar Chart](bar-chart.mdx) has horizontal orientation (left to right) or 90 degrees clockwise rotation.
 
 ## {Platform} Column Chart Example
 
@@ -97,7 +97,7 @@ The following sections explain more advanced types of {Platform} Column Charts t
 
 ## {Platform} Waterfall Chart
 
-The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.md#{PlatformLower}-range-column-chart), but it requires only one numeric data column rather than two columns for each data point.
+The Waterfall Chart belongs to a group of category charts and it is rendered using a collection of vertical columns that show the difference between consecutive data points. The columns are color coded for distinguishing between positive and negative changes in value. The Waterfall Chart is similar in appearance to the [Range Column Chart](column-chart.mdx#{PlatformLower}-range-column-chart), but it requires only one numeric data column rather than two columns for each data point.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="WaterfallSeries" />, as shown in the example below:
 
@@ -110,7 +110,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Stacked Column Chart
 
-The Stacked Column Chart is similar to the [Category Column Chart](column-chart.md#{PlatformLower}-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.md#{PlatformLower}-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
+The Stacked Column Chart is similar to the [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.mdx#{PlatformLower}-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedBarSeries" />, as shown in the example below:
 
@@ -123,7 +123,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Stacked 100% Column Chart
 
-The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.md#{PlatformLower}-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point.
+The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.mdx#{PlatformLower}-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="Stacked100BarSeries" />, as shown in the example below:
 
@@ -136,9 +136,9 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Range Column Chart
 
-The {Platform} Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.md#{PlatformLower}-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis.
+The {Platform} Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis.
 
-The Range Column Chart is identical to the [Range Area Chart](area-chart.md)(area-chart.md#{PlatformLower}-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area.
+The Range Column Chart is identical to the [Range Area Chart](area-chart.mdx#{PlatformLower}-range-area-chart) in all aspects except that the ranges are represented as a set of vertical columns rather than a filled area.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RangeColumnSeries" />, as shown in the example below:
 
@@ -151,7 +151,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Radial Column Chart
 
-The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.md), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.md#{PlatformLower}-column-chart-example), but wraps data points around a circle rather than stretching them horizontally.
+The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.mdx), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example), but wraps data points around a circle rather than stretching them horizontally.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
 
@@ -166,10 +166,10 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 You can find more information about related chart types in these topics:
 
-- [Bar Chart](bar-chart.md)
-- [Composite Chart](Composite-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Bar Chart](bar-chart.mdx)
+- [Composite Chart](composite-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
+- [Stacked Chart](stacked-chart.mdx)
 
 ## API References
 The following table lists API members mentioned in the above sections:
diff --git a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
index 72a6660950..1732dce46f 100644
--- a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
@@ -28,10 +28,10 @@ The following example demonstrates how to create Composite Chart using <ApiLink
 
 ## Additional Resources
 
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Bar Chart](bar-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Line Chart](line-chart.mdx)
+- [Stacked Chart](stacked-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
index 1cd0643cdd..6c2fa79e4d 100644
--- a/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/data-pie-chart.mdx
@@ -172,9 +172,9 @@ The following sample demonstrates the usage of animation in the <ApiLink type="D
 <Sample src="/charts/data-pie-chart/animation-replay" height={600} alt="{Platform} Data Pie Chart Animation" />
 
 ## Additional Resources
-- [Donut Chart](donut-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
+- [Donut Chart](donut-chart.mdx)
+- [Polar Chart](polar-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
index feeb80b561..ddaa3b2a9c 100644
--- a/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/donut-chart.mdx
@@ -12,7 +12,7 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Donut Chart
-The {ProductName} Donut Chart is similar to the [Pie Chart](pie-chart.md), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.
+The {ProductName} Donut Chart is similar to the [Pie Chart](pie-chart.mdx), proportionally illustrating the occurrences of a variable. The donut chart can display multiple variables in concentric rings, and provides built-in support for visualizing hierarchical data. The rings are capable of being bound to a different data item, or they can share a common data source.
 
 ## {Platform} Donut Chart Example
 You can create Donut Chart using the <ApiLink type="DoughnutChart" /> control by binding your data as shown in the example below.
@@ -24,13 +24,13 @@ You can create Donut Chart using the <ApiLink type="DoughnutChart" /> control by
 ### Are {Platform} Donut Charts right for your project?
 Donut Charts are appropriate for small data sets and are easy to read at a glance. Donut charts are just one type of part-to-whole visualization. Others include:
 
-- [Pie](pie-chart.md)
-- [Stacked Area](area-chart.md)
-- [Stacked 100% Area (Stacked Percentage Area)](area-chart.md)
-- [Stacked Bar](bar-chart.md)
-- [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.md)
-- [Treemap](treemap-chart.md)
-- [Waterfall](column-chart.md)
+- [Pie](pie-chart.mdx)
+- [Stacked Area](area-chart.mdx)
+- [Stacked 100% Area (Stacked Percentage Area)](area-chart.mdx)
+- [Stacked Bar](bar-chart.mdx)
+- [Stacked 100% Bar (Stacked Percentage Bar)](bar-chart.mdx)
+- [Treemap](treemap-chart.mdx)
+- [Waterfall](column-chart.mdx)
 
 The {Platform} Donut Chart includes interactive features that give the viewer tools to analyze data, like:
 
@@ -48,10 +48,10 @@ The {Platform} Donut Chart includes interactive features that give the viewer to
 - Ensuring the color palette is distinguishable for segments/slices of the parts.
 
 ### When not to use a Donut Chart
-- Comparing change over time —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart.
-- Requiring precise data comparison —use a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart.
-- You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.md), [Line](line-chart.md) or [Area](area-chart.md) chart if it works for your data story.
-- It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.md) chart.
+- Comparing change over time —use a [Bar](bar-chart.mdx), [Line](line-chart.mdx) or [Area](area-chart.mdx) chart.
+- Requiring precise data comparison —use a [Bar](bar-chart.mdx), [Line](line-chart.mdx) or [Area](area-chart.mdx) chart.
+- You have more than 6 or 8 segments (high data volume) — consider a [Bar](bar-chart.mdx), [Line](line-chart.mdx) or [Area](area-chart.mdx) chart if it works for your data story.
+- It would be easier for the viewer to perceive the value difference in a [Bar](bar-chart.mdx) chart.
 - You have negative data, as this can not be represented in a donut chart.
 
 ## {Platform} Donut Chart - Slice Selection
@@ -68,9 +68,9 @@ It is possible to have a multiple ring display in the {Platform} Donut Chart, wi
 ## Additional Resources
 You can find more information about related chart types in these topics:
 
-- [Pie Chart](pie-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
+- [Pie Chart](pie-chart.mdx)
+- [Polar Chart](polar-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
index c2deee5457..14410c11f2 100644
--- a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
@@ -29,11 +29,11 @@ The following example demonstrates how to create Gantt Chart using <ApiLink type
 
 ## Additional Resources
 
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Composite Chart](composite-chart.md)
-{/*- [Pyramid Chart](pyramid-chart.md)*/}
-- [Shape Chart](shape-chart.md)
+- [Bar Chart](bar-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Composite Chart](composite-chart.mdx)
+{/*- [Pyramid Chart](pyramid-chart.mdx)*/}
+- [Shape Chart](shape-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
index 491e6cb49b..1c5cd3154e 100644
--- a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
@@ -30,8 +30,8 @@ You can create the {Platform} Line Chart in the <ApiLink type="CategoryChart" />
 
 ### Are {Platform} Line Charts right for your project?
 
-- Different than an [area chart](area-chart.md), the line chart does not fill the area between the X-Axis (bottom axis) and the line.
-- The {Platform} line chart is identical to the {Platform} [spline chart](spline-chart.md) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data.
+- Different than an [area chart](area-chart.mdx), the line chart does not fill the area between the X-Axis (bottom axis) and the line.
+- The {Platform} line chart is identical to the {Platform} [spline chart](spline-chart.mdx) in all aspects except that the line connecting data points does not have spline interpolation and smoothing for improved presentation of data.
 
 A Line Chart includes several variants based on your data or how you want to tell the correct story with your data. These include:
 
@@ -174,7 +174,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Polar Line Chart
 
-The Polar Line Chart belongs to a group of polar charts and is rendered using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. Polar Line Charts use the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally.
+The Polar Line Chart belongs to a group of polar charts and is rendered using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. Polar Line Charts use the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.mdx) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarLineSeries" />, as shown in the example below:
 
@@ -189,12 +189,12 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Area Chart](area-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Polar Chart](polar-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
+- [Spline Chart](spline-chart.mdx)
+- [Stacked Chart](stacked-chart.mdx)
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/charts/types/network-chart.mdx b/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
index 10d2873e64..54d90b96dd 100644
--- a/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/network-chart.mdx
@@ -28,9 +28,9 @@ This example shows how to create Network Scatter Chart using <ApiLink type="Scat
 
 ## Additional Resources
 
-- [Bubble Chart](bubble-chart.md)
-- [Scatter Chart](scatter-chart.md)
-- [Shape Chart](shape-chart.md)
+- [Bubble Chart](bubble-chart.mdx)
+- [Scatter Chart](scatter-chart.mdx)
+- [Shape Chart](shape-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
index 48d8cad1d5..6510d1f6c3 100644
--- a/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/pie-chart.mdx
@@ -139,9 +139,9 @@ The Radial Pie Chart belongs to a group of Radial Charts and uses belongs to a g
 
 ## Additional Resources
 
-- [Donut Chart](donut-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
+- [Donut Chart](donut-chart.mdx)
+- [Polar Chart](polar-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
 
 ## API References
 <ApiLink type="PieChart" />
diff --git a/docs/xplat/src/content/en/components/charts/types/point-chart.mdx b/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
index a404611946..6d2936e10e 100644
--- a/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/point-chart.mdx
@@ -38,17 +38,17 @@ Once the {Platform} Point Chart is set up, we may want to make some further styl
 ## Advanced Types of Point Charts
 You can create more advanced types of {Platform} Point Charts using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control by following these topics:
 
-- [Scatter Bubble Chart](bubble-chart.md)
-- [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart)
-- [Scatter HD Chart](scatter-chart.md#{PlatformLower}-scatter-high-density-chart)
-- [Polar Marker Chart](polar-chart.md#{PlatformLower}-polar-marker-chart)
+- [Scatter Bubble Chart](bubble-chart.mdx)
+- [Scatter Marker Chart](scatter-chart.mdx#{PlatformLower}-scatter-marker-chart)
+- [Scatter HD Chart](scatter-chart.mdx#{PlatformLower}-scatter-high-density-chart)
+- [Polar Marker Chart](polar-chart.mdx#{PlatformLower}-polar-marker-chart)
 
 ## Additional Resources
 
 You can find more information about related chart features in these topics:
 
-- [Chart Performance](../features/chart-performance.md)
-- [Chart Markers](../features/chart-markers.md)
+- [Chart Performance](../features/chart-performance.mdx)
+- [Chart Markers](../features/chart-markers.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
index c5b10bf0d2..0b424ff631 100644
--- a/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/polar-chart.mdx
@@ -12,15 +12,15 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Polar Chart
-The {ProductName} Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.md) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.
+The {ProductName} Polar Chart uses the polar coordinate system (angle, radius) instead of the Cartesian coordinate system (x, y) to plot data in chart. In other words, Polar Chart takes concepts of [Scatter Series](scatter-chart.mdx) and wrap them around a circle rather than stretching data points horizontally. It is often used to plot scientific data (e.g. wind direction and speed, direction, and strength of magnetic field, location of objects in solar system), and can highlight the deviation of collected data from predicted results.
 
 ## {Platform} Polar Area Chart
-The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.md#{PlatformLower}-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
+The Polar Area Chart renders using a collection of polygons connecting data points and it uses the same concepts of data plotting as the [Category Area Chart](area-chart.mdx#{PlatformLower}-area-chart-example) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/polar-area-chart" height={600} alt="{Platform} Polar Area Chart" />
 
 ## {Platform} Polar Spline Area Chart
-The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.md#{PlatformLower}-polar-area-chart) does. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
+The Polar Spline Area Chart renders also as a collection of polygons but they have curved splines connecting data points instead of straight lines like [Polar Area Chart](polar-chart.mdx#{PlatformLower}-polar-area-chart) does. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarAreaSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="{Platform} Polar Area Chart" />
 
@@ -28,17 +28,17 @@ The Polar Spline Area Chart renders also as a collection of polygons but they ha
 
 
 ## {Platform} Polar Marker Chart
-The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.md#{PlatformLower}-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarScatterSeries" />, as shown in the example below:
+The Polar Marker Chart renders using a collection of markers representing data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Marker Chart](scatter-chart.mdx#{PlatformLower}-scatter-marker-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarScatterSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/polar-scatter-chart" height={600} alt="{Platform} Polar Marker Chart" />
 
 ## {Platform} Polar Line Chart
-The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.md#{PlatformLower}-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarLineSeries" />, as shown in the example below:
+The Polar Line Chart renders using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. This chart uses the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.mdx#{PlatformLower}-scatter-line-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarLineSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/polar-line-chart" height={600} alt="{Platform} Polar Line Chart" />
 
 ## {Platform} Polar Spline Chart
-The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.md#{PlatformLower}-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarSplineSeries" />, as shown in the example below:
+The Polar Spline Chart renders using a collection of curved splines connecting data points in polar (angle/radius) coordinate system. This Chart uses the same concepts of data plotting as the [Scatter Spline Chart](scatter-chart.mdx#{PlatformLower}-scatter-spline-chart) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="PolarSplineSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/polar-spline-chart" height={600} alt="{Platform} Polar Spline Chart" />
 
@@ -56,13 +56,13 @@ Once our polar chart is created, we may want to make some further styling custom
 ## Additional Resources
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Donut Chart](Donut-chart.md)
-- [Line Chart](line-chart.md)
-- [Pie Chart](Pie-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Scatter Chart](scatter-chart.md)
-- [Spline Chart](spline-chart.md)
+- [Area Chart](area-chart.mdx)
+- [Donut Chart](donut-chart.mdx)
+- [Line Chart](line-chart.mdx)
+- [Pie Chart](pie-chart.mdx)
+- [Radial Chart](radial-chart.mdx)
+- [Scatter Chart](scatter-chart.mdx)
+- [Spline Chart](spline-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
index cc6d335940..42b0d99e1b 100644
--- a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
@@ -28,10 +28,10 @@ The following example demonstrates how to create Pyramid Chart using <ApiLink ty
 
 ## Additional Resources
 
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Composite Chart](composite-chart.md)
-{/*- [Gantt Chart](gantt-chart.md)*/}
+- [Bar Chart](bar-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Composite Chart](composite-chart.mdx)
+{/*- [Gantt Chart](gantt-chart.mdx)*/}
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
index 7fbcd0e57d..4614fc7695 100644
--- a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
@@ -17,7 +17,7 @@ The {ProductName} Radial Chart takes data and render it as collection of data po
 
 ## {Platform} Radial Area Chart
 
-The {Platform} Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
+The {Platform} Radial Area Chart has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Area Chart](area-chart.mdx), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
 
 <Sample src="/charts/data-chart/radial-area-chart" height={600} alt="{Platform} Radial Area Chart" />
 
@@ -28,7 +28,7 @@ The {Platform} Radial Area Chart has a shape of a filled polygon that is bound b
 
 ## {Platform} Radial Column Chart
 
-The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.md), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
+The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.mdx), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/radial-column-chart" height={600} alt="{Platform} Radial Column Chart" />
 
@@ -39,7 +39,7 @@ The Radial Column Chart is visualized by using a collection of rectangles that e
 
 ## {Platform} Radial Line Chart
 
-The {Platform} Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.md), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialLineSeries" />, as shown in the example below:
+The {Platform} Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.mdx), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialLineSeries" />, as shown in the example below:
 
 <Sample src="/charts/data-chart/radial-line-chart" height={600} alt="{Platform} Radial Line Chart" />
 
@@ -79,11 +79,11 @@ In addition, the labels can be configured to appear near or wide from the chart.
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Donut Chart](donut-chart.md)
-- [Line Chart](line-chart.md)
-- [Pie Chart](pie-chart.md)
+- [Area Chart](area-chart.mdx)
+- [Column Chart](column-chart.mdx)
+- [Donut Chart](donut-chart.mdx)
+- [Line Chart](line-chart.mdx)
+- [Pie Chart](pie-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
index 949adfcc6e..c4b34a2a8d 100644
--- a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
@@ -85,11 +85,11 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Bubble Chart](bubble-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
-- [Shape Chart](shape-chart.md)
+- [Area Chart](area-chart.mdx)
+- [Bubble Chart](bubble-chart.mdx)
+- [Line Chart](line-chart.mdx)
+- [Spline Chart](spline-chart.mdx)
+- [Shape Chart](shape-chart.mdx)
 
 ## API References
 The following table lists API members mentioned in the above sections:
diff --git a/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx b/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
index 08469c0fa1..8888e984a4 100644
--- a/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/shape-chart.mdx
@@ -35,9 +35,9 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Line Chart](line-chart.md)
-- [Scatter Chart](scatter-chart.md)
+- [Area Chart](./area-chart.mdx)
+- [Line Chart](./line-chart.mdx)
+- [Scatter Chart](./scatter-chart.mdx)
 
 ## API References
 <ApiLink type="DataChart" />
diff --git a/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
index 697188be03..7f3e094bfb 100644
--- a/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/sparkline-chart.mdx
@@ -121,9 +121,9 @@ You can embed the {Platform} Sparkline in a template column of data grid or othe
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
+- [Area Chart](./area-chart.mdx)
+- [Column Chart](./column-chart.mdx)
+- [Line Chart](./line-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
index 15ed863eb5..7a017bf75f 100644
--- a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Spline Chart
 
-The {ProductName} Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. Values are represented on the y-axis and categories are displayed on the x-axis. Spline Chart emphasizes the amount of change over a period of time or compares multiple items as well as the relationship of parts to a whole by displaying the total of the plotted values. Spline Chart is identical to [Line Chart](line-chart.md) in all aspects except that line connecting data points has spline interpolation and smoothing for improved presentation of data.
+The {ProductName} Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. Values are represented on the y-axis and categories are displayed on the x-axis. Spline Chart emphasizes the amount of change over a period of time or compares multiple items as well as the relationship of parts to a whole by displaying the total of the plotted values. Spline Chart is identical to [Line Chart](./line-chart.mdx) in all aspects except that line connecting data points has spline interpolation and smoothing for improved presentation of data.
 
 ## {Platform} Spline Chart Example
 
@@ -98,11 +98,11 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Line Chart](spline-chart.md)
-- [Polar Chart](polar-chart.md)
-- [Radial Chart](radial-chart.md)
-- [Stacked Chart](stacked-chart.md)
+- [Area Chart](./area-chart.mdx)
+- [Line Chart](./spline-chart.mdx)
+- [Polar Chart](./polar-chart.mdx)
+- [Radial Chart](./radial-chart.mdx)
+- [Stacked Chart](./stacked-chart.mdx)
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx b/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
index 9c70413de6..934212a102 100644
--- a/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/stacked-chart.mdx
@@ -25,7 +25,7 @@ The following sections demonstrate individual types of {ProductName} Stacked Cha
 
 ## {Platform} Stacked Area Chart
 
-Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as [Area Chart](area-chart.md), with the only difference being that visually, the shaded areas are stacked on top of each other.
+Stacked Area Charts are rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as [Area Chart](./area-chart.mdx), with the only difference being that visually, the shaded areas are stacked on top of each other.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedAreaSeries" />, as shown in the example below.
 
@@ -42,7 +42,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 A Stacked Bar Chart, or Stacked Bar Graph, is a type of category chart that is used to compare the composition of different categories of data by displaying different sized fragments in the horizontal bars of the chart. The length of each bar, or stack of fragments, is proportionate to its overall value.
 
-The Stacked Bar Chart differs from the [Bar Chart](bar-chart.md) in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
+The Stacked Bar Chart differs from the [Bar Chart](./bar-chart.mdx) in that the data points representing your data are stacked next to each other horizontally to visually group your data. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the X-Axis, and all negative values are grouped on the negative side of the X-Axis.
 
 In this example of an Stacked Bar Chart, we have a Numeric X Axis (bottom labels of the chart) and a Category Y Axis (left labels of the chart). You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedBarSeries" />, as shown in the example below.
 
@@ -58,7 +58,7 @@ In this example of a Stacked 100% Bar Chart, the Energy Product values are shown
 
 ## {Platform} Stacked Column Chart
 
-The Stacked Column Chart is identical to the [Column Chart](column-chart.md) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
+The Stacked Column Chart is identical to the [Column Chart](./column-chart.mdx) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the Stacked Bar Chart but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedColumnSeries" />, as shown in the example below.
 
@@ -88,7 +88,7 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 ## {Platform} Stacked Spline Area Chart
 
-Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](area-chart.md), with the only difference being that the visually shaded areas are stacked on top of each other.
+Stacked Spline Area Charts are rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Charts follow all of the same requirements as [Area Chart](./area-chart.mdx), with the only difference being that the visually shaded areas are stacked on top of each other.
 
 You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="StackedSplineAreaSeries" />, as shown in the example below.
 
@@ -119,11 +119,11 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 ## Additional Resources
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Bar Chart](bar-chart.md)
-- [Column Chart](column-chart.md)
-- [Line Chart](line-chart.md)
-- [Spline Chart](spline-chart.md)
+- [Area Chart](./area-chart.mdx)
+- [Bar Chart](./bar-chart.mdx)
+- [Column Chart](./column-chart.mdx)
+- [Line Chart](./line-chart.mdx)
+- [Spline Chart](./spline-chart.mdx)
 
 ## API References
 The following table lists API members mentioned in the above sections:
diff --git a/docs/xplat/src/content/en/components/charts/types/step-chart.mdx b/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
index ea510e007a..a81f4f86a2 100644
--- a/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/step-chart.mdx
@@ -39,9 +39,9 @@ If you need Step Charts with more features such as composite other series, you c
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Line Chart](line-chart.md)
-- [Chart Markers](../features/chart-markers.md)
+- [Area Chart](./area-chart.mdx)
+- [Line Chart](./line-chart.mdx)
+- [Chart Markers](../features/chart-markers.mdx)
 
 ## API References
 <ApiLink type="CategoryChart" />
diff --git a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
index 496b0c1997..035e3fc590 100644
--- a/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/stock-chart.mdx
@@ -124,11 +124,11 @@ In this example, the stock chart is plotting revenue for United States.
 
 You can find more information about related chart features in these topics:
 
-- [Chart Animations](../features/chart-Animations.md)
-- [Chart Annotations](../features/chart-annotations.md)
-- [Chart Navigation](../features/chart-navigation.md)
-- [Chart Trendlines](../features/chart-trendlines.md)
-- [Chart Performance](../features/chart-performance.md)
+- [Chart Animations](../features/chart-animations.mdx)
+- [Chart Annotations](../features/chart-annotations.mdx)
+- [Chart Navigation](../features/chart-navigation.mdx)
+- [Chart Trendlines](../features/chart-trendlines.mdx)
+- [Chart Performance](../features/chart-performance.mdx)
 
 ## API References
 <ApiLink type="FinancialChart" />
diff --git a/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
index 994f5ff77a..bf01f5297a 100644
--- a/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/treemap-chart.mdx
@@ -118,8 +118,8 @@ In the following example, the treemap demonstrates the ability of node highlight
 
 You can find more information about related chart types in these topics:
 
-- [Area Chart](area-chart.md)
-- [Shape Chart](shape-chart.md)
+- [Area Chart](./area-chart.mdx)
+- [Shape Chart](./shape-chart.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/dashboard-tile.mdx b/docs/xplat/src/content/en/components/dashboard-tile.mdx
index 1ff9826f0e..8c6ef71741 100644
--- a/docs/xplat/src/content/en/components/dashboard-tile.mdx
+++ b/docs/xplat/src/content/en/components/dashboard-tile.mdx
@@ -141,12 +141,12 @@ builder.Services.AddIgniteUIBlazor(
 
 Depending on what you bind the Dashboard Tile's <ApiLink type="DataSource" /> property to will determine which visualization you see by default, as the control will evaluate the data you bind and then choose a visualization from the {ProductName} toolset to show. The data visualization controls that are included to be shown in the Dashboard Tile are the following:
 
-- [{IgPrefix}CategoryChart](charts/chart-overview.md)
-- [{IgPrefix}DataChart](charts/chart-overview.md)
-- [{IgPrefix}DataPieChart](charts/types/data-pie-chart.md)
-- [{IgPrefix}GeographicMap](geo-map.md)
-- [{IgPrefix}Linear Gauge](linear-gauge.md)
-- [{IgPrefix}RadialGauge](radial-gauge.md)
+- [{IgPrefix}CategoryChart](./charts/chart-overview.mdx)
+- [{IgPrefix}DataChart](./charts/chart-overview.mdx)
+- [{IgPrefix}DataPieChart](./charts/types/data-pie-chart.mdx)
+- [{IgPrefix}GeographicMap](./geo-map.mdx)
+- [{IgPrefix}Linear Gauge](./linear-gauge.mdx)
+- [{IgPrefix}RadialGauge](./radial-gauge.mdx)
 
 The data visualization that is chosen by default is mainly dependent on the schema and the count of the <ApiLink type="DataSource" /> that you have bound. For example, if you bind a single numeric value, you will get a <ApiLink type="RadialGauge" />, but if you bind a collection of value-label pairs that are easy to distinguish from each other, you will likely get a <ApiLink type="DataPieChart" />. If you bind an <ApiLink type="DataSource" /> that has more value paths, you will receive a <ApiLink type="DataChart" /> with multiple column series or line series, depending mainly on the count of the collection bound. You can also bind to a <ApiLink type="ShapeDataSource" /> or data the appears to contain geographic points to receive a <ApiLink type="GeographicMap" />.
 
diff --git a/docs/xplat/src/content/en/components/excel-library.mdx b/docs/xplat/src/content/en/components/excel-library.mdx
index fe7eab0543..8784ac2d9c 100644
--- a/docs/xplat/src/content/en/components/excel-library.mdx
+++ b/docs/xplat/src/content/en/components/excel-library.mdx
@@ -185,7 +185,7 @@ The Excel Library does not support the Excel Binary Workbook (.xlsb) format at t
 
 Now that the Excel Library module is imported, next step is to load a workbook.
 
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Workbook" />.
+In the following code snippet, an external [ExcelUtility](./excel-utility.mdx) class is used to save and load a <ApiLink type="Workbook" />.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/excel-utility.mdx b/docs/xplat/src/content/en/components/excel-utility.mdx
index 145ba6be4c..7b253d79fb 100644
--- a/docs/xplat/src/content/en/components/excel-utility.mdx
+++ b/docs/xplat/src/content/en/components/excel-utility.mdx
@@ -12,7 +12,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 # {Platform} Excel Utility
 
-This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](excel-library.md)
+This topic provides utility function for loading and saving Microsoft Excel files using [Excel Library](./excel-library.mdx)
 
 <PlatformBlock for="Angular">
 ```ts
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
index 1c559fe2d7..2cacf84fb3 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-blazor.mdx
@@ -56,13 +56,13 @@ All notable changes for each version of {ProductName} are documented on this pag
 
 ### New Components
 
-- [IgbChat](./interactivity/chat.md) <Badge variant="preview" /> - A chat UI component for displaying messages and input interaction. This component is in preview and under active development. Some features are not yet implemented, and APIs may evolve in upcoming releases.
-- [IgbSplitter](./layouts/splitter.md) - The <ApiLink type="Splitter" /> component provides a resizable split-pane layout that divides the view into two panels — *start* and *end* — separated by a draggable bar.
-- [IgbHighlight](./inputs/highlight.md) - The <ApiLink type="Highlight" /> component provides efficient searching and highlighting of text projected into it via its default slot.
+- [IgbChat](./interactivity/chat.mdx) <Badge variant="preview" /> - A chat UI component for displaying messages and input interaction. This component is in preview and under active development. Some features are not yet implemented, and APIs may evolve in upcoming releases.
+- [IgbSplitter](./layouts/splitter.mdx) - The <ApiLink type="Splitter" /> component provides a resizable split-pane layout that divides the view into two panels — *start* and *end* — separated by a draggable bar.
+- [IgbHighlight](./inputs/highlight.mdx) - The <ApiLink type="Highlight" /> component provides efficient searching and highlighting of text projected into it via its default slot.
 
 ### AI Skills
 
-- Ignite UI for Blazor now provides 4 skills for improving AI assistants coding results. Please, find more information in the [AI Skills documentation](./ai/skills.md).
+- Ignite UI for Blazor now provides 4 skills for improving AI assistants coding results. Please, find more information in the [AI Skills documentation](./ai/skills.mdx).
 
 ### Bug Fixes
 
@@ -492,20 +492,20 @@ For more details please visit:
 
 ### {PackageCharts} (Charts)
 
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
+- Added <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) layers:
   - Data Annotation Band Layer
   - Data Annotation Line Layer
   - Data Annotation Rect Layer
   - Data Annotation Slice Layer
   - Data Annotation Strip Layer
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### General
 - <Badge variant="new" /> <ApiLink pkg="core" type="Tooltip" /> component provides a way to display a tooltip for a specific element. To use, set content as desired and link via the <ApiLink pkg="core" type="Tooltip" member="anchor" label="Anchor" /> property to the target element's id:
@@ -735,11 +735,11 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts} (Charts)
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](./menus/toolbar.mdx) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
 
 ### {PackageCharts} (Inputs)
 
-- <Badge variant="preview" /> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime.
+- <Badge variant="preview" /> [Color Editor](./inputs/color-editor.mdx) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](./menus/toolbar.mdx) component to update visualizations at runtime.
 
 **Breaking Changes**
 
@@ -747,7 +747,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 ## **{PackageVerChanges-24-2-NOV}**
 
 ### General
-- New [Carousel](layouts/carousel.md) component.
+- New [Carousel](./layouts/carousel.mdx) component.
 - <ApiLink pkg="core" type="Input" />
   - Changed `change` event argument type from <ApiLink pkg="core" type="ComponentDataValueChangedEventArgs" /> to <ApiLink pkg="core" type="ComponentValueChangedEventArgs" />
 
@@ -755,9 +755,9 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts} (Charts)
 
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](./charts/types/data-pie-chart.mdx) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
 
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="Grid" member="toolbar" label="Toolbar" />
 
@@ -774,8 +774,8 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### General
 
-- New [Banner](notifications/banner.md) component.
-- New [DatePicker](scheduling/date-picker.md) component.
+- New [Banner](./notifications/banner.mdx) component.
+- New [DatePicker](./scheduling/date-picker.mdx) component.
 - New <ApiLink pkg="core" type="Divider" /> component.
 - <ApiLink pkg="core" type="Icon" />
   - Added <ApiLink pkg="core" type="Icon" member="setIconRef" label="SetIconRef" /> method. This allows to register and replace icons by SVG files.
@@ -857,23 +857,23 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 - <ApiLink type="DockManager" /> - <ApiLink type="SplitPane" /> <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> property of <ApiLink type="TabGroupPane" /> and/or <ApiLink type="ContentPane" /> instead.
 
 ### {PackageGrids}
-- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more.
+- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](./grids/_shared/size.mdx) topic for more.
 - <ApiLink type="PivotGrid" /> - The type of Columns, Rows, Filters from <ApiLink type="PivotConfiguration" /> option is now array of IgbPivotDimension - `IgbPivotDimension[]`, it was `IgbPivotDimensionCollection` previously.
 
 The type of Values from <ApiLink type="PivotConfiguration" /> option is now array of IgbPivotValue - `IgbPivotValue[]`, it was `IgbPivotValueCollection` previously.
 
 ### {PackageCharts} (Charts)
 
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](./charts/features/chart-data-legend.mdx#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via <ApiLink type="Treemap" member="fillBrushes" label="FillBrushes" />.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via <ApiLink type="Treemap" member="fillBrushes" label="FillBrushes" />.
 
 - <ApiLink type="Grid" member="toolbar" label="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -903,9 +903,9 @@ Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="Ini
 
 ### New Components
 
-- [Hierarchical Grid](grids/hierarchical-grid/overview.md) component
-- [Text Area](inputs/text-area.md) component
-- [Button Group](inputs/button-group.md) component
+- [Hierarchical Grid](./grids/hierarchical-grid/overview.mdx) component
+- [Text Area](./inputs/text-area.mdx) component
+- [Button Group](./inputs/button-group.mdx) component
 
 ### New Features
 
@@ -921,7 +921,7 @@ Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="Ini
   - exposed `selectedItem`, `items` and `groups` getters
 - <ApiLink type="RadialGauge" />
   - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](./radial-gauge.mdx#optical-scaling)
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
 - `RadialChart`
   - New Label Mode
@@ -966,7 +966,7 @@ Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="Ini
 
 ### {PackageCharts} (Charts)
 
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](./charts/features/chart-highlight-filter.mdx) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
 
 ## **{PackageVerChanges-23-2}**
 
@@ -978,29 +978,29 @@ Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="Ini
 
 ### {PackageGrids} (Grid)
 
-- Added New Features - [State Persistence](grids/grid/state-persistence.md)
+- Added New Features - [State Persistence](./grids/_shared/state-persistence.mdx)
 
 ## **{PackageVerChanges-23-1}**
 
 ### New Components
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tools when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components, but it also gives you the ability to create custom tools for your project.
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tools when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components, but it also gives you the ability to create custom tools for your project.
 
 ### {PackageCharts} (Charts)
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-22-2.65}**
 ### New Components
 
-- [Stepper](layouts/stepper.md)
+- [Stepper](./layouts/stepper.mdx)
 
 ### New Components
 
-- [Dialog](notifications/dialog.md)
-- [Select](inputs/select.md)
+- [Dialog](./notifications/dialog.mdx)
+- [Select](./inputs/select.mdx)
 
 ### {PackageGrids} (Data Grid)
 
@@ -1025,22 +1025,22 @@ Data Filtering via the <ApiLink type="XYChart" member="initialFilter" label="Ini
 
 ### {PackageDockManager} (DockManager)
 
-- [Dock Manager's](layouts/dock-manager.md) Panes collection now has a protected setter; requires you to call Add rather than set panes in a nested structure when creating them.
+- [Dock Manager's](./layouts/dock-manager.mdx) Panes collection now has a protected setter; requires you to call Add rather than set panes in a nested structure when creating them.
 
 ## **{PackageVerChanges-22-2.50}**
 
 ### New Components
 
-- [Combo](inputs/combo/overview.md)
-- [Pivot Grid](grids/pivot-grid/overview.md)
+- [Combo](./inputs/combo/overview.mdx)
+- [Pivot Grid](./grids/pivot-grid/overview.mdx)
 - .NET 7.0
 
 ## **{PackageVerChanges-22-2}**
 
 ### New Components
 
-- [Grid](grids/data-grid.md)
-- [TreeGrid](grids/tree-grid/overview.md)
+- [Grid](./grids/data-grid.mdx)
+- [TreeGrid](./grids/tree-grid/overview.mdx)
 
 ### {PackageCharts} (Charts)
 
@@ -1055,7 +1055,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -1070,7 +1070,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - GroupSortDescriptions
 
 
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 ### {PackageGrids} (Data Grid)
 
@@ -1083,8 +1083,8 @@ Added significant improvements to default behaviors, and refined the Category Ch
 
 ### {PackageCharts} (Charts)
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -1100,21 +1100,21 @@ Added significant improvements to default behaviors, and refined the Category Ch
 
 ### {PackageGrids} (Data Grid)
 
-Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
+Added New Feature - [Row Paging](./grids/_shared/paging.mdx) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
 
 ### {PackageDockManager} (Dock Manager)
 
-- The {Platform} Dock Manager is now in <Badge variant="preview" /> state, that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The [Dock Manager](layouts/dock-manager.md) allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.
+- The {Platform} Dock Manager is now in <Badge variant="preview" /> state, that provides a way to manage a complex layout using different type of panes with various sizes, positions, and behaviors, and that can be docked to various locations within an app. The [Dock Manager](./layouts/dock-manager.mdx) allows your end-users to customize it further by pinning, resizing, moving, floating, and hiding panes.
 
 ### New Components
 
-- [Chip](inputs/chip.md)
-- [Circular Progress](inputs/circular-progress.md)
-- [Linear Progress](inputs/linear-progress.md)
-- [Drop Down](inputs/dropdown.md)
-- [Slider & Range Slider](inputs/slider.md)
-- [Snackbar](notifications/snackbar.md)
-- [Toast](notifications/toast.md)
+- [Chip](./inputs/chip.mdx)
+- [Circular Progress](./inputs/circular-progress.mdx)
+- [Linear Progress](./inputs/linear-progress.mdx)
+- [Drop Down](./inputs/dropdown.mdx)
+- [Slider & Range Slider](./inputs/slider.mdx)
+- [Snackbar](./notifications/snackbar.mdx)
+- [Toast](./notifications/toast.mdx)
 
 ## **{PackageVerChanges-21-2.1}**
 
@@ -1147,19 +1147,19 @@ For example, ``` <IgbCategoryChart/> ``` instead of ``` <CategoryChart/> ```
 
 ### New Components
 
-- [Avatar](layouts/avatar.md)
-- [Badge](inputs/badge.md)
-- [Button & Icon Button](inputs/button.md)
-- [Card](layouts/card.md)
-- [Checkbox](inputs/checkbox.md)
+- [Avatar](./layouts/avatar.mdx)
+- [Badge](./inputs/badge.mdx)
+- [Button & Icon Button](./inputs/button.mdx)
+- [Card](./layouts/card.mdx)
+- [Checkbox](./inputs/checkbox.mdx)
 - Form
-- [Icon](layouts/icon.md)
-- [List](grids/list.md)
-- [Navigation Bar](menus/navbar.md)
-- [Navigation Drawer](menus/navigation-drawer.md)
-- [Radio & Radio Group](inputs/radio.md)
-- [Ripple](inputs/ripple.md)
-- [Switch](inputs/switch.md)
+- [Icon](./layouts/icon.mdx)
+- [List](./grids/list.mdx)
+- [Navigation Bar](./menus/navbar.mdx)
+- [Navigation Drawer](./menus/navigation-drawer.mdx)
+- [Radio & Radio Group](./inputs/radio.mdx)
+- [Ripple](./inputs/ripple.mdx)
+- [Switch](./inputs/switch.mdx)
 
 ### Chart and Map Improvements
 
@@ -1197,10 +1197,10 @@ This release introduces a few improvements and simplifications to visual design
 ### {PackageGrids} (Data Grid)
 
 - New Features Added:
-  - [Filter Row](grids/data-grid/column-filtering.md)
-  - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md)
-  - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md)
-  - [Cell Merging](grids/data-grid/cell-merging.md)
+  - [Filter Row](./grids/_shared/filtering.mdx)
+  - [Load/Save Layout Customizations](./grids/_shared/state-persistence.mdx)
+  - [GroupBy Area for column grouping](./grids/grid/groupby.mdx)
+  - [Cell Merging](./grids/_shared/cell-merging.mdx)
 - New API:
   - Added `SelectionChanged` event. Used to detect changes on selection interactions
      e.g. Multiple row selection.
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
index 699e22b005..8e66f5d692 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-react.mdx
@@ -491,20 +491,20 @@ For more details please visit:
 
 ### {PackageCharts} (Charts)
 
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
+- Added <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) layers:
   - Data Annotation Band Layer
   - Data Annotation Line Layer
   - Data Annotation Rect Layer
   - Data Annotation Slice Layer
   - Data Annotation Strip Layer
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### {PackageDashboards} (Dashboards)
 
@@ -539,7 +539,7 @@ For more details please visit:
 With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide.
 </DocsAside>
 
-[Update Guide](update-guide.md)
+[Update Guide](./update-guide.mdx)
 
 ### Removed
 - <ApiLink pkg="inputs" type="CheckboxChangeEventArgs" /> removed, use <ApiLink pkg="inputs" type="CheckboxChangeEventArgs" /> instead.
@@ -658,16 +658,16 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 DashboardTile <Badge variant="preview" />
 
-- New [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
+- New [Dashboard Tile](./dashboard-tile.mdx) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](./menus/toolbar.mdx) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
 
 ### {PackageCharts} (Inputs)
 
-- <Badge variant="preview" /> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime.
+- <Badge variant="preview" /> [Color Editor](./inputs/color-editor.mdx) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](./menus/toolbar.mdx) component to update visualizations at runtime.
 
 ## **{PackageVerChanges-24-2-NOV}**
 
 ### General
-- New [Carousel](layouts/carousel.md) component.
+- New [Carousel](./layouts/carousel.mdx) component.
 - <ApiLink pkg="core" type="Input" />
   - Changed `change` event argument type from <ApiLink pkg="core" type="ComponentDataValueChangedEventArgs" /> to <ApiLink pkg="core" type="ComponentValueChangedEventArgs" />
 
@@ -675,9 +675,9 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (Charts)
 
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](./charts/types/data-pie-chart.mdx) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
 
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="Grid" member="toolbar" label="Toolbar" />
 
@@ -694,8 +694,8 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCommon}
 
-- New [Banner](notifications/banner.md) component.
-- New [DatePicker](scheduling/date-picker.md) component.
+- New [Banner](./notifications/banner.mdx) component.
+- New [DatePicker](./scheduling/date-picker.mdx) component.
 - New <ApiLink pkg="core" type="Divider" /> component.
 - Added support for native events to all components.
 - <ApiLink pkg="core" type="Icon" />
@@ -778,21 +778,21 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageGrids}
 
-- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more.
+- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](./grids/_shared/size.mdx) topic for more.
 
 
 - <ApiLink type="PivotGrid" /> - Configuration of the component can now be applied correctly.
 ### {PackageCharts} (Charts)
 
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](./charts/features/chart-data-legend.mdx#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
 
 - <ApiLink type="Grid" member="toolbar" label="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -813,13 +813,13 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageGrids}
 
-- New [<ApiLink type="HierarchicalGrid" />](grids/hierarchical-grid/overview.md) component
+- New [<ApiLink type="HierarchicalGrid" />](./grids/hierarchical-grid/overview.mdx) component
 
 ### {PackageGauges}
 
 - <ApiLink type="RadialGauge" />
   - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](./radial-gauge.mdx#optical-scaling)
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
 - <ApiLink type="LinearGauge" />
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
@@ -875,13 +875,13 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (Charts)
 
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](./charts/features/chart-highlight-filter.mdx) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
 
 ## **{PackageVerChanges-23-2-DEC}**
 
 ### {PackageGrids} (Grid)
 
-- Added New Features - [State Persistence](grids/grid/state-persistence.md)
+- Added New Features - [State Persistence](./grids/_shared/state-persistence.mdx)
 
 ## **{PackageVerChanges-23-2}**
 
@@ -891,23 +891,23 @@ DashboardTile <Badge variant="preview" />
 - Vertical orientation has been added via the toolbar's <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
 - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
 
-- [Grid](grids/data-grid.md) - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns.
+- [Grid](./grids/data-grid.mdx) - This is a new fully functional cross-platform grid and includes features like filtering, sorting, templates, row selection, row grouping, row pinning and movable columns.
 
 ### Deprecated Components
 
-> [DataGrid](grids/data-grid/overview.md) - The DataGrid is deprecated, please use [Grid](grids/data-grid.md)
+> [DataGrid](./grids/data-grid.mdx) - The DataGrid is deprecated, please use [Grid](./grids/data-grid.mdx)
 
 ## **{PackageVerChanges-23-1}**
 
 ### New Components
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
 
 ### {PackageCharts} (Charts)
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-22-2}**
 
@@ -922,7 +922,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -937,7 +937,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - GroupSortDescriptions
 
 
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 ### {PackageGrids} (Data Grid)
 
@@ -949,8 +949,8 @@ Added significant improvements to default behaviors, and refined the Category Ch
 ## **{PackageVerChanges-22-1}**
 ### {PackageCharts} (Charts)
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -966,7 +966,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
 
 ### {PackageGrids} (Data Grid)
 
-Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
+Added New Feature - [Row Paging](./grids/_shared/paging.mdx) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
 
 ## **{PackageVerChanges-21-2.1}**
 
@@ -1034,10 +1034,10 @@ This release introduces a few improvements and simplifications to visual design
 ### {PackageGrids} (Data Grid)
 
 - New Features Added:
-  - [Filter Row](grids/data-grid/column-filtering.md)
-  - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md)
-  - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md)
-  - [Cell Merging](grids/data-grid/cell-merging.md)
+  - [Filter Row](./grids/_shared/filtering.mdx)
+  - [Load/Save Layout Customizations](./grids/_shared/state-persistence.mdx)
+  - [GroupBy Area for column grouping](./grids/grid/groupby.mdx)
+  - [Cell Merging](./grids/_shared/cell-merging.mdx)
 - New API:
   - Added `SelectionChanged` event. Used to detect changes on selection interactions
      e.g. Multiple row selection.
@@ -1218,13 +1218,13 @@ These breaking changes were introduce in these packages and components only:
 
 | Affected Packages | Affected Components |
 | ------------------|---------------------|
-| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](excel-library.md)  |
-| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
+| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](./excel-library.mdx)  |
+| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](./spreadsheet-overview.mdx) |
+| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)  |
+| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)   |
+| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](./zoomslider-overview.mdx)  |
 | <a href="{PackageWebsite}{PackageCore}/v/{PackageVerChangedImports}" target="_blank">{PackageCore}</a> | all classes and enums  |
-| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](grids/data-grid/overview.md) |
+| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](./grids/data-grid.mdx) |
 
 - Code After Changes
 
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
index f31b44bea5..5f9c8ff268 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv-wc.mdx
@@ -447,7 +447,7 @@ For more details please visit:
 
 ### {PackageCharts}
 
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
+- Added <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) layers:
   - Data Annotation Band Layer
   - Data Annotation Line Layer
   - Data Annotation Rect Layer
@@ -455,13 +455,13 @@ For more details please visit:
   - Data Annotation Strip Layer
 
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### {PackageDashboards}
 
@@ -550,19 +550,19 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts}
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](./menus/toolbar.mdx) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
 
 ### {PackageCharts}
 
-- <Badge variant="preview" /> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime.
+- <Badge variant="preview" /> [Color Editor](./inputs/color-editor.mdx) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](./menus/toolbar.mdx) component to update visualizations at runtime.
 
 ## **{PackageVerChanges-24-1-SEP}**
 
 ### {PackageCharts}
 
-- New [Data Pie Chart](charts/types/data-pie-chart.md) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- New [Data Pie Chart](./charts/types/data-pie-chart.mdx) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
 
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="PivotGrid" member="toolbar" label="Toolbar" />
 
@@ -617,18 +617,18 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 - <ApiLink type="DockManager" /> - <ApiLink type="SplitPane" /> <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> property of <ApiLink type="TabGroupPane" /> and/or <ApiLink type="ContentPane" /> instead.
 
 ### {PackageGrids}
-- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](grids/grid/size.md) topic for more regarding the Grid.
+- `DisplayDensity` deprecated in favor of the `--ig-size` CSS custom property. Check out the [Grid Size](./grids/_shared/size.mdx) topic for more regarding the Grid.
 ### {PackageCharts}
 
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](./charts/features/chart-data-legend.mdx#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
 
 - <ApiLink type="PivotGrid" member="toolbar" label="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -642,7 +642,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageGrids}
 
-- New [<ApiLink type="HierarchicalGrid" />](grids/hierarchical-grid/overview.md) component.
+- New [<ApiLink type="HierarchicalGrid" />](./grids/hierarchical-grid/overview.mdx) component.
 
 
 ### {PackageCharts}
@@ -657,7 +657,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 - <ApiLink type="RadialGauge" />
   - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](./radial-gauge.mdx#optical-scaling)
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
 - <ApiLink type="LinearGauge" />
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
@@ -669,20 +669,20 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts}
 
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](./charts/features/chart-highlight-filter.mdx) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
 
 ## **{PackageVerChanges-23-2-DEC}**
 
 ### {PackageGrids}
 
-- Added New Features (Grid) - [State Persistence](grids/grid/state-persistence.md).
+- Added New Features (Grid) - [State Persistence](./grids/_shared/state-persistence.mdx).
 
 
 ## **{PackageVerChanges-23-2}**
 
 ### {PackageLayouts}
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md)
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx)
   - Save tool action has been added to save the chart to an image via the clipboard.
   - Vertical orientation has been added via the toolbar's <ApiLink type="Toolbar" member="orientation" label="Orientation" /> property. By default the toolbar is horizontal, now the toolbar can be shown in vertical orientation where the tools will popup to the left/right respectfully.
   - Custom SVG icons support was added via the toolbar's `renderImageFromText` method, further enhancing custom tool creation.
@@ -692,13 +692,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageLayouts}
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
 
 ### {PackageCharts}
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 
 ## **{PackageVerChanges-22-2.2}**
@@ -729,14 +729,14 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageGrids}
 
-- New [Pivot Grid](grids/pivot-grid/overview.md) component.
+- New [Pivot Grid](./grids/pivot-grid/overview.mdx) component.
 
 ## **{PackageVerChanges-22-2}**
 
 ### {PackageGrids}
 
-- New [Grid](grids/data-grid.md) component.
-- New [Tree Grid](grids/tree-grid/overview.md) component.
+- New [Grid](./grids/data-grid.mdx) component.
+- New [Tree Grid](./grids/tree-grid/overview.mdx) component.
 - <ApiLink type="DataGrid" />:
   - Changed **{IgPrefix}Column** to <ApiLink type="DataGridColumn" />
   - Changed **GridCellEventArgs** to <ApiLink type="DataGridCellEventArgs" />
@@ -756,7 +756,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -770,7 +770,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
   - GroupSorts
   - GroupSortDescriptions
 
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 
 ## **{PackageVerChanges-22-1}**
@@ -778,12 +778,12 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 ### {PackageGrids}
 
 - <ApiLink type="DataGrid" />:
-  - Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
+  - Added New Feature - [Row Paging](./grids/_shared/paging.mdx) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
 
 ### {PackageCharts}
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -822,10 +822,10 @@ The following breaking changes were introduced: Changed <ApiLink type="ComboEdit
 
 - <ApiLink type="DataGrid" />:
   - New Features Added:
-    - [Filter Row](grids/data-grid/column-filtering.md)
-    - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md)
-    - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md)
-    - [Cell Merging](grids/data-grid/cell-merging.md)
+    - [Filter Row](./grids/_shared/filtering.mdx)
+    - [Load/Save Layout Customizations](./grids/_shared/state-persistence.mdx)
+    - [GroupBy Area for column grouping](./grids/grid/groupby.mdx)
+    - [Cell Merging](./grids/_shared/cell-merging.mdx)
   - New API:
     - Added `SelectionChanged` event. Used to detect changes on selection interactions, e.g. Multiple row selection.
   - Breaking Changes:
@@ -1047,13 +1047,13 @@ These breaking changes were introduce in these packages and components only:
 
 | Affected Packages | Affected Components |
 | ------------------|---------------------|
-| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](excel-library.md)  |
-| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
+| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](./excel-library.mdx)  |
+| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](./spreadsheet-overview.mdx) |
+| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)  |
+| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)   |
+| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](./zoomslider-overview.mdx)  |
 | <a href="{PackageWebsite}{PackageCore}/v/{PackageVerChangedImports}" target="_blank">{PackageCore}</a> | all classes and enums  |
-| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](grids/data-grid/overview.md) |
+| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](./grids/data-grid.mdx) |
 
 - Code After Changes
 
@@ -1126,7 +1126,7 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
 ### **{PackageCommonVerChanges-5.1.0}**
 
 #### Added
-- New [Carousel](layouts/carousel.md) component.
+- New [Carousel](./layouts/carousel.mdx) component.
 
 ### **{PackageCommonVerChanges-5.0.0}**
 
@@ -1172,9 +1172,9 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
 ### **{PackageCommonVerChanges-4.10.0}**
 
 #### Added
-- New [Banner](notifications/banner.md) component
-- New [Divider](layouts/divider.md) component
-- New [DatePicker](scheduling/date-picker.md) component
+- New [Banner](./notifications/banner.mdx) component
+- New [Divider](./layouts/divider.mdx) component
+- New [DatePicker](./scheduling/date-picker.mdx) component
 - <ApiLink pkg="core" type="RadioGroup" /> - Bind underlying radio components name and checked state through the radio group.
 
 #### Deprecated
@@ -1291,8 +1291,8 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
 
 #### Added
 
-- New [Text Area](inputs/text-area.md) component.
-- New [Button Group](inputs/button-group.md) component.
+- New [Text Area](./inputs/text-area.mdx) component.
+- New [Button Group](./inputs/button-group.mdx) component.
 - New <ApiLink pkg="core" type="ToggleButton" />.
 - <ApiLink pkg="core" type="NavDrawer" /> now supports CSS transitions.
 - Position attribute for <ApiLink pkg="core" type="Toast" /> and <ApiLink pkg="core" type="Snackbar" />.
@@ -1488,8 +1488,8 @@ interface IgcComboChangeEventArgs<T> {
 ### **{PackageCommonVerChanges-4.1.0}**
 
 #### Added
-- New [Stepper](layouts/stepper.md) component.
-- New [Combo](inputs/combo/overview.md) component.
+- New [Stepper](./layouts/stepper.mdx) component.
+- New [Combo](./inputs/combo/overview.mdx) component.
 - <ApiLink pkg="core" type="MaskInput" /> - Skip literal positions when deleting symbols in the component
 
 #### Fixed
@@ -1521,8 +1521,8 @@ interface IgcComboChangeEventArgs<T> {
 ### **{PackageCommonVerChanges-3.4.0}**
 
 #### Added
-- New [Dialog](notifications/dialog.md) component.
-- New [Select](inputs/select.md) component.
+- New [Dialog](./notifications/dialog.mdx) component.
+- New [Select](./inputs/select.mdx) component.
 
 #### Fixed
 - <ApiLink pkg="core" type="Calendar" /> - range selection a11y improvements.
@@ -1545,9 +1545,9 @@ interface IgcComboChangeEventArgs<T> {
 ### **{PackageCommonVerChanges-3.3.0}**
 
 #### Added
-- New [DateTimeInput](inputs/date-time-input.md) component.
-- New [Tabs](layouts/tabs.md) component.
-- New [Accordion](layouts/accordion.md) component.
+- New [DateTimeInput](./inputs/date-time-input.mdx) component.
+- New [Tabs](./layouts/tabs.mdx) component.
+- New [Accordion](./layouts/accordion.mdx) component.
 - Typography styles in themes.
 
 #### Changed
@@ -1579,9 +1579,9 @@ Check the official [documentation](https://www.infragistics.com/products/ignite-
 ### **{PackageCommonVerChanges-3.2.0}**
 
 #### Added
-- New [MaskInput](inputs/mask-input.md) component.
-- New [ExpansionPanel](layouts/expansion-panel.md) component.
-- New [Tree](grids/tree.md) component.
+- New [MaskInput](./inputs/mask-input.mdx) component.
+- New [ExpansionPanel](./layouts/expansion-panel.mdx) component.
+- New [Tree](./grids/tree.mdx) component.
 - <ApiLink pkg="core" type="Rating" /> - Added `selected` CSS part and exposed CSS variable to control symbol sizes.
 - <ApiLink pkg="core" type="IconButton" /> - Allow slotted content.
 
@@ -1615,7 +1615,7 @@ Check the official [documentation](https://www.infragistics.com/products/ignite-
 ### **{PackageCommonVerChanges-2.2.0}**
 
 #### Added
-- New [DropDown](inputs/dropdown.md) component.
+- New [DropDown](./inputs/dropdown.mdx) component.
 - <ApiLink pkg="core" type="Calendar" />: Active date can be set via an attribute.
 
 ### **{PackageCommonVerChanges-2.1.1}**
@@ -1636,20 +1636,20 @@ Example:
 ### **{PackageCommonVerChanges-2.1.0}**
 
 #### Added
-- New [LinearProgress](inputs/linear-progress.md) component.
-- New [CircularProgress](inputs/circular-progress.md) component.
-- New [Chip](inputs/chip.md) component.
-- New [Snackbar](notifications/snackbar.md) component.
-- New [Toast](notifications/toast.md) component.
-- New [Rating](inputs/rating.md) component.
+- New [LinearProgress](./inputs/linear-progress.mdx) component.
+- New [CircularProgress](./inputs/circular-progress.mdx) component.
+- New [Chip](./inputs/chip.mdx) component.
+- New [Snackbar](./notifications/snackbar.mdx) component.
+- New [Toast](./notifications/toast.mdx) component.
+- New [Rating](./inputs/rating.mdx) component.
 - Component themes can be changed at runtime by calling the `configureTheme(theme: Theme)` function
 
 ### **{PackageCommonVerChanges-2.0.0}**
 
 #### Added
 - Dark Themes
-- New [Slider](inputs/slider.md) component.
-- New [RangeSlider](inputs/slider.md) component.
+- New [Slider](./inputs/slider.mdx) component.
+- New [RangeSlider](./inputs/slider.mdx) component.
 - Support `required` property in <ApiLink pkg="core" type="Radio" /> component.
 
 #### Changed
@@ -1666,23 +1666,23 @@ Example:
 Initial release of Ignite UI Web Components
 
 #### Added
-- [Avatar](layouts/avatar.md) component
-- [Badge](inputs/badge.md) component
-- [Button](inputs/button.md) component
-- [Calendar](scheduling/calendar.md) component
-- [Card](layouts/card.md) component
-- [Checkbox](inputs/checkbox.md) component
+- [Avatar](./layouts/avatar.mdx) component
+- [Badge](./inputs/badge.mdx) component
+- [Button](./inputs/button.mdx) component
+- [Calendar](./scheduling/calendar.mdx) component
+- [Card](./layouts/card.mdx) component
+- [Checkbox](./inputs/checkbox.mdx) component
 - Form component
-- [Icon](layouts/icon.md) component
-- [IconButton](inputs/icon-button.md) component
-- [Input](inputs/input.md) component
-- [List](grids/list.md) component
-- [Navigation bar](menus/navbar.md) component
-- [Navigation drawer](menus/navigation-drawer.md) component
-- [Radio group](inputs/radio.md) component
-- [Radio](inputs/radio.md) component
-- [Ripple](inputs/ripple.md) component
-- [Switch](inputs/switch.md) component
+- [Icon](./layouts/icon.mdx) component
+- [IconButton](./inputs/icon-button.mdx) component
+- [Input](./inputs/input.mdx) component
+- [List](./grids/list.mdx) component
+- [Navigation bar](./menus/navbar.mdx) component
+- [Navigation drawer](./menus/navigation-drawer.mdx) component
+- [Radio group](./inputs/radio.mdx) component
+- [Radio](./inputs/radio.mdx) component
+- [Ripple](./inputs/ripple.mdx) component
+- [Switch](./inputs/switch.mdx) component
 
 
 
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv.mdx b/docs/xplat/src/content/en/components/general-changelog-dv.mdx
index 3c7c39fde0..0c251cfed5 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx
@@ -220,20 +220,20 @@ For more details please visit:
 
 ### {PackageCharts} (Charts)
 
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
+- Added <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) layers:
   - Data Annotation Band Layer
   - Data Annotation Line Layer
   - Data Annotation Rect Layer
   - Data Annotation Slice Layer
   - Data Annotation Strip Layer
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### {PackageDashboards} (Dashboards)
 
@@ -300,17 +300,17 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts} (Charts)
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](./menus/toolbar.mdx) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
 
 ### {PackageCharts} (Inputs)
 
-- <Badge variant="preview" /> [Color Editor](inputs/color-editor.md) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](menus/toolbar.md) component to update visualizations at runtime.
+- <Badge variant="preview" /> [Color Editor](./inputs/color-editor.mdx) can be used as a standalone color picker and is now integrated into <Badge variant="preview" /> ToolAction of [Toolbar](./menus/toolbar.mdx) component to update visualizations at runtime.
 
 ## **{PackageVerChanges-24-1-SEP}**
 
-- [Data Pie Chart](charts/types/data-pie-chart.md) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
+- [Data Pie Chart](./charts/types/data-pie-chart.mdx) - The <ApiLink type="DataPieChart" /> is a new component that renders a pie chart. This component works similarly to the <ApiLink type="CategoryChart" />, in that it will automatically detect the properties on your underlying data model while allowing selection, highlighting, animation and legend support via the ItemLegend component.
 
-- <Badge variant="new" /> [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- <Badge variant="new" /> [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="Toolbar" />
 
@@ -331,13 +331,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts} (Charts)
 
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](./charts/features/chart-data-legend.mdx#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
 
 - <ApiLink type="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -360,7 +360,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 - <ApiLink type="RadialGauge" />
   - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](./radial-gauge.mdx#optical-scaling)
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
 - <ApiLink type="LinearGauge" />
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
@@ -371,7 +371,7 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### {PackageCharts} (Charts)
 
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](./charts/features/chart-highlight-filter.mdx) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
 
 ## **{PackageVerChanges-23-2}**
 
@@ -385,13 +385,13 @@ The following table lists the bug fixes made for the {ProductName} toolset for t
 
 ### New Components
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
 
 ### {PackageCharts} (Charts)
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-22-2.2}**
 - Angular 16 support.
@@ -412,7 +412,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -427,13 +427,13 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - GroupSortDescriptions
 
 
-The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+The Chart's [Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 ## **{PackageVerChanges-22-1}**
 ### {PackageCharts} (Charts)
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="DataPieChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="DataPieChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="DataPieChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -564,11 +564,11 @@ These breaking changes were introduce in these packages and components only:
 
 | Affected Packages | Affected Components |
 | ------------------|---------------------|
-| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](excel-library.md)  |
-| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
+| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](./excel-library.mdx)  |
+| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](./spreadsheet-overview.mdx) |
+| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)  |
+| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)   |
+| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart, Pie Chart, [Zoom Slider](./zoomslider-overview.mdx)  |
 | <a href="{PackageWebsite}{PackageCore}/v/{PackageVerChangedImports}" target="_blank">{PackageCore}</a> | all classes and enums  |
 
 - Code After Changes
diff --git a/docs/xplat/src/content/en/components/general-cli-overview.mdx b/docs/xplat/src/content/en/components/general-cli-overview.mdx
index fc9d190922..17a1019b2a 100644
--- a/docs/xplat/src/content/en/components/general-cli-overview.mdx
+++ b/docs/xplat/src/content/en/components/general-cli-overview.mdx
@@ -62,7 +62,7 @@ or:
 ig new
 ```
 
-For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md).
+For a step-by-step walkthrough of the wizard options, see [Step-by-Step Guide Using Ignite UI CLI](./general-step-by-step-guide-using-cli.mdx).
 
 ### Create a project directly
 
@@ -244,7 +244,7 @@ To list all available templates in the current project:
 ig list
 ```
 
-For a guided walkthrough of the component addition wizard, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md#add-view).
+For a guided walkthrough of the component addition wizard, see [Step-by-Step Guide Using Ignite UI CLI](./general-step-by-step-guide-using-cli.mdx#add-view).
 
 <DocsAside type="info">
 Your routing file will be updated with the path to the newly generated page. For example, a component named `MyGrid` will be navigable at `/my-grid`.
@@ -412,7 +412,7 @@ After the command finishes, start the MCP servers in your AI client. The servers
 
 **VS Code with GitHub Copilot:** Open `.vscode/mcp.json`. VS Code displays an inline **Start** button above each server entry. Click **Start** for both `igniteui` and `igniteui-theming`. Once started, VS Code shows the available tool count next to each server (for example, _"13 tools | 1 prompt"_). Alternatively, run **MCP: List Servers** from the Command Palette (`Ctrl+Shift+P` / `Cmd+Shift+P`), select each server, and choose **Start**.
 
-For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.md) and [Ignite UI CLI MCP](./ai/cli-mcp.md).
+For full setup instructions across all AI clients and Agent Skills wiring, see [Agent Skills](./ai/skills.mdx) and [Ignite UI CLI MCP](./ai/cli-mcp.mdx).
 
 </PlatformBlock>
 
@@ -452,7 +452,13 @@ Configure your AI client to use the CLI MCP server manually. Most teams connect
 }
 ```
 
-For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md).
+For per-client setup guides (VS Code, GitHub, Cursor, Claude Desktop, Claude Code, JetBrains) and a full description of available tools, see [Ignite UI CLI MCP](./ai/cli-mcp.mdx).
+
+<PlatformBlock for="React, WebComponents">
+
+For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.mdx).
+
+</PlatformBlock>
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx
index 92304d55fc..301ea48297 100644
--- a/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-client.mdx
@@ -39,7 +39,7 @@ Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for B
 
 In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor** NuGet package.
 
-For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic.
+For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](./general-installing-blazor.mdx) topic.
 
 ## Register Ignite UI for Blazor
 
@@ -109,7 +109,7 @@ public static async Task Main(string[] args)
 
 </PlatformBlock>
 
-2 - Continue with step 2 in the [.NET 6 and Later Applications](general-getting-started-blazor-client.md#net-6-and-later-applications) section
+2 - Continue with step 2 in the [.NET 6 and Later Applications](./general-getting-started-blazor-client.mdx#net-6-and-later-applications) section
 
 ## Add Ignite UI for Blazor Component
 
diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx
index 9a819d3ae7..d7046adb7c 100644
--- a/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-maui.mdx
@@ -54,7 +54,7 @@ Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for B
 
 In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor** NuGet package.
 
-For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic.
+For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](./general-installing-blazor.mdx) topic.
 
 ## Register Ignite UI for Blazor
 
diff --git a/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx b/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx
index 8b4857dce6..10985447c4 100644
--- a/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started-blazor-web-app.mdx
@@ -41,7 +41,7 @@ Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for B
 
 In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Select all target projects for package installation, then search for and install the **IgniteUI.Blazor** NuGet package.
 
-For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic.
+For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](./general-installing-blazor.mdx) topic.
 
 ## Register Ignite UI for Blazor
 
diff --git a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
index af1e34316c..712670f9e8 100644
--- a/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started-oss.mdx
@@ -138,12 +138,12 @@ Add an Ignite UI for Blazor component to your razor page, for example:
 
 </PlatformBlock>
 
-For more detailed information about which components are included in the light package, see the - [Open-Source vs Premium Components](general-open-source-vs-premium.md) topic.
+For more detailed information about which components are included in the light package, see the - [Open-Source vs Premium Components](./general-open-source-vs-premium.mdx) topic.
 
 
-For more detailed information about Grid Lite features and configuration, see the [Grid Lite Overview](grid-lite/overview.md) topic.
+For more detailed information about Grid Lite features and configuration, see the [Grid Lite Overview](./grid-lite/overview.mdx) topic.
 
 ## Additional Resources
 
-- [Open-Source vs Premium Components](general-open-source-vs-premium.md)
-- [Grid Lite Overview](grid-lite/overview.md)
+- [Open-Source vs Premium Components](./general-open-source-vs-premium.mdx)
+- [Grid Lite Overview](./grid-lite/overview.mdx)
diff --git a/docs/xplat/src/content/en/components/general-getting-started.mdx b/docs/xplat/src/content/en/components/general-getting-started.mdx
index b3eb0d601b..660e388039 100644
--- a/docs/xplat/src/content/en/components/general-getting-started.mdx
+++ b/docs/xplat/src/content/en/components/general-getting-started.mdx
@@ -37,7 +37,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz
 
 [`{ProductName}`]({GithubLink}) is a complete set of UI widgets, components, and Figma UI kits for {Platform} by Infragistics. It enables developers to build modern, high-performance HTML5 and JavaScript apps for desktop browsers, mobile experiences, and progressive web apps (PWAs).
 
-{ProductName} comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md) topics.
+{ProductName} comprises several packages available under either an MIT or a commercial license, depending on the components and services they contain. For a detailed list of components and their license, please refer to the [License FAQ and Installation](./general-licensing.mdx) and [Open Source vs Premium](./general-open-source-vs-premium.mdx) topics.
 
 
 </PlatformBlock>
@@ -80,14 +80,14 @@ Or create a project directly in one command, for example:
 ig new <project-name> --framework=react --type=igr-ts --template=side-nav
 ```
 
-For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](general-cli-overview.md).
+For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](./general-step-by-step-guide-using-cli.mdx). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](./general-cli-overview.mdx).
 
 If you added a Grid component during the prompts, once the application is running you should see something similar to the following:
 
 <Image src={igCliGrid} alt="" />
 
 <DocsAside type="info">
-Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.md#comparison-table-for-all-components).
+Keep in mind that by default Ignite UI CLI installs the Trial version of Ignite UI for React's Grid component which is under [commercial license](./general-open-source-vs-premium.mdx#comparison-table-for-all-components).
 </DocsAside>
 
 Alternatively, you can use popular frameworks such as Next.js, Vite, or Expo as recommended by the React team. The following are step-by-step instructions for creating React applications with Ignite UI for React using one of these methods.
@@ -111,7 +111,7 @@ Then follow the prompts to choose a name for the project, React as the framework
 ### Adding an Ignite UI React Grid Component
 
 #### Package Installation
-To add the Ignite UI React [**Grid**](grids/data-grid.md) component to the app you need to install the `igniteui-react-grids` package:
+To add the Ignite UI React [**Grid**](./grids/data-grid.mdx) component to the app you need to install the `igniteui-react-grids` package:
 
 ```cmd
 npm install igniteui-react-grids --save
@@ -204,7 +204,7 @@ Or create a project directly in one command, for example:
 ig new <project-name> --framework=webcomponents --type=igc-ts --template=side-nav
 ```
 
-For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](general-step-by-step-guide-using-cli.md). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](general-cli-overview.md).
+For a step-by-step walkthrough of the wizard and the authentication add-on flow, see [Step-by-Step Guide Using Ignite UI CLI](./general-step-by-step-guide-using-cli.mdx). For a full reference of all CLI commands, template IDs, and direct authentication template usage, see the [CLI Overview](./general-cli-overview.mdx).
 
 ## Install Polyfills
 
@@ -481,7 +481,7 @@ The Ignite UI CLI installs the trial version of {ProductName} by default. To upg
 ig upgrade-packages
 ```
 
-You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.md) and [Open Source vs Premium](./general-open-source-vs-premium.md).
+You will be prompted to log in to the Infragistics private npm registry if not already configured. For details on the license model, see [License FAQ and Installation](./general-licensing.mdx) and [Open Source vs Premium](./general-open-source-vs-premium.mdx).
 
 ## AI-Assisted Development
 
@@ -490,7 +490,7 @@ Ignite UI provides a three-part AI toolchain - **Agent Skills**, the **Ignite UI
 Run `ig ai-config` from your project root to copy {ProductName} Agent Skills and write the Ignite
 UI MCP server configuration to `.vscode/mcp.json` in a single step.
 
-For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.md). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.md). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.md).
+For an overview of all three layers and setup instructions, see [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.mdx). For the full CLI MCP client setup guide, see [Ignite UI CLI MCP](./ai/cli-mcp.mdx). For an end-to-end walkthrough using both MCP servers, see [Build an App End-to-End with CLI MCP and Theming MCP](./general-how-to-mcp-e2e.mdx).
 
 </PlatformBlock>
 
@@ -525,19 +525,19 @@ For an overview of all three layers and setup instructions, see [AI-Assisted Dev
 
 
 ## Charts & Graphs
-{ProductName} contains a library of [Charts & Graphs](charts/chart-overview.md) that lets you visualize any type of data through its 65+ types of chart series and combinations to create stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.
+{ProductName} contains a library of [Charts & Graphs](./charts/chart-overview.mdx) that lets you visualize any type of data through its 65+ types of chart series and combinations to create stunning and interactive charts and dashboards. Built for speed and beauty, designed to work on every modern browser and with complete touch and interactivity, you can quickly build responsive visuals on any device.
 
 ## Gauges
-{ProductName} provides [Radial Gauge](radial-gauge.md), [Linear Gauge](linear-gauge.md), and [Bullet Graph](bullet-graph.md) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](radial-gauge.md) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](linear-gauge.md) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](bullet-graph.md) component lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.
+{ProductName} provides [Radial Gauge](./radial-gauge.mdx), [Linear Gauge](./linear-gauge.mdx), and [Bullet Graph](./bullet-graph.mdx) components used to illustrate data in an easy and intuitive way. The [Radial Gauge](./radial-gauge.mdx) has a variety of customization options in order to create a predefined shape and scale. The [Linear Gauge](./linear-gauge.mdx) provides a simple view of a value compared against a scale and one or more ranges. It supports one scale, one set of tick marks and one set of labels. The [Bullet Graph](./bullet-graph.mdx) component lets you create data visualizations, replacing meters and gauges that are used on dashboards with simple bar charts.
 
 ## Maps
-The {ProductName} [Geographic Map](geo-map.md) component brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.
+The {ProductName} [Geographic Map](./geo-map.mdx) component brings the ability to visualize geographic data in your application. It can render data sets consisting of many geographic locations in shapes of markers, lines, polygons, or even interactive bitmaps. It allows you to overlay multiple map layers with geographic data, mark specific geographic locations and display information using custom markers and colors.
 
 ## Grids & Inputs
-{ProductName} provides several [Grid](grids/grids-header.md) components that allow you to bind and display data with little configuration in the form of [Grid Lite](grid-lite/overview.md) - a light-weight grid component under MIT license, [Data Grid](grids/data-grid.md) - a feature-rich grid component under commercial license, [List](grids/list.md), [Tree](grids/tree.md), and even [Spreadsheet](spreadsheet-overview.md).
+{ProductName} provides several [Grid](./grids/grids-header.mdx) components that allow you to bind and display data with little configuration in the form of [Grid Lite](./grid-lite/overview.mdx) - a light-weight grid component under MIT license, [Data Grid](./grids/data-grid.mdx) - a feature-rich grid component under commercial license, [List](./grids/list.mdx), [Tree](./grids/tree.mdx), and even [Spreadsheet](./spreadsheet-overview.mdx).
 
 ## Buttons, Inputs, Layouts, and Menus
-{ProductName} provides various types of [Buttons](inputs/button.md), [Inputs](inputs/input.md), [Menus](menus/navbar.md), and [Layouts](layouts/tabs.md) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Figma.
+{ProductName} provides various types of [Buttons](./inputs/button.mdx), [Inputs](./inputs/input.mdx), [Menus](./menus/navbar.mdx), and [Layouts](./layouts/tabs.mdx) that give you the ability to build modern web applications using encapsulation and the concept of reusable components in a dependency-free approach. See the [Storybook here](https://igniteui.github.io/igniteui-webcomponents). These components are based on the [Indigo Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit), are fully supported by [App Builder](https://appbuilder.indigo.design/) and are backed by ready-to-use UI kits for Figma.
 
 
 </PlatformBlock>
@@ -572,7 +572,7 @@ Ignite UI for Blazor is delivered via NuGet packages. To use the Ignite UI for B
 
 In Visual Studio, open the NuGet package manager by selecting **Tools** → **NuGet Package Manager** → **Manage NuGet Packages for Solution**. Search for and install the **IgniteUI.Blazor** NuGet package.
 
-For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](general-installing-blazor.md) topic.
+For more information on installing Ignite UI for Blazor using NuGet, read the [Installing Ignite UI for Blazor](./general-installing-blazor.mdx) topic.
 
 ## Register Ignite UI for Blazor
 
diff --git a/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx b/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx
index 46608cb89b..a1500d21a9 100644
--- a/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx
+++ b/docs/xplat/src/content/en/components/general-how-to-mcp-e2e.mdx
@@ -43,7 +43,7 @@ Before you start, make sure you have:
 
 This walkthrough works best with a **CLI-first** setup because Ignite UI CLI scaffolds the project and prepares the first MCP configuration for VS Code automatically.
 
-If you still need the detailed setup reference for each client, see [Ignite UI CLI MCP](ai/cli-mcp.md) and [Ignite UI Theming MCP](ai/theming-mcp.md).
+If you still need the detailed setup reference for each client, see [Ignite UI CLI MCP](./ai/cli-mcp.mdx) and [Ignite UI Theming MCP](./ai/theming-mcp.mdx).
 
 ## Step 1: Start with Ignite UI CLI
 
@@ -268,10 +268,10 @@ In practice, the most effective pattern is to use CLI MCP for project and compon
 
 ## Related Topics
 
-- [AI-Assisted Development with Ignite UI](ai/ai-assisted-development-overview.md)
-- [{ProductName} Skills](ai/skills.md)
-- [Ignite UI CLI MCP](ai/cli-mcp.md)
-- [Ignite UI Theming MCP](ai/theming-mcp.md)
+- [AI-Assisted Development with Ignite UI](./ai/ai-assisted-development-overview.mdx)
+- [{ProductName} Skills](./ai/skills.mdx)
+- [Ignite UI CLI MCP](./ai/cli-mcp.mdx)
+- [Ignite UI Theming MCP](./ai/theming-mcp.mdx)
 
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/general-installing-blazor.mdx b/docs/xplat/src/content/en/components/general-installing-blazor.mdx
index b73cbd5440..5e13016a71 100644
--- a/docs/xplat/src/content/en/components/general-installing-blazor.mdx
+++ b/docs/xplat/src/content/en/components/general-installing-blazor.mdx
@@ -21,7 +21,7 @@ There are three ways to install Ignite UI for Blazor using NuGet:
 - [Using the .NET CLI](#using-the-net-cli)
 - [Using the Package Manager](#using-the-package-manager)
 
-Licensed users should use the official licensed Ignite UI for Blazor NuGet packages provided on the [Infragistics Private NuGet Feed](./general-nuget-feed.md).
+Licensed users should use the official licensed Ignite UI for Blazor NuGet packages provided on the [Infragistics Private NuGet Feed](./general-nuget-feed.mdx).
 
 <DocsAside type="info">
 Trial users can install the **IgniteUI.Blazor** trial NuGet package found on [NuGet.org](https://www.nuget.org/packages/IgniteUI.Blazor).
@@ -38,7 +38,7 @@ In the package manager dialog, open the **Browse** tab, select the **Infragistic
 <Image src={nugetPackageManagerBrowse} alt="nuget-package-manager-browse" />
 
 <DocsAside type="info">
-If you do not have an Infragistics package source available, learn how to add it by reading the [Infragistics NuGet feed topic](./general-nuget-feed.md).
+If you do not have an Infragistics package source available, learn how to add it by reading the [Infragistics NuGet feed topic](./general-nuget-feed.mdx).
 </DocsAside>
 
 ## Using the .NET CLI
diff --git a/docs/xplat/src/content/en/components/general-licensing.mdx b/docs/xplat/src/content/en/components/general-licensing.mdx
index 0b9b60b03c..f44994ead4 100644
--- a/docs/xplat/src/content/en/components/general-licensing.mdx
+++ b/docs/xplat/src/content/en/components/general-licensing.mdx
@@ -19,7 +19,7 @@ import azureCiAddTokenVariable1 from '@xplat-images/general/azure-ci-add-token-v
 
 {ProductName} comprises packages available under either an MIT or a commercial license. This licensing model supports both commercial and permissive open-source usage, depending on the specific components, modules, and services you incorporate into your project.
 
-It is crucial to understand which license applies to which part of the package. The topic [Open Source vs Premium](./general-open-source-vs-premium.md) contains details on what type of license is applied to each component and therefore if you need to buy a commercial license based on the components you are using in your projects.
+It is crucial to understand which license applies to which part of the package. The topic [Open Source vs Premium](./general-open-source-vs-premium.mdx) contains details on what type of license is applied to each component and therefore if you need to buy a commercial license based on the components you are using in your projects.
 
 ## License Agreements in {ProductName}
 For components under commercial license, it is important to know all the [legal terms and conditions](https://www.infragistics.com/legal/license/igultimate-la) regarding their purchase and use.
@@ -40,7 +40,7 @@ If you qualify for a free, non-commercial, NFR license or if you have any licens
 ## {ProductName} npm packages - Using the Private npm feed
 Npm is the most popular package manager and is also the default one for the runtime environment Node.js. It is highly adopted and is one of the fastest and easiest ways to manage the packages that you depend on in your project. For more information on how npm works, read the official [npm documentation](https://docs.npmjs.com/).
 
-Infragistics {ProductName} is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.md). Choosing this approach will not require configuring npm. If you are installing a package under commercial license, you will start using the **{ProductName} Trial version** of the product.
+Infragistics {ProductName} is available as npm packages and you can add them as dependencies to your project in a [few easy steps](./general-getting-started.mdx). Choosing this approach will not require configuring npm. If you are installing a package under commercial license, you will start using the **{ProductName} Trial version** of the product.
 
 <DocsAside type="info">
 What does it mean to start using a trial version? It means that you will be using a version of our product with a **Watermark** part of your web view. It doesn’t mean that you will be using the licensed package for a certain amount of time before it expires. For example, for a month.
diff --git a/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx b/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx
index 668d22b4cb..8e0f195cd2 100644
--- a/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx
+++ b/docs/xplat/src/content/en/components/general-open-source-vs-premium.mdx
@@ -15,7 +15,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 ## Open-Source Components
 
-There are over 50 UI components available under the MIT license, including [Grid Lite](../components/grid-lite/overview.md), Accordion, Avatar, Badge, Banner, Button, Calendar, Carousel, Checkbox, Chip, Combo, Date Picker, Drop Down, Input, List, Snackbar, and more. You can find the full list in the [Comparison Table for All Components](#comparison-table-for-all-components).
+There are over 50 UI components available under the MIT license, including [Grid Lite](../components/grid-lite/overview.mdx), Accordion, Avatar, Badge, Banner, Button, Calendar, Carousel, Checkbox, Chip, Combo, Date Picker, Drop Down, Input, List, Snackbar, and more. You can find the full list in the [Comparison Table for All Components](#comparison-table-for-all-components).
 
 All Open-Source components are marked in the header of their topics with: <Badge variant="opensource" />
 
@@ -30,13 +30,13 @@ Our Ignite UI Premium components come with advanced enterprise features and are
 <PlatformBlock for="Blazor">
 
 
-- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
-- [Dock Manager](../components/layouts/dock-manager.md)
-- [Charting library](../components/charts/chart-overview.md)
-- [Maps library](../components/geo-map.md)
-- [Excel Library](../components/excel-library.md)  
-- Gauges - [Bullet Graph](../components/bullet-graph.md), [Linear Gauge](../components/linear-gauge.md) and [Radial Gauge](../components/radial-gauge.md)
-- [Toolbar](../components/menus/toolbar.md)
+- [Data Grid](../components/grids/data-grid.mdx), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.mdx), [Tree Grid](../components/grids/tree-grid/overview.mdx), [Pivot Grid](../components/grids/pivot-grid/overview.mdx)
+- [Dock Manager](../components/layouts/dock-manager.mdx)
+- [Charting library](../components/charts/chart-overview.mdx)
+- [Maps library](../components/geo-map.mdx)
+- [Excel Library](../components/excel-library.mdx)  
+- Gauges - [Bullet Graph](../components/bullet-graph.mdx), [Linear Gauge](../components/linear-gauge.mdx) and [Radial Gauge](../components/radial-gauge.mdx)
+- [Toolbar](../components/menus/toolbar.mdx)
 
 </PlatformBlock>
 
@@ -44,14 +44,14 @@ Our Ignite UI Premium components come with advanced enterprise features and are
 <PlatformBlock for="React, WebComponents">
 
 
-- [Data Grid](../components/grids/data-grid.md), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.md), [Tree Grid](../components/grids/tree-grid/overview.md), [Pivot Grid](../components/grids/pivot-grid/overview.md)
-- [Dock Manager](../components/layouts/dock-manager.md)
-- [Charting library](../components/charts/chart-overview.md)
-- [Maps library](../components/geo-map.md)
-- [Spreadsheet](../components/spreadsheet-overview.md)
-- [Excel Library](../components/excel-library.md)  
-- Gauges - [Bullet Graph](../components/bullet-graph.md), [Linear Gauge](../components/linear-gauge.md) and [Radial Gauge](../components/radial-gauge.md)
-- [Toolbar](../components/menus/toolbar.md)
+- [Data Grid](../components/grids/data-grid.mdx), [Hierarchical Grid](../components/grids/hierarchical-grid/overview.mdx), [Tree Grid](../components/grids/tree-grid/overview.mdx), [Pivot Grid](../components/grids/pivot-grid/overview.mdx)
+- [Dock Manager](../components/layouts/dock-manager.mdx)
+- [Charting library](../components/charts/chart-overview.mdx)
+- [Maps library](../components/geo-map.mdx)
+- [Spreadsheet](../components/spreadsheet-overview.mdx)
+- [Excel Library](../components/excel-library.mdx)  
+- Gauges - [Bullet Graph](../components/bullet-graph.mdx), [Linear Gauge](../components/linear-gauge.mdx) and [Radial Gauge](../components/radial-gauge.mdx)
+- [Toolbar](../components/menus/toolbar.mdx)
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx
index 40043eee4e..f513cab953 100644
--- a/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx
+++ b/docs/xplat/src/content/en/components/general-step-by-step-guide-using-cli.mdx
@@ -16,7 +16,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 The Ignite UI CLI step-by-step mode is an interactive wizard that guides you through project creation, template selection, theming, and component view addition for {ProductName} projects. It covers the same operations as the non-interactive `ig new` and `ig add` commands but prompts you at each step rather than requiring all arguments upfront.
 
-The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](general-cli-overview.md).
+The step-by-step mode does not support scripted or non-interactive use - for that, use the `ig new` and `ig add` commands with explicit arguments. The wizard relies on `Inquirer.js`; see [supported terminals](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) for compatibility. For the full CLI reference, see [Ignite UI CLI Overview](./general-cli-overview.mdx).
 
 To activate the wizard, run:
 
@@ -97,7 +97,7 @@ If you select **Side Navigation** or **Side Navigation Mini**, the wizard prompt
 Choose a theme for your application:
 
 - The **default** option includes a pre-compiled CSS file with the default {ProductName} theme.
-- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.md).
+- The **custom** option generates a Sass-based color palette and theme configuration using the [Theming API](./themes/overview.mdx).
 
 <PlatformBlock for="Blazor">
 
@@ -160,7 +160,7 @@ To bypass these prompts in non-interactive mode, pass `--assistants` and `--agen
 ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants vscode --agents copilot claude
 ```
 
-For more details on the available flag values, see [Ignite UI CLI Overview](general-cli-overview.md#ai-configuration-during-project-creation).
+For more details on the available flag values, see [Ignite UI CLI Overview](./general-cli-overview.mdx#ai-configuration-during-project-creation).
 
 ### Complete or continue
 
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-data-model.mdx b/docs/xplat/src/content/en/components/geo-map-binding-data-model.mdx
index 725e6847bb..e1faec4a96 100644
--- a/docs/xplat/src/content/en/components/geo-map-binding-data-model.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-binding-data-model.mdx
@@ -37,7 +37,7 @@ The following table summarized data structures required for each type of geograp
 |<ApiLink type="GeographicPolylineSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|Specifies the name of data column of <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> items that contains the geographic coordinates of lines. This property must be mapped to an array of arrays of objects with x and y properties. |
 
 ## Code Snippet
-The following code shows how to bind the <ApiLink type="GeographicSymbolSeries" /> to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the <ApiLink type="GeographicPolylineSeries" /> to plot shortest geographic path between these locations using the [WorldUtility](geo-map-resources-world-util.md)
+The following code shows how to bind the <ApiLink type="GeographicSymbolSeries" /> to a custom data model that contains geographic locations of some cities of the world stored using longitude and latitude coordinates. Also, we use the <ApiLink type="GeographicPolylineSeries" /> to plot shortest geographic path between these locations using the [WorldUtility](./geo-map-resources-world-util.mdx)
 
 <PlatformBlock for="Angular">
 
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-data-overview.mdx b/docs/xplat/src/content/en/components/geo-map-binding-data-overview.mdx
index 2bd506477b..f7de94ca40 100644
--- a/docs/xplat/src/content/en/components/geo-map-binding-data-overview.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-binding-data-overview.mdx
@@ -17,11 +17,11 @@ The {ProductName} map component is designed to display geo-spatial data from sha
 ## Types of Data Sources
 The following section list some of data source that you can bind in the geographic map component
 
-- [Binding Shape Files](geo-map-binding-shp-file.md)
-- [Binding JSON Files](geo-map-binding-data-json-points.md)
-- [Binding CSV Files](geo-map-binding-data-csv.md)
-- [Binding Data Models](geo-map-binding-data-model.md)
-- [Binding Multiple Sources](geo-map-binding-multiple-sources.md)
+- [Binding Shape Files](./geo-map-binding-shp-file.mdx)
+- [Binding JSON Files](./geo-map-binding-data-json-points.mdx)
+- [Binding CSV Files](./geo-map-binding-data-csv.mdx)
+- [Binding Data Models](./geo-map-binding-data-model.mdx)
+- [Binding Multiple Sources](./geo-map-binding-multiple-sources.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx
index d4686c712a..c84c02eced 100644
--- a/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-binding-multiple-shapes.mdx
@@ -24,7 +24,7 @@ In the {ProductName} map, you can add multiple geographic series objects to over
 
 
 
-This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the <ApiLink type="ShapefileRecord" /> class. Refer to the [Binding Shape Files](geo-map-binding-shp-file.md) topic for more information about <ApiLink type="ShapefileRecord" /> object.
+This topic takes you step-by-step towards displaying multiple geographic series in the map component. All geographic series plot following geo-spatial data loaded from shape files using the <ApiLink type="ShapefileRecord" /> class. Refer to the [Binding Shape Files](./geo-map-binding-shp-file.mdx) topic for more information about <ApiLink type="ShapefileRecord" /> object.
 
 - <ApiLink type="GeographicSymbolSeries" /> – displays locations of major cities
 - <ApiLink type="GeographicPolylineSeries" /> – displays routes between major ports
diff --git a/docs/xplat/src/content/en/components/geo-map-binding-multiple-sources.mdx b/docs/xplat/src/content/en/components/geo-map-binding-multiple-sources.mdx
index 042956f057..a1545c0446 100644
--- a/docs/xplat/src/content/en/components/geo-map-binding-multiple-sources.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-binding-multiple-sources.mdx
@@ -34,7 +34,7 @@ You can use geographic series in this or other combinations to plot desired data
 
 ## Creating Data Sources
 
-Create data sources for all geographic series that you want to display in the {ProductName} map. For example, you can the use [WorldConnections](geo-map-resources-world-connections.md) script.
+Create data sources for all geographic series that you want to display in the {ProductName} map. For example, you can the use [WorldConnections](./geo-map-resources-world-connections.mdx) script.
 
 
 <PlatformBlock for="Angular">
diff --git a/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx
index 718db4fd68..2dc0e58849 100644
--- a/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-display-esri-imagery.mdx
@@ -108,7 +108,7 @@ protected override void OnInitialized()
 </PlatformBlock>
 
 ## Esri Utility
-Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which defines all styles provided by Esri imagery servers.
+Alternatively, you can use the [EsriUtility](./geo-map-resources-esri.mdx) which defines all styles provided by Esri imagery servers.
 
 <PlatformBlock for="Angular">
 
diff --git a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx
index 398e888089..7ae3f279d4 100644
--- a/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-display-heat-imagery.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 The {ProductName} map control has the ability to show heat-map imagery through the use of the <ApiLink type="ShapefileRecord" /> that are generated by a <ApiLink type="ShapefileRecord" /> by loading geo-spatial data by loading shape files to a tile series.
 
-It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](geo-map-binding-shp-file.md) topic as a pre-requisite to this topic.
+It is highly recommended that you review the [Binding Shape Files with Geo-Spatial Data](./geo-map-binding-shp-file.mdx) topic as a pre-requisite to this topic.
 
 ## {Platform} Displaying Heat Imagery Example
 
diff --git a/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx b/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx
index 5be794f96f..32e92347c0 100644
--- a/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-resources-world-connections.mdx
@@ -12,7 +12,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 # {Platform} World Connections
 
-The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines. You can use these data sources as reference point for creating your own geographic data. Note that this utility depends on [WorldUtil](geo-map-resources-world-util.md) and [WorldLocations](geo-map-resources-world-locations.md) scripts.
+The resource topic provides implementation of data utility for generating locations of airports, flight paths, and geographic gridlines. You can use these data sources as reference point for creating your own geographic data. Note that this utility depends on [WorldUtil](./geo-map-resources-world-util.mdx) and [WorldLocations](./geo-map-resources-world-locations.mdx) scripts.
 
 ## Code Snippet
 
diff --git a/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx
index 35b7e6ceff..5065385630 100644
--- a/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-shape-files-reference.mdx
@@ -94,7 +94,7 @@ The following list provides resources for obtaining shape files. Also, samples f
 
 The following topics provide additional information related to this topic.
 
-- [Binding Shape Files](geo-map-binding-shp-file.md)
+- [Binding Shape Files](./geo-map-binding-shp-file.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/geo-map-shape-styling.mdx b/docs/xplat/src/content/en/components/geo-map-shape-styling.mdx
index 89be4c9d81..fb5412eb7f 100644
--- a/docs/xplat/src/content/en/components/geo-map-shape-styling.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-shape-styling.mdx
@@ -60,7 +60,7 @@ import { IgcShapefileRecord } from 'igniteui-webcomponents-core';
 
 </PlatformBlock>
 
-Note that the following code examples are using the [Shape Styling Utility](geo-map-resources-shape-styling-utility.md) file that provides four different ways of styling shapes:
+Note that the following code examples are using the [Shape Styling Utility](./geo-map-resources-shape-styling-utility.mdx) file that provides four different ways of styling shapes:
 - [Shape Comparison Styling](#shape-comparison-styling)
 - [Shape Random Styling](#shape-random-styling)
 - [Shape Range Styling](#shape-range-styling)
diff --git a/docs/xplat/src/content/en/components/geo-map-type-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-series.mdx
index 03c7c97509..57ea4da3f1 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-series.mdx
@@ -22,13 +22,13 @@ All types of geographic series are always rendered on top of the geographic imag
 
 The {Platform} Geographic Map component supports the following types of geographic series:
 
-- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
-- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
-- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
-- [Using Scatter Density Series](geo-map-type-scatter-density-series.md)
-- [Using Scatter Area Series](geo-map-type-scatter-area-series.md)
-- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md)
-- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md)
+- [Using Scatter Symbol Series](./geo-map-type-scatter-symbol-series.mdx)
+- [Using Scatter Proportional Series](./geo-map-type-scatter-bubble-series.mdx)
+- [Using Scatter Contour Series](./geo-map-type-scatter-contour-series.mdx)
+- [Using Scatter Density Series](./geo-map-type-scatter-density-series.mdx)
+- [Using Scatter Area Series](./geo-map-type-scatter-area-series.mdx)
+- [Using Shape Polygon Series](./geo-map-type-shape-polygon-series.mdx)
+- [Using Shape Polyline Series](./geo-map-type-shape-polyline-series.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/geo-map.mdx b/docs/xplat/src/content/en/components/geo-map.mdx
index ff952f510b..774c644c42 100644
--- a/docs/xplat/src/content/en/components/geo-map.mdx
+++ b/docs/xplat/src/content/en/components/geo-map.mdx
@@ -211,15 +211,15 @@ Now that the map module is imported, next step is to create geographic map. The
 
 You can find more information about related {Platform} map features in these topics:
 
-- [Geographic Map Navigation](geo-map-navigation.md)
-{/*- [Geographic Map Imagery](geo-map-display-imagery-types.md)*/}
-- [Using Scatter Symbol Series](geo-map-type-scatter-symbol-series.md)
-- [Using Scatter Proportional Series](geo-map-type-scatter-bubble-series.md)
-- [Using Scatter Contour Series](geo-map-type-scatter-contour-series.md)
-- [Using Scatter Density Series](geo-map-type-scatter-density-series.md)
-- [Using Scatter Area Series](geo-map-type-scatter-area-series.md)
-- [Using Shape Polygon Series](geo-map-type-shape-polygon-series.md)
-- [Using Shape Polyline Series](geo-map-type-shape-polyline-series.md)
+- [Geographic Map Navigation](./geo-map-navigation.mdx)
+{/*- [Geographic Map Imagery](./geo-map-display-imagery-types.mdx)*/}
+- [Using Scatter Symbol Series](./geo-map-type-scatter-symbol-series.mdx)
+- [Using Scatter Proportional Series](./geo-map-type-scatter-bubble-series.mdx)
+- [Using Scatter Contour Series](./geo-map-type-scatter-contour-series.mdx)
+- [Using Scatter Density Series](./geo-map-type-scatter-density-series.mdx)
+- [Using Scatter Area Series](./geo-map-type-scatter-area-series.mdx)
+- [Using Shape Polygon Series](./geo-map-type-shape-polygon-series.mdx)
+- [Using Shape Polyline Series](./geo-map-type-shape-polyline-series.mdx)
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/components/grid-lite/binding.mdx b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
index 8eb354c6b8..08c7c3b0bd 100644
--- a/docs/xplat/src/content/en/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/binding.mdx
@@ -221,10 +221,10 @@ the column collection is reset, and a new data source is bound to the grid.
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Sorting](sorting.md)
-- [Filtering](filtering.md)
-- [Theming & Styling](theming.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Sorting](./sorting.mdx)
+- [Filtering](./filtering.mdx)
+- [Theming & Styling](./theming.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
index 39978dcbd5..f9db43f9cd 100644
--- a/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/cell-template.mdx
@@ -270,10 +270,10 @@ export interface GridLiteCellContext<
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Sorting](sorting.md)
-- [Filtering](filtering.md)
-- [Theming & Styling](theming.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Sorting](./sorting.mdx)
+- [Filtering](./filtering.mdx)
+- [Theming & Styling](./theming.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
index 7c825fa9d2..2c1af1dbd1 100644
--- a/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/column-configuration.mdx
@@ -380,10 +380,10 @@ In the sample below you can try out the different column properties and how they
 
 ## Additional Resources
 
-- [Data Binding](binding.md)
-- [Sorting](sorting.md)
-- [Filtering](filtering.md)
-- [Theming & Styling](theming.md)
+- [Data Binding](./binding.mdx)
+- [Sorting](./sorting.mdx)
+- [Filtering](./filtering.mdx)
+- [Theming & Styling](./theming.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
index d77aa1117f..1568d14920 100644
--- a/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/filtering.mdx
@@ -646,8 +646,8 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Sorting](sorting.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Sorting](./sorting.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
index c6d5506159..78e30f63cd 100644
--- a/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/header-template.mdx
@@ -125,9 +125,9 @@ return (
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Cell Template](cell-template.md)
-- [Theming & Styling](theming.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Cell Template](./cell-template.mdx)
+- [Theming & Styling](./theming.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/overview.mdx b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
index 3ff7297fcf..7566dbe956 100644
--- a/docs/xplat/src/content/en/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/overview.mdx
@@ -37,7 +37,7 @@ Grid Lite is a free, open-source JavaScript data grid built as a Web Component,
 
 ## What You Get with our Free {Platform} Data Grid
 
-Our free, open-source {Platform} Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes/overview.md).
+Our free, open-source {Platform} Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the [Ignite UI Theming Framework](../themes/overview.mdx).
 
 
 <PlatformBlock for="React, WebComponents">
diff --git a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
index ead4a37225..2aaa064831 100644
--- a/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/sorting.mdx
@@ -789,8 +789,8 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Filtering](filtering.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Filtering](./filtering.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grid-lite/theming.mdx b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
index 5545f8ae1b..e2a78e3c91 100644
--- a/docs/xplat/src/content/en/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/en/components/grid-lite/theming.mdx
@@ -47,7 +47,7 @@ In the sample below, you can preview all the default base themes.
 
 Aside from the default themes shipped with the {GridLiteTitle} package, you can further customize the look and feel of your data grid by using an alternate set of CSS custom properties.
 
-Refer to the [theming topic](../grids/theming-grid.md) for more details.
+Refer to the [theming topic](../grids/grid/theming-grid.mdx) for more details.
 
 ```css
 .grid-sample {
@@ -91,9 +91,9 @@ Here is an example showcasing the custom theming from above.
 
 ## Additional Resources
 
-- [Column Configuration](column-configuration.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
+- [Column Configuration](./column-configuration.mdx)
+- [Filtering](./filtering.mdx)
+- [Sorting](./sorting.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
index 474b8fa423..ca4967854b 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/advanced-filtering.mdx
@@ -402,7 +402,7 @@ We scope most of the components' mixins within `igx-advanced-filtering-dialog`,
 </DocsAside>
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
@@ -492,12 +492,12 @@ $custom-drop-down: drop-down-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - <ApiLink type="variable-_light-grid" label="light-grid" kind="sass" module="index.html" />, <ApiLink type="variable-_light-button" label="light-button" kind="sass" module="index.html" />, <ApiLink type="variable-_light-button-group" label="light-button-group" kind="sass" module="index.html" />, <ApiLink type="variable-_light-chip" label="light-chip" kind="sass" module="index.html" />, <ApiLink type="variable-_light-input-group" label="light-input-group" kind="sass" module="index.html" /> and <ApiLink type="variable-_light-drop-down" label="light-drop-down" kind="sass" module="index.html" /> schemas:
 
@@ -618,7 +618,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -664,16 +664,16 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Filtering](filtering.md)
-- [Excel Style Filtering](excel-style-filtering.md)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Filtering](filtering.mdx)
+- [Excel Style Filtering](excel-style-filtering.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
index 36c8b31af9..53ea2ed50b 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/batch-editing.mdx
@@ -18,12 +18,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 # {Platform} {ComponentTitle} Batch Editing and Transactions
 
 <ComponentBlock for="Grid">
-The Batch Editing feature of the <ApiLink type="{ComponentName}" /> is based on the <ApiLink type="TransactionService" />. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the <ApiLink type="TransactionService" /> and details how it is implemented.
+The Batch Editing feature of the <ApiLink type="{ComponentName}" /> is based on the <ApiLink type="TransactionService" />.<PlatformBlock for="Angular"> Follow the [**Transaction Service class hierarchy**](../transaction-classes.mdx) topic to see an overview of the <ApiLink type="TransactionService" /> and details how it is implemented.</PlatformBlock>
 
 </ComponentBlock>
 
 <ComponentBlock for="TreeGrid">
-The Batch Editing feature of the <ApiLink type="{ComponentName}" /> is based on the `HierarchicalTransactionService`. Follow the [**Transaction Service class hierarchy**](../transaction-classes.md) topic to see an overview of the `HierarchicalTransactionService` and details how it is implemented.
+The Batch Editing feature of the <ApiLink type="{ComponentName}" /> is based on the `HierarchicalTransactionService`.<PlatformBlock for="Angular"> Follow the [**Transaction Service class hierarchy**](../transaction-classes.mdx) topic to see an overview of the `HierarchicalTransactionService` and details how it is implemented.</PlatformBlock>
 
 </ComponentBlock>
 
@@ -67,7 +67,7 @@ You need to enable <ApiLink type="{ComponentName}" member="batchEditing" /> from
 This will ensure a proper instance of `Transaction` service is provided for the <ApiLink type="{ComponentName}" />. The proper <ApiLink type="TransactionService" /> is provided through a `TransactionFactory`.
 
 <PlatformBlock for="Angular">
-You can learn more about this internal implementation in the [transactions topic](../transaction-classes.md#transaction-factory).
+You can learn more about this internal implementation in the [transactions topic](../transaction-classes.mdx#transaction-factory).
 
 </PlatformBlock>
 
@@ -450,7 +450,7 @@ Disabling <ApiLink type="{ComponentName}" member="rowEditable" /> property will
 <ComponentBlock for="Grid">
 ## Remote Paging with Batch Editing Demo
 
-[Check out the full demo configuration](remote-data-operations.md#remote-paging-with-batch-editing)
+[Check out the full demo configuration](remote-data-operations.mdx#remote-paging-with-batch-editing)
 
 <Sample src="/{ComponentSample}/data-batch-editing-remote" height={620} alt="{Platform} {ComponentTitle} Remote Paging and Batch Editing Example" />
 
@@ -465,19 +465,19 @@ Disabling <ApiLink type="{ComponentName}" member="rowEditable" /> property will
 ## Additional Resources
 
 <PlatformBlock for="Angular">
-- [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md)
+- [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.mdx)
 
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Row Editing](row-editing.md)
-- [{ComponentTitle} Row Adding](row-adding.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Row Editing](row-editing.mdx)
+- [{ComponentTitle} Row Adding](row-adding.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Row Editing](row-editing.md)
-- [{ComponentTitle} Row Adding](row-adding.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Row Editing](row-editing.mdx)
+- [{ComponentTitle} Row Adding](row-adding.mdx)
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
index aedab6a6d4..7d017006a2 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-editing.mdx
@@ -210,7 +210,7 @@ public updateCell() {
 
 ### Cell Editing Templates
 
-You can see and learn more for default cell editing templates in the [general editing topic](editing.md#editing-templates).
+You can see and learn more for default cell editing templates in the [general editing topic](editing.mdx#editing-templates).
 
 <PlatformBlock for="Angular">
 If you want to provide a custom template which will be applied when a cell is in edit mode, you can make use of the `CellTemplateDirective`. To do this, you need to pass an **ng-template** marked with the <ApiLink type="{ComponentName}" member="cellEditor" /> directive and properly bind your custom control to the cell <ApiLink type="CellType" member="editValue" />:
@@ -252,12 +252,12 @@ public classEditTemplate = (ctx: IgcCellTemplateContext) => {
 }
 ```
 
-This code is used in the sample below which implements an [SelectComponent](../select.md) in the cells of the `Race`, `Class` and `Alignment` columns.
+This code is used in the sample below which implements an [SelectComponent](../select.mdx) in the cells of the `Race`, `Class` and `Alignment` columns.
 
 <Sample src="/{ComponentSample}/cell-selection-style" height={625} alt="{Platform} {ComponentTitle} Select Example" />
 
 <DocsAside type="info">
-Any changes made to the cell's <ApiLink type="{ComponentName}" member="editValue" /> in edit mode, will trigger the appropriate [editing event](editing.md#event-arguments-and-sequence) on exit and apply to the transaction state if transactions are enabled.
+Any changes made to the cell's <ApiLink type="{ComponentName}" member="editValue" /> in edit mode, will trigger the appropriate [editing event](editing.mdx#event-arguments-and-sequence) on exit and apply to the transaction state if transactions are enabled.
 </DocsAside>
 
 <DocsAside type="info">
@@ -541,7 +541,7 @@ Working sample of the above can be found here for further reference:
 <Sample src="/{ComponentSample}/cell-editing-sample" height={650} alt="{Platform} {ComponentTitle} Cell Editing Template Sample" />
 
 <PlatformBlock for="Angular">
-For more information on how to configure columns and their templates, you can see the documentation for [Grid Columns configuration](../grid/grid.md#angular-grid-column-configuration).
+For more information on how to configure columns and their templates, you can see the documentation for [Grid Columns configuration](../grid/grid.mdx#angular-grid-column-configuration).
 
 </PlatformBlock>
 
@@ -1038,7 +1038,7 @@ Using the <ApiLink type="{ComponentName}" />'s editing events, we can alter how
 In this example, we'll validate a cell based on the data entered in it by binding to the <ApiLink type="{ComponentName}" member="cellEdit" /> event. If the new value of the cell does not meet our predefined criteria, we'll prevent it from reaching the data source by cancelling the event.
 
 <PlatformBlock for="Angular">
-We'll also display a custom error message using [Toast](../../notifications/toast.md).
+We'll also display a custom error message using [Toast](../../notifications/toast.mdx).
 
 </PlatformBlock>
 
@@ -1329,7 +1329,7 @@ The result of the above validation being applied to our <ApiLink type="{Componen
 ## Styling
 
 <PlatformBlock for="WebComponents, Blazor, React">
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <ComponentBlock for="Grid">
@@ -1432,11 +1432,11 @@ Then set the related CSS properties for that class:
 
 
 <PlatformBlock for="Angular">
-The <ApiLink type="{ComponentName}" /> allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.md). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide range of properties, which allow users to style many different aspects of the grid.
+The <ApiLink type="{ComponentName}" /> allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide range of properties, which allow users to style many different aspects of the grid.
 
 In the below steps, we are going to go over how you can style the grid's cell in edit mode and how you can scope those styles.
 
-In order to use the [Ignite UI Theming Library](../themes/styles.md), we must first import the theme `index` file in our global styles:
+In order to use the [Ignite UI Theming Library](../themes/styles.mdx), we must first import the theme `index` file in our global styles:
 
 
 ### Importing Style Library
@@ -1452,7 +1452,7 @@ Now we can make use of all of the functions exposed by the {ProductName} theme e
 
 ### Defining a Palette
 
-After we've properly imported the index file, we create a custom palette that we can use. Let's define two colors that we like and use them to build a palette with [igx-palette](../themes/palettes.md):
+After we've properly imported the index file, we create a custom palette that we can use. Let's define two colors that we like and use them to build a palette with [igx-palette](../themes/palettes.mdx):
 
 ```scss
 $white: #fff;
@@ -1491,7 +1491,7 @@ In order for the custom theme to affect only our specific component, we can move
 This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), our styles will be applied only to our custom component.
 
  <DocsAside type="info">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info">
@@ -1509,7 +1509,7 @@ This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Co
 
 ### Styling Demo
 
-In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [igx-input-group](../input-group.md#styling), [igx-datepicker](../date-picker.md#styling) & [igx-checkbox](../checkbox.md#styling)
+In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [igx-input-group](../input-group.mdx#styling), [igx-datepicker](../date-picker.mdx#styling) & [igx-checkbox](../checkbox.mdx#styling)
 
 <Sample src="/{ComponentSample}/editing-style" height={700} alt="{Platform} {ComponentTitle} Editing Style Example" />
 
@@ -1527,34 +1527,34 @@ The sample will not be affected by the selected global theme from **Change Theme
 
 <PlatformBlock for="Angular">
 
-- [Build CRUD operations with the Grid](../general/how-to/how-to-perform-crud.md)
+- [Build CRUD operations with the Grid](../general/how-to/how-to-perform-crud.mdx)
 
 
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 <ComponentBlock for=" HierarchicalGrid">
-[Searching](search.md)
+[Searching](search.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor, WebComponents, React">
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
index b3c8f6daa8..610de16269 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-merging.mdx
@@ -350,16 +350,16 @@ If a merged cell is clicked, the closest cell from the merge sequence will becom
 <ApiLink type="DefaultMergeStrategy" />
 ## Additional Resources
 
-- [Filtering](filtering.md)
-- [Excel Style Filtering](excel-style-filtering.md)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Filtering](filtering.mdx)
+- [Excel Style Filtering](excel-style-filtering.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
index d58f0a14b4..6a308844f1 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/cell-selection.mdx
@@ -287,7 +287,7 @@ The multi-cell selection is index based (DOM elements selection).
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <ComponentBlock for="Grid">
@@ -439,7 +439,7 @@ Afterwards, all we need to do is include the mixin in our component's style (cou
 ```
 
  <DocsAside type="info">
- If the component is using an [Emulated ViewEncapsulation](../themes/styles.md#view-encapsulation), it is necessary to penetrate this encapsulation using `::ng-deep`.
+ If the component is using an [Emulated ViewEncapsulation](../themes/styles.mdx#view-encapsulation), it is necessary to penetrate this encapsulation using `::ng-deep`.
  We scope the style under `:host` selector so as not to affect any other grids we might have in our application.
  </DocsAside>
 
@@ -470,15 +470,15 @@ The sample will not be affected by the selected global theme from **Change Theme
 ## Additional Resources
 
 <ComponentBlock for="Grid, HierarchicalGrid">
-- [Selection](selection.md)
-- [Row Selection](row-selection.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Virtualization and Performance](virtualization.md)
+- [Selection](selection.mdx)
+- [Row Selection](row-selection.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Virtualization and Performance](virtualization.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
index 20c5c6f20d..5108822104 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/clipboard-interactions.mdx
@@ -54,7 +54,7 @@ In order to **copy** cells in IE 11, you can use the keyboard selection. Hold th
 
 <PlatformBlock for="Angular">
 <ComponentBlock for="Grid">
-You can use a custom paste handler in order to configure **paste** behavior, have a look at our [Paste from Excel topic](paste-excel.md).
+You can use a custom paste handler in order to configure **paste** behavior, have a look at our [Paste from Excel topic](paste-excel.mdx).
 </ComponentBlock>
 
 </PlatformBlock>
@@ -80,15 +80,15 @@ Excel can automatically detect text that is separated by tabs (tab-delimited `/t
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Selection](selection.md)
-- [Virtualization and Performance](virtualization.md)
-- [Multi-column headers](multi-column-headers.md)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Selection](selection.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Multi-column headers](multi-column-headers.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
index 6c9e7ebca3..948a6d30e2 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/collapsible-column-groups.mdx
@@ -55,9 +55,9 @@ npm install igniteui-react-grids
 ```
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [getting started](../../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [getting started](../../general-getting-started.mdx) topic.
 
-Also, we strongly suggest that you take a brief look at [multi-column headers](multi-column-headers.md) topic, to see more detailed information on how to setup the column groups in your grid.
+Also, we strongly suggest that you take a brief look at [multi-column headers](multi-column-headers.mdx) topic, to see more detailed information on how to setup the column groups in your grid.
 
 ## Usage
 
@@ -311,14 +311,14 @@ Another way to achieve this behavior is to use the igxCollapsibleIndicator direc
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
index 758418d9f3..a590b285a4 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-hiding.mdx
@@ -706,7 +706,7 @@ We can also allow the user to choose the display order of the columns in the col
 - **Alphabetical** (order the columns alphabetically)
 - **DisplayOrder** (order the columns according to the way they are displayed in the {ComponentTitle})
 
-Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../radio-button.md) module.
+Let's create a couple of nicely designed radio buttons for our options! We just have to go ahead and get the [**IgxRadio**](../radio-button.mdx) module.
 
 ```typescript
 import {
@@ -961,11 +961,11 @@ $custom-button: button-theme(
 ```
 
 > **Note**
->The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to `Palettes](themes/sass/palettes.md) topic for detailed guidance on how to use them.
+>The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to `Palettes](themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 ```scss
 // Extending the dark column actions schema
@@ -1025,7 +1025,7 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 <PlatformBlock for="Blazor, WebComponents, React">
 ## Styling
 
-The grid could be further customized by setting some of the available [CSS variables](../theming-grid.md).
+The grid could be further customized by setting some of the available [CSS variables](../grid/theming-grid.mdx).
 In order to achieve that, we will use a class that we will first assign to the grid:
 
 <ComponentBlock for="Grid">
@@ -1209,14 +1209,14 @@ Then set the related CSS variables for the related components. We will apply the
 <ApiLink type="GridToolbarTitle" />
 ## Additional Resources
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Filtering](filtering.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Filtering](filtering.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
index 8d92d4f7c8..37d1fb55bd 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-moving.mdx
@@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {ComponentTitle} Column Reordering & Moving
 
-The {Platform} {ComponentTitle} Column Moving feature in {ProductName} allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the {Platform} {ComponentTitle}, you can enable Column Moving for pinned and unpinned columns and for [Multi-Column Headers](multi-column-headers.md) as well.
+The {Platform} {ComponentTitle} Column Moving feature in {ProductName} allows quick and easy column reordering. This can be done through the Column Moving API or by dragging and dropping the headers to another position via mouse or touch gestures. In the {Platform} {ComponentTitle}, you can enable Column Moving for pinned and unpinned columns and for [Multi-Column Headers](multi-column-headers.mdx) as well.
 
 <DocsAside type="info">
 Reordering between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same group. Moving is allowed between columns/column-groups, if they are top level columns.
@@ -417,7 +417,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
@@ -461,15 +461,15 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
index ce4837054b..329977dbfe 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-pinning.mdx
@@ -824,7 +824,7 @@ public toggleColumn(col: IgcColumnComponent) {
 <ComponentBlock for="Grid">
 ## Styling
 
-The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
 
 In the below steps, we are going through the steps of customizing the grid's Pinning styling.
 
@@ -881,7 +881,7 @@ $custom-theme: grid-theme(
 The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant.
 
 ### Defining Custom Schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.mdx). The **schema** is the recipe of a theme.
 Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
 
 ```scss
@@ -918,7 +918,7 @@ In order for the custom theme to affect only specific component, you can move al
 
 This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component.
  <DocsAside type="info">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info">
@@ -947,7 +947,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set an `ID` for the grid first:
 
 
@@ -991,14 +991,14 @@ Then set the related CSS properties to this class:
 <ApiLink type="Column" />
 ## Additional Resources
 <ComponentBlock for="Grid, HierarchicalGrid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
index 004e4558d4..1a37502dfa 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-resizing.mdx
@@ -779,7 +779,7 @@ $custom-grid-theme: grid-theme(
 ```
 
  <DocsAside type="info">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`.
  </DocsAside>
 
 ```scss
@@ -812,11 +812,11 @@ $custom-grid-theme: grid-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please, refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please, refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend the predefined schema provided for every component, in this case - <ApiLink type="variable-_light-grid" label="light-grid" kind="sass" module="index.html" /> schema:
 
@@ -868,7 +868,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change the color of the resize handle, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -909,14 +909,14 @@ Then set the related CSS property for that class:
 <ApiLink type="Column" />
 ## Additional Resources
 
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Selection](selection.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
index 0e23ff591f..9c7fe43934 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-selection.mdx
@@ -52,7 +52,7 @@ The column selection feature can be enabled through the <ApiLink type="{Componen
 The default selection mode is `None`. If set to `Single` or `Multiple`, all of the presented columns will be <ApiLink type="Column" member="selectable" />. With that being said, in order to select a column, we just need to click on one, which will mark it as <ApiLink type="Column" member="selected" />. If the column is not selectable, no selection style will be applied on the header, while hovering.
 
 <DocsAside type="info">
-The [Multi Column Headers](multi-column-headers.md) feature does not reflect on the <ApiLink type="{ComponentName}" member="selectable" /> input. The <ApiLink type="ColumnGroupComponent" /> is <ApiLink type="{ComponentName}" member="selectable" />, if at least one of its children has the selection behavior enabled. In addition, the component is marked as <ApiLink type="{ComponentName}" member="selected" /> if all of its <ApiLink type="{ComponentName}" member="selectable" /> descendants are <ApiLink type="{ComponentName}" member="selected" />.
+The [Multi Column Headers](multi-column-headers.mdx) feature does not reflect on the <ApiLink type="{ComponentName}" member="selectable" /> input. The <ApiLink type="ColumnGroupComponent" /> is <ApiLink type="{ComponentName}" member="selectable" />, if at least one of its children has the selection behavior enabled. In addition, the component is marked as <ApiLink type="{ComponentName}" member="selected" /> if all of its <ApiLink type="{ComponentName}" member="selectable" /> descendants are <ApiLink type="{ComponentName}" member="selected" />.
 </DocsAside>
 
 <ComponentBlock for="Grid">
@@ -95,7 +95,7 @@ More information regarding the API manipulations could be found in the [API Refe
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a `class` for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -152,7 +152,7 @@ Before diving into the styling options, the core module and all component mixins
 
 
 <ComponentBlock for="Grid">
->Please note that [row selection](row-selection.md) and [column selection](column-selection.md) can't be manipulated independently. They depend on the same `variables`.
+>Please note that [row selection](row-selection.mdx) and [column selection](column-selection.mdx) can't be manipulated independently. They depend on the same `variables`.
 </ComponentBlock>
 
 With that being said, let's move on and change the **selection** and **hover** styles. <br/>
@@ -206,7 +206,7 @@ The last step is to include the custom `{ComponentSelector}` theme.
 In order to style components for Internet Explorer 11, we have to use a different approach, since it doesn't support CSS variables.
 
 <DocsAside type="info">
-If the component is using the [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. In order to prevent the custom theme from leaking into other components, be sure that you have included the `:host` selector before `::ng-deep`.
+If the component is using the [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. In order to prevent the custom theme from leaking into other components, be sure that you have included the `:host` selector before `::ng-deep`.
 </DocsAside>
 
 ```scss
@@ -234,16 +234,16 @@ The sample will not be affected by the selected global theme from **Change Theme
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Selection](selection.md)
-- [Cell Selection](cell-selection.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Virtualization and Performance](virtualization.md)
+- [Selection](selection.mdx)
+- [Cell Selection](cell-selection.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Virtualization and Performance](virtualization.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
index 9c194b7338..1213f56bc4 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/column-types.mdx
@@ -205,7 +205,7 @@ Available timezones:
 | India Standard Time       |‘UTC+4’                    |
 
 
-The `{ComponentName}` accepts date values of type **Date object**, **Number (milliseconds)**, **An ISO date-time string**. This section shows [how to configure a custom display format](../data-grid.md#custom-display-format).
+The `{ComponentName}` accepts date values of type **Date object**, **Number (milliseconds)**, **An ISO date-time string**. This section shows [how to configure a custom display format](../data-grid.mdx#custom-display-format).
 
 As you can see in the sample, we specify a different format options in order to showcase the available formats for the specific column type. For example, below you can find the format options for the **time** portion of the date object:
 
@@ -452,7 +452,7 @@ const formatOptions : IgrColumnPipeArgs = {
 *display - for the default en-US locale, the code USD can be represented by the narrow symbol $ or the wide symbol US$.
 
 <ComponentBlock for="Grid">
-Upon editing of cell's value the **currency symbol** will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.md#{PlatformLower}-grid-cell-editing-and-edit-templates-example).
+Upon editing of cell's value the **currency symbol** will be visible as suffix or prefix. More about that could be found in the official [Cell editing topic](cell-editing.mdx#{PlatformLower}-grid-cell-editing-and-edit-templates-example).
 </ComponentBlock>
 
 > When using <kbd>↑</kbd> + <kbd>↓</kbd> arrow keys the value will increment/decrement with a step based on the digitsInfo - minFractionDigits (The minimum number of digits after the decimal point. Default is 0)
@@ -566,7 +566,7 @@ When using <kbd>↑</kbd> + <kbd>↓</kbd> arrow keys the value will increment/d
 
 ## Default Editing Template
 
-See the editing templates part of [{ComponentTitle} Editing topic](editing.md#editing-templates)
+See the editing templates part of [{ComponentTitle} Editing topic](editing.mdx#editing-templates)
 
 ## Custom Editing Template and Formatter
 
@@ -722,6 +722,6 @@ public init(column: IgxColumnComponent) {
 <ApiLink type="Column" />
 ## Additional Resources
 
-- For custom templates you can see [cell editing topic](cell-editing.md#cell-editing-templates)
-- [Editing](editing.md)
-- [Summaries](summaries.md)
+- For custom templates you can see [cell editing topic](cell-editing.mdx#cell-editing-templates)
+- [Editing](editing.mdx)
+- [Summaries](summaries.mdx)
diff --git a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
index 850f073633..67fc3e8624 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/conditional-cell-styling.mdx
@@ -1297,20 +1297,20 @@ const editDone = (event: IgrGridEditEventArgs) => {
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Editing](editing.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Column Hiding](column-hiding.md)
-- [Selection](selection.md)
-- [Searching](search.md)
-- [Multi-column Headers](multi-column-headers.md)
-- [Size](size.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Editing](editing.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Column Hiding](column-hiding.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
+- [Multi-column Headers](multi-column-headers.mdx)
+- [Size](size.mdx)
 </ComponentBlock>
 
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
index ce07d5efbc..3eca0f60c9 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/editing.mdx
@@ -18,12 +18,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 # {Platform} {ComponentTitle} Editing
 
 The {ProductName} Cell Editing feature in {Platform} {ComponentTitle} provides an easy way to perform data manipulation operations like creating, updating, and deleting records. The <ApiLink type="{ComponentName}" /> provides you with a powerful public API which allows you to customize the way these operations are performed. The data manipulation phases are:
-- [Cell Editing](cell-editing.md)
-- [Row Editing](row-editing.md)
+- [Cell Editing](cell-editing.mdx)
+- [Row Editing](row-editing.mdx)
 - Batch Editing (Coming Soon)
 
 <PlatformBlock for="Angular">
-Additionally, **Cell editing** exposes several default editors based on the column data type, that could be easily customized via [CellEditor directive](cell-editing.md#cell-editing-templates) or [Row directives](row-editing.md#customizing-row-editing-overlay).
+Additionally, **Cell editing** exposes several default editors based on the column data type, that could be easily customized via [CellEditor directive](cell-editing.mdx#cell-editing-templates) or [Row directives](row-editing.mdx#customizing-row-editing-overlay).
 
 </PlatformBlock>
 
@@ -45,7 +45,7 @@ The <ApiLink type="{ComponentName}" member="rowEditable" /> property enables you
 
 In the <ApiLink type="{ComponentName}" />, if you set <ApiLink type="{ComponentName}" member="rowEditable" /> property to true, and the <ApiLink type="Column" member="editable" /> property is not explicitly defined for any column, the editing will be enabled for all the columns except the **primary key**.
 
-[Batch editing](batch-editing.md) in the grid can be enabled for both [cell editing](cell-editing.md) and [row editing](row-editing.md) modes. In order to set up batch editing it is necessary to provide to the grid a  **TransactionService**.
+[Batch editing](batch-editing.mdx) in the grid can be enabled for both [cell editing](cell-editing.mdx) and [row editing](row-editing.mdx) modes. In order to set up batch editing it is necessary to provide to the grid a  **TransactionService**.
 
 
 - **Cell and Batch Editing** - in this scenario every singe modification of each cell is preserved separately and undo/ redo operations are available on cell level;
@@ -64,16 +64,16 @@ In the <ApiLink type="{ComponentName}" />, if you set <ApiLink type="{ComponentN
 - For `currency` data type, default template is using <ApiLink pkg="core" type="Input" /> with prefix/suffix configuration based on application or grid locale settings.
 - For `percent` data type, default template is using <ApiLink pkg="core" type="Input" /> with suffix element that shows a preview of the edited value in percents.
 <ComponentBlock for="Grid">
-- For custom templates you can see [Cell Editing topic](cell-editing.md#{PlatformLower}-grid-cell-editing-and-edit-templates-example)
+- For custom templates you can see [Cell Editing topic](cell-editing.mdx#{PlatformLower}-grid-cell-editing-and-edit-templates-example)
 </ComponentBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-All available column data types could be found in the official [Column types topic](column-types.md#default-template).
+All available column data types could be found in the official [Column types topic](column-types.mdx#default-template).
 </ComponentBlock>
 
 ### Event Arguments and Sequence
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.md) and [**Cell Editing**](cell-editing.md) lifecycle - when starting, committing or canceling the editing action.
+The grid exposes a wide array of events that provide greater control over the editing experience. These events are fired during the [**Row Editing**](row-editing.mdx) and [**Cell Editing**](cell-editing.mdx) lifecycle - when starting, committing or canceling the editing action.
 </ComponentBlock>
 
  | Event           | Description                                                                                                                                               | Arguments                  | Cancellable |
@@ -188,39 +188,31 @@ function onSorting(args: IgrSortingEventArgs) {
 ## Additional Resources
 
 <PlatformBlock for="Angular, WebComponents, React">
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-
-<ComponentBlock for="HierarchicalGrid">
-[Searching](search.md)
-</ComponentBlock>
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
-
-</ComponentBlock>
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
 
-<ComponentBlock for="HierarchicalGrid">
-[Searching](search.md)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
index a09ff9f08c..6b94de15aa 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/excel-style-filtering.mdx
@@ -598,7 +598,7 @@ Here is the full list of Excel style filtering components that you could use:
 <PlatformBlock for="Angular">
 ## Unique Column Values Strategy
 
-The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md#unique-column-values-strategy) topic.
+The list items inside the Excel Style Filtering dialog represent the unique values for the respective column. These values can be provided manually and loaded on demand, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.mdx#unique-column-values-strategy) topic.
 
 </PlatformBlock>
 
@@ -832,7 +832,7 @@ We scope most of the components' mixins within `.igx-excel-filter` and `.igx-exc
 </DocsAside>
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
@@ -907,12 +907,12 @@ $custom-drop-down:drop-down-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - <ApiLink type="variable-_light-grid" label="light-grid" kind="sass" module="index.html" />, <ApiLink type="variable-_light-input-group" label="light-input-group" kind="sass" module="index.html" />, <ApiLink type="variable-_light-button" label="light-button" kind="sass" module="index.html" />, <ApiLink type="variable-_light-list" label="light-list" kind="sass" module="index.html" />, <ApiLink type="variable-_light-checkbox" label="light-checkbox" kind="sass" module="index.html" /> and <ApiLink type="variable-_light-drop-down" label="light-drop-down" kind="sass" module="index.html" /> schemas:
 
@@ -1074,7 +1074,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -1116,14 +1116,14 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
index c5ad004697..dcf378f5d0 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/export-excel.mdx
@@ -101,7 +101,7 @@ To initiate an export, you can use the handler of a button in your component's t
 <PlatformBlock for="Angular">
 ## Export All Data
 
-When you use remote operations like **paging**, the Grid might not have access to the full data set at once. In these cases, we recommend using the [Excel Export Service](../exporter-excel.md) and passing the entire data collection, if available. Example:
+When you use remote operations like **paging**, the Grid might not have access to the full data set at once. In these cases, we recommend using the [Excel Export Service](../exporter-excel.mdx) and passing the entire data collection, if available. Example:
 
 ```ts
 public exportButtonHandler() {
@@ -126,7 +126,7 @@ To export grouped data, group the <ApiLink type="{ComponentName}" /> by one or m
 
 ## Export Multi Column Headers Grid
 
-You can export <ApiLink type="{ComponentName}" /> with defined [multi-column headers](multi-column-headers.md). All headers are reflected in the exported Excel file as they are displayed in the <ApiLink type="{ComponentName}" />. If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` <PlatformBlock for="Angular"><ApiLink type="IGridToolbarExportEventArgs" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="React"><ApiLink type="ExporterOptionsBase" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="WebComponents"><ApiLink type="ExporterOptionsBase" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="Blazor"><ApiLink type="GridToolbarExportEventArgs" member="ignoreMultiColumnHeaders" /></PlatformBlock> to `true`.
+You can export <ApiLink type="{ComponentName}" /> with defined [multi-column headers](multi-column-headers.mdx). All headers are reflected in the exported Excel file as they are displayed in the <ApiLink type="{ComponentName}" />. If you want to exclude the defined multi-column headers from the exported data, set the `ExporterOption` <PlatformBlock for="Angular"><ApiLink type="IGridToolbarExportEventArgs" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="React"><ApiLink type="ExporterOptionsBase" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="WebComponents"><ApiLink type="ExporterOptionsBase" member="ignoreMultiColumnHeaders" /></PlatformBlock><PlatformBlock for="Blazor"><ApiLink type="GridToolbarExportEventArgs" member="ignoreMultiColumnHeaders" /></PlatformBlock> to `true`.
 
 
 <DocsAside type="info">
@@ -281,7 +281,7 @@ When you are exporting data from the <ApiLink type="{ComponentName}" /> componen
 |Limitation|Description|
 |--- |--- |
 |Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.|
-|Cell Styling|The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the [Excel Library](../../excel-library.md).|
+|Cell Styling|The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the [Excel Library](../../excel-library.mdx).|
 |Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.|
 </ComponentBlock>
 
@@ -290,7 +290,7 @@ When you are exporting data from the <ApiLink type="{ComponentName}" /> componen
 |--- |--- |
 |Hierarchy levels|The excel exporter service can create up to 8 levels of hierarchy.|
 |Max worksheet size|The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.|
-|Cell Styling|The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the [Excel Library](../../excel-library.md).|
+|Cell Styling|The Excel exporter service does not support exporting a custom style applied to a cell component. In such scenarios we recommend using the [Excel Library](../../excel-library.mdx).|
 |Wide PDF layouts|Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.|
 </ComponentBlock>
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
index 6a02df6096..56388902c3 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/filtering.mdx
@@ -21,8 +21,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 The {ProductName} Filtering in {Platform} {ComponentTitle} is a feature that allows for selectively displaying or hiding data based on specific criteria or conditions. There is a bound data container through which the <ApiLink type="{ComponentName}" /> Component provides rich filtering API and all the filtering capabilities. The available filtering types here are three:
 
 - Quick filtering
-- [Excel Style Filtering](excel-style-filtering.md)
-- [Advanced Filtering](advanced-filtering.md)
+- [Excel Style Filtering](excel-style-filtering.mdx)
+- [Advanced Filtering](advanced-filtering.mdx)
 
 ## {Platform} {ComponentTitle} Filtering Example
 
@@ -89,7 +89,7 @@ Property <ApiLink type="Column" member="filterable" /> enables you to specify th
 </PlatformBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-To enable the [Advanced filtering](advanced-filtering.md) however, you need to set the <ApiLink type="{ComponentName}" member="allowAdvancedFiltering" /> input property to **true**
+To enable the [Advanced filtering](advanced-filtering.mdx) however, you need to set the <ApiLink type="{ComponentName}" member="allowAdvancedFiltering" /> input property to **true**
 </ComponentBlock>
 
 <PlatformBlock for="Angular">
@@ -496,7 +496,7 @@ When set to `OR`, a row will be returned when either the 'ProductName' cell valu
 <ComponentBlock for="Grid, HierarchicalGrid">
 ## Remote Filtering
 
-The <ApiLink type="{ComponentName}" /> supports remote filtering, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md) topic.
+The <ApiLink type="{ComponentName}" /> supports remote filtering, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.mdx) topic.
 </ComponentBlock>
 </PlatformBlock>
 
@@ -758,7 +758,7 @@ public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStr
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -917,12 +917,12 @@ $dark-button: button-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [Schemas](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [Schemas](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - `light-grid`, `light-input-group` and `light-button` schemas:
 
@@ -1055,14 +1055,14 @@ Some browsers such as Firefox fail to parse regional specific decimal separators
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
index 8d7a1d4755..825f3e5d7d 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/keyboard-navigation.mdx
@@ -99,9 +99,9 @@ When the <ApiLink type="{ComponentName}" /> body is focused, the following key c
 - <kbd>ENTER</kbd> enters edit mode.
 - <kbd>F2</kbd> enters edit mode.
 - <kbd>ESC</kbd> exits edit mode.
-- <kbd>TAB</kbd> available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When [Row Editing](row-editing.md) is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row.
-- <kbd>SHIFT</kbd> + <kbd>TAB</kbd> - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When [Row Editing](row-editing.md) is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row.
-- <kbd>SPACE</kbd> - selects the row, if [Row Selection](row-selection.md) is enabled.
+- <kbd>TAB</kbd> available only if there is a cell in edit mode; moves the focus to the next editable cell in the row; after reaching the last cell in the row, moves te focus to the first editable cell in the next row. When [Row Editing](row-editing.mdx) is enabled, moves the focus from the right-most editable cell to the **CANCEL** and **DONE** buttons, and from **DONE** button to the left-most editable cell in the row.
+- <kbd>SHIFT</kbd> + <kbd>TAB</kbd> - available only if there is a cell in edit mode; moves the focus to the previous editable cell in the row; after reaching the first cell in the row, moves the focus to the last editable cell in the previous row. When [Row Editing](row-editing.mdx) is enabled, moves the focus from the right-most editable cell to **CANCEL** and **DONE** buttons, and from **DONE** button to the right-most editable cell in the row.
+- <kbd>SPACE</kbd> - selects the row, if [Row Selection](row-selection.mdx) is enabled.
 - <kbd>ALT</kbd> + <kbd>←</kbd> or <kbd>ALT</kbd> + <kbd>↑</kbd> -
 <ComponentBlock for="Grid">
   over Group Row - collapses the group.
@@ -353,14 +353,14 @@ Use the demo below to try out the custom scenarios that we just implemented:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
index cc148c88ea..6b1e2dc777 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/live-data.mdx
@@ -21,7 +21,7 @@ The {ProductName} Live Data Updates feature in {Platform} {ComponentTitle} is us
 ## {Platform} Live-data Update Example
 
 The sample below demonstrates the {ComponentTitle} performance when all records are updated multiple times per second. Use the UI controls to choose the number of records loaded and the frequency of updates.
-Feed the same data into the [Column Chart](../../charts/types/column-chart.md) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show Category Prices per Region data for the selected rows and the `Chart` column button will show the same for the current row.
+Feed the same data into the [Column Chart](../../charts/types/column-chart.mdx) to experience the powerful charting capabilities of Ignite UI for Angular. The `Chart` button will show Category Prices per Region data for the selected rows and the `Chart` column button will show the same for the current row.
 
 <Sample src="/{ComponentSample}/finjs" height={700} alt="{Platform} Live data Update Example" />
 
@@ -103,7 +103,7 @@ const startUpdate = () => {
 
 ```
 
-A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
+A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.mdx#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
 
 ```tsx
 <{ComponentSelector}>
@@ -113,7 +113,7 @@ A change in the data field value or a change in the data object/data collection
 
 </PlatformBlock>
 
-A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.md#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
+A change in the data field value or a change in the data object/data collection reference will trigger the corresponding pipes. However, this is not the case for columns, which are bound to [complex data objects](../data-grid.mdx#complex-data-binding). To resolve the situation, provide a new object reference for the data object containing the property. Example:
 
 <PlatformBlock for="Blazor">
 ```Razor
@@ -223,7 +223,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
 By using the [ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver) we are able to create DockSlot and Grid components on the fly.
 
 ### DockManager component
-Take leverage of the [Dock Manager](../../layouts/dock-manager.md) WebComponent and build your own webview by using the docket or floating panels. In order to add a new floating panel, go ahead and open the Action pane on the right and click the 'Add floating pane' button. Drag and drop the new pane at the desired location.
+Take leverage of the [Dock Manager](../../layouts/dock-manager.mdx) WebComponent and build your own webview by using the docket or floating panels. In order to add a new floating panel, go ahead and open the Action pane on the right and click the 'Add floating pane' button. Drag and drop the new pane at the desired location.
 
 </PlatformBlock>
 
@@ -232,15 +232,15 @@ Take leverage of the [Dock Manager](../../layouts/dock-manager.md) WebComponent
 <ApiLink type="{ComponentName}" />
 ## Additional Resources
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
index 9274a6f222..a007fdd679 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/multi-column-headers.mdx
@@ -396,7 +396,7 @@ For achieving `n-th` level of nested headers, the declaration above should be fo
 
 </ComponentBlock>
 
-Every <ApiLink type="ColumnGroup" /> supports [moving](column-moving.md), [pinning](column-pinning.md) and [hiding](column-hiding.md).
+Every <ApiLink type="ColumnGroup" /> supports [moving](column-moving.mdx), [pinning](column-pinning.mdx) and [hiding](column-hiding.mdx).
 <DocsAside type="info">
 When there is a set of columns and column groups, pinning works only for top level column parents. More specifically pinning per nested column groups or columns is not allowed. <br />
 Moving between columns and column groups is allowed only when they are at the same level in the hierarchy and both are in the same `group`. <br />
@@ -788,7 +788,7 @@ The last step is to **include** the component mixins:
 ```
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
  ```scss
@@ -825,12 +825,12 @@ $custom-theme: igx-grid-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palette.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palette.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [schemas](../themes/schemas.md). A schema is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [schemas](../themes/schemas.mdx). A schema is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - `_light-grid`:
 
@@ -886,7 +886,7 @@ import 'core-js/es7/array';
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -933,15 +933,15 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Grid Overview](../data-grid.md)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Group by](groupby.md)
+- [Grid Overview](../data-grid.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Group by](groupby.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx
index c9cd617828..1ef84d07df 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/multi-row-layout.mdx
@@ -225,7 +225,7 @@ By default we have set the same columns as our previous sample, but it can be cl
 <PlatformBlock for="Angular">
 ## Styling
 
-The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's <ApiLink type="Theme" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's <ApiLink type="Theme" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
 
 In the below steps, we are going through the steps of customizing the grid's Multi-row Layout styling.
 
@@ -290,7 +290,7 @@ $custom-theme: grid-theme(
 
 ### Defining Custom Schemas
 
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.mdx). The **schema** is the recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
 
@@ -334,7 +334,7 @@ In order for the custom theme do affect only specific component, you can move al
 This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component.
 
  <DocsAside type="info">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info">
@@ -364,7 +364,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -411,11 +411,11 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
index c2abfe502e..ce44412e02 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/paging.mdx
@@ -28,7 +28,7 @@ The following example represents <ApiLink type="{ComponentName}" /> pagination a
 
 
 <PlatformBlock for="Angular">
-Adding a [Paginator](/paginator.md) component will control whether the feature is present, you can enable/disable it by using a simple `*ngIf` with a toggle property. The <ApiLink type="Paginator" member="perPage" /> input controls the visible records per page. Let's update our <ApiLink type="{ComponentName}" /> to enable paging: -->
+Adding a [Paginator](/paginator.mdx) component will control whether the feature is present, you can enable/disable it by using a simple `*ngIf` with a toggle property. The <ApiLink type="Paginator" member="perPage" /> input controls the visible records per page. Let's update our <ApiLink type="{ComponentName}" /> to enable paging: -->
 
 </PlatformBlock>
 
@@ -97,7 +97,7 @@ Adding a [Paginator](/paginator.md) component will control whether the feature i
 
 Group rows participate in the paging process along with data rows. They count towards the page size for each page. Collapsed rows are not included in the paging process.
 
-Integration between Paging and Group By is described in the [Group By](groupby.md#{PlatformLower}-grid-group-by-with-paging) topic.
+Integration between Paging and Group By is described in the [Group By](groupby.mdx#{PlatformLower}-grid-group-by-with-paging) topic.
 
 </ComponentBlock>
 
@@ -223,12 +223,12 @@ TO-DO H-GRID CODE SNIPPET
 
 ## Remote Paging
 
-Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the <ApiLink type="{ComponentName}" /> construction and data subscription. For more detailed information, check the [Remote Data Operations](remote-data-operations.md#remote-paging) topic.
+Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the <ApiLink type="{ComponentName}" /> construction and data subscription. For more detailed information, check the [Remote Data Operations](remote-data-operations.mdx#remote-paging) topic.
 
 <ComponentBlock for="Grid">
 ## Remote Paging with Custom Template
 
-In some cases you may want to define your own paging behavior and this is when we can take advantage of the <ApiLink type="PaginatorContent" /> and add our custom logic along with it. [This section](remote-data-operations.md#remote-paging-with-custom-igx-paginator-content) explains how we are going to extend the Remote Paging example in order to demonstrate this.
+In some cases you may want to define your own paging behavior and this is when we can take advantage of the <ApiLink type="PaginatorContent" /> and add our custom logic along with it. [This section](remote-data-operations.mdx#remote-paging-with-custom-igx-paginator-content) explains how we are going to extend the Remote Paging example in order to demonstrate this.
 
 </ComponentBlock>
 
@@ -285,7 +285,7 @@ We scope the <ApiLink pkg="core" type="Button" /> mixin within `.igx-paginator__
 </DocsAside>
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
@@ -334,12 +334,12 @@ $dark-button: button-theme(
 ```
 
 <DocsAside type="info">
-The <ApiLink pkg="core" type="Color" /> and `Palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The <ApiLink pkg="core" type="Color" /> and `Palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
- Going further with the theming engine, you can build a robust and flexible structure that benefits from [schemas](../themes/sass/schemas.md). A schema is a recipe of a theme.
+ Going further with the theming engine, you can build a robust and flexible structure that benefits from [schemas](../themes/sass/schemas.mdx). A schema is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - `DarkPagination` and `DarkButton` schemas:
 
@@ -423,15 +423,14 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 ## Additional Resources
 
 <ComponentBlock for="Grid, TreeGrid">
-- [Paginator](paginator.md) -->
-- [Virtualization and Performance](virtualization.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 </ComponentBlock>
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
index c933b0dbcb..99e65fa8b3 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/remote-data-operations.mdx
@@ -1696,7 +1696,7 @@ BLAZOR CODE SNIPPET HERE
 <ComponentBlock for="Grid">
 ### Remote Paging with Batch editing
 
-With the examples so far we clarified how to set up the <ApiLink type="{ComponentName}" /> with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.md).
+With the examples so far we clarified how to set up the <ApiLink type="{ComponentName}" /> with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.mdx).
 
 Before continuing with the sample it is good to clarify the current use case. When pagination is done on the server, the grid contains the data only for the current page and if we add new rows the newly added rows (with Batch Editing) will be concatenated with the current data that the grid contains. Therefore, if the server returns no data for a given page, grid's data source will be consisted only from the newly added rows, which the grid will paginate based on the defined pagination settings (page, perPage).
 
@@ -1771,15 +1771,15 @@ As you can see in the <ApiLink type="Paginator" member="paginate" label="Paginat
 <ApiLink type="Paginator" />
 ## Additional Resources
 <ComponentBlock for="Grid">
-- [Paging](paging.md)
-- [Virtualization and Performance](virtualization.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Paging](paging.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
index afba338814..bef9d7dec4 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-adding.mdx
@@ -513,7 +513,7 @@ this.treeGrid.beginAddRowByIndex(null);       // Spawns the add row UI as the fi
 
 ## Behavior
 
-The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the [{ComponentTitle} Row Editing](row-editing.md) topic for more information.
+The add row UI has the same behavior as the row editing one as they are designed to provide a consistent editing experience to end users. Please, refer to the [{ComponentTitle} Row Editing](row-editing.mdx) topic for more information.
 
 After a new row is added through the row adding UI, its position and/or visibility is determined by the sorting, filtering and grouping state of the <ApiLink type="{ComponentName}" />. In a <ApiLink type="{ComponentName}" /> that does not have any of these states applied, it appears as the last record. A snackbar is briefly displayed containing a button the end user may use to scroll the <ApiLink type="{ComponentName}" /> to its position if it is not in view.
 
@@ -678,15 +678,15 @@ This will ensure that the remotely generated ids are always reflected in the loc
 
 The row adding UI comprises the buttons in the <ApiLink type="ActionStrip" /> editing actions, the editing editors and overlay, as well as the snackbar which allows end users to scroll to the newly added row. To style these components you may refer to these comprehensive guides in their respective topics:
 
-- [{ComponentTitle} Row Editing](row-editing.md#styling)
-- [Snackbar](../../notifications/snackbar.md#styling)
+- [{ComponentTitle} Row Editing](row-editing.mdx#styling)
+- [Snackbar](../../notifications/snackbar.mdx#styling)
 
 ## API References
 <ApiLink type="{ComponentName}" />
 ## Additional Resources
 
 
-- [{ComponentTitle} Editing](editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
index ec966b9cac..647a87a494 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-drag.mdx
@@ -74,7 +74,7 @@ In this example, we'll handle dragging a row from one grid to another, removing
 ### Drop Areas
 
 Enabling row-dragging was pretty easy, but now we have to configure how we'll handle row-dropping.
-We can define where we want our rows to be dropped using the [Drop` directive](../drag-drop.md).
+We can define where we want our rows to be dropped using the [Drop` directive](../drag-drop.mdx).
 
 First we need to import the `DragDropModule` in our app module:
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
index 9cdcf85716..2a498fa423 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-editing.mdx
@@ -619,16 +619,16 @@ const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => {
 
 ## Styling
 
-Using the [{ProductName} Theme Library](themes/index.md), we can greatly alter the Row Editing overlay.
+Using the [{ProductName} Theme Library](themes/index.mdx), we can greatly alter the Row Editing overlay.
 
 The Row Editing overlay is a composite element - its UI is comprised of a couple of other components:
 
-- [igx-banner](banner.md) in order to render its contents
-- [igx-button](button.md)s are rendered in the default template (for the `Done` and `Cancel` buttons).
+- [igx-banner](banner.mdx) in order to render its contents
+- [igx-button](button.mdx)s are rendered in the default template (for the `Done` and `Cancel` buttons).
 
-In the below example, we will make use of those two components' styling options, ([button styling](button.md#styling) & [banner-styling](../banner.md#styling)), to customize the experience of our `{ComponentName}`'s Row Editing.
+In the below example, we will make use of those two components' styling options, ([button styling](button.mdx#styling) & [banner-styling](../banner.mdx#styling)), to customize the experience of our `{ComponentName}`'s Row Editing.
 
-We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.md#styling).
+We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.mdx#styling).
 
 ### Import Theme
 
@@ -675,7 +675,7 @@ This will apply our custom banner theme to the Row Editing overlay. However, sin
 Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope our banner theme. We can define our styles (including the [theme import](#import-theme)) in the component containing our `{ComponentName}`.
 
 <DocsAside type="info">
-If the component is using an [Emulated](themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+If the component is using an [Emulated](themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
 We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component:
 </DocsAside>
 
@@ -711,7 +711,7 @@ To further customize our Row Editing overlay, we can pass a custom template so w
 </{ComponentSelector}>
 ```
 
-After we've defined our custom buttons, we can make use of the <ApiLink type="function-button-theme" label="button-theme" kind="sass" module="index.html" /> to style them. You can learn more about `igx-button` styling in this [topic](../button.md#styling). We can create a custom theme for our `Done` and `Cancel`:
+After we've defined our custom buttons, we can make use of the <ApiLink type="function-button-theme" label="button-theme" kind="sass" module="index.html" /> to style them. You can learn more about `igx-button` styling in this [topic](../button.mdx#styling). We can create a custom theme for our `Done` and `Cancel`:
 
 ```scss
 // custom.component.scss
@@ -730,7 +730,7 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie
 
 ### Demo
 
-After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below:
+After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.mdx#styling). The result of all the combined styles can be seen below:
 
 
 <Sample src="/{ComponentSample}/row-editing-style" height={560} alt="{Platform} {ComponentTitle} Row Editing Styling Example" />
@@ -746,7 +746,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -797,16 +797,16 @@ Then set the related CSS properties for that class:
 ## Additional Resources
 
 <PlatformBlock for="Angular">
-- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.md)
+- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.mdx)
 
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Transactions](batch-editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Transactions](batch-editing.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [{ComponentTitle} Editing](editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
index 5e95e86279..e37d4c0e7a 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-pinning.mdx
@@ -610,7 +610,7 @@ This would allow reordering the rows and moving them between the pinned and unpi
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -652,7 +652,7 @@ Then set the related CSS properties for that class:
 <PlatformBlock for="Angular">
 ## Styling
 
-The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.md). The {ComponentTitle}'s <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the {ComponentTitle}.
+The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.mdx). The {ComponentTitle}'s <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the {ComponentTitle}.
 
 Below, we are going through the steps of customizing the {ComponentTitle}'s row pinning styling.
 
@@ -694,7 +694,7 @@ The last step is to pass the custom grid theme:
 
 In order to style components for Internet Explorer 11, you have to use different approach, since it doesn't support CSS variables.
 
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`:
 
 ```scss
 :host {
@@ -732,14 +732,14 @@ The sample will not be affected by the selected global theme from **Change Theme
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
index 7a1faa3dac..23a00dcd74 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/row-selection.mdx
@@ -889,16 +889,16 @@ This demo prevents some rows from being selected using the <ApiLink type="{Compo
 ## Additional Resources
 
 <ComponentBlock for="Grid, TreeGrid">
-- [Selection](selection.md)
-- [Cell selection](cell-selection.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Virtualization and Performance](virtualization.md)
+- [Selection](selection.mdx)
+- [Cell selection](cell-selection.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Virtualization and Performance](virtualization.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/search.mdx b/docs/xplat/src/content/en/components/grids/_shared/search.mdx
index 083a9c6b34..48af84ddec 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/search.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/search.mdx
@@ -854,7 +854,7 @@ What if we would like to filter and sort our <ApiLink type="{ComponentName}" />
 By using some of our other components, we can create an enriched user interface and improve the overall design of our entire search bar! We can have a nice search or delete icon on the left of the search input, a couple of chips for our search options and some material design icons combined with nice ripple styled buttons for our navigation on the right.
 
 <PlatformBlock for="Angular">
-To do this, let's go and grab the [**InputGroup**](../input-group.md), [**Icon**](../icon.md),  [**Ripple**](../ripple.md), [**Button**](../button.md) and the [**Chip**](../chip.md) modules.
+To do this, let's go and grab the [**InputGroup**](../input-group.mdx), [**Icon**](../icon.mdx),  [**Ripple**](../ripple.mdx), [**Button**](../button.mdx) and the [**Chip**](../chip.mdx) modules.
 
 </PlatformBlock>
 
@@ -949,7 +949,7 @@ Finally, let's update our template with the new components!
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
-We will wrap all of our components inside an [InputGroup](../input-group.md). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our <ApiLink type="{ComponentName}" member="findNext" /> and invoke the <ApiLink type="{ComponentName}" />'s `ClearSearch` method to clear the highlights.
+We will wrap all of our components inside an [InputGroup](../input-group.mdx). On the left we will toggle between a search and a delete/clear icon (depending on whether the search input is empty or not). In the center, we will position the input itself. In addition, whenever the delete icon is clicked, we will update our <ApiLink type="{ComponentName}" member="findNext" /> and invoke the <ApiLink type="{ComponentName}" />'s `ClearSearch` method to clear the highlights.
 
 </PlatformBlock>
 
@@ -1427,15 +1427,15 @@ useEffect(() => {
 <ApiLink type="Column" />
 ## Additional Resources
 
-- [Virtualization and Performance](virtualization.md)
-- [Filtering](filtering.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Filtering](filtering.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
index b38b7a25a5..dd775aed80 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/selection.mdx
@@ -43,7 +43,7 @@ A brief description will be provided on each button interaction through a snackb
 ## {Platform} {ComponentTitle} Selection Options
 
 <ComponentBlock for="Grid, HierarchicalGrid">
-The {ProductName} <ApiLink type="{ComponentName}" /> component provides three different selection modes - [Row selection](row-selection.md), [Cell selection](cell-selection.md) and [Column selection](column-selection.md). By default only **Multi-cell selection** mode is enabled in the <ApiLink type="{ComponentName}" />. In order to change/enable selection mode you can use <ApiLink type="{ComponentName}" member="rowSelection" />, <ApiLink type="{ComponentName}" member="cellSelection" /> or <ApiLink type="Column" member="selectable" /> properties.
+The {ProductName} <ApiLink type="{ComponentName}" /> component provides three different selection modes - [Row selection](row-selection.mdx), [Cell selection](cell-selection.mdx) and [Column selection](column-selection.mdx). By default only **Multi-cell selection** mode is enabled in the <ApiLink type="{ComponentName}" />. In order to change/enable selection mode you can use <ApiLink type="{ComponentName}" member="rowSelection" />, <ApiLink type="{ComponentName}" member="cellSelection" /> or <ApiLink type="Column" member="selectable" /> properties.
 
 </ComponentBlock>
 
@@ -60,7 +60,7 @@ Property <ApiLink type="{ComponentName}" member="rowSelection" /> enables you to
 
 </ComponentBlock>
 
-> Go to [Row selection topic](row-selection.md) for more information.
+> Go to [Row selection topic](row-selection.mdx) for more information.
 
 ### {Platform} {ComponentTitle} Cell Selection
 
@@ -71,7 +71,7 @@ Property <ApiLink type="{ComponentName}" member="cellSelection" /> enables you t
 - `Multiple` - Currently, this is the default state of the selection in the <ApiLink type="{ComponentName}" />. Multi-cell selection is available by mouse dragging over the cells, after a left button mouse clicked continuously.
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-> Go to [Cell selection topic](cell-selection.md) for more information.
+> Go to [Cell selection topic](cell-selection.mdx) for more information.
 
 </ComponentBlock>
 
@@ -86,7 +86,7 @@ This leads to the following three variations:
 - Range column selection - holding <kbd>SHIFT</kbd> + <kbd>mouse click</kbd> selects everything in between.
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-> Go to [Column selection topic](column-selection.md) for more information.
+> Go to [Column selection topic](column-selection.mdx) for more information.
 
 </ComponentBlock>
 
@@ -571,14 +571,14 @@ When the grid has no <ApiLink type="{ComponentName}" member="primaryKey" /> set
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Row Selection](row-selection.md)
-- [Cell Selection](cell-selection.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Virtualization and Performance](virtualization.md)
+- [Row Selection](row-selection.mdx)
+- [Cell Selection](cell-selection.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Virtualization and Performance](virtualization.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/size.mdx b/docs/xplat/src/content/en/components/grids/_shared/size.mdx
index f4e1c1dcad..b45d03e07d 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/size.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/size.mdx
@@ -982,16 +982,18 @@ We can now extend our sample and add <ApiLink type="{ComponentName}" member="row
 <ApiLink type="Column" />
 ## Additional Resources
 
-- [Virtualization and Performance](virtualization.md)
-- [Editing](editing.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Editing](editing.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+</ComponentBlock>
+<ComponentBlock for="Grid, TreeGrid">
+- [Searching](search.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx
index 272436fe40..387ec50f00 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/sizing.mdx
@@ -295,7 +295,7 @@ The difference is that for the child grid, when <ApiLink type="{ComponentName}"
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
+- [Virtualization and Performance](virtualization.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
index 9bbbc96890..1dd2a548eb 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/sorting.mdx
@@ -609,7 +609,7 @@ If values of type `string` are used by a column of <ApiLink type="{ComponentName
 <PlatformBlock for="Angular">
 ## Remote Sorting
 
-The <ApiLink type="{ComponentName}" /> supports remote sorting, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md) topic.
+The <ApiLink type="{ComponentName}" /> supports remote sorting, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.mdx) topic.
 
 </PlatformBlock>
 </ComponentBlock>
@@ -829,7 +829,7 @@ The last step is to **include** the component mixins:
 ```
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
  ```scss
@@ -863,12 +863,12 @@ $custom-theme: grid-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - <ApiLink type="variable-_light-grid" label="_light-grid" kind="sass" module="index.html" />:
 
@@ -915,7 +915,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -962,14 +962,14 @@ Then set the related CSS properties to this class:
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
index 3b0711af89..8e15075bc5 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/state-persistence.mdx
@@ -79,8 +79,8 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo
 - <ApiLink type="GridStateInfo" member="expansion" label="Expansion" />
 - <ApiLink type="PivotConfiguration" />
   - Pivot Configuration properties defined by the <ApiLink type="PivotConfiguration" /> interface.
-  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section.
-  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.md#restoring-pivot-strategies) section.
+  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section.
+  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.mdx#restoring-pivot-strategies) section.
 </PlatformBlock>
 
 <PlatformBlock for="Blazor, React">
@@ -91,7 +91,7 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo
 - <ApiLink type="GridStateInfo" member="expansion" label="Expansion" />
 - <ApiLink type="PivotConfiguration" />
   - Pivot Configuration properties defined by the <ApiLink type="PivotConfiguration" /> interface.
-  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section.
+  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section.
 </PlatformBlock>
 
 
@@ -99,7 +99,7 @@ The {ProductName} State Persistence in {Platform} {ComponentTitle} allows develo
 
 <PlatformBlock for="Angular">
 <ComponentBlock for="Grid, HierarchicalGrid, TreeGrid">
-> The <ApiLink type="GridState" /> does not take care of templates. Go to [Restoring Column](state-persistence.md#restoring-columns) section to see how to restore column templates.
+> The <ApiLink type="GridState" /> does not take care of templates. Go to [Restoring Column](state-persistence.mdx#restoring-columns) section to see how to restore column templates.
 
 </ComponentBlock>
 </PlatformBlock>
@@ -476,7 +476,7 @@ const restoreGridState = () => {
 <ComponentBlock for="Grid, HierarchicalGrid, TreeGrid">
 ## Restoring columns
 
-<ApiLink type="GridState" /> will not persist columns templates, column formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. Let's show how to do this for templated columns:
+<ApiLink type="GridState" /> will not persist columns templates, column formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. Let's show how to do this for templated columns:
 
 1 - Define a template reference variable (in the example below it is `#activeTemplate`) and assign an event handler for the `ColumnInit` event:
 
@@ -732,7 +732,7 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) {
 <ComponentBlock for="PivotGrid">
 ## Restoring Pivot Configuration
 
-<ApiLink type="GridState" /> will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. The <ApiLink type="{ComponentName}" /> exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this:
+<ApiLink type="GridState" /> will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. The <ApiLink type="{ComponentName}" /> exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this:
 
 - Assign event handlers for the `DimensionInit` and `ValueInit` events:
 
@@ -1233,15 +1233,15 @@ state.applyState(gridState.columnSelection);
 
 ## Additional Resources
 
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Selection](selection.md)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 <ComponentBlock for="PivotGrid">
 
 <PlatformBlock for="WebComponents">
-- [Pivot Grid Remote Operations](remote-operations.md)
+- [Pivot Grid Remote Operations](remote-operations.mdx)
 </PlatformBlock>
 </ComponentBlock>
\ No newline at end of file
diff --git a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
index 08e8392472..b1751e6ce8 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/summaries.mdx
@@ -48,7 +48,7 @@ For `date` data type, the following functions are available:
 - Earliest
 - Latest
 
-All available column data types could be found in the official [Column types topic](column-types.md#default-template).
+All available column data types could be found in the official [Column types topic](column-types.mdx#default-template).
 
 <ApiLink type="{ComponentName}" /> summaries are enabled per-column by setting <ApiLink type="ColumnState" member="hasSummary" /> property to **true**. It is also important to keep in mind that the summaries for each column are resolved according to the column data type. In the <ApiLink type="{ComponentName}" /> the default column data type is `string`, so if you want `number` or `date` specific summaries you should specify the <ApiLink type="Column" member="dataType" /> property as `number` or `date`. Note that the summary values will be displayed localized, according to the grid <ApiLink type="GridBaseDirective" member="locale" label="Locale" /> and column <ApiLink type="Column" member="pipeArgs" />.
 
@@ -1403,7 +1403,7 @@ The summary rows can be navigated with the following keyboard interactions:
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <ComponentBlock for="Grid, TreeGrid">
@@ -1521,7 +1521,7 @@ The last step is to **include** the component mixins:
 ```
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
  ```scss
@@ -1560,12 +1560,12 @@ $custom-theme: grid-summary-theme(
 ```
 
 <DocsAside type="info">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - <ApiLink type="variable-_light-grid-summary" label="_light-grid-summary" kind="sass" module="index.html" />:
 
@@ -1622,18 +1622,18 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 
 <PlatformBlock for="Angular">
 
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 <ComponentBlock for="Grid">
-- [Selection-based Aggregates](selection-based-aggregates.md)
+- [Selection-based Aggregates](selection-based-aggregates.mdx)
 
 </ComponentBlock>
 
@@ -1641,15 +1641,15 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
index 2953c88812..9c307587e6 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/toolbar.mdx
@@ -1361,7 +1361,7 @@ The following sample demonstrates how to add an additional button to the toolbar
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grid/theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -1491,7 +1491,7 @@ If `$legacy-support` is set to `false(default)`, include the component css varia
 ```
 
 <DocsAside type="info">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
diff --git a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
index ff423f53c8..c609b49613 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/validation.mdx
@@ -539,7 +539,7 @@ The below sample demonstrates the cross-field validation in action.
 
 ## Styling
 
-Using the [{ProductName} Theme Library](../themes/index.md), we can alter the default validation styles while editing.
+Using the [{ProductName} Theme Library](../themes/index.mdx), we can alter the default validation styles while editing.
 
 In the example below, we will make use of the exposed template for validation message, which pops out in a tooltip and overriding the error color to modify the default looks of the validation.
 We will also style the background of the invalid rows to make them more distinct.
@@ -677,21 +677,21 @@ public cellStyles = {
 ## Additional Resources
 
 <PlatformBlock for="Angular">
-- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md)
+- [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.mdx)
 
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Row Editing](row-editing.md)
-- [{ComponentTitle} Row Adding](row-adding.md)
-- [{ComponentTitle} Transactions](batch-editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Row Editing](row-editing.mdx)
+- [{ComponentTitle} Row Adding](row-adding.mdx)
+- [{ComponentTitle} Transactions](batch-editing.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Row Editing](row-editing.md)
-- [{ComponentTitle} Row Adding](row-adding.md)
-- [{ComponentTitle} Transactions](batch-editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Row Editing](row-editing.mdx)
+- [{ComponentTitle} Row Adding](row-adding.mdx)
+- [{ComponentTitle} Transactions](batch-editing.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx
index fd965d9330..402e1123ec 100644
--- a/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx
+++ b/docs/xplat/src/content/en/components/grids/_shared/virtualization.mdx
@@ -44,7 +44,7 @@ Explicitly setting column widths in percentages (%) will, in most cases, create
 <PlatformBlock for="Angular">
 ## Remote Virtualization
 
-The <ApiLink type="{ComponentName}" /> supports remote virtualization, which is demonstrated in the [Remote Data Operations](remote-data-operations.md) topic.
+The <ApiLink type="{ComponentName}" /> supports remote virtualization, which is demonstrated in the [Remote Data Operations](remote-data-operations.mdx) topic.
 
 </PlatformBlock>
 
@@ -103,14 +103,14 @@ Without information about the sizes of the container and the items before render
 <ApiLink type="Column" />
 ## Additional Resources
 
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx
index 458438e732..11b171e201 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx
@@ -104,8 +104,8 @@ To get started with the {Platform} Data Grid, first you need to install the `{Pa
 
 Please refer to these topics on adding the IgniteUI.Blazor package:
 
-- [Getting Started](../general-getting-started-blazor-client.md)
-- [Adding Nuget Package](../general-nuget-feed.md)
+- [Getting Started](../general-getting-started-blazor-client.mdx)
+- [Adding Nuget Package](../general-nuget-feed.mdx)
 
 You also need to include the following CSS link in the index.html file of your application to provide the necessary styles to the grid:
 
@@ -164,7 +164,7 @@ import { IgrGrid } from "igniteui-react-grids";
 ```
 </PlatformBlock>
 
-The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../themes/overview.md) and based on your project configuration to import it:
+The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../themes/overview.mdx) and based on your project configuration to import it:
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -187,7 +187,7 @@ Or to link it:
 
 </PlatformBlock>
 
-For more details on how to customize the appearance of the grid, you may have a look at the [styling](data-grid.md#styling-{PlatformLower}-grid) section.
+For more details on how to customize the appearance of the grid, you may have a look at the [styling](./data-grid.mdx#styling-{PlatformLower}-grid) section.
 
 
 </PlatformBlock>
@@ -302,7 +302,7 @@ The <ApiLink type="GridBaseDirective" member="autoGenerate" label="AutoGenerate"
 
 Each operation for grid editing includes batch operations, meaning the API gives you the option to group edits into a single server call, or you can perform grid edit / update operations as they occur with grid interactions. Along with a great developer experience as an editable grid with CRUD operations, the grid includes Excel-like keyboard navigation. Common default grid navigation is included, plus the option to override any navigation option to meet the needs of your customers. An editable grid in with a great navigation scheme is critical to any modern line of business application, with the Ignite UI grid we make it easy.
 
-Following this topic you will learn more about [cell template](data-grid.md#cell-template) and [cell editing template](data-grid.md#cell-editing-template) and editing.
+Following this topic you will learn more about [cell template](./data-grid.mdx#cell-template) and [cell editing template](./data-grid.mdx#cell-editing-template) and editing.
 
 ## Grid Column Configuration
 
@@ -743,7 +743,7 @@ function formatTitleCase(value) {
 
 
 
-When changing data through the **cell template** using `ngModel`, you need to call the appropriate API methods to make sure the value is correctly updated in the Angular grid's underlying data collection. In the snippet above, the `ngModelChange` call passes through the grid's [editing API](grid/cell-editing.md#editing-through-api) and goes through the grid's editing pipeline, properly triggering [transactions](grid/batch-editing.md)(if applicable) and handling of [summaries](grid/summaries.md), [selection](grid/selection.md), etc. However, this `ngModelChange` will fire every time the value of the cell changes, not just when the user is done editing, resulting in a lot more API calls.
+When changing data through the **cell template** using `ngModel`, you need to call the appropriate API methods to make sure the value is correctly updated in the Angular grid's underlying data collection. In the snippet above, the `ngModelChange` call passes through the grid's [editing API](./_shared/cell-editing.mdx#editing-through-api) and goes through the grid's editing pipeline, properly triggering [transactions](./_shared/batch-editing.mdx)(if applicable) and handling of [summaries](./_shared/summaries.mdx), [selection](./_shared/selection.mdx), etc. However, this `ngModelChange` will fire every time the value of the cell changes, not just when the user is done editing, resulting in a lot more API calls.
 
 
 </PlatformBlock>
@@ -763,7 +763,7 @@ If the data in a cell is bound with `[(ngModel)]` and the value change is not ha
 </PlatformBlock>
 
 
-When properly implemented, the cell editing template also ensures that the cell's <ApiLink type="CellType" member="editValue" label="EditValue" /> will correctly pass through the grid [editing event cycle](grid/editing.md#event-arguments-and-sequence).
+When properly implemented, the cell editing template also ensures that the cell's <ApiLink type="CellType" member="editValue" label="EditValue" /> will correctly pass through the grid [editing event cycle](./_shared/editing.mdx#event-arguments-and-sequence).
 
 ### Cell Editing Template
 
@@ -1179,7 +1179,7 @@ const columnPipeArgs: IgrColumnPipeArgs = {
 
 The `OrderDate` column will respect only the <ApiLink type="ColumnPipeArgs" member="format" label="Format" /> and <ApiLink type="ColumnPipeArgs" member="timezone" label="Timezone" /> properties, while the `UnitPrice` will only respect the <ApiLink type="ColumnPipeArgs" member="digitsInfo" label="DigitsInfo" />.
 
-All available column data types could be found in the official [Column types topic](grid/column-types.md#default-template).
+All available column data types could be found in the official [Column types topic](./_shared/column-types.mdx#default-template).
 
 
 <PlatformBlock for="Angular, WebComponents, React">
@@ -2326,9 +2326,9 @@ Keyboard navigation of the <ApiLink type="Grid" /> provides a rich variety of ke
 
 Check out these resources for more information:
 
-- [Grid Keyboard Navigation](grid/keyboard-navigation.md)
-- [TreeGrid Keyboard Navigation](tree-grid/keyboard-navigation.md)
-- [Hierarchical Grid Keyboard Navigation](hierarchical-grid/keyboard-navigation.md)
+- [Grid Keyboard Navigation](./_shared/keyboard-navigation.mdx)
+- [TreeGrid Keyboard Navigation](./tree-grid/keyboard-navigation.mdx)
+- [Hierarchical Grid Keyboard Navigation](./hierarchical-grid/keyboard-navigation.mdx)
 - [Blog post](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation
 
 
@@ -2343,7 +2343,7 @@ Check out these resources for more information:
 
 ## State Persistence
 
-Achieving a state persistence framework is easier than ever by using the new built-in [GridState](state-persistence.md) directive.
+Achieving a state persistence framework is easier than ever by using the new built-in [GridState](./state-persistence.mdx) directive.
 
 
 </PlatformBlock>
@@ -2352,7 +2352,7 @@ Achieving a state persistence framework is easier than ever by using the new bui
 {/* The sizing topic is still not available, so the Sizing section is commented out. */}
 {/* ## Sizing
 
-See the [Grid Sizing](sizing.md) topic. */}
+See the [Grid Sizing](./sizing.mdx) topic. */}
 
 
 
@@ -2390,7 +2390,7 @@ Enabling it can affects other parts of an Angular application that the `IgxGridC
 <PlatformBlock for="WebComponents, Blazor, React">
 
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../grids/theming-grid.md). In case you would like to change the header background and text color, you need to set a class for the grid first:
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](./grid/theming-grid.mdx). In case you would like to change the header background and text color, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
 ```html
@@ -2497,18 +2497,18 @@ Learn more about creating a {Platform} <ApiLink type="GridToolbar" member="grid"
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
-{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+- [Grid Sizing](./_shared/sizing.mdx)
+- [Virtualization and Performance](./_shared/virtualization.mdx)
+- [Paging](./_shared/paging.mdx)
+- [Filtering](./_shared/filtering.mdx)
+- [Sorting](./_shared/sorting.mdx)
+- [Summaries](./_shared/summaries.mdx)
+- [Column Moving](./_shared/column-moving.mdx)
+- [Column Pinning](./_shared/column-pinning.mdx)
+- [Column Resizing](./_shared/column-resizing.mdx)
+- [Selection](./_shared/selection.mdx)
+- [Column Data Types](./_shared/column-types.mdx#default-template)
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.mdx) */}
 
 
 </PlatformBlock>
@@ -2519,17 +2519,17 @@ Learn more about creating a {Platform} <ApiLink type="GridToolbar" member="grid"
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
+- [Grid Sizing](./_shared/sizing.mdx)
+- [Virtualization and Performance](./_shared/virtualization.mdx)
+- [Paging](./_shared/paging.mdx)
+- [Filtering](./_shared/filtering.mdx)
+- [Sorting](./_shared/sorting.mdx)
+- [Summaries](./_shared/summaries.mdx)
+- [Column Moving](./_shared/column-moving.mdx)
+- [Column Pinning](./_shared/column-pinning.mdx)
+- [Column Resizing](./_shared/column-resizing.mdx)
+- [Selection](./_shared/selection.mdx)
+- [Column Data Types](./_shared/column-types.mdx#default-template)
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
index 95cde311f7..cbdf4c118e 100644
--- a/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/groupby.mdx
@@ -602,7 +602,7 @@ Groups that span multiple pages are split between them. The group row is visible
 
 ## Group By With Summaries
 
-Integration between Group By and Summaries is described in the [Summaries](summaries.md#summaries-with-group-by) topic.
+Integration between Group By and Summaries is described in the [Summaries](../_shared/summaries.mdx#summaries-with-group-by) topic.
 
 ## Keyboard Navigation
 
@@ -715,7 +715,7 @@ grid.groupingExpressions = [
 ## Styling
 
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](./theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -763,7 +763,7 @@ Then set the related CSS properties for that class:
 
 <PlatformBlock for="Angular">
 
-The Grid allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's theme exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The Grid allows styling through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's theme exposes a wide variety of properties, which allow the customization of all the features of the grid.
 
 In the below steps, we are going through the steps of customizing the grid's Group By styling.
 
@@ -850,7 +850,7 @@ $custom-chips-theme: chip-theme(
 
 ### Defining Custom Schemas
 
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.mdx). The **schema** is the recipe of a theme.
 Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
 
 ```scss
@@ -896,7 +896,7 @@ In order for the custom theme to affect only specific component, you can move al
 This way, due to {Platform}'s [ViewEncapsulation](https://{Platform}.io/api/core/Component#encapsulation), your styles will be applied only to your custom component.
 
  <DocsAside type="info">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info">
@@ -940,15 +940,15 @@ The sample will not be affected by the selected global theme from **Change Theme
 <ApiLink pkg="core" type="Chip" />
 ## Additional Resources
 
-- [Grid overview](../data-grid.md)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Column Moving](column-moving.md)
-- [Summaries](summaries.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Grid overview](../data-grid.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Paging](../_shared/paging.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
index 37e3a9b6f8..62ad7a6e70 100644
--- a/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/paste-excel.mdx
@@ -668,7 +668,7 @@ export class PasteHandler {
 <ApiLink type="Grid" />
 ## Additional Resources
 
-- [Excel Exporter](export-excel.md) - Use the Excel Exporter service to export data to Excel from Grid. It also provides the option to only export the selected data from the Grid. The exporting functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the ExcelExporterService's export method and pass the Grid component as first argument.
+- [Excel Exporter](../_shared/export-excel.mdx) - Use the Excel Exporter service to export data to Excel from Grid. It also provides the option to only export the selected data from the Grid. The exporting functionality is encapsulated in the ExcelExporterService class and the data is exported in MS Excel table format. This format allows features like filtering, sorting, etc. To do this you need to invoke the ExcelExporterService's export method and pass the Grid component as first argument.
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
index fb1b4858b3..e53df24ae1 100644
--- a/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/selection-based-aggregates.mdx
@@ -72,14 +72,14 @@ Change the selection to see summaries of the currently selected range.
 
 ## Additional Resources
 
-- [Grid overview](../data-grid.md)
+- [Grid overview](../data-grid.mdx)
 - [Selection Service]({environment:{Platform}ApiUrl}/classes/gridselectionservice.html)
-- [Row Selection](row-selection.md)
-- [Cell Selection](cell-selection.md)
+- [Row Selection](../_shared/row-selection.mdx)
+- [Cell Selection](../_shared/cell-selection.mdx)
 - [NumberSummaryOperand]({environment:{Platform}ApiUrl}/classes/numbersummaryoperand.html)
 - [DateSummaryOperand]({environment:{Platform}ApiUrl}/classes/datesummaryoperand.html)
-- [Summaries](summaries.md)
-- [Paging](paging.md)
+- [Summaries](../_shared/summaries.mdx)
+- [Paging](../_shared/paging.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
index 59b0e59a27..3391141132 100644
--- a/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/grid/theming-grid.mdx
@@ -124,18 +124,18 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
-{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Paging](../_shared/paging.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.mdx) */}
 
 
 </PlatformBlock>
@@ -146,17 +146,17 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Paging](../_shared/paging.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/grids-header.mdx b/docs/xplat/src/content/en/components/grids/grids-header.mdx
index ed8ef4923d..6133385bf8 100644
--- a/docs/xplat/src/content/en/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids-header.mdx
@@ -44,41 +44,41 @@ Here are a few of the data grid’s key features:
 
 <ul class="features-simple-list" id="features-list">
     <li>
-        [Virtualized Rows and Columns](grid/virtualization.md) so you can load millions of records
+        [Virtualized Rows and Columns](./_shared/virtualization.mdx) so you can load millions of records
     </li>
 
     <li>
-        [Inline Editing](grid/editing.md) with [Cell](grid/cell-editing.md), and [Row](grid/row-editing.md) Update options
+        [Inline Editing](./_shared/editing.mdx) with [Cell](./_shared/cell-editing.mdx), and [Row](./_shared/row-editing.mdx) Update options
     </li>
 
     <li>
-        [Inline Editing](grid/editing.md) with [Cell](grid/cell-editing.md)
+        [Inline Editing](./_shared/editing.mdx) with [Cell](./_shared/cell-editing.mdx)
     </li>
 
     {/*Add back when batch editing is available>*/}
-    {/* <li>[**Inline Editing**](grid/editing.md) with [**Cell**](grid/cell-editing.md), [**Row**](grid/row-editing.md), and [**Batch**](grid/batch-editing.md) Update options</li> */}
+    {/* <li>[**Inline Editing**](./_shared/editing.mdx) with [**Cell**](./_shared/cell-editing.mdx), [**Row**](./_shared/row-editing.mdx), and [**Batch**](./_shared/batch-editing.mdx) Update options</li> */}
 
     <li>
-        [Excel-style Filtering](grid/excel-style-filtering.md) and full [Excel Keyboard Navigation](grid/keyboard-navigation.md) capability
+        [Excel-style Filtering](./_shared/excel-style-filtering.mdx) and full [Excel Keyboard Navigation](./_shared/keyboard-navigation.mdx) capability
     </li>
 
     <li>
-        Interactive [Outlook-style Grouping](grid/groupby.md)
+        Interactive [Outlook-style Grouping](./grid/groupby.mdx)
     </li>
 
     <li>
-        [Column Summaries](grid/summaries.md) based on any data in a grid cell or column
+        [Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column
     </li>
 
     <li>
-        [Export to Excel](grid/export-excel.md)
+        [Export to Excel](./_shared/export-excel.mdx)
     </li>
 
     <li>
-        [Size](grid/size.md) to adjust the height and sizing of the rows
+        [Size](./_shared/size.mdx) to adjust the height and sizing of the rows
     </li>
 
-    {/* <li>Column templates like [**Sparkline Column**](charts/types/sparkline-chart.md) and Image Column</li> */}
+    {/* <li>Column templates like [**Sparkline Column**](./charts/types/sparkline-chart.mdx) and Image Column</li> */}
 </ul>
 
 ### Data Virtualization and Performance
@@ -98,7 +98,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     imagePosition="right"
     title="{Platform} Grid Paging, Sorting, Filtering, & Searching"
 >
-<p>Allow users to navigate your data set with our default [pager](grid/paging.md) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](grid/search.md) on the grid, and several [advanced filtering](grid/advanced-filtering.md) options, including data-type based [Microsoft Excel-style Filtering](grid/excel-style-filtering.md).</p>
+<p>Allow users to navigate your data set with our default [pager](./_shared/paging.mdx) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](./_shared/search.mdx) on the grid, and several [advanced filtering](./_shared/advanced-filtering.mdx) options, including data-type based [Microsoft Excel-style Filtering](./_shared/excel-style-filtering.mdx).</p>
 </Feature>
 
 <Feature
@@ -107,7 +107,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     imageTitle="Animation of filtering capabilities within {Platform} Data Grid"
     title="Inline {Platform} Grid Editing"
 >
-<p>We provide you default [cell templates for editable columns](data-grid.md#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.</p>
+<p>We provide you default [cell templates for editable columns](./data-grid.mdx#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.</p>
 </Feature>
 
 <Feature
@@ -117,7 +117,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     imagePosition="right"
     title="Keyboard Navigation & Row/Cell Selection"
 >
-<p>Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](grid/keyboard-navigation.md) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. <a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Learn about our most recent enhancements to this feature</a>.</p>
+<p>Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](./_shared/keyboard-navigation.mdx) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. <a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Learn about our most recent enhancements to this feature</a>.</p>
 </Feature>
 
 <Feature
@@ -136,7 +136,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     imagePosition="right"
     title="Column Grouping, Pinning, Summaries"
 >
-<p>Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](grid/summaries.md) or custom summary templates. Enable users to interactively [hide](grid/column-hiding.md) or [move columns](grid/column-moving.md), with full support for interactive [column pinning](grid/column-pinning.md), during move, drag, and reorder operations.</p>
+<p>Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](./_shared/summaries.mdx) or custom summary templates. Enable users to interactively [hide](./_shared/column-hiding.mdx) or [move columns](./_shared/column-moving.mdx), with full support for interactive [column pinning](./_shared/column-pinning.mdx), during move, drag, and reorder operations.</p>
 </Feature>
 
 <Feature
@@ -145,7 +145,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     imageTitle="Grid of data with Multi-Column Headers feature enabled"
     title="Multi-Column Headers"
 >
-<p>Enable [multi-column headers](grid/multi-column-headers.md), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.</p>
+<p>Enable [multi-column headers](./_shared/multi-column-headers.mdx), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.</p>
 </Feature>
 
 <PlatformBlock for="Angular">
@@ -176,7 +176,7 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
     title="Excel Library for the {Platform} Grid"
 >
     <div id="list-features">
-<p>Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.</p>
+<p>Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](./excel-library.mdx) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.</p>
     </div>
 </Feature>
 
@@ -187,106 +187,106 @@ Seamlessly scroll through unlimited rows and columns in your {Platform} grid, wi
 <ul>
 <li>
 
-[Inline Editing](grid/editing.md)
+[Inline Editing](./_shared/editing.mdx)
 
 </li>
 
 <li>
 
-[Row and Column Filtering](grid/filtering.md)
+[Row and Column Filtering](./_shared/filtering.mdx)
 
 </li>
 <li>
 
-[Grid Sorting](grid/sorting.md)
+[Grid Sorting](./_shared/sorting.mdx)
 </li>
 
 <li>
 
-[Column Grouping](grid/groupby.md)
+[Column Grouping](./grid/groupby.mdx)
 
 </li>
 <li>
 
-[Column Summaries](grid/summaries.md)
+[Column Summaries](./_shared/summaries.mdx)
 
 </li>
 <li>
 
-[Fixed/Pinned Columns](grid/column-pinning.md)
+[Fixed/Pinned Columns](./_shared/column-pinning.mdx)
 
 </li>
 </ul>
 <ul>
 <li>
 
-[Column Moving](grid/column-moving.md)
+[Column Moving](./_shared/column-moving.mdx)
 
 </li>
 <li>
 
-[Cell Copy and Paste](grid/clipboard-interactions.md)
+[Cell Copy and Paste](./_shared/clipboard-interactions.mdx)
 
 </li>
 <li>
 
-[Cell Styling](grid/conditional-cell-styling.md)
+[Cell Styling](./_shared/conditional-cell-styling.mdx)
 
 </li>
 <li>
 
-[Real-time/Live Data Theming](grid/live-data.md)
+[Real-time/Live Data Theming](./_shared/live-data.mdx)
 
 </li>
-    {/* <li>[Custom Grid Toolbar](grid/toolbar.md)</li> */}
+    {/* <li>[Custom Grid Toolbar](./_shared/toolbar.mdx)</li> */}
 <li>
 
-[Grid Paging](grid/paging.md)
+[Grid Paging](./_shared/paging.mdx)
 
 </li>
 <li>
 
-[Row Selection](grid/selection.md)
+[Row Selection](./_shared/selection.mdx)
 
 </li>
 <li>
 
-[Cell Selection](grid/cell-selection.md)
+[Cell Selection](./_shared/cell-selection.mdx)
 
 </li>
 </ul>
 <ul>
 <li>
 
-[Grid-level Searching](grid/search.md)
+[Grid-level Searching](./_shared/search.mdx)
 
 </li>
-    {/* <li>[Export to Excel, CSV, TSV](exporter-excel.md)</li> */}
+    {/* <li>[Export to Excel, CSV, TSV](./exporter-excel.mdx)</li> */}
 <li>
 
-[Multi-Column Headers](grid/multi-column-headers.md)
+[Multi-Column Headers](./_shared/multi-column-headers.mdx)
 
 </li>
-    {/* <li>[Combo Box/Dropdown](combo.md)</li> */}
+    {/* <li>[Combo Box/Dropdown](./combo.mdx)</li> */}
 <li>
 
-[Virtualization and Performance](grid/virtualization.md)
+[Virtualization and Performance](./_shared/virtualization.mdx)
 
 </li>
 <li>
 
-[Resizable Columns](grid/column-resizing.md)
+[Resizable Columns](./_shared/column-resizing.mdx)
 
 </li>
 
 <li>
 
-[Column Hiding](grid/column-hiding.md)
+[Column Hiding](./_shared/column-hiding.mdx)
 
 </li>
-    {/* <li>[Remote Data Load on Demand](grid/virtualization.md#remote-virtualization)</li> */}
-{/*    <!-- <li>[Cell Templates](data-grid.md#cell-template)</li>
-    <li>[ARIA/a11y Support](interactivity/accessibility-compliance.md)</li> */}
+    {/* <li>[Remote Data Load on Demand](./_shared/virtualization.mdx#remote-virtualization)</li> */}
+{/*    <!-- <li>[Cell Templates](./data-grid.mdx#cell-template)</li>
+    <li>[ARIA/a11y Support](./interactivity/accessibility-compliance.mdx)</li> */}
 </ul>
 </FeatureList>
 
@@ -306,7 +306,7 @@ The {Platform} Data Grid is supported on all modern web browsers, including:
 There are multiple options to get access to our award-winning support at Infragistics for the {Platform} product.
 
 - Start at the {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/support/ignite-ui-angular-help">Support</a> home page
-- Read the {Platform} [Documentation](../general-getting-started.md) and experiment with {Platform} Samples
+- Read the {Platform} [Documentation](../general-getting-started.mdx) and experiment with {Platform} Samples
 - Read the<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/community/blogs/tags/Ignite%2bUI%2bfor%2b{Platform}"> {Platform} Blogs</a> to stay up to date
 - Submit a <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/grid-table"> Support Case</a>
 - Learn from the {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">Reference Applications</a>
@@ -321,13 +321,13 @@ There are multiple options to get access to our award-winning support at Infragi
     <igc-expansion-panel indicator-position="end">
         <span class="igd-expansion-title" slot="title">Why should I choose the Infragistics {ProductName} Data Grid?</span>
         <ul>
-            <li>[Virtualized Rows and Columns](grid/virtualization.md) so you can load millions of records</li>
-            <li>[Inline Editing](grid/row-editing.md) with Cell, Row</li>
-            <li>[Excel-style Filtering](grid/excel-style-filtering.md) and full [Excel Keyboard Navigation](grid/keyboard-navigation.md) capability</li>
-            <li>Interactive [Outlook-style Grouping](grid/groupby.md)</li>
-            <li>[Column Summaries](grid/summaries.md) based on any data in a grid cell or column</li>
-            <li>[Export to Excel](grid/export-excel.md)</li>
-            <li>[Size](grid/size.md) to adjust the height and sizing of the rows</li>
+            <li>[Virtualized Rows and Columns](./_shared/virtualization.mdx) so you can load millions of records</li>
+            <li>[Inline Editing](./_shared/row-editing.mdx) with Cell, Row</li>
+            <li>[Excel-style Filtering](./_shared/excel-style-filtering.mdx) and full [Excel Keyboard Navigation](./_shared/keyboard-navigation.mdx) capability</li>
+            <li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
+            <li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
+            <li>[Export to Excel](./_shared/export-excel.mdx)</li>
+            <li>[Size](./_shared/size.mdx) to adjust the height and sizing of the rows</li>
         </ul>
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
@@ -341,6 +341,6 @@ There are multiple options to get access to our award-winning support at Infragi
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
         <span class="igd-expansion-title" slot="title">How do I Install {Platform} and the Infragistics {ProductName} Data Grid control?</span>
-        <p>To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](../general-getting-started.md). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.</p>
+        <p>To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](../general-getting-started.mdx). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.</p>
     </igc-expansion-panel>
 </FaqAccordion>
diff --git a/docs/xplat/src/content/en/components/grids/grids.mdx b/docs/xplat/src/content/en/components/grids/grids.mdx
index 24e3f70f14..04d86219af 100644
--- a/docs/xplat/src/content/en/components/grids/grids.mdx
+++ b/docs/xplat/src/content/en/components/grids/grids.mdx
@@ -241,21 +241,21 @@ This example demonstrates a few of the data grid’s key features:
 
 
 <ul id="features-list">
-<li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
+<li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
 
-<li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
+<li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
 
-<li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
+<li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
 
-<li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
+<li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
 
-<li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
+<li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
 
 <PlatformBlock for="React, WebComponents">
-<li>Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)</li>
+<li>Export to Excel, including [Data Visualization](../excel-library-working-with-charts.mdx)</li>
 </PlatformBlock>
 
-<li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+<li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
 
 <li>Full touch support for mobile app development</li>
 </ul>
@@ -307,8 +307,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid includes every option for mouse and [touch-driven selection](data-grid/cell-selection.md) by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid includes every option for mouse and [touch-driven selection](./_shared/cell-selection.mdx) by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.</p>
     </div>
 </div>
 
@@ -319,8 +319,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid has the ability to configure [mouse and touch-driven selection](data-grid/cell-selection.md) for both cells and rows. You can select either single or multiple cells and rows, and the ability to use range selection is also available.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid has the ability to configure [mouse and touch-driven selection](./_shared/cell-selection.mdx) for both cells and rows. You can select either single or multiple cells and rows, and the ability to use range selection is also available.</p>
     </div>
 </div>
 
@@ -331,8 +331,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid component includes the options to [select rows and cells](data-grid/cell-selection.md) using both the user’s mouse and touchscreen. The available modes for cell and row selection include MultipleCell, MultipleRow, SingleCell, SingleRow, and RangeCell.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid component includes the options to [select rows and cells](./_shared/cell-selection.mdx) using both the user’s mouse and touchscreen. The available modes for cell and row selection include MultipleCell, MultipleRow, SingleCell, SingleRow, and RangeCell.</p>
     </div>
 </div>
 
@@ -347,8 +347,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
         <Image src={gridFiltering} alt="Icon of filtering capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid includes [column filtering](data-grid/column-filtering.md) based on the data type of the column being filtered. For example, if your column is a DateTime field you can use filters like Last Month, This Quarter, Next Week, etc.</p>
+        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid includes [column filtering](./_shared/filtering.mdx) based on the data type of the column being filtered. For example, if your column is a DateTime field you can use filters like Last Month, This Quarter, Next Week, etc.</p>
     </div>
 </div>
 
@@ -361,8 +361,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
         <Image src={gridFiltering} alt="Icon of filtering capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The user has the in-built ability to [filter columns](data-grid/column-filtering.md) based on data type in the {Platform} Data Grid. For example, if your column represents a numeric property, you can use filtering options like Greater Than, Less Than, Equal To, etc.</p>
+        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The user has the in-built ability to [filter columns](./_shared/filtering.mdx) based on data type in the {Platform} Data Grid. For example, if your column represents a numeric property, you can use filtering options like Greater Than, Less Than, Equal To, etc.</p>
     </div>
 </div>
 
@@ -375,8 +375,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
         <Image src={gridFiltering} alt="Icon of filtering capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid allows users to [filter its columns](data-grid/column-filtering.md) with the data type as criteria for the filters applied. For example, if your column represents a string property of your data item, you can use filtering options such as Contains, Starts With, Ends With, etc.</p>
+        <span class="h3 features__heading">{Platform} Grid Filtering<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid allows users to [filter its columns](./_shared/filtering.mdx) with the data type as criteria for the filters applied. For example, if your column represents a string property of your data item, you can use filtering options such as Contains, Starts With, Ends With, etc.</p>
     </div>
 </div>
 
@@ -389,8 +389,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="Animation of column moving functionality within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Rearranging [column order](data-grid/column-moving.md) is as easy as Click and Drag in the {Platform} Data Grid. We’ve also included a complete animation engine, giving you control over the UX of this interaction.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Rearranging [column order](./_shared/column-moving.mdx) is as easy as Click and Drag in the {Platform} Data Grid. We’ve also included a complete animation engine, giving you control over the UX of this interaction.</p>
     </div>
 </div>
 
@@ -401,8 +401,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="Animation of column moving functionality within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Users can [modify the order](data-grid/column-moving.md) that columns appear in the {Platform} Data Grid simply by clicking and dragging the column headers. We have also included the option to use a built-in animation for this column movement.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Users can [modify the order](./_shared/column-moving.mdx) that columns appear in the {Platform} Data Grid simply by clicking and dragging the column headers. We have also included the option to use a built-in animation for this column movement.</p>
     </div>
 </div>
 
@@ -413,8 +413,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="Animation of column moving functionality within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid has the in-built ability to click and drag your columns in order to [reorder and rearrange them](data-grid/column-moving.md). While dragging the columns, the ability to animate the column moving is available for more control of the user experience of your application.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Moving<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid has the in-built ability to click and drag your columns in order to [reorder and rearrange them](./_shared/column-moving.mdx). While dragging the columns, the ability to animate the column moving is available for more control of the user experience of your application.</p>
     </div>
 </div>
 
@@ -428,8 +428,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="Icon of column pinning functionality within the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>With Right and Left [column pinning](data-grid/column-pinning.md) in the {Platform} Data Grid, users can lock a single column or multiple columns in any order, so that the column maintains position, while scrolling horizontally.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>With Right and Left [column pinning](./_shared/column-pinning.mdx) in the {Platform} Data Grid, users can lock a single column or multiple columns in any order, so that the column maintains position, while scrolling horizontally.</p>
     </div>
 </div>
 
@@ -441,8 +441,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="Icon of column pinning functionality within the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports the ability to [pin columns](data-grid/column-pinning.md) to the left or right side of the table. Doing this will lock as many columns as are pinned in their position while the user scrolls horizontally.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports the ability to [pin columns](./_shared/column-pinning.mdx) to the left or right side of the table. Doing this will lock as many columns as are pinned in their position while the user scrolls horizontally.</p>
     </div>
 </div>
 
@@ -454,8 +454,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="Icon of column pinning functionality within the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The ability to [fix columns](data-grid/column-pinning.md) to the left or right side is present in the {Platform} Data Grid component. When a column is fixed or pinned, it will maintain its position while the user scrolls the grid horizontally.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Pinning<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The ability to [fix columns](./_shared/column-pinning.mdx) to the left or right side is present in the {Platform} Data Grid component. When a column is fixed or pinned, it will maintain its position while the user scrolls the grid horizontally.</p>
     </div>
 </div>
 
@@ -468,8 +468,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="Grid of data with column resizing features enabled for {Platform} Data Grid component" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports the ability to [resize columns](data-grid/column-resizing.md), giving your customers flexibility over how they display the Data Grid columns, with respect to the other columns in the table.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports the ability to [resize columns](./_shared/column-resizing.mdx), giving your customers flexibility over how they display the Data Grid columns, with respect to the other columns in the table.</p>
     </div>
 </div>
 
@@ -480,8 +480,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="Grid of data with column resizing features enabled for {Platform} Data Grid component" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid has the in-built ability to give users the ability to click and drag column borders in order to [resize them](data-grid/column-resizing.md). An animation engine also exists so that you can optionally animate the resizing of the columns.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid has the in-built ability to give users the ability to click and drag column borders in order to [resize them](./_shared/column-resizing.mdx). An animation engine also exists so that you can optionally animate the resizing of the columns.</p>
     </div>
 </div>
 
@@ -492,8 +492,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="Grid of data with column resizing features enabled for {Platform} Data Grid component" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid allows your users to [resize the columns](data-grid/column-resizing.md) that exist in the grid. The data table is feature rich in this area in that the user can configure the resizing mode such that the resizing operation either happens immediately or is deferred until the drag is released.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Resizing<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid allows your users to [resize the columns](./_shared/column-resizing.mdx) that exist in the grid. The data table is feature rich in this area in that the user can configure the resizing mode such that the resizing operation either happens immediately or is deferred until the drag is released.</p>
     </div>
 </div>
 
@@ -506,8 +506,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="Grid of data with column sorting features enabled on the {Platform} Data Grid component" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports ascending and descending [column sorting](data-grid/column-sorting.md) with a Single, Multi or Tri-State Column Sorting configuration. Sorting is triggered on header click or using the Column Options dropdown.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports ascending and descending [column sorting](./_shared/sorting.mdx) with a Single, Multi or Tri-State Column Sorting configuration. Sorting is triggered on header click or using the Column Options dropdown.</p>
     </div>
 </div>
 
@@ -518,8 +518,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="Grid of data with column sorting features enabled on the {Platform} Data Grid component" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The ability to [sort column data](data-grid/column-sorting.md) in ascending or descending order is available in the {Platform} Data Grid. The user has the ability to sort with a Single, Multi, or Tri-State column sorting configuration and sorting is triggered by default by clicking the header.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The ability to [sort column data](./_shared/sorting.mdx) in ascending or descending order is available in the {Platform} Data Grid. The user has the ability to sort with a Single, Multi, or Tri-State column sorting configuration and sorting is triggered by default by clicking the header.</p>
     </div>
 </div>
 
@@ -530,8 +530,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="Blazor sortable grid example" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Looking for a {Platform} sortable grid for your project? The {ProductName} Data Grid component has the in-built ability to [sort column data](data-grid/column-sorting.md) with the configuration of the sorting between Single, Multi, and Tri-State also being available. Sorting a particular column in the grid by default is done by clicking the column header, but you can also do this by using the column options dialog.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Sorting<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Looking for a {Platform} sortable grid for your project? The {ProductName} Data Grid component has the in-built ability to [sort column data](./_shared/sorting.mdx) with the configuration of the sorting between Single, Multi, and Tri-State also being available. Sorting a particular column in the grid by default is done by clicking the column header, but you can also do this by using the column options dialog.</p>
     </div>
 </div>
 
@@ -544,8 +544,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="Icon of column summary functionality of the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports [column summaries](data-grid/column-summaries.md) in the footer area of the Data Grid, or in the Group Headers. This is great for showing values like Count, Sum, Min, Max, Avg, etc.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports [column summaries](./_shared/summaries.mdx) in the footer area of the Data Grid, or in the Group Headers. This is great for showing values like Count, Sum, Min, Max, Avg, etc.</p>
     </div>
 </div>
 
@@ -556,8 +556,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="Icon of column summary functionality of the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>[Column summaries](data-grid/column-summaries.md) are available for display in the footer area of the {Platform} Data Grid, with configurable options to show them in group headers as well. This is useful for showing the Sum, Minimum, and Maximum of numeric data, among other summary options.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>[Column summaries](./_shared/summaries.mdx) are available for display in the footer area of the {Platform} Data Grid, with configurable options to show them in group headers as well. This is useful for showing the Sum, Minimum, and Maximum of numeric data, among other summary options.</p>
     </div>
 </div>
 
@@ -568,8 +568,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="Icon of column summary functionality of the {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The user has the in-built ability to apply [column summaries](data-grid/column-summaries.md) in the {Platform} Data Grid component. These summaries have the ability to display the Sum, Minimum, Maximum, among others, of numeric data and can be configured to display in the footer or group headers of the grid.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Summaries<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The user has the in-built ability to apply [column summaries](./_shared/summaries.mdx) in the {Platform} Data Grid component. These summaries have the ability to display the Sum, Minimum, Maximum, among others, of numeric data and can be configured to display in the footer or group headers of the grid.</p>
     </div>
 </div>
 
@@ -583,8 +583,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="Icon representation of column type features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports a variety of [column types](data-grid/column-types.md), plus a Template Column type and a Sparkline Template type, giving you complete flexibility over the way your data is displayed in the Grid.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports a variety of [column types](./_shared/column-types.mdx), plus a Template Column type and a Sparkline Template type, giving you complete flexibility over the way your data is displayed in the Grid.</p>
     </div>
 </div>
 
@@ -596,8 +596,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="Icon representation of column type features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>There are a number of different [column types](data-grid/column-types.md) available in the {Platform} Data Grid that are specific to different data types that you may be using in your underlying data source. Additionally, there is a Template Column that allows the user complete flexibility over their UI by allowing just about anything to be placed within the cells of that column.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>There are a number of different [column types](./_shared/column-types.mdx) available in the {Platform} Data Grid that are specific to different data types that you may be using in your underlying data source. Additionally, there is a Template Column that allows the user complete flexibility over their UI by allowing just about anything to be placed within the cells of that column.</p>
     </div>
 </div>
 
@@ -609,8 +609,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="Icon representation of column type features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid allows the user to utilize a variety of data-type specific [column types](data-grid/column-types.md) to most effectively display their data. If the data is a bit more complex, there is an additional Template Column, allowing the ability to define your own cell content for the display of a particular part of the grid’s data source.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Types<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid allows the user to utilize a variety of data-type specific [column types](./_shared/column-types.mdx) to most effectively display their data. If the data is a bit more complex, there is an additional Template Column, allowing the ability to define your own cell content for the display of a particular part of the grid’s data source.</p>
     </div>
 </div>
 
@@ -625,8 +625,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="Animation of column animation functionality features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports [column animation](data-grid/column-animation.md) during events like Column Hiding or Column Moving. When Column Animation on the {Platform} Data Grid is set, the corresponding animation will fire for all of the cells in that column.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports column animation during events like Column Hiding or Column Moving. When Column Animation on the {Platform} Data Grid is set, the corresponding animation will fire for all of the cells in that column.</p>
     </div>
 </div>
 
@@ -638,8 +638,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="Animation of column animation functionality features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid component possesses the in-built ability to [animate column headers and cells](data-grid/column-animation.md) upon different actions that a user can take. For example, there are a variety of different animations available for column adding, hiding, and moving actions, among others.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid component possesses the in-built ability to animate column headers and cells upon different actions that a user can take. For example, there are a variety of different animations available for column adding, hiding, and moving actions, among others.</p>
     </div>
 </div>
 
@@ -651,8 +651,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="Animation of column animation functionality features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>[Column animations](data-grid/column-animation.md) are available in the {Platform} Data Grid component for different user actions such as column showing or hiding. Each of the user actions that can be animated has a dedicated animation property that can be set that will fire for the column header as well as all of the cells belonging to the column animated.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Animations<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Column animations are available in the {Platform} Data Grid component for different user actions such as column showing or hiding. Each of the user actions that can be animated has a dedicated animation property that can be set that will fire for the column header as well as all of the cells belonging to the column animated.</p>
     </div>
 </div>
 
@@ -666,8 +666,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="Icon of column options dialog features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports the ability to group, hide, move, pin, filter, and sort columns directly from a UI exposed on each column header. The [column options](data-grid/column-options.md) are on by default for every column, via the Kebab menu on column hover.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports the ability to group, hide, move, pin, filter, and sort columns directly from a UI exposed on each column header. The column options are on by default for every column, via the Kebab menu on column hover.</p>
     </div>
 </div>
 
@@ -679,8 +679,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="Icon of column options dialog features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>A Kebab menu is available in the column headers of the {ProductName} Data Grid that, when clicked, will open the [options dialog](data-grid/column-options.md) for that column. This dialog gives users the ability to group, sort, hide, move, pin, and filter the owning column for that dialog.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>A Kebab menu is available in the column headers of the {ProductName} Data Grid that, when clicked, will open the options dialog for that column. This dialog gives users the ability to group, sort, hide, move, pin, and filter the owning column for that dialog.</p>
     </div>
 </div>
 
@@ -692,8 +692,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="Icon of column options dialog features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Each column in the {Platform} Data Grid can be sorted, grouped, hidden, moved, and pinned from the same place – the [column options dialog](data-grid/column-options.md). Each of the column headers of the grid show a Kebab menu on mouse-hover that when clicked, will show this dialog.</p>
+        <span class="h3 features__heading">{Platform} Grid Column Options Dialog<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Each column in the {Platform} Data Grid can be sorted, grouped, hidden, moved, and pinned from the same place – the column options dialog. Each of the column headers of the grid show a Kebab menu on mouse-hover that when clicked, will show this dialog.</p>
     </div>
 </div>
 
@@ -707,8 +707,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid lets you [group rows](data-grid/row-grouping.md) into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid lets you [group rows](./grid/groupby.mdx) into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.</p>
     </div>
 </div>
 
@@ -720,8 +720,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid gives users the ability to [group rows](data-grid/row-grouping.md) into a “sticky header” Row Group. Users can visualize data items that are alike by grouping them by the columns with the similar data entries in a Microsoft Outlook-style way.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid gives users the ability to [group rows](./grid/groupby.mdx) into a “sticky header” Row Group. Users can visualize data items that are alike by grouping them by the columns with the similar data entries in a Microsoft Outlook-style way.</p>
     </div>
 </div>
 
@@ -733,8 +733,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid component includes the ability to [group columns](data-grid/row-grouping.md), directly inspired by the way groupings are visualized in Microsoft Outlook. It is also possible to group multiple columns in the grid and display them with multiple group headers or combine them all into one.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid component includes the ability to [group columns](./grid/groupby.mdx), directly inspired by the way groupings are visualized in Microsoft Outlook. It is also possible to group multiple columns in the grid and display them with multiple group headers or combine them all into one.</p>
     </div>
 </div>
 
@@ -747,8 +747,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     title="{Platform} Grid Paging"
 >
     <Image slot="image" src={gridPaging} alt="Icon of data grid paging features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
-    <span class="h3 features__heading">{Platform} Grid Paging<a class="anchorjs-link" href="data-grid/row-paging.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-    <p>The {Platform} Data Grid [Paging component](data-grid/row-paging.md) is designed to take in an array of data and output portions of that data as a page, with a simple navigation UI.</p>
+    <span class="h3 features__heading">{Platform} Grid Paging<a class="anchorjs-link" href="data-grid/row-paging.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+    <p>The {Platform} Data Grid [Paging component](./_shared/paging.mdx) is designed to take in an array of data and output portions of that data as a page, with a simple navigation UI.</p>
 </Feature>
 
 
@@ -767,8 +767,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="Animation of data grid row pinning features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid allows you to [pin rows](data-grid/row-pinning.md) to the top of the Data Grid. When a row is pinned, it will be duplicated at the top of the Data Grid and remain fixed there with a light gray background and its actual (or original) row in the Data Grid will be rendered with low opacity, making it clear to the user this is a special row.</p>
+        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid allows you to [pin rows](./_shared/row-pinning.mdx) to the top of the Data Grid. When a row is pinned, it will be duplicated at the top of the Data Grid and remain fixed there with a light gray background and its actual (or original) row in the Data Grid will be rendered with low opacity, making it clear to the user this is a special row.</p>
     </div>
 </div>
 
@@ -780,8 +780,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="Animation of data grid row pinning features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Users can decide to [pin rows](data-grid/row-pinning.md) to the top of the {Platform} Data Grid. When a row has been pinned, it will be copied to the top of the grid and remain locked to that location with a customizable background while the user scrolls vertically. The original, copied row will still be displayed in its original location, but with a lowered opacity.</p>
+        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Users can decide to [pin rows](./_shared/row-pinning.mdx) to the top of the {Platform} Data Grid. When a row has been pinned, it will be copied to the top of the grid and remain locked to that location with a customizable background while the user scrolls vertically. The original, copied row will still be displayed in its original location, but with a lowered opacity.</p>
     </div>
 </div>
 
@@ -793,8 +793,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="Animation of data grid row pinning features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid component has the in-built ability to [pin rows](data-grid/row-pinning.md) to the top of the grid, rendering them just under the headers. These rows will vertically remain there until unpinned while the user vertically scrolls the grid.</p>
+        <span class="h3 features__heading">{Platform} Grid Row Pinning<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid component has the in-built ability to [pin rows](./_shared/row-pinning.mdx) to the top of the grid, rendering them just under the headers. These rows will vertically remain there until unpinned while the user vertically scrolls the grid.</p>
     </div>
 </div>
 
@@ -808,8 +808,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="Animation of data grid keyboard navigation features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid supports extensive Excel-like [keyboard navigation](data-grid/cell-activation.md). Ensure accessibility compliance and improve usability, enabling Excel-like keyboard navigation in the {Platform} Data Grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection using the mouse or keyboard to select or de-select full rows.</p>
+        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid supports extensive Excel-like keyboard navigation. Ensure accessibility compliance and improve usability, enabling Excel-like keyboard navigation in the {Platform} Data Grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection using the mouse or keyboard to select or de-select full rows.</p>
     </div>
 </div>
 
@@ -821,8 +821,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="Animation of data grid keyboard navigation features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The user can use the left, right, up, down, Enter, and tab keys to perform Excel-inspired [keyboard navigation](data-grid/cell-activation.md) in the {Platform} Data Grid. This will improve usability for the end-user of the grid, allowing more accessible navigation and editing throughout the grid.</p>
+        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The user can use the left, right, up, down, Enter, and tab keys to perform Excel-inspired keyboard navigation in the {Platform} Data Grid. This will improve usability for the end-user of the grid, allowing more accessible navigation and editing throughout the grid.</p>
     </div>
 </div>
 
@@ -834,8 +834,8 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="Animation of data grid keyboard navigation features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid component allows users to enable [keyboard navigation](data-grid/cell-activation.md) that behaves just like in Microsoft Excel. Accessibility and usability can be improved with navigation in mind by using the arrow keys as well as the tab and Enter keys on the user’s keyboard.</p>
+        <span class="h3 features__heading">{Platform} Grid Keyboard Navigation<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid component allows users to enable keyboard navigation that behaves just like in Microsoft Excel. Accessibility and usability can be improved with navigation in mind by using the arrow keys as well as the tab and Enter keys on the user’s keyboard.</p>
     </div>
 </div>
 
@@ -848,25 +848,25 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
 </ul>
 <ul>
-    <li>[Grid Paging](data-grid/row-paging.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Remote Data Load on Demand](data-grid/remote-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Grid Paging](./_shared/paging.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Remote Data Load on Demand](./_shared/remote-data-operations.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -881,24 +881,24 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
 </ul>
 <ul>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Remote Data Load on Demand](data-grid/remote-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Remote Data Load on Demand](./_shared/remote-data-operations.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -913,23 +913,23 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
 </ul>
 <ul>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -972,7 +972,7 @@ The {ProductName} Data Grid component has built-in virtualization for the rows a
 There are multiple options to get access to our award-winning support at Infragistics for the {Platform} product.
         <ul>
             <li>Start at the {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/support/{ProductSpinal}-help">Support</a> home page</li>
-            <li>Read the {Platform} [Documentation](..\general-getting-started.md) and experiment with {Platform} Samples</li>
+            <li>Read the {Platform} [Documentation](../general-getting-started.mdx) and experiment with {Platform} Samples</li>
             <li>Read the<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/community/blogs/tags/Ignite%2bUI%2bfor%2b{Platform}"> {Platform} Blogs</a> to stay up to date</li>
             <li>Submit a <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/my-account/support-activity"> Support Case</a> after signing into your account</li>
             <li>Learn from the {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">Reference Applications</a></li>
@@ -997,13 +997,13 @@ There are multiple options to get access to our award-winning support at Infragi
         <div class="faqs-accordion h4">Why should I choose the Infragistics {ProductName} Data Grid?</div>
                 <div class="faqs-accordion-panel">
             <ul>
-                <li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
-                <li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
-                <li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
-                <li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
-                <li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
-                <li>Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)</li>
-                <li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+                <li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
+                <li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
+                <li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
+                <li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
+                <li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
+                <li>Export to Excel, including [Data Visualization](../excel-library-working-with-charts.mdx)</li>
+                <li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
                 <li>Full touch support for mobile app development</li>
             </ul>
         </div>
@@ -1027,7 +1027,7 @@ If you are developing applications on multiple platforms, consider our complete
     <div class="faqs-accordion-content">
         <div class="faqs-accordion h4">Can I purchase the Infragistics {ProductName} Data Grid control separately?</div>
                 <div class="faqs-accordion-panel">
-        To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](..\general-getting-started.md). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.
+        To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](../general-getting-started.mdx). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.
         </div>
     </div>
 </div>
@@ -1046,12 +1046,12 @@ If you are developing applications on multiple platforms, consider our complete
         <div class="faqs-accordion h4">Why should I choose the Infragistics {ProductName} Data Grid?</div>
                 <div class="faqs-accordion-panel">
             <ul>
-                <li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
-                <li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
-                <li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
-                <li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
-                <li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
-                <li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+                <li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
+                <li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
+                <li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
+                <li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
+                <li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
+                <li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
                 <li>Full touch support for mobile app development</li>
             </ul>
         </div>
@@ -1075,7 +1075,7 @@ If you are developing applications on multiple platforms, consider our complete
     <div class="faqs-accordion-content">
         <div class="faqs-accordion h4">Can I purchase the Infragistics {ProductName} Data Grid control separately?</div>
                 <div class="faqs-accordion-panel">
-        To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](..\general-getting-started.md). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.
+        To get started with the {Platform} Data Grid, follow the steps in the [getting started guide](../general-getting-started.mdx). We also maintain a library of <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">sample applications</a>, which are designed to not only inspire but are best practices guides for {Platform} development.
         </div>
     </div>
 </div>
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx
index 1983551011..4c7eee6cb2 100644
--- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx
+++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/load-on-demand.mdx
@@ -1089,7 +1089,7 @@ igRegisterScript("OnGridCreated", (args) => {
 <ApiLink type="RowIsland" />
 ## Additional Resources
 
-- [Hierarchical Grid Component](overview.md)
+- [Hierarchical Grid Component](./overview.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
index 4a679f5ec3..827a31bf9c 100644
--- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/overview.mdx
@@ -58,8 +58,8 @@ To get started with the {Platform} hierarchical grid, first you need to install
 
 Please refer to these topics on adding the IgniteUI.Blazor package:
 
-- [Getting Started](../../general-getting-started-blazor-client.md)
-- [Adding Nuget Package](../../general-nuget-feed.md)
+- [Getting Started](../../general-getting-started-blazor-client.mdx)
+- [Adding Nuget Package](../../general-nuget-feed.mdx)
 
 You also need to include the following CSS link in the index.html file of your application to provide the necessary styles to the hierarchical grid:
 
@@ -114,7 +114,7 @@ import 'igniteui-webcomponents-grids/grids/combined.js';
 
 </PlatformBlock>
 
-The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it:
+The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.mdx) and based on your project configuration to import it:
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -136,7 +136,7 @@ Or to link it:
 ```
 
 </PlatformBlock>
-For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section.
+For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](./overview.mdx#Styling) section.
 
 
 </PlatformBlock>
@@ -813,7 +813,7 @@ The Hierarchical Grid allows the users to conveniently collapse all its currentl
 {/* TODO: uncomment when sizing topic is ready */}
 {/* ## Sizing
 
-See the [Hierarchical Grid Sizing](sizing.md) topic. */}
+See the [Hierarchical Grid Sizing](../_shared/sizing.mdx) topic. */}
 
 
 <PlatformBlock for="Angular">
@@ -827,7 +827,7 @@ An important difference from the flat Data Grid is that each instance for a give
 
 Calling CRUD API methods should still be done through each separate grid instance.
 
-Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.md) topic.
+Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how-to-perform-crud.mdx) topic.
 
 </PlatformBlock>
 
@@ -837,7 +837,7 @@ Check out the How-to [Build CRUD operations with igxGrid](../general/how-to/how-
 
 
 ## Styling
-The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.md). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The igxHierarchicalGrid allows styling through the [Ignite UI for Angular Theme Library](../themes/sass/component-themes.mdx). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
 
 In the below steps, we are going through the steps of customizing the igxHierarchicalGrid styling.
 
@@ -903,7 +903,7 @@ $custom-theme: grid-theme(
 ```
 
 ### Defining custom schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.mdx). The **schema** is the recipe of a theme.
 Extend one of the two predefined schemas, that are provided for every component. In our case, we will use `$_light_grid`.
 
 ```scss
@@ -948,7 +948,7 @@ In order for the custom theme do affect only specific component, you can move al
 This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component.
 
  <DocsAside type="info">
- If the component is using an [`Emulated`](../themes/sass/component-themes.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [`Emulated`](../themes/sass/component-themes.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info">
@@ -980,7 +980,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 
 
 ## Styling
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md). In case you would like to change the header background and text color, you need to set a class for the grid first:
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](./theming-grid.mdx). In case you would like to change the header background and text color, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
 ```html
diff --git a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
index 04038f13c2..65768f8b0b 100644
--- a/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/hierarchical-grid/theming-grid.mdx
@@ -125,18 +125,17 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
-{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.mdx) */}
 
 
 </PlatformBlock>
@@ -147,17 +146,16 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx
index 273f66b458..eea407e7d2 100644
--- a/docs/xplat/src/content/en/components/grids/list.mdx
+++ b/docs/xplat/src/content/en/components/grids/list.mdx
@@ -87,7 +87,7 @@ defineComponents(IgcListComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ### Add List Items
 
@@ -473,7 +473,7 @@ The result of implementing the above code should look like the following:
 
 When slotting content into the `title` and `subtitle` slots, we recommend using `<span>` elements rather than heading elements (`<h1>`–`<h6>`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. Using a `<span>` provides a neutral container that inherits the component's styles cleanly.
 
-To achieve the best results, we recommend using the [`<igc-avatar>`](../layouts/avatar.md) component for the `start` slot, which is intended for media content. For the `end` slot, which is intended to be used for actions, we recommend using components such as [`<igc-button>`](../inputs/button.md), [`<igc-switch>`](../inputs/switch.md), [`<igc-checkbox>`](../inputs/checkbox.md), etc., depending on the type of content you want to display. However, for those two slots, you can also use plain HTML elements, such as `<img>` for the `start` slot and `<button>` or another interactive element for the `end` slot, as long as they are appropriate for the content you want to display.
+To achieve the best results, we recommend using the [`<igc-avatar>`](../layouts/avatar.mdx) component for the `start` slot, which is intended for media content. For the `end` slot, which is intended to be used for actions, we recommend using components such as [`<igc-button>`](../inputs/button.mdx), [`<igc-switch>`](../inputs/switch.mdx), [`<igc-checkbox>`](../inputs/checkbox.mdx), etc., depending on the type of content you want to display. However, for those two slots, you can also use plain HTML elements, such as `<img>` for the `start` slot and `<button>` or another interactive element for the `end` slot, as long as they are appropriate for the content you want to display.
 
 <PlatformBlock for="WebComponents">
 
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
index 7703db1603..d85d481a39 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/overview.mdx
@@ -733,7 +733,7 @@ When overriding the <ApiLink type="PivotConfiguration" member="pivotKeys" label=
 
 ## Styling
 
-The {Platform} Pivot Grid shares the same [CSS properties](../grid/theming-grid) as the base Grid. To style it, simply set the desired property values and scope them to the Pivot Grid component.
+The {Platform} Pivot Grid shares the same [CSS properties](../grid/theming-grid.mdx) as the base Grid. To style it, simply set the desired property values and scope them to the Pivot Grid component.
 
 ```css
 igc-pivot-grid {
diff --git a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
index 1d1daa7bc5..80efcaa3e5 100644
--- a/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
+++ b/docs/xplat/src/content/en/components/grids/pivot-grid/remote-operations.mdx
@@ -231,8 +231,8 @@ public noopSortStrategy = NoopSortingStrategy.instance();
 <ApiLink type="PivotDataSelector" />
 ## Additional Resources
 
-{/** [{Platform} Pivot Grid Features](pivot-grid-features.md) */}
-- [{Platform} Pivot Grid Overview](overview.md)
+{/** [{Platform} Pivot Grid Features](./pivot-grid-features.mdx) */}
+- [{Platform} Pivot Grid Overview](./overview.mdx)
 
 Our community is active and always welcoming to new ideas.
 
diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
index 4f5902d287..0af72dbf5f 100644
--- a/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree-grid/overview.mdx
@@ -62,8 +62,8 @@ To get started with the {Platform} tree grid, first you need to install the `{Pa
 
 Please refer to these topics on adding the IgniteUI.Blazor package:
 
-- [Getting Started](../../general-getting-started-blazor-client.md)
-- [Adding Nuget Package](../../general-nuget-feed.md)
+- [Getting Started](../../general-getting-started-blazor-client.mdx)
+- [Adding Nuget Package](../../general-nuget-feed.mdx)
 
 You also need to include the following CSS link in the index.html file of your application to provide the necessary styles to the tree grid:
 
@@ -107,7 +107,7 @@ You also need to include the following import to use the tree grid:
 import 'igniteui-webcomponents-grids/grids/combined';
 ```
 
-The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it:
+The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.mdx) and based on your project configuration to import it:
 
 ```typescript
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
@@ -119,7 +119,7 @@ Or to link it:
 <link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>
 ```
 
-For more details on how to customize the appearance of the tree grid, you may have a look at the [styling](overview.md#web-components-tree-grid-styling-configuration) section.
+For more details on how to customize the appearance of the tree grid, you may have a look at the [styling](./overview.mdx#web-components-tree-grid-styling-configuration) section.
 </PlatformBlock>
 
 
@@ -166,7 +166,7 @@ export class AppModule {}
 ## Usage
 
 The tree grid shares a lot of features with the grid, but it also adds the ability to display its data hierarchically.
-In order to achieve this, the tree grid provides us with a couple of ways to define the relations among our data objects - by using a [child collection](overview.md#child-collection) for every data object or by using [primary and foreign keys](overview.md#primary-and-foreign-keys) for every data object.
+In order to achieve this, the tree grid provides us with a couple of ways to define the relations among our data objects - by using a [child collection](./overview.mdx#child-collection) for every data object or by using [primary and foreign keys](./overview.mdx#primary-and-foreign-keys) for every data object.
 
 ### Tree Cells
 
@@ -388,7 +388,7 @@ Finally, we can enable the toolbar of our tree grid, along with the column hidin
 
 </PlatformBlock>
 
-You can see the result of the code from above at the beginning of this article in the [Tree Grid Example](./overview.md#example) section.
+You can see the result of the code from above at the beginning of this article in the [Tree Grid Example](./overview.mdx#example) section.
 
 ### Primary and Foreign keys
 When we are using the **primary and foreign keys** option, every data object contains a primary key and a foreign key. The primary key is the unique identifier of the current data object and the foreign key is the unique identifier of its parent. In this case the `data` property of our tree grid that contains the original data source will be a flat collection.
@@ -519,7 +519,7 @@ The indentation of the tree grid cell persists across other tree grid features l
 ## {Platform} Tree Grid Styling Configuration
 
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](./theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
diff --git a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
index 43b07720de..6e2e0da678 100644
--- a/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree-grid/theming-grid.mdx
@@ -125,18 +125,18 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
-{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.md) */}
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Paging](../_shared/paging.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
+{/** [Build CRUD operations with Grid](../general/how-to/how-to-perform-crud.mdx) */}
 
 
 </PlatformBlock>
@@ -147,17 +147,17 @@ In addition to predefined themes and palettes, you can further customize the loo
 
 
 
-- [Grid Sizing](grid/sizing.md)
-- [Virtualization and Performance](grid/virtualization.md)
-- [Paging](grid/paging.md)
-- [Filtering](grid/filtering.md)
-- [Sorting](grid/sorting.md)
-- [Summaries](grid/summaries.md)
-- [Column Moving](grid/column-moving.md)
-- [Column Pinning](grid/column-pinning.md)
-- [Column Resizing](grid/column-resizing.md)
-- [Selection](grid/selection.md)
-- [Column Data Types](grid/column-types.md#default-template)
+- [Grid Sizing](../_shared/sizing.mdx)
+- [Virtualization and Performance](../_shared/virtualization.mdx)
+- [Paging](../_shared/paging.mdx)
+- [Filtering](../_shared/filtering.mdx)
+- [Sorting](../_shared/sorting.mdx)
+- [Summaries](../_shared/summaries.mdx)
+- [Column Moving](../_shared/column-moving.mdx)
+- [Column Pinning](../_shared/column-pinning.mdx)
+- [Column Resizing](../_shared/column-resizing.mdx)
+- [Selection](../_shared/selection.mdx)
+- [Column Data Types](../_shared/column-types.mdx#default-template)
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/grids/tree.mdx b/docs/xplat/src/content/en/components/grids/tree.mdx
index 9ba2ed2905..0b3478b6b1 100644
--- a/docs/xplat/src/content/en/components/grids/tree.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree.mdx
@@ -53,7 +53,7 @@ import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents';
 defineComponents(IgcTreeComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/badge.mdx b/docs/xplat/src/content/en/components/inputs/badge.mdx
index c8d2062dac..333eea4044 100644
--- a/docs/xplat/src/content/en/components/inputs/badge.mdx
+++ b/docs/xplat/src/content/en/components/inputs/badge.mdx
@@ -40,7 +40,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcBadgeComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/inputs/button-group.mdx b/docs/xplat/src/content/en/components/inputs/button-group.mdx
index 2de2694ff0..a61151ce6a 100644
--- a/docs/xplat/src/content/en/components/inputs/button-group.mdx
+++ b/docs/xplat/src/content/en/components/inputs/button-group.mdx
@@ -87,7 +87,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 </PlatformBlock>
 
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 Now that you have the {ProductName} Button Group imported, you can start with a basic configuration of the <ApiLink pkg="core" type="ButtonGroup" /> and its buttons.
 
diff --git a/docs/xplat/src/content/en/components/inputs/button.mdx b/docs/xplat/src/content/en/components/inputs/button.mdx
index 8ae1a8a54f..838d023665 100644
--- a/docs/xplat/src/content/en/components/inputs/button.mdx
+++ b/docs/xplat/src/content/en/components/inputs/button.mdx
@@ -49,7 +49,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcButtonComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -118,7 +118,7 @@ The simplest way to start using the <ApiLink pkg="core" type="Button" /> is as f
 
 With `prefix` and `suffix` slots of the <ApiLink pkg="core" type="Button" /> component, we can add different content before and after the main content of the button.
 
-We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots.
+We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots.
 
 <PlatformBlock for="React">
 
diff --git a/docs/xplat/src/content/en/components/inputs/checkbox.mdx b/docs/xplat/src/content/en/components/inputs/checkbox.mdx
index 2d2a79717d..112a76211a 100644
--- a/docs/xplat/src/content/en/components/inputs/checkbox.mdx
+++ b/docs/xplat/src/content/en/components/inputs/checkbox.mdx
@@ -46,7 +46,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcCheckboxComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/chip.mdx b/docs/xplat/src/content/en/components/inputs/chip.mdx
index 54254a55ed..387bb2605e 100644
--- a/docs/xplat/src/content/en/components/inputs/chip.mdx
+++ b/docs/xplat/src/content/en/components/inputs/chip.mdx
@@ -41,7 +41,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcChipComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -225,7 +225,7 @@ The {ProductName} chip can be disabled by using the <ApiLink pkg="core" type="Ch
 
 With the exposed component slots, you can add custom content to different parts of the <ApiLink pkg="core" type="Chip" />. The component provides default select and remove icons, but you can customize them using the `select` and `remove` slots. You can also add additional content before or after the main content using the `start` and `end` slots.
 
-We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `remove`, `select`, `start`, and `end` slots.
+We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `remove`, `select`, `start`, and `end` slots.
 
 <PlatformBlock for="WebComponents">
 
diff --git a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx
index d59fbdbebe..7cdf08beb3 100644
--- a/docs/xplat/src/content/en/components/inputs/circular-progress.mdx
+++ b/docs/xplat/src/content/en/components/inputs/circular-progress.mdx
@@ -41,7 +41,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcCircularProgressComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
index 0466b57b16..e68301cc87 100644
--- a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
+++ b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
@@ -48,7 +48,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcComboComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/combo/templates.mdx b/docs/xplat/src/content/en/components/inputs/combo/templates.mdx
index 9c19eba096..0f62656b41 100644
--- a/docs/xplat/src/content/en/components/inputs/combo/templates.mdx
+++ b/docs/xplat/src/content/en/components/inputs/combo/templates.mdx
@@ -167,7 +167,7 @@ const renderGroupHeaderTemplate = (args: ComboTemplateProps<City>) => {
 
 ## Slots
 
-Other than custom templates, the {ProductName} ComboBox component exposes several slots that allow users to pass custom content to different parts of the component. For all ComboBox slots, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons. For the `header` and `footer` slots, you can also use more semantic elements such as `<header>` and `<footer>`.
+Other than custom templates, the {ProductName} ComboBox component exposes several slots that allow users to pass custom content to different parts of the component. For all ComboBox slots, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../../layouts/icon.mdx) component when adding icons. For the `header` and `footer` slots, you can also use more semantic elements such as `<header>` and `<footer>`.
 
 ### Header Slot
 
diff --git a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx
index ba20746ab5..18300ec902 100644
--- a/docs/xplat/src/content/en/components/inputs/date-time-input.mdx
+++ b/docs/xplat/src/content/en/components/inputs/date-time-input.mdx
@@ -41,7 +41,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcDateTimeInput);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/dropdown.mdx b/docs/xplat/src/content/en/components/inputs/dropdown.mdx
index df2edd4ecd..4e1035e82e 100644
--- a/docs/xplat/src/content/en/components/inputs/dropdown.mdx
+++ b/docs/xplat/src/content/en/components/inputs/dropdown.mdx
@@ -46,7 +46,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcDropdownComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -65,7 +65,7 @@ import { IgrDropdown } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -133,7 +133,7 @@ The <ApiLink pkg="core" type="Dropdown" /> emits the `Change` event when the use
 The <ApiLink pkg="core" type="DropdownItem" /> represents a selectable item in the Dropdown list. You could predefine a selected item by setting the <ApiLink pkg="core" type="DropdownItem" member="selected" label="Selected" /> property. You could also disable an item so that it can't be selected using the <ApiLink pkg="core" type="DropdownItem" member="disabled" label="Disabled" /> property.
 
 The <ApiLink pkg="core" type="DropdownItem" /> has a default slot which allows you to specify the content of the item. You could also provide custom content to be rendered before or after the content using the `prefix` and `suffix` slots.
-We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots.
+We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots.
 
 <PlatformBlock for="WebComponents">
 
diff --git a/docs/xplat/src/content/en/components/inputs/file-input.mdx b/docs/xplat/src/content/en/components/inputs/file-input.mdx
index 1f9dfb8bc9..9c4bf2b940 100644
--- a/docs/xplat/src/content/en/components/inputs/file-input.mdx
+++ b/docs/xplat/src/content/en/components/inputs/file-input.mdx
@@ -55,7 +55,7 @@ Now you can start with a basic configuration of the {Platform} <ApiLink type="Fi
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ## Configuration
 
@@ -108,7 +108,7 @@ The <ApiLink type="FileInput" /> component also exposes several slots that can b
 - `invalid` – Allows you to render custom content when the input is in an invalid state.
 - `custom-error` - Displays content when a custom validation message is set using the <ApiLink type="FileInput" member="setCustomValidity" label="setCustomValidity()" /> method.
 
-When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component for icons.
+When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component for icons.
 
 <Sample src="/inputs/file-input/prefix-suffix" height={120} alt="{Platform} File Input Slots Example" />
 
diff --git a/docs/xplat/src/content/en/components/inputs/highlight.mdx b/docs/xplat/src/content/en/components/inputs/highlight.mdx
index e14045d8f9..5401382e97 100644
--- a/docs/xplat/src/content/en/components/inputs/highlight.mdx
+++ b/docs/xplat/src/content/en/components/inputs/highlight.mdx
@@ -79,7 +79,7 @@ You also need to reference the corresponding styles based on your project config
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 The simplest way to start using the <ApiLink type="Highlight" /> component is as follows:
 
diff --git a/docs/xplat/src/content/en/components/inputs/icon-button.mdx b/docs/xplat/src/content/en/components/inputs/icon-button.mdx
index 9c128d9281..c3f417ee9f 100644
--- a/docs/xplat/src/content/en/components/inputs/icon-button.mdx
+++ b/docs/xplat/src/content/en/components/inputs/icon-button.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Icon Button Overview
 
-The {ProductName} Icon Button component allows developers to use registered icons as buttons in their application. It carries all features of the [icon](../layouts/icon.md) component but adds features from the [button](button.md) component as well.
+The {ProductName} Icon Button component allows developers to use registered icons as buttons in their application. It carries all features of the [icon](../layouts/icon.mdx) component but adds features from the [button](./button.mdx) component as well.
 
 ## {Platform} Icon Button Example
 
@@ -45,7 +45,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcIconButtonComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/input.mdx b/docs/xplat/src/content/en/components/inputs/input.mdx
index 96da10d998..aecf3d758b 100644
--- a/docs/xplat/src/content/en/components/inputs/input.mdx
+++ b/docs/xplat/src/content/en/components/inputs/input.mdx
@@ -61,7 +61,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcInputComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -110,7 +110,7 @@ After we import the <ApiLink pkg="core" type="Input" /> component we are ready t
 
 ## Prefix & Suffix
 
-With `prefix` and `suffix` slots we can add different content before and after the main content of the <ApiLink pkg="core" type="Input" />. We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots. In the following sample we will create a new Input field with a text prefix and an icon suffix:
+With `prefix` and `suffix` slots we can add different content before and after the main content of the <ApiLink pkg="core" type="Input" />. We recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots. In the following sample we will create a new Input field with a text prefix and an icon suffix:
 
 <Sample src="/inputs/input/prefix-suffix" height={120} alt="{Platform} Input Prefix & Suffix Example" />
 
diff --git a/docs/xplat/src/content/en/components/inputs/linear-progress.mdx b/docs/xplat/src/content/en/components/inputs/linear-progress.mdx
index da2648ec36..0f478e8225 100644
--- a/docs/xplat/src/content/en/components/inputs/linear-progress.mdx
+++ b/docs/xplat/src/content/en/components/inputs/linear-progress.mdx
@@ -43,7 +43,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcLinearProgressComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/mask-input.mdx b/docs/xplat/src/content/en/components/inputs/mask-input.mdx
index 91bc793559..3d0f9d0a9a 100644
--- a/docs/xplat/src/content/en/components/inputs/mask-input.mdx
+++ b/docs/xplat/src/content/en/components/inputs/mask-input.mdx
@@ -104,7 +104,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 </PlatformBlock>
 
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ### Mask Rules
 The table bellow shows the supported built-in mask rules:
diff --git a/docs/xplat/src/content/en/components/inputs/radio.mdx b/docs/xplat/src/content/en/components/inputs/radio.mdx
index d3825dd2f3..0414fe588f 100644
--- a/docs/xplat/src/content/en/components/inputs/radio.mdx
+++ b/docs/xplat/src/content/en/components/inputs/radio.mdx
@@ -47,7 +47,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/rating.mdx b/docs/xplat/src/content/en/components/inputs/rating.mdx
index b686a79c70..e80236dd85 100644
--- a/docs/xplat/src/content/en/components/inputs/rating.mdx
+++ b/docs/xplat/src/content/en/components/inputs/rating.mdx
@@ -66,7 +66,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRatingComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -270,7 +270,7 @@ The {ProductName} Rating component allows users to use different icons or elemen
 
 <Sample src="/inputs/rating/empty" height={150} alt="{Platform} Rating with Empty and Selected state" />
 
-As shown above, the best practice is to use icons for the rating symbols. We recommend using an [`igc-icon`](../layouts/icon.md) component for the 'empty' and 'selected' icons. However, if you prefer to use symbols or emojis instead of icons, we recommend using a `<span>` element for them, like so:
+As shown above, the best practice is to use icons for the rating symbols. We recommend using an [`igc-icon`](../layouts/icon.mdx) component for the 'empty' and 'selected' icons. However, if you prefer to use symbols or emojis instead of icons, we recommend using a `<span>` element for them, like so:
 
 <PlatformBlock for="WebComponents">
 ```html
diff --git a/docs/xplat/src/content/en/components/inputs/ripple.mdx b/docs/xplat/src/content/en/components/inputs/ripple.mdx
index c1014b4484..7fb1c44e18 100644
--- a/docs/xplat/src/content/en/components/inputs/ripple.mdx
+++ b/docs/xplat/src/content/en/components/inputs/ripple.mdx
@@ -43,7 +43,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRippleComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/inputs/select.mdx b/docs/xplat/src/content/en/components/inputs/select.mdx
index 6ec364f4c2..5796551216 100644
--- a/docs/xplat/src/content/en/components/inputs/select.mdx
+++ b/docs/xplat/src/content/en/components/inputs/select.mdx
@@ -44,7 +44,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSelectComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -134,7 +134,7 @@ The <ApiLink pkg="core" type="Select" /> component can be used inside a `Form` c
 
 It also has a <ApiLink pkg="core" type="Select" member="label" label="Label" />, and <ApiLink pkg="core" type="Select" member="placeholder" label="Placeholder" /> properties. The <ApiLink pkg="core" type="Select" member="outlined" label="Outlined" /> property is used for styling purposes only when it comes to the Material theme.
 
-Except for the default slot, the component provides a few other slots including `header`, `footer`, `helper-text`, `prefix`, `suffix`, and `toggle-icon`. When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component for icons.
+Except for the default slot, the component provides a few other slots including `header`, `footer`, `helper-text`, `prefix`, `suffix`, and `toggle-icon`. When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component for icons.
 
 The component size can be changed using the `--ig-size` CSS variable.
 
@@ -142,7 +142,7 @@ The component size can be changed using the `--ig-size` CSS variable.
 
 The <ApiLink pkg="core" type="SelectItem" /> component allows the users to declaratively specify a list of options used by the <ApiLink pkg="core" type="Select" /> control. Each item provides a <ApiLink pkg="core" type="SelectItem" member="value" label="Value" /> property that represents the data it carries upon selection. The <ApiLink pkg="core" type="SelectItem" /> has a default slot that allows you to specify the text content of the item. This text content will be used as the value when the <ApiLink pkg="core" type="SelectItem" member="value" label="Value" /> property is not present on the <ApiLink pkg="core" type="SelectItem" />.
 
-You could also provide custom content to be rendered before or after the <ApiLink pkg="core" type="SelectItem" /> content using the `prefix` and `suffix` slots. As with the <ApiLink pkg="core" type="Select" /> component, we recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots.
+You could also provide custom content to be rendered before or after the <ApiLink pkg="core" type="SelectItem" /> content using the `prefix` and `suffix` slots. As with the <ApiLink pkg="core" type="Select" /> component, we recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots.
 
 You can predefine a selected item by setting the <ApiLink pkg="core" type="SelectItem" member="selected" label="Selected" /> property. You can also disable some or all items via the <ApiLink pkg="core" type="SelectItem" member="disabled" label="Disabled" /> property.
 
diff --git a/docs/xplat/src/content/en/components/inputs/slider.mdx b/docs/xplat/src/content/en/components/inputs/slider.mdx
index 0e182d21eb..0a92c579f7 100644
--- a/docs/xplat/src/content/en/components/inputs/slider.mdx
+++ b/docs/xplat/src/content/en/components/inputs/slider.mdx
@@ -44,7 +44,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSliderComponent, IgcRangeSliderComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/switch.mdx b/docs/xplat/src/content/en/components/inputs/switch.mdx
index 0a6224ae17..337a0d900c 100644
--- a/docs/xplat/src/content/en/components/inputs/switch.mdx
+++ b/docs/xplat/src/content/en/components/inputs/switch.mdx
@@ -48,7 +48,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSwitchComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/en/components/inputs/text-area.mdx b/docs/xplat/src/content/en/components/inputs/text-area.mdx
index b82cc9e977..afb2be3732 100644
--- a/docs/xplat/src/content/en/components/inputs/text-area.mdx
+++ b/docs/xplat/src/content/en/components/inputs/text-area.mdx
@@ -54,7 +54,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcTextareaComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -103,7 +103,7 @@ After we import the <ApiLink pkg="core" type="Textarea" /> component we are read
 
 ## Prefix, Suffix &  Helper Text
 
-With `prefix` and `suffix` slots we can add different content before and after the main content of the Text Area. The `helper-text` slot provides a hint placed below the Text Area. When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component for icons. In the following sample, we will create a new Text Area field with an icon prefix and helper text as a hint:
+With `prefix` and `suffix` slots we can add different content before and after the main content of the Text Area. The `helper-text` slot provides a hint placed below the Text Area. When slotting content, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component for icons. In the following sample, we will create a new Text Area field with an icon prefix and helper text as a hint:
 
 <PlatformBlock for="WebComponents">
 
diff --git a/docs/xplat/src/content/en/components/inputs/tooltip.mdx b/docs/xplat/src/content/en/components/inputs/tooltip.mdx
index 55e630e26a..6b72d0fdb7 100644
--- a/docs/xplat/src/content/en/components/inputs/tooltip.mdx
+++ b/docs/xplat/src/content/en/components/inputs/tooltip.mdx
@@ -93,7 +93,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 </PlatformBlock>
 
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 Now you can start with a basic configuration of the {Platform} <ApiLink pkg="core" type="Tooltip" />.
 
diff --git a/docs/xplat/src/content/en/components/interactivity/chat.mdx b/docs/xplat/src/content/en/components/interactivity/chat.mdx
index 4d46f1ee99..6cdcd58dfb 100644
--- a/docs/xplat/src/content/en/components/interactivity/chat.mdx
+++ b/docs/xplat/src/content/en/components/interactivity/chat.mdx
@@ -991,7 +991,7 @@ This allows you to style the <ApiLink type="Chat" /> to match your brand without
 - <ApiLink type="ChatMessageAttachment" />
 - <ApiLink type="ChatRenderers" />
 - <ApiLink type="ChatTemplateRenderer" />
-- [Styling & Themes](../themes/overview.md)
+- [Styling & Themes](../themes/overview.mdx)
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/layouts/accordion.mdx b/docs/xplat/src/content/en/components/layouts/accordion.mdx
index 97bd08bbfe..48428e420d 100644
--- a/docs/xplat/src/content/en/components/layouts/accordion.mdx
+++ b/docs/xplat/src/content/en/components/layouts/accordion.mdx
@@ -47,7 +47,7 @@ import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents'
 defineComponents(IgcAccordionComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx
index cb70993b15..d1222f46b2 100644
--- a/docs/xplat/src/content/en/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx
@@ -96,7 +96,7 @@ defineComponents(IgcAvatarComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 The <ApiLink pkg="core" type="Avatar" /> is capable of displaying images, initials, or any other content, including icons. Declaring an <ApiLink pkg="core" type="Avatar" /> is as simple as:
 
diff --git a/docs/xplat/src/content/en/components/layouts/card.mdx b/docs/xplat/src/content/en/components/layouts/card.mdx
index 1734dcb20c..c92f645f1c 100644
--- a/docs/xplat/src/content/en/components/layouts/card.mdx
+++ b/docs/xplat/src/content/en/components/layouts/card.mdx
@@ -88,7 +88,7 @@ defineComponents(IgcCardComponent );
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 Then, to represent the demo card template, we can add the following code:
 
@@ -207,7 +207,7 @@ Finally, the <ApiLink pkg="core" type="CardActions" /> is where you'd place any
 
 ### Media, Thumbs, and Avatars
 
-If you want to display an image or icon in the card header next to the title and subtitle, assign the element's slot attribute to `thumbnail`. For the best results, we recommend using an [`igc-avatar`](../layouts/avatar.md) component for the `thumbnail` slot, as it integrates seamlessly with the card header's layout and styling.
+If you want to display an image or icon in the card header next to the title and subtitle, assign the element's slot attribute to `thumbnail`. For the best results, we recommend using an [`igc-avatar`](../layouts/avatar.mdx) component for the `thumbnail` slot, as it integrates seamlessly with the card header's layout and styling.
 
 Taking the card above as an example, we can edit the contents of the <ApiLink pkg="core" type="CardHeader" /> and add an avatar with `slot="thumbnail"`:
 
diff --git a/docs/xplat/src/content/en/components/layouts/carousel.mdx b/docs/xplat/src/content/en/components/layouts/carousel.mdx
index 57029288e2..b0bf8c22dc 100644
--- a/docs/xplat/src/content/en/components/layouts/carousel.mdx
+++ b/docs/xplat/src/content/en/components/layouts/carousel.mdx
@@ -80,7 +80,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 Now that you have the {ProductName} Carousel imported, you can start with a basic configuration of the <ApiLink pkg="core" type="Carousel" /> and its slides.
 
@@ -405,7 +405,7 @@ To add {Platform} custom carousel indicators, use the <ApiLink pkg="core" type="
 
 </PlatformBlock>
 
-The {ProductName} Carousel component allows users to use different elements for the active and inactive states of a single indicator. It is mandatory to provide two elements for each indicator slot (**empty** and **active**) when declaring an indicator, even if they are the same. We recommend using a `<span>` element for symbol or emoji indicators, and an [`<igc-icon>`](../layouts/icon.md) component for icon indicators.
+The {ProductName} Carousel component allows users to use different elements for the active and inactive states of a single indicator. It is mandatory to provide two elements for each indicator slot (**empty** and **active**) when declaring an indicator, even if they are the same. We recommend using a `<span>` element for symbol or emoji indicators, and an [`<igc-icon>`](../layouts/icon.mdx) component for icon indicators.
 
 ### Custom navigation buttons
 
@@ -447,7 +447,7 @@ The navigation buttons can also be customized. To achieve this, use the `previou
 
 </PlatformBlock>
 
-Just like with the custom indicators, we recommend using a `<span>` element for symbol or emoji navigation buttons, and an [`<igc-icon>`](../layouts/icon.md) component for icon navigation buttons.
+Just like with the custom indicators, we recommend using a `<span>` element for symbol or emoji navigation buttons, and an [`<igc-icon>`](../layouts/icon.mdx) component for icon navigation buttons.
 
 ### Slide containing other components
 
@@ -621,7 +621,7 @@ The navigation in the carousel can be handled by the user through navigation but
 
 By default, the carousel can be used on any touch-enabled device.
 
-The carousel [animations](carousel.md#animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)).
+The carousel [animations](./carousel.mdx#animations) are fully supported on touch devices, which makes the carousel consistent with any platform and great when used in progressive web applications ([PWA](https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps)).
 
 ### Keyboard navigation
 
diff --git a/docs/xplat/src/content/en/components/layouts/divider.mdx b/docs/xplat/src/content/en/components/layouts/divider.mdx
index 53931a2091..c14612f45e 100644
--- a/docs/xplat/src/content/en/components/layouts/divider.mdx
+++ b/docs/xplat/src/content/en/components/layouts/divider.mdx
@@ -98,7 +98,7 @@ defineComponents(IgcDividerComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 The <ApiLink pkg="core" type="Divider" /> is capable of displaying images, initials, or any other content, including icons. Declaring an <ApiLink pkg="core" type="Divider" /> is as simple as:
 
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
index d42b1e3853..dd91b0c36b 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
@@ -168,7 +168,7 @@ The Dock Manager defines several pane types:
 Each type of pane has a <ApiLink type="DocumentHost" member="size" label="Size" /> property. Depending on the parent orientation the size may affect either the width or the height of the pane. By default, the size of a pane is relative to the sizes of its sibling panes and defaults to 100. If you have two sibling panes, where the first one has its size set to 200 and the second one - size set to 100, the first will be twice the size of the second one and these two panes would fill up all the available space. If the absolute size of their parent is 900px, they will be sized to 600px and 300px respectively. If, for certain panes, you want to specify their sizes in pixels, instead of relying on the relative distribution of all the available space, you should set the `useFixedSize` of the parent split pane.
 
 <PlatformBlock for="WebComponents">
- For more information on this refer to [Split Panes Fixed Size Mode](dock-manager-customization.md#split-panes-fixed-size-mode) topic.
+ For more information on this refer to [Split Panes Fixed Size Mode](./dock-manager-customization.mdx#split-panes-fixed-size-mode) topic.
  </PlatformBlock>
 
 The end-user can perform the following actions to customize the layout at runtime:
@@ -932,7 +932,7 @@ The following keyboard shortcuts show a navigator from which you can iterate thr
 ### Other
 - <kbd>ALT</kbd> + <kbd>F3</kbd> Closes the active pane
 
-Practice all of the above mentioned actions in the sample [demo](dock-manager.md#{PlatformLower}-dock-manager-example).
+Practice all of the above mentioned actions in the sample [demo](./dock-manager.mdx#{PlatformLower}-dock-manager-example).
 
 ## Styling
 
diff --git a/docs/xplat/src/content/en/components/layouts/expansion-panel.mdx b/docs/xplat/src/content/en/components/layouts/expansion-panel.mdx
index 2eec4c0a6f..b0820252c7 100644
--- a/docs/xplat/src/content/en/components/layouts/expansion-panel.mdx
+++ b/docs/xplat/src/content/en/components/layouts/expansion-panel.mdx
@@ -38,7 +38,7 @@ import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponen
 defineComponents(IgcExpansionPanelComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -147,7 +147,7 @@ We can do this by binding to the `Opened` and `Closed` events:
 <Sample src="/layouts/expansion-panel/properties-and-events" height={320} alt="{Platform} Expansion Panel Events" />
 
 ## Component Customization
-The <ApiLink pkg="core" type="ExpansionPanel" /> control allows all sorts of content to be added inside of its body. It can render [input](../inputs/input.md), charts and even other expansion panels!
+The <ApiLink pkg="core" type="ExpansionPanel" /> control allows all sorts of content to be added inside of its body. It can render [input](../inputs/input.mdx), charts and even other expansion panels!
 
 The <ApiLink pkg="core" type="ExpansionPanel" /> allows for easy customization of the header through the exposed `title`, `subTitle` and `indicator` slots.
 
@@ -161,7 +161,7 @@ The next code sample demonstrates how to configure the component's button to go
 
 When slotting content into the `title` and `subtitle` slots, we recommend using `<span>` elements rather than heading elements (`<h1>`–`<h6>`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. Using a `<span>` gives you a neutral container that inherits the component's styles cleanly.
 
-The `indicator` slot is intended for icon-like content. We recommend using the [`<igc-icon>`](../layouts/icon.md) component for this purpose. Alternatively, if you don't want to use an icon for the indicator, a `<span>` element can be used to display text, symbols, or emojis.
+The `indicator` slot is intended for icon-like content. We recommend using the [`<igc-icon>`](../layouts/icon.mdx) component for this purpose. Alternatively, if you don't want to use an icon for the indicator, a `<span>` element can be used to display text, symbols, or emojis.
 
 <PlatformBlock for="WebComponents">
 
diff --git a/docs/xplat/src/content/en/components/layouts/icon.mdx b/docs/xplat/src/content/en/components/layouts/icon.mdx
index c488faebe4..81ed666256 100644
--- a/docs/xplat/src/content/en/components/layouts/icon.mdx
+++ b/docs/xplat/src/content/en/components/layouts/icon.mdx
@@ -36,7 +36,7 @@ import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";
 defineComponents(IgcIconComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/en/components/layouts/splitter.mdx b/docs/xplat/src/content/en/components/layouts/splitter.mdx
index ca597fd835..85ea3657c1 100644
--- a/docs/xplat/src/content/en/components/layouts/splitter.mdx
+++ b/docs/xplat/src/content/en/components/layouts/splitter.mdx
@@ -45,7 +45,7 @@ import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents';
 defineComponents(IgcSplitterComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -413,7 +413,7 @@ igc-splitter {
 
 ## API References
 <ApiRef pkg="core" types={["Splitter"]} />
-- [`Styling & Themes`](../themes/overview.md)
+- [`Styling & Themes`](../themes/overview.mdx)
 ## Additional Resources
 
 - [{ProductName} **Forums**]({ForumsLink})
diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx
index 7087b0ae03..11e6a793cc 100644
--- a/docs/xplat/src/content/en/components/layouts/stepper.mdx
+++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx
@@ -47,7 +47,7 @@ import { defineComponents, IgcStepperComponent } from 'igniteui-webcomponents';
 defineComponents(IgcStepperComponent);
 ```
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 </PlatformBlock>
 
@@ -148,7 +148,7 @@ For each step the user has the ability to configure the indicator, title and sub
 
 For the `title` and `subtitle` slots, we recommend using `<span>` elements rather than heading elements (`<h1>`–`<h6>`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. Using a `<span>` gives you a neutral container that inherits the component's styles cleanly.
 
-For the `indicator` slot, we also recommend using a `<span>` element for symbol or emoji indicators, and an [`<igc-icon>`](../layouts/icon.md) component for icon indicators.
+For the `indicator` slot, we also recommend using a `<span>` element for symbol or emoji indicators, and an [`<igc-icon>`](../layouts/icon.mdx) component for icon indicators.
 
 <DocsAside type="info">
 The `default` <ApiLink pkg="core" type="Step" /> slot renders the content of the step.
diff --git a/docs/xplat/src/content/en/components/layouts/tabs.mdx b/docs/xplat/src/content/en/components/layouts/tabs.mdx
index eca6e4b0e4..1cf5cf5c33 100644
--- a/docs/xplat/src/content/en/components/layouts/tabs.mdx
+++ b/docs/xplat/src/content/en/components/layouts/tabs.mdx
@@ -76,7 +76,7 @@ defineComponents(IgcTabsComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 Simple <ApiLink pkg="core" type="Tabs" /> declaration is done as follows:
 
@@ -139,7 +139,7 @@ Simple <ApiLink pkg="core" type="Tabs" /> declaration is done as follows:
 
 Tab text can be set either as simple string using the <ApiLink pkg="core" type="Tab" member="label" label="Label" /> property or by assigning children to the `label` slot. Any remaining children in the `default` slot are rendered as the tab content.
 
-When using the `label` slot, we recommend using a `<span>` element when you want to provide text and an [`<igc-icon>`](../layouts/icon.md) or [`<igc-icon-button>`](../inputs/icon-button.md) component when you want to display icons.
+When using the `label` slot, we recommend using a `<span>` element when you want to provide text and an [`<igc-icon>`](../layouts/icon.mdx) or [`<igc-icon-button>`](../inputs/icon-button.mdx) component when you want to display icons.
 
 ### Selection
 
@@ -208,7 +208,7 @@ Scroll buttons are shown when the available space is not enough to render all {P
 
 ### Prefix / Suffix
 
-Besides the `label` slot, which can be used to display an icon, text, or both, each tab also provides `prefix` and `suffix` slots for displaying additional content at the beginning and/or the end. When slotting content into the `prefix` and `suffix` slots, we recommend using a `<span>` element for symbols or emojis, and an [`<igc-icon>`](../layouts/icon.md) or [`<igc-icon-button>`](../inputs/icon-button.md) component for icons.
+Besides the `label` slot, which can be used to display an icon, text, or both, each tab also provides `prefix` and `suffix` slots for displaying additional content at the beginning and/or the end. When slotting content into the `prefix` and `suffix` slots, we recommend using a `<span>` element for symbols or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) or [`<igc-icon-button>`](../inputs/icon-button.mdx) component for icons.
 
 <Sample src="/layouts/tabs/prefix-suffix" height={150} alt="{Platform} Tabs Example" />
 
diff --git a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx
index bf4af3b91f..0d5479e7b1 100644
--- a/docs/xplat/src/content/en/components/layouts/tile-manager.mdx
+++ b/docs/xplat/src/content/en/components/layouts/tile-manager.mdx
@@ -155,7 +155,7 @@ Now you can start with a basic configuration of the {Platform} Tile Manager.
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ## Layout
 
@@ -431,7 +431,7 @@ The Tile component also exposes several slots which you can use:
 
 When using the `title` slot, we recommend using a `<span>` element rather than heading elements (`<h1>`–`<h6>`). Heading elements carry built-in styling (such as font size, line height, and margins) that can interfere with the component's intended typography and layout. Using a `<span>` gives you a neutral container that inherits the component's styles cleanly.
 
-When using the `fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner` and `bottom-adorner` slots, we recommend using an [`<igc-icon>`](../layouts/icon.md) or [`<igc-icon-button>`](../inputs/icon-button.md) component for custom icons.
+When using the `fullscreen-action`, `maximize-action`, `actions`, `side-adorner`, `corner-adorner` and `bottom-adorner` slots, we recommend using an [`<igc-icon>`](../layouts/icon.mdx) or [`<igc-icon-button>`](../inputs/icon-button.mdx) component for custom icons.
 
 ### Header section actions
 
@@ -740,7 +740,7 @@ You can also change the icon of the adorners to a custom one using the `side-ado
 
 - <ApiLink pkg="core" type="TileManager" />
 - <ApiLink pkg="core" type="Tile" />
-- [`Styling & Themes`](../themes/overview.md)
+- [`Styling & Themes`](../themes/overview.mdx)
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/linear-gauge.mdx b/docs/xplat/src/content/en/components/linear-gauge.mdx
index 8bfb7faa8b..7789d5073d 100644
--- a/docs/xplat/src/content/en/components/linear-gauge.mdx
+++ b/docs/xplat/src/content/en/components/linear-gauge.mdx
@@ -1189,5 +1189,5 @@ For your convenience, all above code snippets are combined into one code block b
 
 You can find more information about other types of gauges in these topics:
 
-- [Bullet Graph](bullet-graph.md)
-- [Radial Gauge](radial-gauge.md)
+- [Bullet Graph](./bullet-graph.mdx)
+- [Radial Gauge](./radial-gauge.mdx)
diff --git a/docs/xplat/src/content/en/components/menus/navbar.mdx b/docs/xplat/src/content/en/components/menus/navbar.mdx
index 199c9f69cd..798116ac48 100644
--- a/docs/xplat/src/content/en/components/menus/navbar.mdx
+++ b/docs/xplat/src/content/en/components/menus/navbar.mdx
@@ -62,7 +62,7 @@ defineComponents(IgcNavbarComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx
index e0cc3fa984..188bae1fa8 100644
--- a/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx
+++ b/docs/xplat/src/content/en/components/menus/navigation-drawer.mdx
@@ -104,7 +104,7 @@ defineComponents(IgcNavDrawerComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ## Adding Navigation Drawer Items
 
diff --git a/docs/xplat/src/content/en/components/nextjs-usage.mdx b/docs/xplat/src/content/en/components/nextjs-usage.mdx
index ec92305229..c826d0e11c 100644
--- a/docs/xplat/src/content/en/components/nextjs-usage.mdx
+++ b/docs/xplat/src/content/en/components/nextjs-usage.mdx
@@ -73,7 +73,7 @@ This will automatically install packages for {ProductName}, along with all of th
 
 ## Importing Component Modules
 
-First we have to import the required modules of the components we want to use. We will go ahead and do this for the [**GeographicMap**](geo-map.md) component.
+First we have to import the required modules of the components we want to use. We will go ahead and do this for the [**GeographicMap**](./geo-map.mdx) component.
 
 <PlatformBlock for="React">
 
@@ -198,7 +198,7 @@ export default function DynamicButtonComponent() {
 
 </PlatformBlock>
 
-However, if a more complex component is used like the [**IgrGrid**](grids/data-grid.md), which typically contains child components, it is essential not to dynamically import each and every child component. The component should be used like this:
+However, if a more complex component is used like the [**IgrGrid**](./grids/data-grid.mdx), which typically contains child components, it is essential not to dynamically import each and every child component. The component should be used like this:
 
 <PlatformBlock for="React">
 
@@ -300,8 +300,8 @@ const nextConfig = {
 
 ## Additional Resources
 
-- [Ignite UI for React](../components/general-getting-started.md)
-- [Grid Overview](../components/grids/data-grid.md)
+- [Ignite UI for React](../components/general-getting-started.mdx)
+- [Grid Overview](../components/grids/data-grid.mdx)
 - [Next.js Documentation](https://nextjs.org/docs)
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/en/components/notifications/banner.mdx b/docs/xplat/src/content/en/components/notifications/banner.mdx
index 61e0f607a8..6f6dc1c31c 100644
--- a/docs/xplat/src/content/en/components/notifications/banner.mdx
+++ b/docs/xplat/src/content/en/components/notifications/banner.mdx
@@ -87,7 +87,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 </PlatformBlock>
 
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ### Show Banner
 
diff --git a/docs/xplat/src/content/en/components/notifications/dialog.mdx b/docs/xplat/src/content/en/components/notifications/dialog.mdx
index cf815ffa2b..3aebd39114 100644
--- a/docs/xplat/src/content/en/components/notifications/dialog.mdx
+++ b/docs/xplat/src/content/en/components/notifications/dialog.mdx
@@ -72,7 +72,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 </PlatformBlock>
 
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
index 11e775d64e..db36cee1bd 100644
--- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx
+++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
@@ -101,7 +101,7 @@ defineComponents(IgcSnackbarComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 The simplest way to display the snackbar component is to use its <ApiLink pkg="core" type="Snackbar" member="show" label="Show" /> method and call it on a button click.
 
diff --git a/docs/xplat/src/content/en/components/notifications/toast.mdx b/docs/xplat/src/content/en/components/notifications/toast.mdx
index 01b919cf27..1ed7ed3d84 100644
--- a/docs/xplat/src/content/en/components/notifications/toast.mdx
+++ b/docs/xplat/src/content/en/components/notifications/toast.mdx
@@ -89,7 +89,7 @@ defineComponents(IgcToastComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/en/components/radial-gauge.mdx b/docs/xplat/src/content/en/components/radial-gauge.mdx
index 65a344248f..6ac2875644 100644
--- a/docs/xplat/src/content/en/components/radial-gauge.mdx
+++ b/docs/xplat/src/content/en/components/radial-gauge.mdx
@@ -47,8 +47,8 @@ npm install --save {PackageGauges}
 
 Please refer to these topics on adding the IgniteUI.Blazor package.
 
-- [Getting Started](general-getting-started.md)
-- [Adding Nuget Package](general-nuget-feed.md)
+- [Getting Started](./general-getting-started.mdx)
+- [Adding Nuget Package](./general-nuget-feed.mdx)
 
 Afterwards you may start implementing the control by adding the following namespaces:
 
@@ -1242,5 +1242,5 @@ For your convenience, all above code snippets are combined into one code block b
 
 You can find more information about other types of gauges in these topics:
 
-- [Bullet Graph](bullet-graph.md)
-- [Linear Gauge](Linear-gauge.md)
+- [Bullet Graph](./bullet-graph.mdx)
+- [Linear Gauge](./linear-gauge.mdx)
diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
index 4d0c776b24..ffe00ab25b 100644
--- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
@@ -88,7 +88,7 @@ defineComponents(IgcCalendarComponent);
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 The simplest way to start using the {ProductName} <ApiLink pkg="core" type="Calendar" /> is as follows:
 
diff --git a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
index 4f65e348d6..bcf03869c5 100644
--- a/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/date-picker.mdx
@@ -81,7 +81,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 
 </PlatformBlock>
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ## Using the {Platform} Date Picker Component
 
@@ -177,7 +177,7 @@ If a string is bound to the picker, it needs to be in the **ISO 8601** format:
 
 ### Projecting components
 
-The are `prefix` and `suffix` slots available, which allow you to add different content before and after the main content of the Input. When slotting content, we recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `prefix` and `suffix` slots.
+The are `prefix` and `suffix` slots available, which allow you to add different content before and after the main content of the Input. When slotting content, we recommend using a `<span>` element when adding simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `prefix` and `suffix` slots.
 
 There is also a `helper-text` slot exposed, which provides a hint placed below the Input. We recommend using a `<span>` element, when slotting content in the `helper-text` slot.
 
@@ -227,7 +227,7 @@ The above snippet will add an additional icon at the end of the input, right aft
 
 #### Customizing the toggle and clear icons
 
-The calendar and clear icons can be customized using the `calendar` and `clear` slots. We recommend using a `<span>` element when adding symbols, or emojis and an [`<igc-icon>`](../layouts/icon.md) component when adding icons to the `calendar` and `clear` slots.
+The calendar and clear icons can be customized using the `calendar` and `clear` slots. We recommend using a `<span>` element when adding symbols, or emojis and an [`<igc-icon>`](../layouts/icon.mdx) component when adding icons to the `calendar` and `clear` slots.
 
 <PlatformBlock for="WebComponents">
 
@@ -264,7 +264,7 @@ The calendar and clear icons can be customized using the `calendar` and `clear`
 
 #### Custom action buttons
 
-The picker's action buttons can be templated using the `actions` slot. For the best result, we recommend using the [`<igc-button>`](../inputs/button.md) component when adding content to the `actions` slot.
+The picker's action buttons can be templated using the `actions` slot. For the best result, we recommend using the [`<igc-button>`](../inputs/button.mdx) component when adding content to the `actions` slot.
 
 <PlatformBlock for="WebComponents">
 
@@ -480,7 +480,7 @@ Here is how a <ApiLink pkg="core" type="DatePicker" /> with Japanese locale defi
 
 ## Styling
 
-The <ApiLink pkg="core" type="DatePicker" /> component derives from the <ApiLink pkg="core" type="Input" /> and <ApiLink pkg="core" type="Calendar" /> component, so it exposes all available CSS parts. See [Input Styling](../inputs/input.md#styling) and [Calendar Styling](calendar.md#styling) for reference.
+The <ApiLink pkg="core" type="DatePicker" /> component derives from the <ApiLink pkg="core" type="Input" /> and <ApiLink pkg="core" type="Calendar" /> component, so it exposes all available CSS parts. See [Input Styling](../inputs/input.mdx#styling) and [Calendar Styling](./calendar.mdx#styling) for reference.
 
 ```css
 igc-date-picker::part(header) {
diff --git a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx
index e2b93fff19..2deb943c9f 100644
--- a/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/date-range-picker.mdx
@@ -79,7 +79,7 @@ You will also need to link an additional CSS file to apply the styling to the <A
 
 Now you can start with a basic configuration of the {Platform} <ApiLink pkg="core" type="DateRangePicker" />.
 
-For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.md) topic.
+For a complete introduction to the {ProductName}, read the [**Getting Started**](../general-getting-started.mdx) topic.
 
 ## Usage
 
@@ -701,9 +701,9 @@ return (
 
 </PlatformBlock>
 
-You can see more information about all the possibilities that the <ApiLink pkg="core" type="DateRangePicker" member="disabledDates" /> property offers here: [Disabled dates](./calendar.md#disabled-dates)
+You can see more information about all the possibilities that the <ApiLink pkg="core" type="DateRangePicker" member="disabledDates" /> property offers here: [Disabled dates](./calendar.mdx#disabled-dates)
 
-You can also do the same if you want to set one or more special dates in the calendar; the only difference is that you need to use the <ApiLink pkg="core" type="DateRangePicker" member="specialDates" /> property instead. [Special dates](./calendar.md#special-dates)
+You can also do the same if you want to set one or more special dates in the calendar; the only difference is that you need to use the <ApiLink pkg="core" type="DateRangePicker" member="specialDates" /> property instead. [Special dates](./calendar.mdx#special-dates)
 
 ### Forms
 
@@ -724,7 +724,7 @@ In addition to the properties we've already covered, the <ApiLink pkg="core" typ
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholder" label="Placeholder" /> | string | Placeholder text for the single input mode. |
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholderStart" label="PlaceholderStart" /> | string | Placeholder text for the start date input (two inputs mode). |
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholderEnd" label="PlaceholderEnd" /> | string | Placeholder text for the end date input (two inputs mode). |
-| <ApiLink pkg="core" type="DateRangePicker" member="outlined" label="Outlined" /> | boolean | Determines whether the input part will have outline appearance in the [Material theme](../themes/overview.md). |
+| <ApiLink pkg="core" type="DateRangePicker" member="outlined" label="Outlined" /> | boolean | Determines whether the input part will have outline appearance in the [Material theme](../themes/overview.mdx). |
 | <ApiLink pkg="core" type="DateRangePicker" member="prompt" label="Prompt" /> | string | The prompt character used for unfilled parts of the input(s) mask. |
 | <ApiLink pkg="core" type="DateRangePicker" member="resourceStrings" label="ResourceStrings" /> | IgcDateRangePickerResourceStrings | Resource strings for localization of the date-range picker and the calendar. |
 
@@ -767,9 +767,9 @@ The `prefix` and `suffix` slots allow you to insert custom content before or aft
 
 </PlatformBlock>
 
-In two-input mode, you can use the `prefix-start`, `prefix-end`, `suffix-start`, and `suffix-end` slots instead to target the individual inputs. For all `prefix-` and `suffix-` type slots, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.md) component for icons.
+In two-input mode, you can use the `prefix-start`, `prefix-end`, `suffix-start`, and `suffix-end` slots instead to target the individual inputs. For all `prefix-` and `suffix-` type slots, we recommend using a `<span>` element for simple text, symbols, or emojis, and an [`<igc-icon>`](../layouts/icon.mdx) component for icons.
 
-Another set of useful slots are `clear-icon` and `calendar-icon`, which allow you to customize the icons for the clear and calendar buttons in the input fields. For these slots we also recommend using a `<span>` element for symbols, or emojis and an [`<igc-icon>`](../layouts/icon.md) component for icons.
+Another set of useful slots are `clear-icon` and `calendar-icon`, which allow you to customize the icons for the clear and calendar buttons in the input fields. For these slots we also recommend using a `<span>` element for symbols, or emojis and an [`<igc-icon>`](../layouts/icon.mdx) component for icons.
 
 <PlatformBlock for="WebComponents">
 
@@ -836,7 +836,7 @@ In two-input mode, you can also customize the default “to” text between the
 
 </PlatformBlock>
 
-The `actions` slot allows you to insert a custom action button with your own logic. For example, the button below toggles the week numbers column in the calendar. We recommend using the [`<igc-button>`](../inputs/button.md) component when adding content to the `actions` slot.
+The `actions` slot allows you to insert a custom action button with your own logic. For example, the button below toggles the week numbers column in the calendar. We recommend using the [`<igc-button>`](../inputs/button.mdx) component when adding content to the `actions` slot.
 
 <PlatformBlock for="WebComponents">
 
@@ -892,7 +892,7 @@ In addition to the slots we've already covered, the following slots are also ava
 
 For the `title`, `helper-text`, and `header-date` slots, we recommend using a `<span>` element. A `<span>` provides a neutral container that inherits the component's styles cleanly, without carrying built-in styling properties that can interfere with the component's intended typography and layout.
 
-And for the `clear-icon-` and `calendar-icon-` type slots, we recommend using a `<span>` element for symbols, or emojis and an [`<igc-icon>`](../layouts/icon.md) component for icons.
+And for the `clear-icon-` and `calendar-icon-` type slots, we recommend using a `<span>` element for symbols, or emojis and an [`<igc-icon>`](../layouts/icon.mdx) component for icons.
 
 <Sample src="/scheduling/date-range-picker/slots" height={700} alt="{Platform} Date Range Picker Slots Example" />
 
@@ -911,7 +911,7 @@ In addition to the properties and slots, the <ApiLink pkg="core" type="DateRange
 
 ## Styling
 
-Since the <ApiLink pkg="core" type="DateRangePicker" /> component uses the <ApiLink pkg="core" type="Calendar" /> component, it also inherits the Calendar's CSS parts, allowing you to style both components seamlessly. You can find the full list of exposed Calendar CSS parts here: [Calendar Styling](calendar.md#styling). In addition to the Calendar's CSS parts, the <ApiLink pkg="core" type="DateRangePicker" /> also exposes some unique CSS parts that you can use to customize its appearance:
+Since the <ApiLink pkg="core" type="DateRangePicker" /> component uses the <ApiLink pkg="core" type="Calendar" /> component, it also inherits the Calendar's CSS parts, allowing you to style both components seamlessly. You can find the full list of exposed Calendar CSS parts here: [Calendar Styling](./calendar.mdx#styling). In addition to the Calendar's CSS parts, the <ApiLink pkg="core" type="DateRangePicker" /> also exposes some unique CSS parts that you can use to customize its appearance:
 
 |Name|Description|
 |--|--|
diff --git a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
index 52ba325e82..18cf9aa62f 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
@@ -89,7 +89,7 @@ There are over 35 chart types supported by the Spreadsheet ChartAdapters includi
 
 <DocsAside type="info">
 
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
+In the following code snippet, an external [ExcelUtility](./excel-utility.mdx) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
 </DocsAside>
 
 When setting up your {Platform} spreadsheet control to add charts, you will need to import the <ApiLink type="SpreadsheetChartAdapter" /> class like so:
diff --git a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
index 01c9c41d7f..f5889398be 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
@@ -161,7 +161,7 @@ Now that the {Platform} spreadsheet module is imported, next is the basic config
 
 <DocsAside type="info">
 
-In the following code snippet, an external [ExcelUtility](excel-utility.md) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
+In the following code snippet, an external [ExcelUtility](./excel-utility.mdx) class is used to save and load a <ApiLink type="Spreadsheet" member="workbook" label="Workbook" />.
 </DocsAside>
 
 The following demonstrates how to load a workbook into the {Platform} spreadsheet
diff --git a/docs/xplat/src/content/en/components/update-guide.mdx b/docs/xplat/src/content/en/components/update-guide.mdx
index fa3b9bd379..2e15894da5 100644
--- a/docs/xplat/src/content/en/components/update-guide.mdx
+++ b/docs/xplat/src/content/en/components/update-guide.mdx
@@ -12,7 +12,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Update Guide
 
-In the Ignite UI for React versioning the first number always matches the major version of React the code supports and the second is dedicated for major version releases. Breaking changes may be introduced between major releases. A comprehensive list of changes for each release of Ignite UI for React can be found in the product [CHANGELOG](./general-changelog-dv-react.md).
+In the Ignite UI for React versioning the first number always matches the major version of React the code supports and the second is dedicated for major version releases. Breaking changes may be introduced between major releases. A comprehensive list of changes for each release of Ignite UI for React can be found in the product [CHANGELOG](./general-changelog-dv-react.mdx).
 
 
 ## From 18.9.0 to 19.0.0
@@ -86,9 +86,9 @@ Becomes:
 
 </PlatformBlock>
 
-- Components no longer have the non-functional `name` property by default. The `name` property only remains in **igniteui-react** components, mostly form inputs such as [IgrInput](./inputs/input.md) and [IgrCombo](./inputs/combo/overview.md), where it has native functionality.
+- Components no longer have the non-functional `name` property by default. The `name` property only remains in **igniteui-react** components, mostly form inputs such as [IgrInput](./inputs/input.mdx) and [IgrCombo](./inputs/combo/overview.mdx), where it has native functionality.
 - Ignite UI for React components no longer require a `key` property, unless it is necessary according to React`s [documentation](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
-- The [IgrDataGrid](./grids/data-grid/overview.md) is no longer part of **igniteui-react-grids** package. It has been moved to **igniteui-react-data-grids**, making **igniteui-react-grids** more lightweight.
+- The [IgrDataGrid](./grids/data-grid.mdx) is no longer part of **igniteui-react-grids** package. It has been moved to **igniteui-react-data-grids**, making **igniteui-react-grids** more lightweight.
 - There were several types that were exposed as classes in version **18.9.0** which is no longer the case. Those are now exported as types and can be used like this:
 
 <PlatformBlock for="React">
diff --git a/docs/xplat/src/content/en/components/zoomslider-overview.mdx b/docs/xplat/src/content/en/components/zoomslider-overview.mdx
index 27a415f09e..a1ee95e7ea 100644
--- a/docs/xplat/src/content/en/components/zoomslider-overview.mdx
+++ b/docs/xplat/src/content/en/components/zoomslider-overview.mdx
@@ -150,7 +150,7 @@ The following code demonstrates how to setup the ZoomSlider.
 
 ## Additional Resources
 
-You can find more information about charts in [Chart Features](charts/chart-features.md) topic.
+You can find more information about charts in [Chart Features](./charts/chart-features.mdx) topic.
 
 
 ## API References
diff --git a/docs/xplat/src/content/en/toc.json b/docs/xplat/src/content/en/toc.json
index e29d9b0914..17c916bd26 100644
--- a/docs/xplat/src/content/en/toc.json
+++ b/docs/xplat/src/content/en/toc.json
@@ -11,7 +11,7 @@
       "Angular"
     ],
     "name": "Agent Workflow",
-    "href": "ai/ai-assisted-development-overview.md",
+    "href": "ai/ai-assisted-development-overview.mdx",
     "new": true
   },
   {
@@ -19,7 +19,7 @@
       "Angular"
     ],
     "name": "Agent Skills",
-    "href": "ai/skills.md",
+    "href": "ai/skills.mdx",
     "new": true
   },
   {
@@ -27,7 +27,7 @@
       "Angular"
     ],
     "name": "CLI MCP",
-    "href": "ai/cli-mcp.md",
+    "href": "ai/cli-mcp.mdx",
     "new": true
   },
   {
@@ -35,7 +35,7 @@
       "Angular"
     ],
     "name": "Theming MCP",
-    "href": "ai/theming-mcp.md",
+    "href": "ai/theming-mcp.mdx",
     "new": true
   },
   {
@@ -43,7 +43,7 @@
       "Angular"
     ],
     "name": "Maker Framework",
-    "href": "ai/maker-framework.md",
+    "href": "ai/maker-framework.mdx",
     "new": true
   },
   {
@@ -60,11 +60,11 @@
     "items": [
       {
         "name": "Adding Licensed NuGet Feed",
-        "href": "general-nuget-feed.md"
+        "href": "general-nuget-feed.mdx"
       },
       {
         "name": "Installing Ignite UI for Blazor",
-        "href": "general-installing-blazor.md"
+        "href": "general-installing-blazor.mdx"
       }
     ]
   },
@@ -74,7 +74,7 @@
       "Angular"
     ],
     "name": "Getting Started",
-    "href": "general-getting-started.md",
+    "href": "general-getting-started.mdx",
     "default": true
   },
   {
@@ -83,7 +83,7 @@
       "Angular"
     ],
     "name": "Localization(i18n)",
-    "href": "localization.md",
+    "href": "localization.mdx",
     "new": true
   },
   {
@@ -91,7 +91,7 @@
       "Angular"
     ],
     "name": "Open-Source vs Premium",
-    "href": "general-open-source-vs-premium.md",
+    "href": "general-open-source-vs-premium.mdx",
     "new": true
   },
   {
@@ -104,24 +104,24 @@
     "items": [
       {
         "name": "Blazor Server App",
-        "href": "general-getting-started.md",
+        "href": "general-getting-started.mdx",
         "default": true
       },
       {
         "name": "Blazor WebAssembly App",
-        "href": "general-getting-started-blazor-client.md"
+        "href": "general-getting-started-blazor-client.mdx"
       },
       {
         "name": "Blazor Web App",
-        "href": "general-getting-started-blazor-web-app.md"
+        "href": "general-getting-started-blazor-web-app.mdx"
       },
       {
         "name": ".NET MAUI Blazor App",
-        "href": "general-getting-started-blazor-maui.md"
+        "href": "general-getting-started-blazor-maui.mdx"
       },
       {
         "name": "Open-Source Libraries",
-        "href": "general-getting-started-oss.md",
+        "href": "general-getting-started-oss.mdx",
         "new": true
       }
     ]
@@ -131,7 +131,7 @@
       "Angular"
     ],
     "name": "Ignite UI CLI",
-    "href": "general-cli-overview.md",
+    "href": "general-cli-overview.mdx",
     "updated": true,
     "items": [
       {
@@ -139,7 +139,7 @@
           "Angular"
         ],
         "name": "Step-by-Step Guide Using Ignite UI CLI",
-        "href": "general-step-by-step-guide-using-cli.md",
+        "href": "general-step-by-step-guide-using-cli.mdx",
         "new": true
       }
     ]
@@ -150,7 +150,7 @@
       "Angular"
     ],
     "name": "Licensing",
-    "href": "general-licensing.md"
+    "href": "general-licensing.mdx"
   },
   {
     "exclude": [
@@ -166,7 +166,7 @@
           "Blazor"
         ],
         "name": "Build App with CLI MCP and Theming MCP",
-        "href": "general-how-to-mcp-e2e.md",
+        "href": "general-how-to-mcp-e2e.mdx",
         "new": true
       }
     ]
@@ -186,7 +186,7 @@
           "WebComponents"
         ],
         "name": "Blazor Excel Library",
-        "href": "blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md"
+        "href": "blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.mdx"
       },
       {
         "exclude": [
@@ -195,7 +195,7 @@
           "WebComponents"
         ],
         "name": "How To Read & Write Excel Files To Reduce Server Load",
-        "href": "blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md"
+        "href": "blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx"
       },
       {
         "exclude": [
@@ -205,7 +205,7 @@
           "Blazor"
         ],
         "name": "How To Customize Marker Display in Blazor Charts",
-        "href": "customize-marker-display-in-blazor-charts.md"
+        "href": "customize-marker-display-in-blazor-charts.mdx"
       }
     ]
   },
@@ -216,7 +216,7 @@
       "WebComponents"
     ],
     "name": "Changelog",
-    "href": "general-changelog-dv-blazor.md",
+    "href": "general-changelog-dv-blazor.mdx",
     "updated": true
   },
   {
@@ -226,7 +226,7 @@
       "WebComponents"
     ],
     "name": "Changelog",
-    "href": "general-changelog-dv-react.md",
+    "href": "general-changelog-dv-react.mdx",
     "updated": true
   },
   {
@@ -236,7 +236,7 @@
       "Blazor"
     ],
     "name": "Changelog",
-    "href": "general-changelog-dv-wc.md",
+    "href": "general-changelog-dv-wc.mdx",
     "updated": true
   },
   {
@@ -246,7 +246,7 @@
       "WebComponents"
     ],
     "name": "Changelog",
-    "href": "general-changelog-dv.md",
+    "href": "general-changelog-dv.mdx",
     "default": true,
     "updated": true
   },
@@ -257,7 +257,7 @@
       "WebComponents"
     ],
     "name": "Integrating Ignite UI for React with Next.js",
-    "href": "nextjs-usage.md"
+    "href": "nextjs-usage.mdx"
   },
   {
     "exclude": [
@@ -266,7 +266,7 @@
       "WebComponents"
     ],
     "name": "Update guide",
-    "href": "update-guide.md",
+    "href": "update-guide.mdx",
     "new": true
   },
   {
@@ -278,7 +278,7 @@
   },
   {
     "name": "Accessibility Compliance",
-    "href": "interactivity/accessibility-compliance.md"
+    "href": "interactivity/accessibility-compliance.mdx"
   },
   {
     "note": "THIS MAIN NODE FOR OLD XPLAT GRID",
@@ -290,7 +290,7 @@
     ],
     "name": "Grids & Lists",
     "header": true,
-    "href": "grids/grids.md"
+    "href": "grids/grids.mdx"
   },
   {
     "note": "THIS MAIN NODE FOR NEW XPLAT GRID",
@@ -299,7 +299,7 @@
     ],
     "name": "Grids & Lists",
     "header": true,
-    "href": "grids/grids-header.md",
+    "href": "grids/grids-header.mdx",
     "premium": true
   },
   {
@@ -307,14 +307,14 @@
       "Angular"
     ],
     "name": "Grid",
-    "href": "grids/data-grid.md",
+    "href": "grids/data-grid.mdx",
     "items": [
       {
         "exclude": [
           "Angular"
         ],
         "name": "Cell Merging",
-        "href": "grids/grid/cell-merging.md",
+        "href": "grids/grid/cell-merging.mdx",
         "premium": true,
         "new": true
       },
@@ -323,7 +323,7 @@
           "Angular"
         ],
         "name": "Clipboard Interactions",
-        "href": "grids/grid/clipboard-interactions.md",
+        "href": "grids/grid/clipboard-interactions.mdx",
         "premium": true
       },
       {
@@ -331,7 +331,7 @@
           "Angular"
         ],
         "name": "Collapsible Column Groups",
-        "href": "grids/grid/collapsible-column-groups.md",
+        "href": "grids/grid/collapsible-column-groups.mdx",
         "premium": true,
         "updated": true
       },
@@ -340,7 +340,7 @@
           "Angular"
         ],
         "name": "Column Hiding",
-        "href": "grids/grid/column-hiding.md",
+        "href": "grids/grid/column-hiding.mdx",
         "premium": true,
         "updated": true
       },
@@ -349,7 +349,7 @@
           "Angular"
         ],
         "name": "Column Moving",
-        "href": "grids/grid/column-moving.md",
+        "href": "grids/grid/column-moving.mdx",
         "premium": true
       },
       {
@@ -357,7 +357,7 @@
           "Angular"
         ],
         "name": "Column Pinning",
-        "href": "grids/grid/column-pinning.md",
+        "href": "grids/grid/column-pinning.mdx",
         "premium": true,
         "updated": true
       },
@@ -366,7 +366,7 @@
           "Angular"
         ],
         "name": "Column Resizing",
-        "href": "grids/grid/column-resizing.md",
+        "href": "grids/grid/column-resizing.mdx",
         "premium": true
       },
       {
@@ -374,7 +374,7 @@
           "Angular"
         ],
         "name": "Column Types",
-        "href": "grids/grid/column-types.md",
+        "href": "grids/grid/column-types.mdx",
         "premium": true
       },
       {
@@ -382,7 +382,7 @@
           "Angular"
         ],
         "name": "Conditional Styling",
-        "href": "grids/grid/conditional-cell-styling.md",
+        "href": "grids/grid/conditional-cell-styling.mdx",
         "premium": true
       },
       {
@@ -390,14 +390,14 @@
           "Angular"
         ],
         "name": "Editing",
-        "href": "grids/grid/editing.md",
+        "href": "grids/grid/editing.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Editing",
-            "href": "grids/grid/cell-editing.md",
+            "href": "grids/grid/cell-editing.mdx",
             "premium": true
           },
           {
@@ -405,7 +405,7 @@
               "Angular"
             ],
             "name": "Cascading Combos",
-            "href": "grids/grid/cascading-combos.md",
+            "href": "grids/grid/cascading-combos.mdx",
             "premium": true
           },
           {
@@ -413,7 +413,7 @@
               "Angular"
             ],
             "name": "Row Adding",
-            "href": "grids/grid/row-adding.md",
+            "href": "grids/grid/row-adding.mdx",
             "premium": true
           },
           {
@@ -421,7 +421,7 @@
               "Angular"
             ],
             "name": "Row Editing",
-            "href": "grids/grid/row-editing.md",
+            "href": "grids/grid/row-editing.mdx",
             "premium": true
           }
         ]
@@ -431,7 +431,7 @@
           "Angular"
         ],
         "name": "Exporting",
-        "href": "grids/grid/export-excel.md",
+        "href": "grids/grid/export-excel.mdx",
         "premium": true,
         "updated": true
       },
@@ -440,14 +440,14 @@
           "Angular"
         ],
         "name": "Filtering",
-        "href": "grids/grid/filtering.md",
+        "href": "grids/grid/filtering.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Advanced Filtering",
-            "href": "grids/grid/advanced-filtering.md",
+            "href": "grids/grid/advanced-filtering.mdx",
             "premium": true
           },
           {
@@ -455,7 +455,7 @@
               "Angular"
             ],
             "name": "Excel Style Filtering",
-            "href": "grids/grid/excel-style-filtering.md",
+            "href": "grids/grid/excel-style-filtering.mdx",
             "premium": true
           }
         ]
@@ -465,7 +465,7 @@
           "Angular"
         ],
         "name": "Group By",
-        "href": "grids/grid/groupby.md",
+        "href": "grids/grid/groupby.mdx",
         "premium": true
       },
       {
@@ -473,7 +473,7 @@
           "Angular"
         ],
         "name": "Live Data / Real-Time",
-        "href": "grids/grid/live-data.md",
+        "href": "grids/grid/live-data.mdx",
         "premium": true
       },
       {
@@ -481,7 +481,7 @@
           "Angular"
         ],
         "name": "Master-Detail",
-        "href": "grids/grid/master-detail.md",
+        "href": "grids/grid/master-detail.mdx",
         "premium": true
       },
       {
@@ -489,7 +489,7 @@
           "Angular"
         ],
         "name": "Keyboard navigation",
-        "href": "grids/grid/keyboard-navigation.md",
+        "href": "grids/grid/keyboard-navigation.mdx",
         "premium": true
       },
       {
@@ -500,7 +500,7 @@
           "Blazor"
         ],
         "name": "Master Detail",
-        "href": "grids/grid/master-detail.md",
+        "href": "grids/grid/master-detail.mdx",
         "premium": true
       },
       {
@@ -508,7 +508,7 @@
           "Angular"
         ],
         "name": "Multi-Column Headers",
-        "href": "grids/grid/multi-column-headers.md",
+        "href": "grids/grid/multi-column-headers.mdx",
         "premium": true
       },
       {
@@ -516,7 +516,7 @@
           "Angular"
         ],
         "name": "Toolbar",
-        "href": "grids/grid/toolbar.md",
+        "href": "grids/grid/toolbar.mdx",
         "premium": true
       },
       {
@@ -524,7 +524,7 @@
           "Angular"
         ],
         "name": "Multi-Row Layout",
-        "href": "grids/grid/multi-row-layout.md",
+        "href": "grids/grid/multi-row-layout.mdx",
         "premium": true
       },
       {
@@ -532,7 +532,7 @@
           "Angular"
         ],
         "name": "Paging",
-        "href": "grids/grid/paging.md",
+        "href": "grids/grid/paging.mdx",
         "premium": true
       },
       {
@@ -540,7 +540,7 @@
           "Angular"
         ],
         "name": "Paste from Excel",
-        "href": "grids/grid/paste-excel.md",
+        "href": "grids/grid/paste-excel.mdx",
         "premium": true
       },
       {
@@ -548,7 +548,7 @@
           "Angular"
         ],
         "name": "Remote Data Operations",
-        "href": "grids/grid/remote-data-operations.md",
+        "href": "grids/grid/remote-data-operations.mdx",
         "premium": true
       },
       {
@@ -556,7 +556,7 @@
           "Angular"
         ],
         "name": "Row Actions",
-        "href": "grids/grid/row-actions.md",
+        "href": "grids/grid/row-actions.mdx",
         "premium": true
       },
       {
@@ -564,7 +564,7 @@
           "Angular"
         ],
         "name": "Row Dragging",
-        "href": "grids/grid/row-drag.md",
+        "href": "grids/grid/row-drag.mdx",
         "premium": true
       },
       {
@@ -572,7 +572,7 @@
           "Angular"
         ],
         "name": "Row Pinning",
-        "href": "grids/grid/row-pinning.md",
+        "href": "grids/grid/row-pinning.mdx",
         "premium": true
       },
       {
@@ -580,7 +580,7 @@
           "Angular"
         ],
         "name": "Search",
-        "href": "grids/grid/search.md",
+        "href": "grids/grid/search.mdx",
         "premium": true
       },
       {
@@ -588,14 +588,14 @@
           "Angular"
         ],
         "name": "Selection",
-        "href": "grids/grid/selection.md",
+        "href": "grids/grid/selection.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Selection",
-            "href": "grids/grid/cell-selection.md",
+            "href": "grids/grid/cell-selection.mdx",
             "premium": true
           },
           {
@@ -603,7 +603,7 @@
               "Angular"
             ],
             "name": "Column Selection",
-            "href": "grids/grid/column-selection.md",
+            "href": "grids/grid/column-selection.mdx",
             "premium": true
           },
           {
@@ -611,7 +611,7 @@
               "Angular"
             ],
             "name": "Row Selection",
-            "href": "grids/grid/row-selection.md",
+            "href": "grids/grid/row-selection.mdx",
             "premium": true
           }
         ]
@@ -621,7 +621,7 @@
           "Angular"
         ],
         "name": "Size",
-        "href": "grids/grid/size.md",
+        "href": "grids/grid/size.mdx",
         "premium": true
       },
       {
@@ -629,7 +629,7 @@
           "Angular"
         ],
         "name": "Sizing",
-        "href": "grids/grid/sizing.md",
+        "href": "grids/grid/sizing.mdx",
         "premium": true
       },
       {
@@ -637,7 +637,7 @@
           "Angular"
         ],
         "name": "Sorting",
-        "href": "grids/grid/sorting.md",
+        "href": "grids/grid/sorting.mdx",
         "premium": true
       },
       {
@@ -645,7 +645,7 @@
           "Angular"
         ],
         "name": "State Persistence",
-        "href": "grids/grid/state-persistence.md",
+        "href": "grids/grid/state-persistence.mdx",
         "premium": true
       },
       {
@@ -653,7 +653,7 @@
           "Angular"
         ],
         "name": "Summaries",
-        "href": "grids/grid/summaries.md",
+        "href": "grids/grid/summaries.mdx",
         "premium": true
       },
       {
@@ -661,7 +661,7 @@
           "Angular"
         ],
         "name": "Virtualization and performance",
-        "href": "grids/grid/virtualization.md",
+        "href": "grids/grid/virtualization.mdx",
         "premium": true
       },
       {
@@ -669,7 +669,7 @@
           "Angular"
         ],
         "name": "Theming",
-        "href": "grids/theming-grid.md",
+        "href": "grids/theming-grid.mdx",
         "premium": true
       },
       {
@@ -677,7 +677,7 @@
           "Angular"
         ],
         "name": "Customize Icons",
-        "href": "grids/grid/icons.md",
+        "href": "grids/grid/icons.mdx",
         "premium": true
       }
     ]
@@ -687,7 +687,7 @@
       "Angular"
     ],
     "name": "Hierarchical Grid",
-    "href": "grids/hierarchical-grid/overview.md",
+    "href": "grids/hierarchical-grid/overview.mdx",
     "premium": true,
     "items": [
       {
@@ -695,7 +695,7 @@
           "Angular"
         ],
         "name": "Cell Merging",
-        "href": "grids/hierarchical-grid/cell-merging.md",
+        "href": "grids/hierarchical-grid/cell-merging.mdx",
         "premium": true,
         "new": true
       },
@@ -704,7 +704,7 @@
           "Angular"
         ],
         "name": "Collapsible Column Groups",
-        "href": "grids/hierarchical-grid/collapsible-column-groups.md",
+        "href": "grids/hierarchical-grid/collapsible-column-groups.mdx",
         "premium": true
       },
       {
@@ -712,7 +712,7 @@
           "Angular"
         ],
         "name": "Column Hiding",
-        "href": "grids/hierarchical-grid/column-hiding.md",
+        "href": "grids/hierarchical-grid/column-hiding.mdx",
         "premium": true,
         "updated": true
       },
@@ -721,7 +721,7 @@
           "Angular"
         ],
         "name": "Column Moving",
-        "href": "grids/hierarchical-grid/column-moving.md",
+        "href": "grids/hierarchical-grid/column-moving.mdx",
         "premium": true
       },
       {
@@ -729,7 +729,7 @@
           "Angular"
         ],
         "name": "Column Pinning",
-        "href": "grids/hierarchical-grid/column-pinning.md",
+        "href": "grids/hierarchical-grid/column-pinning.mdx",
         "premium": true,
         "updated": true
       },
@@ -738,7 +738,7 @@
           "Angular"
         ],
         "name": "Column Resizing",
-        "href": "grids/hierarchical-grid/column-resizing.md",
+        "href": "grids/hierarchical-grid/column-resizing.mdx",
         "premium": true
       },
       {
@@ -746,7 +746,7 @@
           "Angular"
         ],
         "name": "Column Types",
-        "href": "grids/hierarchical-grid/column-types.md",
+        "href": "grids/hierarchical-grid/column-types.mdx",
         "premium": true
       },
       {
@@ -754,7 +754,7 @@
           "Angular"
         ],
         "name": "Conditional Styling",
-        "href": "grids/hierarchical-grid/conditional-cell-styling.md",
+        "href": "grids/hierarchical-grid/conditional-cell-styling.mdx",
         "premium": true
       },
       {
@@ -762,14 +762,14 @@
           "Angular"
         ],
         "name": "Editing",
-        "href": "grids/hierarchical-grid/editing.md",
+        "href": "grids/hierarchical-grid/editing.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Editing",
-            "href": "grids/hierarchical-grid/cell-editing.md",
+            "href": "grids/hierarchical-grid/cell-editing.mdx",
             "premium": true
           },
           {
@@ -777,7 +777,7 @@
               "Angular"
             ],
             "name": "Row Adding",
-            "href": "grids/hierarchical-grid/row-adding.md",
+            "href": "grids/hierarchical-grid/row-adding.mdx",
             "premium": true
           },
           {
@@ -785,7 +785,7 @@
               "Angular"
             ],
             "name": "Row Editing",
-            "href": "grids/hierarchical-grid/row-editing.md",
+            "href": "grids/hierarchical-grid/row-editing.mdx",
             "premium": true
           }
         ]
@@ -795,7 +795,7 @@
           "Angular"
         ],
         "name": "Exporting",
-        "href": "grids/hierarchical-grid/export-excel.md",
+        "href": "grids/hierarchical-grid/export-excel.mdx",
         "premium": true,
         "updated": true
       },
@@ -804,14 +804,14 @@
           "Angular"
         ],
         "name": "Filtering",
-        "href": "grids/hierarchical-grid/filtering.md",
+        "href": "grids/hierarchical-grid/filtering.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Advanced Filtering",
-            "href": "grids/hierarchical-grid/advanced-filtering.md",
+            "href": "grids/hierarchical-grid/advanced-filtering.mdx",
             "premium": true
           },
           {
@@ -819,7 +819,7 @@
               "Angular"
             ],
             "name": "Excel Style Filtering",
-            "href": "grids/hierarchical-grid/excel-style-filtering.md",
+            "href": "grids/hierarchical-grid/excel-style-filtering.mdx",
             "premium": true
           }
         ]
@@ -829,7 +829,7 @@
           "Angular"
         ],
         "name": "Multi-Column Headers",
-        "href": "grids/hierarchical-grid/multi-column-headers.md",
+        "href": "grids/hierarchical-grid/multi-column-headers.mdx",
         "premium": true
       },
       {
@@ -840,7 +840,7 @@
           "WebComponents"
         ],
         "name": "Multi-Row Layout",
-        "href": "grids/hierarchical-grid/multi-row-layout.md",
+        "href": "grids/hierarchical-grid/multi-row-layout.mdx",
         "premium": true
       },
       {
@@ -851,7 +851,7 @@
           "WebComponents"
         ],
         "name": "Paging",
-        "href": "grids/hierarchical-grid/paging.md",
+        "href": "grids/hierarchical-grid/paging.mdx",
         "premium": true
       },
       {
@@ -859,7 +859,7 @@
           "Angular"
         ],
         "name": "Remote Data Operations",
-        "href": "grids/hierarchical-grid/remote-data-operations.md",
+        "href": "grids/hierarchical-grid/remote-data-operations.mdx",
         "premium": true
       },
       {
@@ -867,7 +867,7 @@
           "Angular"
         ],
         "name": "Row Actions",
-        "href": "grids/hierarchical-grid/row-actions.md",
+        "href": "grids/hierarchical-grid/row-actions.mdx",
         "premium": true
       },
       {
@@ -875,7 +875,7 @@
           "Angular"
         ],
         "name": "Row Dragging",
-        "href": "grids/hierarchical-grid/row-drag.md",
+        "href": "grids/hierarchical-grid/row-drag.mdx",
         "premium": true
       },
       {
@@ -883,7 +883,7 @@
           "Angular"
         ],
         "name": "Row Pinning",
-        "href": "grids/hierarchical-grid/row-pinning.md",
+        "href": "grids/hierarchical-grid/row-pinning.mdx",
         "premium": true
       },
       {
@@ -891,14 +891,14 @@
           "Angular"
         ],
         "name": "Selection",
-        "href": "grids/hierarchical-grid/selection.md",
+        "href": "grids/hierarchical-grid/selection.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Selection",
-            "href": "grids/hierarchical-grid/cell-selection.md",
+            "href": "grids/hierarchical-grid/cell-selection.mdx",
             "premium": true
           },
           {
@@ -906,7 +906,7 @@
               "Angular"
             ],
             "name": "Column Selection",
-            "href": "grids/hierarchical-grid/column-selection.md",
+            "href": "grids/hierarchical-grid/column-selection.mdx",
             "premium": true
           },
           {
@@ -914,7 +914,7 @@
               "Angular"
             ],
             "name": "Row Selection",
-            "href": "grids/hierarchical-grid/row-selection.md",
+            "href": "grids/hierarchical-grid/row-selection.mdx",
             "premium": true
           }
         ]
@@ -924,7 +924,7 @@
           "Angular"
         ],
         "name": "Size",
-        "href": "grids/hierarchical-grid/size.md",
+        "href": "grids/hierarchical-grid/size.mdx",
         "premium": true
       },
       {
@@ -932,7 +932,7 @@
           "Angular"
         ],
         "name": "Sizing",
-        "href": "grids/hierarchical-grid/sizing.md",
+        "href": "grids/hierarchical-grid/sizing.mdx",
         "premium": true
       },
       {
@@ -940,7 +940,7 @@
           "Angular"
         ],
         "name": "Sorting",
-        "href": "grids/hierarchical-grid/sorting.md",
+        "href": "grids/hierarchical-grid/sorting.mdx",
         "premium": true
       },
       {
@@ -948,7 +948,7 @@
           "Angular"
         ],
         "name": "State Persistence",
-        "href": "grids/hierarchical-grid/state-persistence.md",
+        "href": "grids/hierarchical-grid/state-persistence.mdx",
         "premium": true
       },
       {
@@ -956,7 +956,7 @@
           "Angular"
         ],
         "name": "Summaries",
-        "href": "grids/hierarchical-grid/summaries.md",
+        "href": "grids/hierarchical-grid/summaries.mdx",
         "premium": true
       },
       {
@@ -964,7 +964,7 @@
           "Angular"
         ],
         "name": "Toolbar",
-        "href": "grids/hierarchical-grid/toolbar.md",
+        "href": "grids/hierarchical-grid/toolbar.mdx",
         "premium": true
       },
       {
@@ -972,7 +972,7 @@
           "Angular"
         ],
         "name": "Virtualization and performance",
-        "href": "grids/hierarchical-grid/virtualization.md",
+        "href": "grids/hierarchical-grid/virtualization.mdx",
         "premium": true
       },
       {
@@ -983,7 +983,7 @@
           "WebComponents"
         ],
         "name": "Keyboard navigation",
-        "href": "grids/hierarchical-grid/keyboard-navigation.md",
+        "href": "grids/hierarchical-grid/keyboard-navigation.mdx",
         "premium": true
       },
       {
@@ -991,7 +991,7 @@
           "Angular"
         ],
         "name": "Load on Demand",
-        "href": "grids/hierarchical-grid/load-on-demand.md",
+        "href": "grids/hierarchical-grid/load-on-demand.mdx",
         "premium": true
       }
     ]
@@ -1001,7 +1001,7 @@
       "Angular"
     ],
     "name": "Pivot Grid",
-    "href": "grids/pivot-grid/overview.md",
+    "href": "grids/pivot-grid/overview.mdx",
     "premium": true,
     "items": [
       {
@@ -1012,7 +1012,7 @@
           "Blazor"
         ],
         "name": "Selection",
-        "href": "grids/pivot-grid/selection.md",
+        "href": "grids/pivot-grid/selection.mdx",
         "premium": true
       },
       {
@@ -1020,7 +1020,7 @@
           "Angular"
         ],
         "name": "State Persistence",
-        "href": "grids/pivot-grid/state-persistence.md",
+        "href": "grids/pivot-grid/state-persistence.mdx",
         "premium": true
       },
       {
@@ -1029,7 +1029,7 @@
           "WebComponents"
         ],
         "name": "Features",
-        "href": "grids/pivot-grid/features.md",
+        "href": "grids/pivot-grid/features.mdx",
         "premium": true
       },
       {
@@ -1039,7 +1039,7 @@
           "Blazor"
         ],
         "name": "Remote Operations",
-        "href": "grids/pivot-grid/remote-operations.md",
+        "href": "grids/pivot-grid/remote-operations.mdx",
         "premium": true
       }
     ]
@@ -1049,7 +1049,7 @@
       "Angular"
     ],
     "name": "Tree Grid",
-    "href": "grids/tree-grid/overview.md",
+    "href": "grids/tree-grid/overview.mdx",
     "premium": true,
     "items": [
       {
@@ -1057,7 +1057,7 @@
           "Angular"
         ],
         "name": "Cell Merging",
-        "href": "grids/tree-grid/cell-merging.md",
+        "href": "grids/tree-grid/cell-merging.mdx",
         "premium": true,
         "new": true
       },
@@ -1066,7 +1066,7 @@
           "Angular"
         ],
         "name": "Clipboard Interactions",
-        "href": "grids/tree-grid/clipboard-interactions.md",
+        "href": "grids/tree-grid/clipboard-interactions.mdx",
         "premium": true
       },
       {
@@ -1074,7 +1074,7 @@
           "Angular"
         ],
         "name": "Collapsible Column Groups",
-        "href": "grids/tree-grid/collapsible-column-groups.md",
+        "href": "grids/tree-grid/collapsible-column-groups.mdx",
         "premium": true
       },
       {
@@ -1082,7 +1082,7 @@
           "Angular"
         ],
         "name": "Column Types",
-        "href": "grids/tree-grid/column-types.md",
+        "href": "grids/tree-grid/column-types.mdx",
         "premium": true
       },
       {
@@ -1090,7 +1090,7 @@
           "Angular"
         ],
         "name": "Conditional Styling",
-        "href": "grids/tree-grid/conditional-cell-styling.md",
+        "href": "grids/tree-grid/conditional-cell-styling.mdx",
         "premium": true
       },
       {
@@ -1098,7 +1098,7 @@
           "Angular"
         ],
         "name": "Column Hiding",
-        "href": "grids/tree-grid/column-hiding.md",
+        "href": "grids/tree-grid/column-hiding.mdx",
         "premium": true,
         "updated": true
       },
@@ -1108,7 +1108,7 @@
           "React"
         ],
         "name": "Column Moving",
-        "href": "grids/tree-grid/column-moving.md",
+        "href": "grids/tree-grid/column-moving.mdx",
         "premium": true
       },
       {
@@ -1116,7 +1116,7 @@
           "Angular"
         ],
         "name": "Column Pinning",
-        "href": "grids/tree-grid/column-pinning.md",
+        "href": "grids/tree-grid/column-pinning.mdx",
         "premium": true,
         "updated": true
       },
@@ -1125,7 +1125,7 @@
           "Angular"
         ],
         "name": "Column Resizing",
-        "href": "grids/tree-grid/column-resizing.md",
+        "href": "grids/tree-grid/column-resizing.mdx",
         "premium": true
       },
       {
@@ -1133,14 +1133,14 @@
           "Angular"
         ],
         "name": "Editing",
-        "href": "grids/tree-grid/editing.md",
+        "href": "grids/tree-grid/editing.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Editing",
-            "href": "grids/tree-grid/cell-editing.md",
+            "href": "grids/tree-grid/cell-editing.mdx",
             "premium": true
           },
           {
@@ -1148,7 +1148,7 @@
               "Angular"
             ],
             "name": "Row Adding",
-            "href": "grids/tree-grid/row-adding.md",
+            "href": "grids/tree-grid/row-adding.mdx",
             "premium": true
           },
           {
@@ -1156,7 +1156,7 @@
               "Angular"
             ],
             "name": "Row Editing",
-            "href": "grids/tree-grid/row-editing.md",
+            "href": "grids/tree-grid/row-editing.mdx",
             "premium": true
           }
         ]
@@ -1166,7 +1166,7 @@
           "Angular"
         ],
         "name": "Exporting",
-        "href": "grids/tree-grid/export-excel.md",
+        "href": "grids/tree-grid/export-excel.mdx",
         "premium": true,
         "updated": true
       },
@@ -1175,14 +1175,14 @@
           "Angular"
         ],
         "name": "Filtering",
-        "href": "grids/tree-grid/filtering.md",
+        "href": "grids/tree-grid/filtering.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Advanced Filtering",
-            "href": "grids/tree-grid/advanced-filtering.md",
+            "href": "grids/tree-grid/advanced-filtering.mdx",
             "premium": true
           },
           {
@@ -1191,7 +1191,7 @@
               "React"
             ],
             "name": "Excel Style Filtering",
-            "href": "grids/tree-grid/excel-style-filtering.md",
+            "href": "grids/tree-grid/excel-style-filtering.mdx",
             "premium": true
           }
         ]
@@ -1202,7 +1202,7 @@
           "React"
         ],
         "name": "Keyboard navigation",
-        "href": "grids/tree-grid/keyboard-navigation.md",
+        "href": "grids/tree-grid/keyboard-navigation.mdx",
         "premium": true
       },
       {
@@ -1210,7 +1210,7 @@
           "Angular"
         ],
         "name": "Multi-Column Headers",
-        "href": "grids/tree-grid/multi-column-headers.md",
+        "href": "grids/tree-grid/multi-column-headers.mdx",
         "premium": true
       },
       {
@@ -1221,7 +1221,7 @@
           "Blazor"
         ],
         "name": "Multi-Row Layout",
-        "href": "grids/tree-grid/multi-row-layout.md",
+        "href": "grids/tree-grid/multi-row-layout.mdx",
         "premium": true
       },
       {
@@ -1229,7 +1229,7 @@
           "Angular"
         ],
         "name": "Paging",
-        "href": "grids/tree-grid/paging.md",
+        "href": "grids/tree-grid/paging.mdx",
         "premium": true
       },
       {
@@ -1240,7 +1240,7 @@
           "Blazor"
         ],
         "name": "Remote Data Operations",
-        "href": "grids/tree-grid/remote-data-operations.md",
+        "href": "grids/tree-grid/remote-data-operations.mdx",
         "premium": true
       },
       {
@@ -1248,7 +1248,7 @@
           "Angular"
         ],
         "name": "Row Actions",
-        "href": "grids/tree-grid/row-actions.md",
+        "href": "grids/tree-grid/row-actions.mdx",
         "premium": true
       },
       {
@@ -1256,7 +1256,7 @@
           "Angular"
         ],
         "name": "Row Dragging",
-        "href": "grids/tree-grid/row-drag.md",
+        "href": "grids/tree-grid/row-drag.mdx",
         "premium": true
       },
       {
@@ -1264,7 +1264,7 @@
           "Angular"
         ],
         "name": "Row Pinning",
-        "href": "grids/tree-grid/row-pinning.md",
+        "href": "grids/tree-grid/row-pinning.mdx",
         "premium": true
       },
       {
@@ -1272,7 +1272,7 @@
           "Angular"
         ],
         "name": "Search",
-        "href": "grids/tree-grid/search.md",
+        "href": "grids/tree-grid/search.mdx",
         "premium": true
       },
       {
@@ -1280,14 +1280,14 @@
           "Angular"
         ],
         "name": "Selection",
-        "href": "grids/tree-grid/selection.md",
+        "href": "grids/tree-grid/selection.mdx",
         "items": [
           {
             "exclude": [
               "Angular"
             ],
             "name": "Cell Selection",
-            "href": "grids/tree-grid/cell-selection.md",
+            "href": "grids/tree-grid/cell-selection.mdx",
             "premium": true
           },
           {
@@ -1295,7 +1295,7 @@
               "Angular"
             ],
             "name": "Column Selection",
-            "href": "grids/tree-grid/column-selection.md",
+            "href": "grids/tree-grid/column-selection.mdx",
             "premium": true
           },
           {
@@ -1303,7 +1303,7 @@
               "Angular"
             ],
             "name": "Row Selection",
-            "href": "grids/tree-grid/row-selection.md",
+            "href": "grids/tree-grid/row-selection.mdx",
             "premium": true
           }
         ]
@@ -1313,7 +1313,7 @@
           "Angular"
         ],
         "name": "Size",
-        "href": "grids/tree-grid/size.md",
+        "href": "grids/tree-grid/size.mdx",
         "premium": true
       },
       {
@@ -1321,7 +1321,7 @@
           "Angular"
         ],
         "name": "Sizing",
-        "href": "grids/tree-grid/sizing.md",
+        "href": "grids/tree-grid/sizing.mdx",
         "premium": true
       },
       {
@@ -1329,7 +1329,7 @@
           "Angular"
         ],
         "name": "Sorting",
-        "href": "grids/tree-grid/sorting.md",
+        "href": "grids/tree-grid/sorting.mdx",
         "premium": true
       },
       {
@@ -1337,7 +1337,7 @@
           "Angular"
         ],
         "name": "State Persistence",
-        "href": "grids/tree-grid/state-persistence.md",
+        "href": "grids/tree-grid/state-persistence.mdx",
         "premium": true
       },
       {
@@ -1345,7 +1345,7 @@
           "Angular"
         ],
         "name": "Summaries",
-        "href": "grids/tree-grid/summaries.md",
+        "href": "grids/tree-grid/summaries.mdx",
         "premium": true
       },
       {
@@ -1353,7 +1353,7 @@
           "Angular"
         ],
         "name": "Toolbar",
-        "href": "grids/tree-grid/toolbar.md",
+        "href": "grids/tree-grid/toolbar.mdx",
         "premium": true
       },
       {
@@ -1361,7 +1361,7 @@
           "Angular"
         ],
         "name": "Virtualization and performance",
-        "href": "grids/tree-grid/virtualization.md",
+        "href": "grids/tree-grid/virtualization.mdx",
         "premium": true
       },
       {
@@ -1371,7 +1371,7 @@
           "Blazor"
         ],
         "name": "Load On Demand",
-        "href": "grids/tree-grid/load-on-demand.md",
+        "href": "grids/tree-grid/load-on-demand.mdx",
         "premium": true
       },
       {
@@ -1380,7 +1380,7 @@
           "React"
         ],
         "name": "Live Data / Real-Time",
-        "href": "grids/tree-grid/live-data.md",
+        "href": "grids/tree-grid/live-data.mdx",
         "premium": true
       }
     ]
@@ -1390,14 +1390,14 @@
       "Angular"
     ],
     "name": "Grid Lite",
-    "href": "grid-lite/overview.md",
+    "href": "grid-lite/overview.mdx",
     "items": [
       {
         "exclude": [
           "Angular"
         ],
         "name": "Column Configuration",
-        "href": "grid-lite/column-configuration.md",
+        "href": "grid-lite/column-configuration.mdx",
         "items": [
           {
             "exclude": [
@@ -1405,7 +1405,7 @@
               "Blazor"
             ],
             "name": "Cell Template",
-            "href": "grid-lite/cell-template.md",
+            "href": "grid-lite/cell-template.mdx",
             "new": true
           },
           {
@@ -1414,7 +1414,7 @@
               "Blazor"
             ],
             "name": "Header Template",
-            "href": "grid-lite/header-template.md",
+            "href": "grid-lite/header-template.mdx",
             "new": true
           }
         ],
@@ -1425,7 +1425,7 @@
           "Angular"
         ],
         "name": "Data Binding",
-        "href": "grid-lite/binding.md",
+        "href": "grid-lite/binding.mdx",
         "new": true
       },
       {
@@ -1433,7 +1433,7 @@
           "Angular"
         ],
         "name": "Filtering",
-        "href": "grid-lite/filtering.md",
+        "href": "grid-lite/filtering.mdx",
         "new": true
       },
       {
@@ -1441,7 +1441,7 @@
           "Angular"
         ],
         "name": "Sorting",
-        "href": "grid-lite/sorting.md",
+        "href": "grid-lite/sorting.mdx",
         "new": true
       },
       {
@@ -1449,7 +1449,7 @@
           "Angular"
         ],
         "name": "Theming",
-        "href": "grid-lite/theming.md",
+        "href": "grid-lite/theming.mdx",
         "new": true
       }
     ],
@@ -1460,14 +1460,14 @@
       "Angular"
     ],
     "name": "List",
-    "href": "grids/list.md"
+    "href": "grids/list.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Tree",
-    "href": "grids/tree.md"
+    "href": "grids/tree.mdx"
   },
   {
     "exclude": [
@@ -1477,27 +1477,27 @@
       "React"
     ],
     "name": "Table / Grid",
-    "href": "grids/data-grid/overview.md",
+    "href": "grids/data-grid/overview.mdx",
     "premium": true,
     "items": [
       {
         "name": "Accessibility Compliance",
-        "href": "grids/data-grid/accessibility.md",
+        "href": "grids/data-grid/accessibility.mdx",
         "premium": true
       },
       {
         "name": "Binding Live Data",
-        "href": "grids/data-grid/live-data.md",
+        "href": "grids/data-grid/live-data.mdx",
         "premium": true
       },
       {
         "name": "Binding Local Data",
-        "href": "grids/data-grid/local-data.md",
+        "href": "grids/data-grid/local-data.mdx",
         "premium": true
       },
       {
         "name": "Localization",
-        "href": "grids/data-grid/localization.md",
+        "href": "grids/data-grid/localization.mdx",
         "premium": true
       },
       {
@@ -1505,7 +1505,7 @@
           "Blazor"
         ],
         "name": "Binding Comparison Data",
-        "href": "grids/data-grid/type-comparison-table.md",
+        "href": "grids/data-grid/type-comparison-table.mdx",
         "premium": true
       },
       {
@@ -1513,7 +1513,7 @@
           "Blazor"
         ],
         "name": "Binding Heatmap Data",
-        "href": "grids/data-grid/type-heatmap-table.md",
+        "href": "grids/data-grid/type-heatmap-table.mdx",
         "premium": true
       },
       {
@@ -1521,7 +1521,7 @@
           "Blazor"
         ],
         "name": "Binding Matrix Data",
-        "href": "grids/data-grid/type-matrix-table.md",
+        "href": "grids/data-grid/type-matrix-table.mdx",
         "premium": true
       },
       {
@@ -1529,7 +1529,7 @@
           "Blazor"
         ],
         "name": "Binding Periodic Data",
-        "href": "grids/data-grid/type-periodic-table.md",
+        "href": "grids/data-grid/type-periodic-table.mdx",
         "premium": true
       },
       {
@@ -1537,112 +1537,112 @@
           "Blazor"
         ],
         "name": "Binding Virtual Data",
-        "href": "grids/data-grid/remote-data.md",
+        "href": "grids/data-grid/remote-data.mdx",
         "premium": true
       },
       {
         "name": "Cell Activation",
-        "href": "grids/data-grid/cell-activation.md",
+        "href": "grids/data-grid/cell-activation.mdx",
         "premium": true
       },
       {
         "name": "Grid Editing",
-        "href": "grids/data-grid/cell-editing.md",
+        "href": "grids/data-grid/cell-editing.mdx",
         "premium": true
       },
       {
         "name": "Cell Selection",
-        "href": "grids/data-grid/cell-selection.md",
+        "href": "grids/data-grid/cell-selection.mdx",
         "premium": true
       },
       {
         "name": "Column Animations",
-        "href": "grids/data-grid/column-animation.md",
+        "href": "grids/data-grid/column-animation.mdx",
         "premium": true
       },
       {
         "name": "Column Filtering",
-        "href": "grids/data-grid/column-filtering.md",
+        "href": "grids/data-grid/column-filtering.mdx",
         "premium": true
       },
       {
         "name": "Column Moving",
-        "href": "grids/data-grid/column-moving.md",
+        "href": "grids/data-grid/column-moving.mdx",
         "premium": true
       },
       {
         "name": "Column Chooser",
-        "href": "grids/data-grid/column-chooser.md",
+        "href": "grids/data-grid/column-chooser.mdx",
         "premium": true
       },
       {
         "name": "Column Options",
-        "href": "grids/data-grid/column-options.md",
+        "href": "grids/data-grid/column-options.mdx",
         "premium": true
       },
       {
         "name": "Column Pinning",
-        "href": "grids/data-grid/column-pinning.md",
+        "href": "grids/data-grid/column-pinning.mdx",
         "premium": true
       },
       {
         "name": "Column Resizing",
-        "href": "grids/data-grid/column-resizing.md",
+        "href": "grids/data-grid/column-resizing.mdx",
         "premium": true
       },
       {
         "name": "Column Sorting",
-        "href": "grids/data-grid/column-sorting.md",
+        "href": "grids/data-grid/column-sorting.mdx",
         "premium": true
       },
       {
         "name": "Column Sparkline",
-        "href": "grids/data-grid/type-sparkline-table.md",
+        "href": "grids/data-grid/type-sparkline-table.mdx",
         "premium": true
       },
       {
         "name": "Column Summaries",
-        "href": "grids/data-grid/column-summaries.md",
+        "href": "grids/data-grid/column-summaries.mdx",
         "premium": true
       },
       {
         "name": "Column Types",
-        "href": "grids/data-grid/column-types.md",
+        "href": "grids/data-grid/column-types.mdx",
         "premium": true
       },
       {
         "name": "High Performance",
-        "href": "grids/data-grid/performance.md",
+        "href": "grids/data-grid/performance.mdx",
         "premium": true
       },
       {
         "name": "Horizontal Scrolling",
-        "href": "grids/data-grid/horizontal-scrolling.md",
+        "href": "grids/data-grid/horizontal-scrolling.mdx",
         "premium": true
       },
       {
         "name": "Load & Save Grid Layout",
-        "href": "grids/data-grid/load-save-layout.md",
+        "href": "grids/data-grid/load-save-layout.mdx",
         "premium": true
       },
       {
         "name": "Row Grouping",
-        "href": "grids/data-grid/row-grouping.md",
+        "href": "grids/data-grid/row-grouping.mdx",
         "premium": true
       },
       {
         "name": "Row Highlighting",
-        "href": "grids/data-grid/row-highlighting.md",
+        "href": "grids/data-grid/row-highlighting.mdx",
         "premium": true
       },
       {
         "name": "Row Paging",
-        "href": "grids/data-grid/row-paging.md",
+        "href": "grids/data-grid/row-paging.mdx",
         "premium": true
       },
       {
         "name": "Row Pinning",
-        "href": "grids/data-grid/row-pinning.md",
+        "href": "grids/data-grid/row-pinning.mdx",
         "premium": true
       },
       {
@@ -1650,7 +1650,7 @@
           "Angular"
         ],
         "name": "Theming",
-        "href": "grids/theming.md",
+        "href": "grids/theming.mdx",
         "premium": true
       }
     ]
@@ -1660,47 +1660,47 @@
       "Blazor"
     ],
     "name": "Spreadsheet",
-    "href": "spreadsheet-overview.md",
+    "href": "spreadsheet-overview.mdx",
     "premium": true,
     "items": [
       {
         "name": "Activation",
-        "href": "spreadsheet-activation.md",
+        "href": "spreadsheet-activation.mdx",
         "premium": true
       },
       {
         "name": "Chart Adapter",
-        "href": "spreadsheet-chart-adapter.md",
+        "href": "spreadsheet-chart-adapter.mdx",
         "premium": true
       },
       {
         "name": "Clipboard",
-        "href": "spreadsheet-clipboard.md",
+        "href": "spreadsheet-clipboard.mdx",
         "premium": true
       },
       {
         "name": "Conditional Formatting",
-        "href": "spreadsheet-conditional-formatting.md",
+        "href": "spreadsheet-conditional-formatting.mdx",
         "premium": true
       },
       {
         "name": "Configuring Spreadsheet",
-        "href": "spreadsheet-configuring.md",
+        "href": "spreadsheet-configuring.mdx",
         "premium": true
       },
       {
         "name": "Commands",
-        "href": "spreadsheet-commands.md",
+        "href": "spreadsheet-commands.mdx",
         "premium": true
       },
       {
         "name": "Data Validation",
-        "href": "spreadsheet-data-validation.md",
+        "href": "spreadsheet-data-validation.mdx",
         "premium": true
       },
       {
         "name": "Hyperlinks",
-        "href": "spreadsheet-hyperlinks.md",
+        "href": "spreadsheet-hyperlinks.mdx",
         "premium": true
       },
       {
@@ -1708,7 +1708,7 @@
           "Blazor"
         ],
         "name": "Excel Utility",
-        "href": "excel-utility.md",
+        "href": "excel-utility.mdx",
         "premium": true
       }
     ]
@@ -1719,14 +1719,14 @@
   },
   {
     "name": "Dashboard Tile",
-    "href": "dashboard-tile.md",
+    "href": "dashboard-tile.mdx",
     "premium": true,
     "preview": true
   },
   {
     "note": "THIS NODE IS FOR THE NEW STRUCTURE OF CHARTS",
     "name": "Charts",
-    "href": "charts/chart-overview.md",
+    "href": "charts/chart-overview.mdx",
     "premium": true,
     "header": true
   },
@@ -1738,7 +1738,7 @@
       "Angular"
     ],
     "name": "Binding Real Time Data",
-    "href": "category-chart-high-frequency.md",
+    "href": "category-chart-high-frequency.mdx",
     "premium": true
   },
   {
@@ -1749,7 +1749,7 @@
       "Angular"
     ],
     "name": "Binding High Volume Data",
-    "href": "category-chart-high-volume.md",
+    "href": "category-chart-high-volume.mdx",
     "premium": true
   },
   {
@@ -1760,49 +1760,49 @@
       "Angular"
     ],
     "name": "Binding Multiple Data Source",
-    "href": "financial-chart-multiple-data.md",
+    "href": "financial-chart-multiple-data.mdx",
     "premium": true
   },
   {
     "name": "Area Chart",
-    "href": "charts/types/area-chart.md",
+    "href": "charts/types/area-chart.mdx",
     "premium": true
   },
   {
     "name": "Bar Chart",
-    "href": "charts/types/bar-chart.md",
+    "href": "charts/types/bar-chart.mdx",
     "updated": true,
     "premium": true
   },
   {
     "name": "Bubble Chart",
-    "href": "charts/types/bubble-chart.md",
+    "href": "charts/types/bubble-chart.mdx",
     "premium": true
   },
   {
     "name": "Column Chart",
-    "href": "charts/types/column-chart.md",
+    "href": "charts/types/column-chart.mdx",
     "premium": true
   },
   {
     "name": "Composite Chart",
-    "href": "charts/types/composite-chart.md",
+    "href": "charts/types/composite-chart.mdx",
     "premium": true
   },
   {
     "name": "Data Pie Chart",
-    "href": "charts/types/data-pie-chart.md",
+    "href": "charts/types/data-pie-chart.mdx",
     "premium": true,
     "new": true
   },
   {
     "name": "Donut Chart",
-    "href": "charts/types/donut-chart.md",
+    "href": "charts/types/donut-chart.mdx",
     "premium": true
   },
   {
     "name": "Financial / Stock Chart",
-    "href": "charts/types/stock-chart.md",
+    "href": "charts/types/stock-chart.mdx",
     "premium": true
   },
   {
@@ -1813,12 +1813,12 @@
       "WebComponents"
     ],
     "name": "Gantt Chart",
-    "href": "charts/types/gantt-chart.md",
+    "href": "charts/types/gantt-chart.mdx",
     "premium": true
   },
   {
     "name": "Line Chart",
-    "href": "charts/types/line-chart.md",
+    "href": "charts/types/line-chart.mdx",
     "premium": true,
     "updated": true
   },
@@ -1830,22 +1830,22 @@
       "WebComponents"
     ],
     "name": "Network Chart",
-    "href": "charts/types/network-chart.md",
+    "href": "charts/types/network-chart.mdx",
     "premium": true
   },
   {
     "name": "Pie Chart",
-    "href": "charts/types/pie-chart.md",
+    "href": "charts/types/pie-chart.mdx",
     "premium": true
   },
   {
     "name": "Point Chart",
-    "href": "charts/types/point-chart.md",
+    "href": "charts/types/point-chart.mdx",
     "premium": true
   },
   {
     "name": "Polar Chart",
-    "href": "charts/types/polar-chart.md",
+    "href": "charts/types/polar-chart.mdx",
     "premium": true
   },
   {
@@ -1856,160 +1856,160 @@
       "WebComponents"
     ],
     "name": "Pyramid Chart",
-    "href": "charts/types/pyramid-chart.md",
+    "href": "charts/types/pyramid-chart.mdx",
     "premium": true
   },
   {
     "name": "Radial Chart",
-    "href": "charts/types/radial-chart.md",
+    "href": "charts/types/radial-chart.mdx",
     "premium": true
   },
   {
     "name": "Scatter Chart",
-    "href": "charts/types/scatter-chart.md",
+    "href": "charts/types/scatter-chart.mdx",
     "premium": true
   },
   {
     "name": "Shape Chart",
-    "href": "charts/types/shape-chart.md",
+    "href": "charts/types/shape-chart.mdx",
     "premium": true
   },
   {
     "name": "Spline Chart",
-    "href": "charts/types/spline-chart.md",
+    "href": "charts/types/spline-chart.mdx",
     "premium": true
   },
   {
     "name": "Sparkline Chart",
-    "href": "charts/types/sparkline-chart.md",
+    "href": "charts/types/sparkline-chart.mdx",
     "premium": true
   },
   {
     "name": "Stacked Chart",
-    "href": "charts/types/stacked-chart.md",
+    "href": "charts/types/stacked-chart.mdx",
     "premium": true
   },
   {
     "name": "Step Chart",
-    "href": "charts/types/step-chart.md",
+    "href": "charts/types/step-chart.mdx",
     "premium": true
   },
   {
     "name": "Treemap",
-    "href": "charts/types/treemap-chart.md",
+    "href": "charts/types/treemap-chart.mdx",
     "premium": true,
     "updated": true
   },
   {
     "name": "Chart API",
-    "href": "charts/chart-api.md",
+    "href": "charts/chart-api.mdx",
     "premium": true,
     "updated": true
   },
   {
     "name": "Chart Features",
-    "href": "charts/chart-features.md",
+    "href": "charts/chart-features.mdx",
     "items": [
       {
         "name": "Axis Gridlines",
-        "href": "charts/features/chart-axis-gridlines.md",
+        "href": "charts/features/chart-axis-gridlines.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Axis Layouts",
-        "href": "charts/features/chart-axis-layouts.md",
+        "href": "charts/features/chart-axis-layouts.mdx",
         "premium": true
       },
       {
         "name": "Axis Options",
-        "href": "charts/features/chart-axis-options.md",
+        "href": "charts/features/chart-axis-options.mdx",
         "premium": true
       },
       {
         "name": "Axis Types",
-        "href": "charts/features/chart-axis-types.md",
+        "href": "charts/features/chart-axis-types.mdx",
         "premium": true
       },
       {
         "name": "Chart Animations",
-        "href": "charts/features/chart-animations.md",
+        "href": "charts/features/chart-animations.mdx",
         "premium": true
       },
       {
         "name": "Chart Annotations",
-        "href": "charts/features/chart-annotations.md",
+        "href": "charts/features/chart-annotations.mdx",
         "premium": true
       },
       {
         "name": "Chart Data Annotations",
-        "href": "charts/features/chart-data-annotations.md",
+        "href": "charts/features/chart-data-annotations.mdx",
         "premium": true,
         "preview": true
       },
       {
         "name": "Charting in Dashboards",
-        "href": "dashboard-tile.md",
+        "href": "dashboard-tile.mdx",
         "premium": true,
         "preview": true
       },
       {
         "name": "Chart Data Aggregations",
-        "href": "charts/features/chart-data-aggregations.md",
+        "href": "charts/features/chart-data-aggregations.mdx",
         "premium": true
       },
       {
         "name": "Chart Data Filtering",
-        "href": "charts/features/chart-data-filtering.md",
+        "href": "charts/features/chart-data-filtering.mdx",
         "premium": true
       },
       {
         "name": "Chart Data Legend",
-        "href": "charts/features/chart-data-legend.md",
+        "href": "charts/features/chart-data-legend.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Chart Data Tooltip",
-        "href": "charts/features/chart-data-tooltip.md",
+        "href": "charts/features/chart-data-tooltip.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Chart Data Selection",
-        "href": "charts/features/chart-data-selection.md",
+        "href": "charts/features/chart-data-selection.mdx",
         "premium": true
       },
       {
         "name": "Chart Highlight Filter",
-        "href": "charts/features/chart-highlight-filter.md",
+        "href": "charts/features/chart-highlight-filter.mdx",
         "premium": true
       },
       {
         "name": "Chart Highlighting",
-        "href": "charts/features/chart-highlighting.md",
+        "href": "charts/features/chart-highlighting.mdx",
         "premium": true
       },
       {
         "name": "Chart Markers",
-        "href": "charts/features/chart-markers.md",
+        "href": "charts/features/chart-markers.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Chart Navigation",
-        "href": "charts/features/chart-navigation.md",
+        "href": "charts/features/chart-navigation.mdx",
         "premium": true
       },
       {
         "name": "Chart Overlays",
-        "href": "charts/features/chart-overlays.md",
+        "href": "charts/features/chart-overlays.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Chart Performance",
-        "href": "charts/features/chart-performance.md",
+        "href": "charts/features/chart-performance.mdx",
         "premium": true
       },
       {
@@ -2017,23 +2017,23 @@
           "Blazor"
         ],
         "name": "Chart Synchronization",
-        "href": "charts/features/chart-synchronization.md",
+        "href": "charts/features/chart-synchronization.mdx",
         "premium": true
       },
       {
         "name": "Chart Tooltips",
-        "href": "charts/features/chart-tooltips.md",
+        "href": "charts/features/chart-tooltips.mdx",
         "premium": true
       },
       {
         "name": "Chart Trendlines",
-        "href": "charts/features/chart-trendlines.md",
+        "href": "charts/features/chart-trendlines.mdx",
         "premium": true,
         "updated": true
       },
       {
         "name": "Chart User Annotations",
-        "href": "charts/features/chart-user-annotations.md",
+        "href": "charts/features/chart-user-annotations.mdx",
         "premium": true,
         "preview": true
       }
@@ -2041,7 +2041,7 @@
   },
   {
     "name": "Data Sources",
-    "href": "data-chart-data-sources.md",
+    "href": "data-chart-data-sources.mdx",
     "exclude": [
       "React",
       "WebComponents",
@@ -2052,86 +2052,86 @@
   {
     "name": "Maps",
     "header": true,
-    "href": "geo-map.md",
+    "href": "geo-map.mdx",
     "premium": true
   },
   {
     "name": "Geographic Area Map",
-    "href": "geo-map-type-scatter-area-series.md",
+    "href": "geo-map-type-scatter-area-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Contour Map",
-    "href": "geo-map-type-scatter-contour-series.md",
+    "href": "geo-map-type-scatter-contour-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic High Density Map",
-    "href": "geo-map-type-scatter-density-series.md",
+    "href": "geo-map-type-scatter-density-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Bubble Map",
-    "href": "geo-map-type-scatter-bubble-series.md",
+    "href": "geo-map-type-scatter-bubble-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Symbol Map",
-    "href": "geo-map-type-scatter-symbol-series.md",
+    "href": "geo-map-type-scatter-symbol-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Polygon Map",
-    "href": "geo-map-type-shape-polygon-series.md",
+    "href": "geo-map-type-shape-polygon-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Polyline Map",
-    "href": "geo-map-type-shape-polyline-series.md",
+    "href": "geo-map-type-shape-polyline-series.mdx",
     "premium": true
   },
   {
     "name": "Geographic Map API",
-    "href": "maps/map-api.md",
+    "href": "maps/map-api.mdx",
     "premium": true
   },
   {
     "name": "Geographic Map Features",
-    "href": "geo-map.md",
+    "href": "geo-map.mdx",
     "items": [
       {
         "name": "Binding CSV File",
-        "href": "geo-map-binding-data-csv.md",
+        "href": "geo-map-binding-data-csv.mdx",
         "premium": true
       },
       {
         "name": "Binding JSON File",
-        "href": "geo-map-binding-data-json-points.md",
+        "href": "geo-map-binding-data-json-points.mdx",
         "premium": true
       },
       {
         "name": "Binding Data Model",
-        "href": "geo-map-binding-data-model.md",
+        "href": "geo-map-binding-data-model.mdx",
         "premium": true
       },
       {
         "name": "Binding Shape File",
-        "href": "geo-map-binding-shp-file.md",
+        "href": "geo-map-binding-shp-file.mdx",
         "premium": true
       },
       {
         "name": "Binding Multiple Shapes",
-        "href": "geo-map-binding-multiple-shapes.md",
+        "href": "geo-map-binding-multiple-shapes.mdx",
         "premium": true
       },
       {
         "name": "Binding Multiple Sources",
-        "href": "geo-map-binding-multiple-sources.md",
+        "href": "geo-map-binding-multiple-sources.mdx",
         "premium": true
       },
       {
         "name": "Displaying Azure Imagery",
-        "href": "geo-map-display-azure-imagery.md",
+        "href": "geo-map-display-azure-imagery.mdx",
         "premium": true
       },
       {
@@ -2139,12 +2139,12 @@
           "Blazor"
         ],
         "name": "Displaying Bing Imagery",
-        "href": "geo-map-display-bing-imagery.md",
+        "href": "geo-map-display-bing-imagery.mdx",
         "premium": true
       },
       {
         "name": "Displaying Esri Imagery",
-        "href": "geo-map-display-esri-imagery.md",
+        "href": "geo-map-display-esri-imagery.mdx",
         "premium": true
       },
       {
@@ -2152,22 +2152,22 @@
           "Blazor"
         ],
         "name": "Displaying Heat Imagery",
-        "href": "geo-map-display-heat-imagery.md",
+        "href": "geo-map-display-heat-imagery.mdx",
         "premium": true
       },
       {
         "name": "Displaying OSM Imagery",
-        "href": "geo-map-display-osm-imagery.md",
+        "href": "geo-map-display-osm-imagery.mdx",
         "premium": true
       },
       {
         "name": "Navigating Map Content",
-        "href": "geo-map-navigation.md",
+        "href": "geo-map-navigation.mdx",
         "premium": true
       },
       {
         "name": "Shape Files Reference",
-        "href": "geo-map-shape-files-reference.md",
+        "href": "geo-map-shape-files-reference.mdx",
         "premium": true
       },
       {
@@ -2175,7 +2175,7 @@
           "Blazor"
         ],
         "name": "Shape Styling",
-        "href": "geo-map-shape-styling.md",
+        "href": "geo-map-shape-styling.mdx",
         "premium": true
       },
       {
@@ -2183,27 +2183,27 @@
           "Blazor"
         ],
         "name": "Shape Styling Utility",
-        "href": "geo-map-resources-shape-styling-utility.md",
+        "href": "geo-map-resources-shape-styling-utility.mdx",
         "premium": true
       },
       {
         "name": "Esri Utility",
-        "href": "geo-map-resources-esri.md",
+        "href": "geo-map-resources-esri.mdx",
         "premium": true
       },
       {
         "name": "World Connections",
-        "href": "geo-map-resources-world-connections.md",
+        "href": "geo-map-resources-world-connections.mdx",
         "premium": true
       },
       {
         "name": "World Locations",
-        "href": "geo-map-resources-world-locations.md",
+        "href": "geo-map-resources-world-locations.mdx",
         "premium": true
       },
       {
         "name": "World Utility",
-        "href": "geo-map-resources-world-util.md",
+        "href": "geo-map-resources-world-util.mdx",
         "premium": true
       }
     ]
@@ -2220,28 +2220,28 @@
       "Angular"
     ],
     "name": "Accordion",
-    "href": "layouts/accordion.md"
+    "href": "layouts/accordion.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Avatar",
-    "href": "layouts/avatar.md"
+    "href": "layouts/avatar.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Card",
-    "href": "layouts/card.md"
+    "href": "layouts/card.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Carousel",
-    "href": "layouts/carousel.md",
+    "href": "layouts/carousel.mdx",
     "new": true
   },
   {
@@ -2249,14 +2249,14 @@
       "Angular"
     ],
     "name": "Dock Manager",
-    "href": "layouts/dock-manager.md",
+    "href": "layouts/dock-manager.mdx",
     "items": [
       {
         "exclude": [
           "Angular"
         ],
         "name": "Using Panes",
-        "href": "layouts/dock-manager-updating-panes.md",
+        "href": "layouts/dock-manager-updating-panes.mdx",
         "premium": true
       },
       {
@@ -2264,7 +2264,7 @@
           "Angular"
         ],
         "name": "Embedding Frames",
-        "href": "layouts/dock-manager-embedding-frames.md",
+        "href": "layouts/dock-manager-embedding-frames.mdx",
         "premium": true
       },
       {
@@ -2274,7 +2274,7 @@
           "React"
         ],
         "name": "Desktop Integration",
-        "href": "layouts/dock-manager-electron.md",
+        "href": "layouts/dock-manager-electron.mdx",
         "premium": true
       },
       {
@@ -2284,7 +2284,7 @@
           "Blazor"
         ],
         "name": "Customization",
-        "href": "layouts/dock-manager-customization.md",
+        "href": "layouts/dock-manager-customization.mdx",
         "premium": true,
         "updated": true
       }
@@ -2295,28 +2295,28 @@
       "Angular"
     ],
     "name": "Expansion Panel",
-    "href": "layouts/expansion-panel.md"
+    "href": "layouts/expansion-panel.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Stepper",
-    "href": "layouts/stepper.md"
+    "href": "layouts/stepper.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Tabs",
-    "href": "layouts/tabs.md"
+    "href": "layouts/tabs.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Divider",
-    "href": "layouts/divider.md",
+    "href": "layouts/divider.mdx",
     "new": true
   },
   {
@@ -2324,7 +2324,7 @@
       "Angular"
     ],
     "name": "Splitter",
-    "href": "layouts/splitter.md",
+    "href": "layouts/splitter.mdx",
     "new": true
   },
   {
@@ -2332,7 +2332,7 @@
       "Angular"
     ],
     "name": "Tile Manager",
-    "href": "layouts/tile-manager.md",
+    "href": "layouts/tile-manager.mdx",
     "new": true
   },
   {
@@ -2341,7 +2341,7 @@
   },
   {
     "name": "Toolbar",
-    "href": "menus/toolbar.md",
+    "href": "menus/toolbar.mdx",
     "premium": true,
     "updated": true
   },
@@ -2350,14 +2350,14 @@
       "Angular"
     ],
     "name": "Navbar",
-    "href": "menus/navbar.md"
+    "href": "menus/navbar.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Navigation Drawer",
-    "href": "menus/navigation-drawer.md"
+    "href": "menus/navigation-drawer.mdx"
   },
   {
     "name": "Frameworks",
@@ -2365,36 +2365,36 @@
   },
   {
     "name": "Excel Library",
-    "href": "excel-library.md",
+    "href": "excel-library.mdx",
     "items": [
       {
         "name": "Using Cells",
-        "href": "excel-library-using-cells.md",
+        "href": "excel-library-using-cells.mdx",
         "premium": true
       },
       {
         "name": "Using Tables",
-        "href": "excel-library-using-tables.md",
+        "href": "excel-library-using-tables.mdx",
         "premium": true
       },
       {
         "name": "Using Workbooks",
-        "href": "excel-library-using-workbooks.md",
+        "href": "excel-library-using-workbooks.mdx",
         "premium": true
       },
       {
         "name": "Using Worksheets",
-        "href": "excel-library-using-worksheets.md",
+        "href": "excel-library-using-worksheets.mdx",
         "premium": true
       },
       {
         "name": "Working with Charts",
-        "href": "excel-library-working-with-charts.md",
+        "href": "excel-library-working-with-charts.mdx",
         "premium": true
       },
       {
         "name": "Working with Sparklines",
-        "href": "excel-library-working-with-sparklines.md",
+        "href": "excel-library-working-with-sparklines.mdx",
         "premium": true
       },
       {
@@ -2402,7 +2402,7 @@
           "Blazor"
         ],
         "name": "Excel Utility",
-        "href": "excel-utility.md",
+        "href": "excel-utility.mdx",
         "premium": true
       }
     ]
@@ -2413,17 +2413,17 @@
   },
   {
     "name": "Bullet Graph",
-    "href": "bullet-graph.md",
+    "href": "bullet-graph.mdx",
     "premium": true
   },
   {
     "name": "Linear Gauge",
-    "href": "linear-gauge.md",
+    "href": "linear-gauge.mdx",
     "premium": true
   },
   {
     "name": "Radial Gauge",
-    "href": "radial-gauge.md",
+    "href": "radial-gauge.mdx",
     "premium": true
   },
   {
@@ -2438,35 +2438,35 @@
       "Angular"
     ],
     "name": "Badge",
-    "href": "inputs/badge.md"
+    "href": "inputs/badge.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Button",
-    "href": "inputs/button.md"
+    "href": "inputs/button.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Button Group",
-    "href": "inputs/button-group.md"
+    "href": "inputs/button-group.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Checkbox",
-    "href": "inputs/checkbox.md"
+    "href": "inputs/checkbox.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Circular Progress",
-    "href": "inputs/circular-progress.md",
+    "href": "inputs/circular-progress.mdx",
     "new": true
   },
   {
@@ -2474,7 +2474,7 @@
       "Angular"
     ],
     "name": "Linear Progress",
-    "href": "inputs/linear-progress.md",
+    "href": "inputs/linear-progress.mdx",
     "new": true
   },
   {
@@ -2482,11 +2482,11 @@
       "Angular"
     ],
     "name": "Chip",
-    "href": "inputs/chip.md"
+    "href": "inputs/chip.mdx"
   },
   {
     "name": "Color Editor",
-    "href": "inputs/color-editor.md",
+    "href": "inputs/color-editor.mdx",
     "premium": true,
     "preview": true
   },
@@ -2495,19 +2495,19 @@
       "Angular"
     ],
     "name": "Combo Box",
-    "href": "inputs/combo/overview.md",
+    "href": "inputs/combo/overview.mdx",
     "items": [
       {
         "name": "Features",
-        "href": "inputs/combo/features.md"
+        "href": "inputs/combo/features.mdx"
       },
       {
         "name": "Templates",
-        "href": "inputs/combo/templates.md"
+        "href": "inputs/combo/templates.mdx"
       },
       {
         "name": "Single Selection",
-        "href": "inputs/combo/single-selection.md"
+        "href": "inputs/combo/single-selection.mdx"
       }
     ]
   },
@@ -2516,28 +2516,28 @@
       "Angular"
     ],
     "name": "Dropdown",
-    "href": "inputs/dropdown.md"
+    "href": "inputs/dropdown.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Icon",
-    "href": "layouts/icon.md"
+    "href": "layouts/icon.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Icon Button",
-    "href": "inputs/icon-button.md"
+    "href": "inputs/icon-button.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Input",
-    "href": "inputs/input.md"
+    "href": "inputs/input.mdx"
   },
   {
     "exclude": [
@@ -2546,7 +2546,7 @@
       "Blazor"
     ],
     "name": "File Input",
-    "href": "inputs/file-input.md",
+    "href": "inputs/file-input.mdx",
     "new": true
   },
   {
@@ -2554,7 +2554,7 @@
       "Angular"
     ],
     "name": "Mask Input",
-    "href": "inputs/mask-input.md",
+    "href": "inputs/mask-input.mdx",
     "new": true
   },
   {
@@ -2562,49 +2562,49 @@
       "Angular"
     ],
     "name": "Date Time Input",
-    "href": "inputs/date-time-input.md"
+    "href": "inputs/date-time-input.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Radio & Radio Group",
-    "href": "inputs/radio.md"
+    "href": "inputs/radio.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Select",
-    "href": "inputs/select.md"
+    "href": "inputs/select.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Rating",
-    "href": "inputs/rating.md"
+    "href": "inputs/rating.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Switch",
-    "href": "inputs/switch.md"
+    "href": "inputs/switch.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Text Area",
-    "href": "inputs/text-area.md"
+    "href": "inputs/text-area.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Highlight",
-    "href": "inputs/highlight.md"
+    "href": "inputs/highlight.mdx"
   },
   {
     "name": "Interactions",
@@ -2615,7 +2615,7 @@
       "Angular"
     ],
     "name": "Chat",
-    "href": "interactivity/chat.md",
+    "href": "interactivity/chat.mdx",
     "new": true,
     "platforms": {
       "Blazor": { "new": false, "preview": true }
@@ -2626,14 +2626,14 @@
       "Angular"
     ],
     "name": "Ripple",
-    "href": "inputs/ripple.md"
+    "href": "inputs/ripple.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Tooltip",
-    "href": "inputs/tooltip.md",
+    "href": "inputs/tooltip.mdx",
     "new": true
   },
   {
@@ -2641,21 +2641,21 @@
       "Angular"
     ],
     "name": "Slider & Range Slider",
-    "href": "inputs/slider.md"
+    "href": "inputs/slider.mdx"
   },
   {
     "exclude": [
       "Blazor"
     ],
     "name": "Zoom Slider",
-    "href": "zoomslider-overview.md"
+    "href": "zoomslider-overview.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Query Builder",
-    "href": "inputs/query-builder.md",
+    "href": "inputs/query-builder.mdx",
     "new": true
   },
   {
@@ -2670,28 +2670,28 @@
       "Angular"
     ],
     "name": "Banner",
-    "href": "notifications/banner.md"
+    "href": "notifications/banner.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Snackbar",
-    "href": "notifications/snackbar.md"
+    "href": "notifications/snackbar.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Toast",
-    "href": "notifications/toast.md"
+    "href": "notifications/toast.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Dialog",
-    "href": "notifications/dialog.md"
+    "href": "notifications/dialog.mdx"
   },
   {
     "exclude": [
@@ -2705,21 +2705,21 @@
       "Angular"
     ],
     "name": "Calendar",
-    "href": "scheduling/calendar.md"
+    "href": "scheduling/calendar.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Date Picker",
-    "href": "scheduling/date-picker.md"
+    "href": "scheduling/date-picker.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Date Range Picker",
-    "href": "scheduling/date-range-picker.md",
+    "href": "scheduling/date-range-picker.mdx",
     "new": true
   },
   {
@@ -2734,49 +2734,49 @@
       "Angular"
     ],
     "name": "Overview",
-    "href": "themes/overview.md"
+    "href": "themes/overview.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Configuration",
-    "href": "themes/configuration.md"
+    "href": "themes/configuration.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Elevations",
-    "href": "themes/elevations.md"
+    "href": "themes/elevations.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Palettes",
-    "href": "themes/palettes.md"
+    "href": "themes/palettes.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Typography",
-    "href": "themes/typography.md"
+    "href": "themes/typography.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Styles",
-    "href": "themes/styles.md"
+    "href": "themes/styles.mdx"
   },
   {
     "exclude": [
       "Angular"
     ],
     "name": "Custom Tailwind Classes",
-    "href": "themes/tailwind.md",
+    "href": "themes/tailwind.mdx",
     "new": true
   }
 ]
diff --git a/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx b/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx
index 9a789a2605..2a0357e102 100644
--- a/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/xplat/src/content/jp/components/ai/ai-assisted-development-overview.mdx
@@ -34,7 +34,7 @@ CLI MCP サーバーと Theming MCP サーバーはどちらも `npx` を通じ
 
 Ignite UI は、Angular、React、Web Components、Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が管理するものであり、チームの規約に合わせて `SKILL.md` を編集したり、プロジェクト固有のパターンの追加や内部デザイン システムを参照するなどして、コードベースとともにパッケージをバージョン管理できます。
 
-完全なセットアップ手順と IDE の設定については、[エージェント スキル](skills.md)を参照してください。
+完全なセットアップ手順と IDE の設定については、[エージェント スキル](./skills.mdx)を参照してください。
 
 ## CLI MCP サーバー
 
@@ -62,7 +62,7 @@ npx -y igniteui-theming igniteui-theming-mcp
 
 Theming MCP サーバーは Angular、React、Web Components、Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に最新のトークン サーフェスに対して動作します。
 
-構成の詳細については、[Theming MCP](theming-mcp.md)を参照してください。
+構成の詳細については、[Theming MCP](./theming-mcp.mdx)を参照してください。
 
 ## サポートされている AI クライアント
 
@@ -87,7 +87,7 @@ Ignite UI AI ツールチェーンのセットアップには 3 つのステッ
 
 フレームワークの Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは `node_modules/igniteui-{framework}/skills/` のライブラリに付属しています。IDE との連携設定はクライアントに応じてその構成ファイルに保存してください。
 
-完全なセットアップについては、[エージェント スキル](skills.md)を参照してください。
+完全なセットアップについては、[エージェント スキル](./skills.mdx)を参照してください。
 
 ### ステップ 2 - CLI MCP サーバーを接続する
 
@@ -119,7 +119,7 @@ AI クライアントの構成ファイルに `igniteui-cli` MCP サーバー 
 }
 ```
 
-VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](cli-mcp.md)を参照してください。
+VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](./cli-mcp.mdx)を参照してください。
 
 ### ステップ 3 - Theming MCP サーバーを接続する (オプション)
 
@@ -136,16 +136,16 @@ VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他
 }
 ```
 
-構成の詳細とテーマ ワークフローについては、[Theming MCP](theming-mcp.md)を参照してください。
+構成の詳細とテーマ ワークフローについては、[Theming MCP](./theming-mcp.mdx)を参照してください。
 
 ## その他のリソース
 
 <PlatformBlock for="React, WebComponents">
-- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)
+- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)
 </PlatformBlock>
-- [エージェント スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [エージェント スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx
index f5bc2c813f..6a33d3d418 100644
--- a/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx
+++ b/docs/xplat/src/content/jp/components/ai/cli-mcp.mdx
@@ -24,7 +24,7 @@ Ignite UI CLI MCP は、チャットまたはエージェント モードを通
 推奨セットアップ手順は、最初に Ignite UI CLI から始めることです。この手順では、Ignite UI CLI がプロジェクトを作成し、必要なパッケージをインストールし、VS Code 用の MCP 構成を初期設定します。また、空のフォルダーでアシスタントが MCP を通じてプロジェクトを作成するところから開始することも、既存のプロジェクトに MCP を接続することもできます。
 
 <PlatformBlock for="React, WebComponents">
-セットアップ後の完全なビルド フローを確認したい場合は、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。
+セットアップ後の完全なビルド フローを確認したい場合は、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)を参照してください。
 </PlatformBlock>
 
 **接続後に試すプロンプトの例:**
@@ -169,7 +169,7 @@ npx ig new my-app --framework=webcomponents --template=side-nav
 プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、Angular の Ignite UI CLI ドキュメントを参照してください。
 </PlatformBlock>
 <PlatformBlock for="React, WebComponents">
-プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、[Ignite UI CLI](../general-cli-overview.md) を参照してください。
+プロジェクト テンプレート、CLI コマンド オプション、`ig add` などのコンポーネント スキャフォールディング コマンドの詳細については、[Ignite UI CLI](../general-cli-overview.mdx) を参照してください。
 </PlatformBlock>
 
 ### VS Code
@@ -382,7 +382,7 @@ MCP サーバーは、AI がプロンプトに基づいて自動的に使用す
 テーマ サーバーは、同じクライアント セッションにスタイリング、テーマ、パレット、トークン ワークフローを追加します。
 
 <PlatformBlock for="React, WebComponents">
-主要なハンズオン ワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。
+主要なハンズオン ワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)を参照してください。
 </PlatformBlock>
 
 ## 一般的なワークフロー
@@ -453,11 +453,11 @@ JSON が `mcpServers` 構造を使用していること、および各ローカ
 ## その他のリソース
 
 <PlatformBlock for="React, WebComponents">
-- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)
+- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)
 </PlatformBlock>
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [{ProductName} スキル](./skills.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [{ProductName} スキル](./skills.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/ai/maker-framework.mdx b/docs/xplat/src/content/jp/components/ai/maker-framework.mdx
index 767b5cb565..92f2a0f38b 100644
--- a/docs/xplat/src/content/jp/components/ai/maker-framework.mdx
+++ b/docs/xplat/src/content/jp/components/ai/maker-framework.mdx
@@ -14,7 +14,7 @@ llms:
 
 MAKER フレームワーク (`@igniteui/maker-mcp`) は、Infragistics の多エージェント AI オーケストレーション MCP サーバーです。複数の AI エージェント間のコンセンサスベースの投票アルゴリズムを使用して、複雑なタスクを検証済みの実行可能なステップ プランに分解します。MAKER は、Maximal Agentic decomposition、first-to-ahead-by-K Error correction、および Red-flagging の略称です。このフレームワークは、Cognizant AI Lab による研究論文 _Solving a million-step LLM task with zero errors_ に基づいています。`@igniteui` GitHub Packages レジストリから `npx` 経由で MCP サーバーとして実行され、STDIO トランスポートを通じて MCP 対応の AI クライアントに接続します。接続後、AI アシスタントは `plan`、`execute`、`plan_and_execute` の 3 つのツールを呼び出して、自動エラー検出および修正機能を備えた長期タスクを実行できます。
 
-MAKER フレームワークは Ignite UI コンポーネント スキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネントの生成、およびドキュメント クエリには、[CLI MCP サーバー](cli-mcp.md) を使用してください。MAKER はフレームワーク非依存です。Angular、React、Blazor、Web Components を特定のターゲットとするものではなく、プロジェクト ソース ファイルを自動的に読み取ったり変更したりすることはありません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリの `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
+MAKER フレームワークは Ignite UI コンポーネント スキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネントの生成、およびドキュメント クエリには、[CLI MCP サーバー](cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存です。Angular、React、Blazor、Web Components を特定のターゲットとするものではなく、プロジェクト ソース ファイルを自動的に読み取ったり変更したりすることはありません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリの `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
 
 ## MAKER の仕組み
 
@@ -226,10 +226,10 @@ ARM Linux は現在パッケージ化されていません。追加のプラッ
 
 ## その他のリソース
 
-- [AI 支援開発の概要](ai-assisted-development-overview.md)
-- [エージェント スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [AI 支援開発の概要](ai-assisted-development-overview.mdx)
+- [エージェント スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/ai/skills.mdx b/docs/xplat/src/content/jp/components/ai/skills.mdx
index d85bbec887..9dc8a240ee 100644
--- a/docs/xplat/src/content/jp/components/ai/skills.mdx
+++ b/docs/xplat/src/content/jp/components/ai/skills.mdx
@@ -26,10 +26,10 @@ AI ツールのランドスケープは急速に進化しています。スキ
 
 | スキル | パス | 説明 |
 |:------|:-----|:------------|
-| コンポーネントとレイアウト | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.md) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
-| プラットフォーム統合 | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.md) | ユーザーが選択したプラットフォームへのコンポーネントの統合を支援 |
-| テーマ設定とスタイル設定 | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
-| 最適化 | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.md) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス |
+| コンポーネントとレイアウト | [`skills/igniteui-wc-choose-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-choose-components/SKILL.mdx) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
+| プラットフォーム統合 | [`skills/igniteui-wc-integrate-with-framework/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-integrate-with-framework/SKILL.mdx) | ユーザーが選択したプラットフォームへのコンポーネントの統合を支援 |
+| テーマ設定とスタイル設定 | [`skills/igniteui-wc-customize-component-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
+| 最適化 | [`skills/igniteui-wc-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-wc-optimize-bundle-size/SKILL.mdx) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス |
 
 </PlatformBlock>
 
@@ -37,9 +37,9 @@ AI ツールのランドスケープは急速に進化しています。スキ
 
 | スキル | パス | 説明 |
 |:------|:-----|:------------|
-| コンポーネント | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.md) | 適切なコンポーネントの特定、インストール、インポート、使用 — JSX パターン、イベント処理、refs、フォーム、TypeScript |
-| テーマ設定とスタイル設定 | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
-| 最適化 | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.md) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス |
+| コンポーネント | [`skills/igniteui-react-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-components/SKILL.mdx) | 適切なコンポーネントの特定、インストール、インポート、使用 — JSX パターン、イベント処理、refs、フォーム、TypeScript |
+| テーマ設定とスタイル設定 | [`skills/igniteui-react-customize-theme/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
+| 最適化 | [`skills/igniteui-react-optimize-bundle-size/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-react-optimize-bundle-size/SKILL.mdx) | バンドル サイズを最適化するためのツリー シェイキングのベスト プラクティス |
 
 </PlatformBlock>
 
@@ -47,9 +47,9 @@ AI ツールのランドスケープは急速に進化しています。スキ
 
 | スキル | パス | 説明 |
 |:------|:-----|:------------|
-| コンポーネントとレイアウト | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.md) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
-| データ グリッド | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.md) | Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ |
-| テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
+| コンポーネントとレイアウト | [`skills/igniteui-angular-components/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-components/SKILL.mdx) | スタンドアロン コンポーネント、フォーム コントロール、オーバーレイ、レイアウト |
+| データ グリッド | [`skills/igniteui-angular-grids/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-grids/SKILL.mdx) | Grid、Tree Grid、Hierarchical Grid、Pivot Grid、ソート、フィルタリング、グループ化、ページング、リモート データ |
+| テーマ設定とスタイル設定 | [`skills/igniteui-angular-theming/SKILL.md`]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx) | パレット、タイポグラフィ、エレベーション、コンポーネント テーマ、MCP サーバー |
 
 <DocsAside type="info">
 {ProductName} **21.1.0** 以降、これらのスキルはエージェントのスキル パス (例: `.claude/skills`、`.agents/skills`、`.cursor/rules/`) に配置すると自動的に検出されます。このリリースには、これらのスキルをプロジェクトに自動的に追加するオプションの移行が含まれています。
@@ -361,38 +361,38 @@ CLI は、一連のプロンプトをガイドします:
 
 <PlatformBlock for="WebComponents">
 
-**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.md)を参照してください。
+**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-wc-customize-component-theme/SKILL.mdx)を参照してください。
 
 </PlatformBlock>
 
 <PlatformBlock for="React">
 
-**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.md)を参照してください。
+**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-react-customize-theme/SKILL.mdx)を参照してください。
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
-**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.md)を参照してください。
+**Theming スキル**には、`igniteui-theming` MCP サーバーのセットアップ手順が含まれています。これにより、AI アシスタントがパレット生成やコンポーネント テーマのひな形作成などのライブ テーマ ツールにアクセスできます。VS Code、Cursor、Claude Desktop、JetBrains IDE の構成手順については、[Theming スキル ファイル]({GithubLink}/blob/master/skills/igniteui-angular-theming/SKILL.mdx)を参照してください。
 
 </PlatformBlock>
 
-Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.md) のドキュメントを参照してください。
+Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.mdx) のドキュメントを参照してください。
 
 ## その他のリソース
 
 
 <PlatformBlock for="React, WebComponents">
-- [{ProductName} で作業を開始](../general-getting-started.md)
-- [Ignite UI CLI](../general-cli-overview.md)
+- [{ProductName} で作業を開始](../general-getting-started.mdx)
+- [Ignite UI CLI](../general-cli-overview.mdx)
 </PlatformBlock>
 <PlatformBlock for="Angular">
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">{ProductName} で作業を開始</a>
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
 </PlatformBlock>
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
-- [Ignite UI Theming MCP](./theming-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
+- [Ignite UI Theming MCP](./theming-mcp.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx
index 5e57541922..ed78342b24 100644
--- a/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx
+++ b/docs/xplat/src/content/jp/components/ai/theming-mcp.mdx
@@ -27,7 +27,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 Ignite UI Theming MCP は Ignite UI CLI MCP と連携します。実際には、Theming MCP はパレット、テーマ、トークン、タイポグラフィ、エレベーション、スタイリング ワークフローを処理し、CLI MCP はプロジェクト作成、プロジェクト変更、コンポーネント ワークフロー、ドキュメント指向のタスクを処理します。ほとんどのチームは、両方のサーバーを同じ AI クライアントに接続させます。
 
 <PlatformBlock for="React, WebComponents">
-セットアップ後の具体的な組み合わせワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)を参照してください。
+セットアップ後の具体的な組み合わせワークフローについては、[Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)を参照してください。
 </PlatformBlock>
 
 **接続後に試すプロンプトの例:**
@@ -402,11 +402,11 @@ ng add igniteui-angular
 ## その他のリソース
 
 <PlatformBlock for="React, WebComponents">
-- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.md)
+- [Ignite UI CLI MCP と Ignite UI Theming MCP を使用したアプリのエンドツーエンドのビルド](../general-how-to-mcp-e2e.mdx)
 </PlatformBlock>
-- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.md)
-- [{ProductName} スキル](./skills.md)
-- [Ignite UI CLI MCP](./cli-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai-assisted-development-overview.mdx)
+- [{ProductName} スキル](./skills.mdx)
+- [Ignite UI CLI MCP](./cli-mcp.mdx)
 
 
 コミュニティは常に活気があり、新しいアイデアを歓迎しています。
diff --git a/docs/xplat/src/content/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx b/docs/xplat/src/content/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
index 57e5d9a8a3..350c60bf21 100644
--- a/docs/xplat/src/content/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
+++ b/docs/xplat/src/content/jp/components/blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx
@@ -192,7 +192,7 @@ Excel ファイルの処理には、下記項目の状況によっては、か
 
 ### 方法その 1 - 数式の自動計算を一時停止する
 
-Blazor WebAssembly アプリケーション上で Excel ファイル中のセル参照や書き換えにとても時間がかかってしまう場合、もしかすると、数式の自動計算・再計算に負荷がかかっているかもしれません。そのような場合、Infragistics Blazor Excel ライブラリでは、数式の自動計算を一時停止できますので、そうすることで処理速度の改善が見込まれます。詳しくは[このドキュメント トピック](blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md)を参照してください。
+Blazor WebAssembly アプリケーション上で Excel ファイル中のセル参照や書き換えにとても時間がかかってしまう場合、もしかすると、数式の自動計算・再計算に負荷がかかっているかもしれません。そのような場合、Infragistics Blazor Excel ライブラリでは、数式の自動計算を一時停止できますので、そうすることで処理速度の改善が見込まれます。詳しくは[このドキュメント トピック](./blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.mdx)を参照してください。
 
 ### 方法その 2 - Ahead-Of-Time (AOT) コンパイルを使う
 
diff --git a/docs/xplat/src/content/jp/components/bullet-graph.mdx b/docs/xplat/src/content/jp/components/bullet-graph.mdx
index 03ce78455c..c6f158087a 100644
--- a/docs/xplat/src/content/jp/components/bullet-graph.mdx
+++ b/docs/xplat/src/content/jp/components/bullet-graph.mdx
@@ -1179,5 +1179,5 @@ MaximumValue="55" TargetValue="43">
 
 その他のゲージ タイプの詳細については、以下のトピックを参照してください。
 
-- [リニア ゲージ](linear-gauge.md)
-- [ラジアル ゲージ](radial-gauge.md)
+- [リニア ゲージ](./linear-gauge.mdx)
+- [ラジアル ゲージ](./radial-gauge.mdx)
diff --git a/docs/xplat/src/content/jp/components/charts/chart-api.mdx b/docs/xplat/src/content/jp/components/charts/chart-api.mdx
index f230d15bc2..c2d3c88c09 100644
--- a/docs/xplat/src/content/jp/components/charts/chart-api.mdx
+++ b/docs/xplat/src/content/jp/components/charts/chart-api.mdx
@@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 | チャート プロパティ | 軸クラス |
 |------------------|--------------|
-| - `SeriesViewer.Title` <br /> - `SeriesViewer.Subtitle` <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - `DataChart.Axes` <br /> - `SeriesViewer.Series` <br /> |  - <ApiLink type="Axis" /> はすべての軸タイプの基本クラスです <br /> - [カテゴリ シリーズ](types/column-chart.md)、[積層型シリーズ](types/stacked-chart.md)、および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="CategoryXAxis" /> <br /> - [カテゴリ シリーズ](types/column-chart.md)および[積層型シリーズ](types/stacked-chart.md)で使用される <ApiLink type="CategoryYAxis" /> <br /> - [ラジアル シリーズ](types/radial-chart.md)で使用される <ApiLink type="CategoryAngleAxis" /> <br /> - [散布シリーズ](types/scatter-chart.md)および[棒シリーズ](types/bar-chart.md)で使用される <ApiLink type="NumericXAxis" />   <br /> - [散布シリーズ](types/scatter-chart.md)、[カテゴリ シリーズ](types/column-chart.md)、[積層型シリーズ](types/stacked-chart.md)、および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="NumericYAxis" /> <br /> - [極座標シリーズ](types/polar-chart.md)で使用される <ApiLink type="NumericAngleAxis" /> <br /> - [極座標シリーズ](types/polar-chart.md) および[ラジアル シリーズ](types/radial-chart.md)で使用される <ApiLink type="NumericRadiusAxis" /> <br /> - [カテゴリ シリーズ](types/column-chart.md)および[ファイナンシャル シリーズ](types/stock-chart.md)で使用される <ApiLink type="TimeXAxis" /> <br /> <br /> |
+| - `SeriesViewer.Title` <br /> - `SeriesViewer.Subtitle` <br /> - <ApiLink type="DataChart" member="isHorizontalZoomEnabled" label="IsHorizontalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="isVerticalZoomEnabled" label="IsVerticalZoomEnabled" /> <br /> - <ApiLink type="DataChart" member="brushes" label="Brushes" /> <br /> - <ApiLink type="DataChart" member="outlines" label="Outlines" /> <br /> - <ApiLink type="DataChart" member="markerBrushes" label="MarkerBrushes" /> <br /> - <ApiLink type="DataChart" member="markerOutlines" label="MarkerOutlines" /> <br /> - `DataChart.Axes` <br /> - `SeriesViewer.Series` <br /> |  - <ApiLink type="Axis" /> はすべての軸タイプの基本クラスです <br /> - [カテゴリ シリーズ](./types/column-chart.mdx)、[積層型シリーズ](./types/stacked-chart.mdx)、および[ファイナンシャル シリーズ](./types/stock-chart.mdx)で使用される <ApiLink type="CategoryXAxis" /> <br /> - [カテゴリ シリーズ](./types/column-chart.mdx)および[積層型シリーズ](./types/stacked-chart.mdx)で使用される <ApiLink type="CategoryYAxis" /> <br /> - [ラジアル シリーズ](./types/radial-chart.mdx)で使用される <ApiLink type="CategoryAngleAxis" /> <br /> - [散布シリーズ](./types/scatter-chart.mdx)および[棒シリーズ](./types/bar-chart.mdx)で使用される <ApiLink type="NumericXAxis" />   <br /> - [散布シリーズ](./types/scatter-chart.mdx)、[カテゴリ シリーズ](./types/column-chart.mdx)、[積層型シリーズ](./types/stacked-chart.mdx)、および[ファイナンシャル シリーズ](./types/stock-chart.mdx)で使用される <ApiLink type="NumericYAxis" /> <br /> - [極座標シリーズ](./types/polar-chart.mdx)で使用される <ApiLink type="NumericAngleAxis" /> <br /> - [極座標シリーズ](./types/polar-chart.mdx) および[ラジアル シリーズ](./types/radial-chart.mdx)で使用される <ApiLink type="NumericRadiusAxis" /> <br /> - [カテゴリ シリーズ](./types/column-chart.mdx)および[ファイナンシャル シリーズ](./types/stock-chart.mdx)で使用される <ApiLink type="TimeXAxis" /> <br /> <br /> |
 
 {Platform} <ApiLink type="DataChart" /> は、<ApiLink type="DataChart" member="Series" label="Series" /> から継承する次のタイプのシリーズを使用できます。
 
@@ -50,7 +50,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 | 散布シリーズ | ファイナンシャル シリーズ |
 |----------------|------------------|
-| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - おとび [その他](types/stock-chart.md) |
+| - <ApiLink type="BubbleSeries" /> <br /> - <ApiLink type="HighDensityScatterSeries" /> <br /> - <ApiLink type="ScatterSeries" /> <br />  - <ApiLink type="ScatterLineSeries" /> <br /> - <ApiLink type="ScatterSplineSeries" /> <br /> - <ApiLink type="ScatterAreaSeries" /> <br /> - <ApiLink type="ScatterContourSeries" /> <br /> - <ApiLink type="ScatterPolylineSeries" />  <br /> - <ApiLink type="ScatterPolygonSeries" />  <br /> <br /> | - <ApiLink type="FinancialPriceSeries" /> <br /> - <ApiLink type="BollingerBandsOverlay" /> <br /> - <ApiLink type="ForceIndexIndicator" /> <br /> - <ApiLink type="MedianPriceIndicator" /> <br /> - <ApiLink type="MassIndexIndicator" />  <br /> - <ApiLink type="RelativeStrengthIndexIndicator" /> <br /> - <ApiLink type="StandardDeviationIndicator" /> <br /> - <ApiLink type="TypicalPriceIndicator" /> <br /> - <ApiLink type="WeightedCloseIndicator" /> <br /> - おとび [その他](./types/stock-chart.mdx) |
 
 
 | ラジアル シリーズ | 極座標シリーズ |
@@ -126,8 +126,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 チャートの詳細については、次のトピックを参照してください。
 
-- [チャートの概要](chart-overview.md)
-- [チャート機能](chart-features.md)
+- [チャートの概要](./chart-overview.mdx)
+- [チャート機能](./chart-features.mdx)
 
 
 
diff --git a/docs/xplat/src/content/jp/components/charts/chart-features.mdx b/docs/xplat/src/content/jp/components/charts/chart-features.mdx
index f11fa2688d..a0330ac8c9 100644
--- a/docs/xplat/src/content/jp/components/charts/chart-features.mdx
+++ b/docs/xplat/src/content/jp/components/charts/chart-features.mdx
@@ -20,61 +20,61 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## 軸
 
-異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。{Platform} チャートのカスタマイズについての詳細には、[軸グリッド線](features/chart-axis-gridlines.md)、[軸レイアウト](features/chart-axis-layouts.md)、および[軸オプション](features/chart-axis-options.md)のトピックをご覧ください。
+異なる軸プロパティを使用して、X 軸と Y 軸の両方のすべての側面を変更またはカスタマイズします。グリッド線を表示したり、目盛りのスタイルをカスタマイズしたり、軸のタイトルを変更したり、軸の位置や交差値を変更したりすることもできます。{Platform} チャートのカスタマイズについての詳細には、[軸グリッド線](./features/chart-axis-gridlines.mdx)、[軸レイアウト](./features/chart-axis-layouts.mdx)、および[軸オプション](./features/chart-axis-options.mdx)のトピックをご覧ください。
 
 <Sample src="/charts/data-chart/axis-crossing" height={500} alt="{Platform} 軸交差軸の例" />
 
 ## 注釈
 
-これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、[チャート注釈](features/chart-annotations.md)トピックを参照してください。
+これらの追加のレイヤーは、マウス/タッチに依存するほかのチャートレイヤーの上にあります。個別にまたは組み合わせて使用すると、チャート内の特定の値を強調するのに役立つ強力な操作を提供します。この機能の詳細については、[チャート注釈](./features/chart-annotations.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/line-chart-with-annotations" height={500} alt="{Platform} 注釈の例" />
 
 ## アニメーション
 
-アニメーションを有効にして、新しいデータ ソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、[チャート アニメーション](features/chart-animations.md)トピックを参照してください。
+アニメーションを有効にして、新しいデータ ソースを読み込むときにチャートをアニメーション化します。これらは、さまざまなタイプのアニメーションとそれらのアニメーションが実行される速度を設定することでカスタマイズできます。この機能の詳細については、[チャート アニメーション](./features/chart-animations.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="{Platform} 構成オプションの例" />
 
 ## ハイライト表示
 
-線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャートのハイライト表示](features/chart-highlighting.md)トピックを参照してください。
+線、列、マーカーなどのビジュアルに、マウスをデータ項目の上に置いたときにハイライト表示して、フォーカスを合わせます。この機能は、すべてのチャート タイプで有効になっています。この機能の詳細については、[チャートのハイライト表示](./features/chart-highlighting.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/column-chart-with-highlighting" height={500} alt="{Platform} ハイライト表示の例" />
 
 ## マーカー
 
-チャート シリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データ ポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、[チャート マーカー](features/chart-markers.md)トピックを参照してください。
+チャート シリーズのマーカーを使用して値が主要なグリッド線の間にある場合でも、データ ポイントをすばやく識別します。これらは、スタイル、カラー、および形状で完全にカスタマイズ可能です。この機能の詳細については、[チャート マーカー](./features/chart-markers.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/marker-options" height={500} alt="{Platform} 構成オプションの例" />
 
 ## ナビゲーション
 
-マウス、キーボード、およびタッチ操作でズームおよびパンすることにより、チャートをナビゲートできます。この機能の詳細については、[チャート ナビゲーション](features/chart-navigation.md)トピックを参照してください。
+マウス、キーボード、およびタッチ操作でズームおよびパンすることにより、チャートをナビゲートできます。この機能の詳細については、[チャート ナビゲーション](./features/chart-navigation.mdx)トピックを参照してください。
 
 <Sample src="/charts/data-chart/chart-navigation" height={500} alt="{Platform} ナビゲーションの例" />
 
 ## オーバーレイ
 
-オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、[チャート オーバーレイ](features/chart-overlays.md)トピックを参照してください。
+オーバーレイを使用すると、チャートに水平線または垂直線をプロットして、重要な値としきい値に注釈を付けることができます。この機能の詳細については、[チャート オーバーレイ](./features/chart-overlays.mdx)トピックを参照してください。
 
 <Sample src="/charts/data-chart/series-value-overlay" height={600} alt="{Platform} 値オーバーレイの例" />
 
 ## パフォーマンス
 
-{Platform} チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、[チャート パフォーマンス](features/chart-performance.md)トピックを参照してください。
+{Platform} チャートは、数百万のデータ ポイントを描画し、それらを数ミリ秒ごとに更新する高性能のために最適化されています。ただし、チャートのパフォーマンスに影響を与えるいくつかのチャート機能があり、アプリケーションのパフォーマンスを最適化するときにそれらを考慮する必要があります。この機能の詳細については、[チャート パフォーマンス](./features/chart-performance.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/high-volume" height={600} alt="{Platform} チャート パフォーマンスの例" />
 
 ## ツールチップ
 
-ツールチップを使用して、特定のシリーズ タイプに関連するすべての情報を表示します。項目レベルやカテゴリ レベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、[チャート ツールチップ](features/chart-tooltips.md)トピックを参照してください。
+ツールチップを使用して、特定のシリーズ タイプに関連するすべての情報を表示します。項目レベルやカテゴリ レベルのツールチップなど、有効にできるさまざまなツールチップがあります。この機能の詳細については、[チャート ツールチップ](./features/chart-tooltips.mdx)トピックを参照してください。
 
 <Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="{Platform} ツールチップ タイプの例" />
 
 ## トレンドライン
 
-トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。{Platform} チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、[チャート トレンドライン](features/chart-trendlines.md)トピックを参照してください。
+トレンドラインを使用して、トレンドを特定したり、データ内のパターンを見つけたりします。{Platform} チャートでは、CubicFit や LinearFit など、さまざまなトレンドラインがサポートされています。この機能の詳細については、[チャート トレンドライン](./features/chart-trendlines.mdx)トピックを参照してください。
 
 <Sample src="/charts/financial-chart/trendlines" height={500} alt="{Platform} トレンドラインの例" />
 
diff --git a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
index 1643831f95..f3c45781f2 100644
--- a/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
+++ b/docs/xplat/src/content/jp/components/charts/chart-overview.mdx
@@ -62,70 +62,70 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### {Platform} 棒チャート
 
-{Platform} 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[棒チャート](types/bar-chart.md)の詳細をご覧ください。
+{Platform} 棒チャート (棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[棒チャート](./types/bar-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/bar-chart-multiple-sources" height={600} alt="{Platform} 複数ソースの棒チャート" />
 
 
 ### {Platform} 円チャート
 
-{Platform} 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 100% などの全体の値を表します。円チャートは小さなデータセットに最適で、一目で簡単に読むことができます。[円チャート](types/pie-chart.md)の詳細をご覧ください。
+{Platform} 円チャート、または円グラフは、一般的な部分から全体へのチャート タイプです。部分から全体へのチャートは、データセットのカテゴリ (部分) が合計 (全体) 値になる方法を示します。カテゴリは、分析されている合計値に対する値のパーセンテージに基づいて、他のカテゴリに比例して表示されます。円チャートは、データ値を円形または円チャートのセクションとして描画します。各セクションまたは円スライスには、基本データ値に比例する円弧の長さがあります。円スライスで表される合計値は、100 または 100% などの全体の値を表します。円チャートは小さなデータセットに最適で、一目で簡単に読むことができます。[円チャート](./types/pie-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/pie-chart/overview" height={600} alt="{Platform} 凡例付きの {Platform} 円チャート" />
 
 
 ### {Platform} 折れ線チャート
 
-{Platform} 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。[折れ線チャート](types/line-chart.md)の詳細をご覧ください。
+{Platform} 折れ線チャート、または折れ線グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の直線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。[折れ線チャート](./types/line-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/category-chart/line-chart-multiple-sources" height={600} alt="{Platform} 複数ソースの折れ線チャート" />
 
 
 ### {Platform} ドーナツ チャート
 
-{Platform} ドーナツ チャート、またはドーナツ グラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツ チャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツ チャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。[ドーナツ チャート](types/donut-chart.md)の詳細をご覧ください。
+{Platform} ドーナツ チャート、またはドーナツ グラフは、円チャートの変形であり、全体の一部を表す円内の変数の発生を比例的に示します。ドーナツ チャートには、円チャートの中央に円形の開口部があり、タイトルまたはカテゴリの説明を表示できます。ドーナツ チャートは、階層データを視覚化するための組み込みサポートを使用して、複数の同心円をサポートできます。[ドーナツ チャート](./types/donut-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/doughnut-chart/legend" height={600} alt="{Platform} 凡例付きの {Platform} ドーナツ チャート" />
 
 
 ### {Platform} エリア チャート
 
-{Platform} エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリア チャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。[エリア チャート](types/area-chart.md)の詳細をご覧ください。
+{Platform} エリア チャートは、直線セグメントで接続されたポイントのコレクションを使用して描画され、線の下の領域が塗りつぶされます。値は y 軸 (左側のラベル) に表示され、カテゴリは x 軸 (下部のラベル) に表示されます。エリア チャートは、プロットされた値の合計を表示することにより、一定期間の変化量を強調したり、複数の項目や全体の一部の関係を比較したりします。[エリア チャート](./types/area-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="{Platform} 複数ソースのエリア チャート" />
 
 
 ### {Platform} スパークライン チャート
 
-{Platform} スパークライン チャート、またはスパークライン グラフは、グリッド セル内や、データ ストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリ チャートの一種です。他の {Platform} チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。[スパークライン チャート](types/sparkline-chart.md)の詳細をご覧ください。
+{Platform} スパークライン チャート、またはスパークライン グラフは、グリッド セル内や、データ ストーリーを伝えるために単語サイズの視覚化が必要な場所など、小規模なレイアウト内で描画することを目的としたカテゴリ チャートの一種です。他の {Platform} チャート タイプと同様に、スパークライン チャートには、チャート タイプ、マーカー、範囲、トレンドライン、不明な値のプロット、ツールチップなど、構成およびカスタマイズできるいくつかの視覚要素と対応する機能があります。スパークライン チャートは、折れ線チャート、エリア チャート、縦棒チャート、または Win/Loss チャートとして描画できます。スパーク チャートに相当するフルサイズのチャートの違いは、Y 軸 (左側のラベル) と X 軸 (下部のラベル) が表示されないことです。[スパークライン チャート](./types/sparkline-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/sparkline/display-types" height={450} alt="{Platform} スパークライン チャートの例" />
 
 
 ### {Platform} バブル チャート
 
-{Platform} バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。{Platform} バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータ ディメンション (通常は色) を使用して、バブル チャートの値をさらに区別することもできます。[バブル チャート](types/bubble-chart.md)の詳細をご覧ください。
+{Platform} バブル チャート (バブル グラフ) は、3 つの数値で構成されるデータを表示するために使用されます。値の 2 つは、デカルト (X、Y) 座標系を使用して交点としてプロットされ、3 番目の値は点の直径サイズとして描画されます。これにより、バブル チャートにその名前が付けられます。これは、プロットの X 座標と Y 座標に沿ったさまざまなサイズのバブルの視覚化です。{Platform} バブル チャートは、データ相関とサイズによって描画されたデータ値の違いとの関係を示すために使用されます。4 番目のデータ ディメンション (通常は色) を使用して、バブル チャートの値をさらに区別することもできます。[バブル チャート](./types/bubble-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/scatter-bubble-chart-multiple-sources" height={600} alt="{Platform} バブル チャート" />
 
 
 ### {Platform} ファイナンシャル チャート/株価チャート
 
-{Platform} ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャル データを描画する複合視覚化です。日/週/月フィルター、チャート タイプの選択、ボリューム タイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された {Platform} 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。[株価チャート](types/stock-chart.md)の詳細をご覧ください。
+{Platform} ファイナンシャル/株価チャートは、時系列チャートで株価デーとファイナンシャル データを描画する複合視覚化です。日/週/月フィルター、チャート タイプの選択、ボリューム タイプの選択、インジケーターの選択、トレンドラインの選択などのインタラクティブな視覚要素がツールバーに含まれています。カスタマイズ用に設計された {Platform} 株価チャートは、データの視覚化と解釈を容易にするために、任意の方法でカスタマイズできます。ファイナンシャル チャートは、X 軸 (下のラベル) に沿って日時データを描画し、Open、High、Low、Close ボリュームなどのフィールドを表示します。時系列データを描画するチャートのタイプは、棒、ローソク、縦棒、または折れ線です。[株価チャート](./types/stock-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/financial-chart/multiple-data" height={600} alt="{Platform} 株価チャートの例" />
 
 
 ### {Platform} 縦棒チャート
 
-{Platform} 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[縦棒チャート](types/column-chart.md)の詳細をご覧ください。
+{Platform} 縦棒チャート (縦棒グラフ) は、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ幅と異なる長さの垂直棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過に伴う項目の価値の変動、データ分布、ソートされたデータのランキング (高から低、最悪から最高) を表示するのに理想的です。データは、チャートの上から下にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。[縦棒チャート](./types/column-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/category-chart/column-chart-multiple-sources" height={600} alt="{Platform} 複数ソースの縦棒チャート" />
 
 
 ### {Platform} 複合チャート
 
-{Platform} 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。[複合チャート](types/composite-chart.md)の詳細をご覧ください。
+{Platform} 複合チャートまたはコンボ チャートは、同じプロット領域でさまざまなチャート タイプを組み合わせた視覚化です。スケールが大きく異なり、異なる単位で表される可能性のある 2 つのデータ シリーズを表示する場合に非常に役立ちます。最も一般的な例は、一方の軸にドル、もう一方の軸にパーセンテージです。[複合チャート](./types/composite-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/composite-chart" height={600} alt="{Platform} 複合チャートの例" />
 
@@ -134,7 +134,7 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### {Platform} 極座標チャート
 
-{Platform} 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](types/polar-chart.md)の詳細をご覧ください。
+{Platform} 極座標エリア チャートまたは極座標グラフは、極座標チャートのグループに属し、頂点または隅がデータ ポイントの極 (角度/半径) 座標に配置された塗りつぶされたポリゴンの形状を持っています。極座標エリア チャートは、散布図と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に伸ばすのではなく、円の周りにラップします。他のシリーズ タイプと同じように、複数の極座標エリア チャートは同じデータ チャートにプロットでき、データセットの相違点を示すために互いにオーバーレイできます。[極座標チャート](./types/polar-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/polar-line-chart" height={600} alt="{Platform} 極座標型折れ線チャート" />
 
@@ -143,28 +143,28 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### {Platform} 散布図
 
-{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](types/scatter-chart.md)の詳細をご覧ください。
+{Platform} 散布図は、デカルト (X、Y) 座標系を使用してデータをプロットすることにより、2 つの値間の関係を示すために使用されます。各データ ポイントは、X 軸と Y 軸上のデータ値の交点として描画されます。散布図は、不均一な間隔またはデータのクラスターに注意を向けます。予測結果の収集データの標準偏差をハイライト表示し、科学データや統計データをプロットするためによく使用されます。{Platform} 散布図は、データがバインド前に時系列になっていない場合でも、X 軸と Y 軸でデータを時系列に整理してプロットします。[散布図](./types/scatter-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/scatter-point-chart" height={600} alt="{Platform} 散布マーカー チャート" />
 
 
 ### {Platform} シェープ チャート
 
-{Platform} シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。[シェープ チャート](types/shape-chart.md)の詳細をご覧ください。
+{Platform} シェープ チャートは、形状の配列 (X/Y ポイントの配列) を取り、デカルト (x、y) 座標系のポリゴンまたはポリラインのコレクションとして描画するチャートのグループです。これらは、科学データの強調領域でよく使用されますが、ダイアグラム、青写真、さらには建物の間取り図のプロットにも使用できます。[シェープ チャート](./types/shape-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/data-chart/type-scatter-polygon-series" height={600} alt="{Platform} 散布ポリゴン チャート" />
 
 
 ### {Platform} スプライン チャート
 
-{Platform} スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。{Platform} スプライン チャートは {Platform} 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプライン チャートの点は滑らかな曲線で接続されていることです。[スプライン チャート](types/spline-chart.md)の詳細をご覧ください。
+{Platform} スプライン チャート、またはスプライン グラフは、傾向を示し、比較分析を実行するために、一定期間にわたる 1 つ以上の数量の滑らかな線セグメントで接続されたポイントによって表される連続データ値を示す一種のカテゴリ折れ線チャートです。Y 軸 (左側のラベル) は数値を示し、X 軸 (下側のラベル) は時系列または比較カテゴリを示します。比較する 1 つ以上のデータセットを含めることができます。これはチャートで複数の線として描画されます。{Platform} スプライン チャートは {Platform} 折れ線チャートと同じですが、唯一の違いは、折れ線チャートが直線で接続された点であるのに対し、スプライン チャートの点は滑らかな曲線で接続されていることです。[スプライン チャート](./types/spline-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/category-chart/spline-multiple-sources" height={600} alt="{Platform} 複数ソースのスプライン チャート" />
 
 
 ### {Platform} ステップ チャート
 
-{Platform} ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。{Platform} ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。{Platform} ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で {Platform} ステップエリア チャートと同じです。[ステップ折れ線チャート](types/step-chart.md)の詳細をご覧ください。
+{Platform} ステップ折れ線チャート、またはステップ折れ線グラフは、ステップ状の進捗を形成する連続した垂直線と水平線で接続されたデータ ポイントのコレクションを描画するカテゴリ チャートです。値は Y 軸 (左側のラベル) に表示され、カテゴリは X 軸 (下部のラベル) に表示されます。{Platform} ステップ折れ線チャートは、一定期間の変化量を強調するか、複数の項目を比較します。{Platform} ステップ折れ線チャートは、ステップ線の下の領域が塗りつぶされていないことを除いて、すべての点で {Platform} ステップエリア チャートと同じです。[ステップ折れ線チャート](./types/step-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/category-chart/step-line-multiple-sources" height={600} alt="{Platform} 複数ソースのステップ折れ線チャート" />
 
@@ -173,7 +173,7 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### {Platform} ツリーマップ
 
-{ProductName} ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。[ツリーマップ](types/treemap-chart.md)の詳細をご覧ください。
+{ProductName} ツリーマップは、ネストされた一連のノードとして階層 (ツリー構造) データを表示します。ツリーの各ブランチにはツリーマップ ノードが提供されて、サブマップを表す小さなノードでタイル化されます。各ノードの長方形には、データ上の指定されたディメンションに比例した領域があります。多くの場合、ノードは色分けされて、データの個別のディメンションを示します。[ツリーマップ](./types/treemap-chart.mdx)の詳細をご覧ください。
 
 <Sample src="/charts/tree-map/overview" height={600} alt="{Platform} ツリーマップの例" />
 
@@ -184,19 +184,19 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### 動的なチャート
 
-新しい[複合チャート](types/Composite-chart.md)を作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
+新しい[複合チャート](./types/composite-chart.mdx)を作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、複数のチャート列を表示および重ねて、積層型縦棒を作成できます。
 
 ### カスタム ツールチップ
 
-新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用して[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
+新しい複合ビューを作成し、単一のチャートで複数のシリーズを重ね合わせて、データを視覚化します。チャートでは、画像やデータ バインディングを使用して[カスタム ツールチップ](./features/chart-tooltips.mdx#{PlatformLower}-チャート-ツールチップ-テンプレート)を作成したり、複数のシリーズのツールチップを 1 つのツールチップに組み合わせたりすることもできます。
 
 ### リアルタイムの高パフォーマンスなチャート
 
-ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、[高頻度のチャート](features/chart-performance.md#高頻度-{PlatformLower}-チャート)トピックを参照してください。
+ライブのストリーミング データを使用して、ミリ秒レベルの更新で数千のデータ ポイントをリアルタイムで表示します。タッチ デバイスでチャートを操作しているときでも、ラグ、画面のちらつき、表示の遅れは発生しません。デモについては、[高頻度のチャート](./features/chart-performance.mdx#高頻度-{PlatformLower}-チャート)トピックを参照してください。
 
 ### 大量のデータ処理
 
-[チャート パフォーマンス](features/chart-performance.md)を最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、[大量データのチャート](features/chart-performance.md#大量データの-{PlatformLower}-チャート)トピックを参照してください。
+[チャート パフォーマンス](./features/chart-performance.mdx)を最適化して、エンドユーザーがチャートのコンテンツをズームイン/ズームアウトまたはナビゲートしようとしたときにスムーズなパフォーマンスを提供し続けながら、数百万のデータ ポイントを描画します。デモについては、[大量データのチャート](./features/chart-performance.mdx#大量データの-{PlatformLower}-チャート)トピックを参照してください。
 
 ### モジュラー デザイン
 
@@ -212,7 +212,7 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### トレンドライン
 
-{Platform} チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべての[トレンドライン](features/chart-trendlines.md)をサポートします。
+{Platform} チャートは、線形 (x)、二次 (x2)、三次 (x3)、四次 (x4)、五次 (x5)、対数 (logn x)、指数 (ex)、べき乗 (axk + o(xk)) など、必要になるすべての[トレンドライン](./features/chart-trendlines.mdx)をサポートします。
 
 <Image src={igniteUiAngularFinancialChartTrendlines1100} alt="{Platform} チャート トレンドライン" class="responsive-img" />
 
@@ -224,7 +224,7 @@ import igniteUiAngularFinancialChartCustomTooltips1100 from '@xplat-images/chart
 
 ### マーカー、ツールチップ、およびテンプレート
 
-10 個の[マーカー タイプ](features/chart-markers.md)のいずれかを使用するか、独自の[マーカー-テンプレート](features/chart-markers.md#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データをハイライト表示するか、シンプルな[ツールチップ](features/chart-tooltips.md)または[カスタム ツールチップ](features/chart-tooltips.md#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
+10 個の[マーカー タイプ](./features/chart-markers.mdx)のいずれかを使用するか、独自の[マーカー-テンプレート](./features/chart-markers.mdx#{PlatformLower}-チャート-マーカーのテンプレート)を作成して、データをハイライト表示するか、シンプルな[ツールチップ](./features/chart-tooltips.mdx)または[カスタム ツールチップ](./features/chart-tooltips.mdx#{PlatformLower}-チャート-ツールチップ-テンプレート)を使用した多軸および複数系列のチャートで、データにコンテキストと意味を追加します。
 
 <Image src={igniteUiAngularFinancialChartCustomTooltips1100} alt="{Platform} チャート マーカー、ツールチップ、およびテンプレート" class="responsive-img" />
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx
index fc10523754..7eb1deaffc 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-animations.mdx
@@ -23,7 +23,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} チャート アニメーションの例
 
-以下の例は、アニメーションをデフォルトの <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> ("Auto") に設定した[折れ線チャート](../types/line-chart.md)を示しています。この例の一番上のドロップダウンとスライダーは、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> と <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> をそれぞれ変更できるため、サポートされるさまざまなアニメーションが異なる速度でどのように見えるかを確認できます。
+以下の例は、アニメーションをデフォルトの <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> ("Auto") に設定した[折れ線チャート](../types/line-chart.mdx)を示しています。この例の一番上のドロップダウンとスライダーは、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> と <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> をそれぞれ変更できるため、サポートされるさまざまなアニメーションが異なる速度でどのように見えるかを確認できます。
 
 <Sample src="/charts/category-chart/line-chart-with-animations" height={500} alt="{Platform} 構成オプションの例" />
 
@@ -34,9 +34,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャート ツールチップ](chart-tooltips.md)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
+- [チャート ツールチップ](./chart-tooltips.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
index 2cbf89f2b6..0c5034a67c 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-gridlines.mdx
@@ -105,8 +105,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [軸レイアウト](chart-axis-layouts.md)
-- [軸オプション](chart-axis-options.md)
+- [軸レイアウト](./chart-axis-layouts.mdx)
+- [軸オプション](./chart-axis-options.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
index c29033b8c2..562b391c8b 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-layouts.mdx
@@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 すべての軸に対して、チャートのプロット領域に関連して軸の位置を指定できます。{Platform} チャートの <ApiLink type="CategoryChart" member="xAxisLabelLocation" label="XAxisLabelLocation" /> プロパティを使用すると、x 軸の線とそのラベルをプロット領域の上または下に配置できます。同様に、<ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> プロパティを使用して、プロット領域の左側または右側に y 軸を配置できます。
 
-以下の例は、2009 年以降に生成された再生可能電力量を[折れ線チャート](../types/line-chart.md)で示しています。チャートのプロット領域の内側または外側の左側または右側にラベルを配置したときに軸がどのように見えるかを視覚化できるように、<ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> を構成できるドロップダウンがあります。
+以下の例は、2009 年以降に生成された再生可能電力量を[折れ線チャート](../types/line-chart.mdx)で示しています。チャートのプロット領域の内側または外側の左側または右側にラベルを配置したときに軸がどのように見えるかを視覚化できるように、<ApiLink type="CategoryChart" member="yAxisLabelLocation" label="YAxisLabelLocation" /> を構成できるドロップダウンがあります。
 
 <Sample src="/charts/category-chart/axis-locations" height={450} alt="{Platform} 軸位置の例" />
 
@@ -40,7 +40,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {Platform} <ApiLink type="DataChart" /> の同じプロット領域に複数の軸を共有して追加できます。<ApiLink type="TimeXAxis" /> を共有し、複数の <ApiLink type="NumericYAxis" /> を追加して、さまざまな値 (株価や株取引量など) を持つ多くのデータ ソースをプロットするのが一般的なシナリオです。
 
-以下の例は、[株価チャート](../types/stock-chart.md)と[縦棒チャート](../types/column-chart.md)をプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は[縦棒チャート](../types/column-chart.md)で使用され、右側の Y 軸は[株価チャート](../types/stock-chart.md)、X 軸は 2 つの間で共有されます。
+以下の例は、[株価チャート](../types/stock-chart.mdx)と[縦棒チャート](../types/column-chart.mdx)をプロットした株価および株取引量チャートを示しています。この場合、左側の Y 軸は[縦棒チャート](../types/column-chart.mdx)で使用され、右側の Y 軸は[株価チャート](../types/stock-chart.mdx)、X 軸は 2 つの間で共有されます。
 
 <Sample src="/charts/data-chart/axis-sharing" height={450} alt="{Platform} 軸共有の例" />
 
@@ -49,7 +49,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 軸をプロット領域の外側に配置することに加えて、{Platform} <ApiLink type="DataChart" /> は、軸をプロット領域の内側に配置し、特定の値で交差させるオプションも提供します。たとえば、x 軸と y 軸の両方で <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> プロパティと <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> プロパティを設定して、原点が (0、0) で 交差するように軸線と軸ラベルを描画することにより、三角関数チャートを作成できます。
 
-以下の例は、[散布スプライン チャート](../types/scatter-chart.md)で表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。
+以下の例は、[散布スプライン チャート](../types/scatter-chart.mdx)で表される Sin と Cos 波を示します。X 軸と Y 軸は (0、0) 原点で交差します。
 
 <Sample src="/charts/data-chart/axis-crossing" height={450} alt="{Platform} 軸交差の例" />
 
@@ -69,8 +69,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸オプション](chart-axis-options.md)
+- [軸グリッド線](./chart-axis-gridlines.mdx)
+- [軸オプション](./chart-axis-options.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx
index 4f8425693e..cf9301facb 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-options.mdx
@@ -87,7 +87,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {Platform} チャートの <ApiLink type="CategoryChart" member="xAxisMinimumGapSize" label="XAxisMinimumGapSize" /> プロパティは、可能であれば、カテゴリ間のギャップに使用する最小のピクセル数を決定します。
 
-以下の例は、ニューヨーク市のセントラル パークの摂氏の平均最高気温を示しています。これは、<ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.md)で表されているため、列の間にカテゴリ全体の幅があります。スライダーを使用すると、この例のギャップを構成して、さまざまな値の効果を確認できます。
+以下の例は、ニューヨーク市のセントラル パークの摂氏の平均最高気温を示しています。これは、<ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.mdx)で表されているため、列の間にカテゴリ全体の幅があります。スライダーを使用すると、この例のギャップを構成して、さまざまな値の効果を確認できます。
 
 <Sample src="/charts/category-chart/axis-gap" height={450} alt="{Platform} 軸間隔の例" />
 
@@ -98,7 +98,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {Platform} チャートの <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> プロパティを使用すると、プロットされた系列の描画された縦棒または棒の重複を設定できます。このプロパティは、-1.0 から 1.0 までの数値を受け入れます。値は、各シリーズ専用の使用可能なピクセル数からの相対的な重なりを表します。このプロパティを負の値 (-1.0 まで) に設定すると、カテゴリが互いから離れてしまい、それらの間にギャップが生じます。逆に、このプロパティを正の値 (最大 1.0) に設定すると、カテゴリが互いに重なります。値が 1 の場合、チャートはカテゴリを互いの上に表示します。
 
-以下の例は、フランチャイズの世界の興行収入の合計とシリーズで最も収益の高い映画を比較した、世界で最も収益の高い映画フランチャイズの比較を示しています。これは、<ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.md)で表されており、列は完全に重なり合います。スライダーを使用すると、この例の重複を構成して、さまざまな値の効果を確認できます。
+以下の例は、フランチャイズの世界の興行収入の合計とシリーズで最も収益の高い映画を比較した、世界で最も収益の高い映画フランチャイズの比較を示しています。これは、<ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> が最初に 1 に設定された[縦棒チャート](../types/column-chart.mdx)で表されており、列は完全に重なり合います。スライダーを使用すると、この例の重複を構成して、さまざまな値の効果を確認できます。
 
 <Sample src="/charts/category-chart/axis-overlap" height={450} alt="{Platform} 軸重複の例" />
 
@@ -109,8 +109,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸レイアウト](chart-axis-layouts.md)
+- [軸グリッド線](./chart-axis-gridlines.mdx)
+- [軸レイアウト](./chart-axis-layouts.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-axis-types.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-axis-types.mdx
index 6348ac69f6..944c32d8f3 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-axis-types.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-axis-types.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} 軸タイプ
 
-{ProductName} カテゴリ チャートは、<ApiLink type="CategoryXAxis" /> および <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。同様に、{ProductName} ファイナンシャル チャートは、<ApiLink type="TimeXAxis" /> タイプと <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。ただし、{ProductName} データ チャートは複数の軸タイプをサポートしており、[軸の位置](chart-axis-layouts.md#軸位置の例)を設定してチャートの任意の側に配置したり、[軸交差](chart-axis-layouts.md#軸交差の例)プロパティを使用してチャートの内部に配置したりできます。このトピックでは、相互に互換性のある軸とシリーズ、および固有の軸に対するいくつかの特定のプロパティについて、それぞれについて説明します。
+{ProductName} カテゴリ チャートは、<ApiLink type="CategoryXAxis" /> および <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。同様に、{ProductName} ファイナンシャル チャートは、<ApiLink type="TimeXAxis" /> タイプと <ApiLink type="NumericYAxis" /> タイプを 1 つだけ使用します。ただし、{ProductName} データ チャートは複数の軸タイプをサポートしており、[軸の位置](./chart-axis-layouts.mdx#軸位置の例)を設定してチャートの任意の側に配置したり、[軸交差](./chart-axis-layouts.mdx#軸交差の例)プロパティを使用してチャートの内部に配置したりできます。このトピックでは、相互に互換性のある軸とシリーズ、および固有の軸に対するいくつかの特定のプロパティについて、それぞれについて説明します。
 
 ## デカルト軸
 
@@ -54,7 +54,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ### 数値 X 軸
 
-<ApiLink type="NumericXAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、X 軸に沿って水平に配置されます。<ApiLink type="NumericXAxis" /> ラベルの位置は、<ApiLink type="NumericYAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.md) (散布シリーズ) の <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryXAxis" /> と組み合わせた場合、これらのラベルは、<ApiLink type="BarSeries" />、<ApiLink type="StackedBarSeries" />、および <ApiLink type="Stacked100BarSeries" /> の <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。
+<ApiLink type="NumericXAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、X 軸に沿って水平に配置されます。<ApiLink type="NumericXAxis" /> ラベルの位置は、<ApiLink type="NumericYAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.mdx) (散布シリーズ) の <ApiLink type="BubbleSeries" member="xMemberPath" label="XMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryXAxis" /> と組み合わせた場合、これらのラベルは、<ApiLink type="BarSeries" />、<ApiLink type="StackedBarSeries" />、および <ApiLink type="Stacked100BarSeries" /> の <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。
 
 <ApiLink type="NumericXAxis" /> は、次のタイプのシリーズと互換性があります:
 
@@ -78,7 +78,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ### 数値 Y 軸
 
-<ApiLink type="NumericYAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、Y 軸に沿って垂直に配置されます。<ApiLink type="NumericYAxis" /> ラベルの位置は、<ApiLink type="NumericXAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.md) (散布シリーズ) の <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryYAxis" /> と組み合わせた場合、これらのラベルは、上記の表に記載されているカテゴリまたは積層シリーズの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。財務シリーズのいずれかを使用している場合、Open/High/Low/Close のパスと使用しているシリーズ タイプに対応して配置されます。
+<ApiLink type="NumericYAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸のラベルは、Y 軸に沿って垂直に配置されます。<ApiLink type="NumericYAxis" /> ラベルの位置は、<ApiLink type="NumericXAxis" /> と組み合わせた場合にサポートされるさまざまな [ScatterSeries](../types/scatter-chart.mdx) (散布シリーズ) の <ApiLink type="BubbleSeries" member="yMemberPath" label="YMemberPath" /> プロパティに依存します。または、<ApiLink type="CategoryYAxis" /> と組み合わせた場合、これらのラベルは、上記の表に記載されているカテゴリまたは積層シリーズの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> に対応して配置されます。財務シリーズのいずれかを使用している場合、Open/High/Low/Close のパスと使用しているシリーズ タイプに対応して配置されます。
 
 <ApiLink type="NumericYAxis" /> は、次のタイプのシリーズと互換性があります:
 
@@ -123,7 +123,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <ApiLink type="CategoryAngleAxis" /> は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、その順序での位置に従って円の端に沿って配置されます。この軸のタイプでは、数字、文字列などのほぼすべてのデータのタイプを表示できます。
 
-<ApiLink type="CategoryAngleAxis" /> は通常、[ラジアル シリーズ](../types/radial-chart.md)をプロットするために <ApiLink type="NumericRadiusAxis" /> と共に使用されます。
+<ApiLink type="CategoryAngleAxis" /> は通常、[ラジアル シリーズ](../types/radial-chart.mdx)をプロットするために <ApiLink type="NumericRadiusAxis" /> と共に使用されます。
 
 次の例は、<ApiLink type="CategoryAngleAxis" /> タイプの使用法を示しています:
 
@@ -134,7 +134,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <ApiLink type="ProportionalCategoryAngleAxis" /> は、そのデータを一連のカテゴリ データ項目として扱います。この軸のラベルは、シーケンス内の位置に応じて円の端に沿って配置されます。この軸の種類では、数字、文字列などのほぼすべてのデータのタイプを表示できます。
 
-<ApiLink type="ProportionalCategoryAngleAxis" /> は通常、<ApiLink type="NumericRadiusAxis" /> と一緒に使用され、円チャートをプロットします (例: [ラジアル シリーズ](../types/radial-chart.md))。
+<ApiLink type="ProportionalCategoryAngleAxis" /> は通常、<ApiLink type="NumericRadiusAxis" /> と一緒に使用され、円チャートをプロットします (例: [ラジアル シリーズ](../types/radial-chart.mdx))。
 
 次の例は、<ApiLink type="ProportionalCategoryAngleAxis" /> タイプの使用方法を示しています。
 
@@ -143,9 +143,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ### 数字角度軸
 
-<ApiLink type="NumericAngleAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。<ApiLink type="NumericAngleAxis" /> のラベルの位置は、[極座標シリーズ](../types/polar-chart.md) オブジェクトの <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> プロパティまたは[ラジアル シリーズ](../types/radial-chart.md) オブジェクトの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> プロパティを使用してマップされたデータ列の値によって異なります。
+<ApiLink type="NumericAngleAxis" /> は、そのデータを連続的に変化する数値データ項目として扱います。この軸領域のラベルは、円形プロットの中心から始まる半径線に沿って配置されます。<ApiLink type="NumericAngleAxis" /> のラベルの位置は、[極座標シリーズ](../types/polar-chart.mdx) オブジェクトの <ApiLink type="BubbleSeries" member="radiusMemberPath" label="RadiusMemberPath" /> プロパティまたは[ラジアル シリーズ](../types/radial-chart.mdx) オブジェクトの <ApiLink type="AreaSeries" member="valueMemberPath" label="ValueMemberPath" /> プロパティを使用してマップされたデータ列の値によって異なります。
 
-<ApiLink type="NumericAngleAxis" /> は、<ApiLink type="CategoryAngleAxis" /> と共に使用して[ラジアル シリーズ](../types/radial-chart.md)をプロットするか、<ApiLink type="NumericRadiusAxis" /> と共に使用して[極座標シリーズ](../types/polar-chart.md)をプロットすることができます。
+<ApiLink type="NumericAngleAxis" /> は、<ApiLink type="CategoryAngleAxis" /> と共に使用して[ラジアル シリーズ](../types/radial-chart.mdx)をプロットするか、<ApiLink type="NumericRadiusAxis" /> と共に使用して[極座標シリーズ](../types/polar-chart.mdx)をプロットすることができます。
 
 次の例は、<ApiLink type="NumericAngleAxis" /> タイプの使用法を示しています:
 
@@ -156,7 +156,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <ApiLink type="NumericRadiusAxis" /> は、データを連続的に変化する数値データ項目として扱います。この軸のラベルは、円形プロットの周りに配置されます。ラベルの位置は、対応する極座標シリーズの `AngleMemberPath` プロパティを使用してマップされたデータ列の値によって異なります。
 
-<ApiLink type="NumericRadiusAxis" /> を <ApiLink type="NumericRadiusAxis" /> と共に使用して、[極座標シリーズ](../types/polar-chart.md)をプロットできます。
+<ApiLink type="NumericRadiusAxis" /> を <ApiLink type="NumericRadiusAxis" /> と共に使用して、[極座標シリーズ](../types/polar-chart.mdx)をプロットできます。
 
 次の例は、<ApiLink type="NumericRadiusAxis" /> タイプの使用法を示しています:
 
@@ -167,6 +167,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、次のトピックを参照してください:
 
-- [軸グリッド線](chart-axis-gridlines.md)
-- [軸レイアウト](chart-axis-layouts.md)
-- [軸オプション](chart-axis-options.md)
+- [軸グリッド線](./chart-axis-gridlines.mdx)
+- [軸レイアウト](./chart-axis-layouts.mdx)
+- [軸オプション](./chart-axis-options.mdx)
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx
index 861a88f360..4922507d8b 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-aggregations.mdx
@@ -22,7 +22,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} データ集計の例
 
-次の例は、<ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> の Country メンバーごとにグループ化する[縦棒チャート](../types/column-chart.md)を示しており、各データ項目内の他のプロパティ (Product、MonthName、Year など) に変更して販売データを集計できます。また、グループ化されたプロパティを望ましい順序で取得するために、概要とソートのオプションも利用できます。
+次の例は、<ApiLink type="CategoryChart" member="xAxisMemberPath" label="XAxis" /> の Country メンバーごとにグループ化する[縦棒チャート](../types/column-chart.mdx)を示しており、各データ項目内の他のプロパティ (Product、MonthName、Year など) に変更して販売データを集計できます。また、グループ化されたプロパティを望ましい順序で取得するために、概要とソートのオプションも利用できます。
 
 <ApiLink type="CategoryChart" member="initialSummaries" label="InitialSummaries" /> と <ApiLink type="CategoryChart" member="groupSorts" label="GroupSorts" /> のドロップダウン内にある短縮関数は、割り当てたプロパティに基づいて正しい結果が得られるように適用されていることに注意してください (例: Sum(sales) as Sales | Sales Desc)。
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx
index 82fb22e77b..9cd22af660 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-data-filtering.mdx
@@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} チャート データ フィルターの例
 
-次の例は、数十年間の年間出生率の[縦棒チャート](../types/column-chart.md)を示しています。ドロップダウンで年代を選択すると <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> プロパティによって式が挿入され、チャートのビジュアルが更新されます。
+次の例は、数十年間の年間出生率の[縦棒チャート](../types/column-chart.mdx)を示しています。ドロップダウンで年代を選択すると <ApiLink type="CategoryChart" member="initialFilter" label="InitialFilter" /> プロパティによって式が挿入され、チャートのビジュアルが更新されます。
 
 <Sample src="/charts/category-chart/data-filter" height={500} alt="{Platform} チャート データ フィルターの例" />
 
@@ -47,9 +47,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、次のトピックを参照してください。
 
-- [チャートの注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャートのツールチップ](chart-tooltips.md)
+- [チャートの注釈](./chart-annotations.mdx)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
+- [チャートのツールチップ](./chart-tooltips.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-highlight-filter.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-highlight-filter.mdx
index eb7de495dc..1901a8d192 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-highlight-filter.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-highlight-filter.mdx
@@ -64,9 +64,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、次のトピックを参照してください。
 
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャートのデータ ツールチップ](chart-data-tooltip.md)
-- [チャートのデータ集計](chart-data-aggregations.md)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
+- [チャートのデータ ツールチップ](./chart-data-tooltip.mdx)
+- [チャートのデータ集計](./chart-data-aggregations.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx
index 99214dcc2e..e762120169 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-highlighting.mdx
@@ -66,9 +66,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [チャート アニメーション](chart-animations.md)
-- [チャート注釈](chart-annotations.md)
-- [チャート ツールチップ](chart-tooltips.md)
+- [チャート アニメーション](./chart-animations.mdx)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャート ツールチップ](./chart-tooltips.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
index 75159e1e81..86b355f1f7 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-markers.mdx
@@ -23,7 +23,7 @@ import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro';
 
 ## {Platform} チャート マーカーの例
 
-次の例では、[折れチャート](../types/line-chart.md)は、2009 年から 2019 年までのヨーロッパ、中国、および米国の国々の再生可能エネルギーの発電量を比較しています。マーカーが <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> プロパティを <ApiLink type="MarkerType" member="Circle" label="Circle" /> 列挙値に設定して有効になっています。
+次の例では、[折れチャート](../types/line-chart.mdx)は、2009 年から 2019 年までのヨーロッパ、中国、および米国の国々の再生可能エネルギーの発電量を比較しています。マーカーが <ApiLink type="CategoryChart" member="markerTypes" label="MarkerTypes" /> プロパティを <ApiLink type="MarkerType" member="Circle" label="Circle" /> 列挙値に設定して有効になっています。
 
 マーカーのカラーは、以下のサンプルの <ApiLink type="CategoryChart" member="markerBrushes" label="MarkerBrushes" />プロパティと <ApiLink type="CategoryChart" member="markerOutlines" label="MarkerOutlines" /> プロパティを設定することによっても管理されます。このサンプルでは、ドロップダウンを使用してマーカーと <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> を構成できます。
 
@@ -120,8 +120,8 @@ import PlatformBlock from 'docs-template/components/mdx/PlatformBlock.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx
index 37cdf525a0..e4b2b807f4 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-navigation.mdx
@@ -91,8 +91,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャート ツールチップ](chart-tooltips.md)
-- [チャート トレンドライン](chart-trendlines.md)
+- [チャート ツールチップ](./chart-tooltips.mdx)
+- [チャート トレンドライン](./chart-trendlines.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx
index c51ed5a94b..ed3f06cc32 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-overlays.mdx
@@ -23,7 +23,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 ## {Platform} 値オーバーレイの例
 
-次の例は、いくつかの水平値オーバーレイがプロットされた[縦棒チャート](../types/column-chart.md)を示しています。
+次の例は、いくつかの水平値オーバーレイがプロットされた[縦棒チャート](../types/column-chart.mdx)を示しています。
 
 <Sample src="/charts/data-chart/series-value-overlay" height={600} alt="{Platform} 値オーバーレイの例" />
 
@@ -68,7 +68,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 ## {Platform} ファイナンシャル オーバーレイ
 
-{Platform} [株価チャート](../types/stock-chart.md)に組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。
+{Platform} [株価チャート](../types/stock-chart.mdx)に組み込みのファイナンシャル オーバーレイとインジケーターをプロットすることもできます。
 
 ## チャート オーバーレイ テキスト <Badge variant="preview" />
 
@@ -136,10 +136,10 @@ public Series StylingOverlayText()
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [チャート注釈](chart-annotations.md)
-- [縦棒チ株価チャートャート](../types/area-chart.md)
-- [折れ線チャート](../types/line-chart.md)
-- [株価チャート](../types/stock-chart.md)
+- [チャート注釈](./chart-annotations.mdx)
+- [縦棒チ株価チャートャート](../types/area-chart.mdx)
+- [折れ線チャート](../types/line-chart.mdx)
+- [株価チャート](../types/stock-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
index 6a8995572e..0836e6152a 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-performance.mdx
@@ -49,9 +49,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 多数のデータ ポイント (10,000 以上など) を含むデータ ソースをプロットする必要がある場合は、その目的のために特別にデザインされた次のタイプのシリーズのいずれかで {Platform} <ApiLink type="DataChart" /> を使用することをお勧めします。
 
-- [カテゴリ ポイント チャート](../types/point-chart.md) や[散布マーカー チャート](../types/scatter-chart.md#{PlatformLower}-散布マーカー-チャート) の代わりに[散布高密度チャート](../types/scatter-chart.md#{PlatformLower}-散布高密度チャート)
-- [カテゴリ折れ線チャート](../types/line-chart.md#{PlatformLower}-折れ線チャートの例) や[散布折れ線チャート](../types/scatter-chart.md#{PlatformLower}-散布折れ線チャート) の代わりに[散布ポリライン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリライン-チャート)
-- [カテゴリ エリア チャート](../types/area-chart.md#{PlatformLower}-エリア-チャートの例) や[縦棒チャート](../types/column-chart.md#{PlatformLower}-縦棒チャートの例) の代わりに[散布ポリゴン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリゴン-チャート)
+- [カテゴリ ポイント チャート](../types/point-chart.mdx) や[散布マーカー チャート](../types/scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート) の代わりに[散布高密度チャート](../types/scatter-chart.mdx#{PlatformLower}-散布高密度チャート)
+- [カテゴリ折れ線チャート](../types/line-chart.mdx#{PlatformLower}-折れ線チャートの例) や[散布折れ線チャート](../types/scatter-chart.mdx#{PlatformLower}-散布折れ線チャート) の代わりに[散布ポリライン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリライン-チャート)
+- [カテゴリ エリア チャート](../types/area-chart.mdx#{PlatformLower}-エリア-チャートの例) や[縦棒チャート](../types/column-chart.mdx#{PlatformLower}-縦棒チャートの例) の代わりに[散布ポリゴン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリゴン-チャート)
 
 ### データ構造
 
@@ -163,38 +163,38 @@ this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
 
 ### チャート タイプ
 
-[折れ線チャート](../types/line-chart.md)などの単純なチャート タイプは、データ ポイント間のスプライン線の補間が複雑であるため、[スプライン チャート](../types/spline-chart.md)を使用するよりもパフォーマンスが速くなります。したがって、{Platform} <ApiLink type="CategoryChart" /> の <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティまたは <ApiLink type="FinancialChart" /> コントロールを使用して、描画が高速なチャートのタイプを選択する必要があります。または、{Platform} <ApiLink type="DataChart" /> コントロールで、シリーズのタイプをより高速なシリーズに変更することもできます。
+[折れ線チャート](../types/line-chart.mdx)などの単純なチャート タイプは、データ ポイント間のスプライン線の補間が複雑であるため、[スプライン チャート](../types/spline-chart.mdx)を使用するよりもパフォーマンスが速くなります。したがって、{Platform} <ApiLink type="CategoryChart" /> の <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティまたは <ApiLink type="FinancialChart" /> コントロールを使用して、描画が高速なチャートのタイプを選択する必要があります。または、{Platform} <ApiLink type="DataChart" /> コントロールで、シリーズのタイプをより高速なシリーズに変更することもできます。
 
 次の表に、チャートの各グループで、パフォーマンスが速いものから遅いものの順にチャートのタイプを示します。
 
 | チャート グループ     | チャート タイプ |
 | ----------------|--------------------------------- |
-| 円チャート       | - [円チャート](../types/pie-chart.md) <br /> - [ドーナツ チャート](../types/donut-chart.md) <br /> - [ラジアル円チャート](../types/radial-chart.md#{PlatformLower}-ラジアル円チャート) <br /> |
-| 折れ線チャート      | - [カテゴリ折れ線チャート](../types/line-chart.md#{PlatformLower}-カテゴリ折れ線チャート) <br /> - [カテゴリ スプライン チャート](../types/spline-chart.md#{PlatformLower}-カテゴリ-スプライン-チャート) <br /> - [ステップ折れ線チャート](../types/step-chart.md#{PlatformLower}-ステップ折れ線チャート) <br /> - [ラジアル折れ線チャート](../types/radial-chart.md#{PlatformLower}-ラジアル折れ線チャート) <br /> - [極座標折れ線チャート](../types/polar-chart.md#{PlatformLower}-極座標型折れ線チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.md#{PlatformLower}-散布折れ線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリライン-チャート) (\*)  <br /> - [散布等高線チャート](../types/scatter-chart.md#{PlatformLower}-散布等高線チャート) <br /> - [積層型折れ線チャート](../types/stacked-chart.md#{PlatformLower}-積層型折れ線チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-折れ線チャート) <br /> |
-| エリア チャート      | - [カテゴリ エリア チャート](../types/area-chart.md#{PlatformLower}-エリア-チャートの例) <br /> - [ステップ エリア チャート](../types/step-chart.md#{PlatformLower}-ステップ-エリア-チャート) <br /> - [範囲エリア チャート](../types/area-chart.md#{PlatformLower}-範囲エリア-チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.md#{PlatformLower}-ラジアル-エリア-チャート) <br /> - [極座標エリア チャート](../types/polar-chart.md#{PlatformLower}-極座標エリア-チャート) <br /> - [散布ポリゴン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリゴン-チャート) (\*) <br /> - [散布エリア チャート](../types/scatter-chart.md#{PlatformLower}-散布エリア-チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.md#{PlatformLower}-積層型エリア-チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-エリア-チャート) <br /> |
-| 縦棒チャート    | - [縦棒チャート](../types/column-chart.md#{PlatformLower}-縦棒チャートの例) <br /> - [棒チャート](../types/bar-chart.md#{PlatformLower}-棒チャートの例) <br /> - [ウォーターフォール チャート](../types/column-chart.md#{PlatformLower}-ウォーターフォール-チャート) <br /> - [範囲縦棒チャート](../types/column-chart.md#{PlatformLower}-範囲縦棒チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.md#{PlatformLower}-ラジアル縦棒チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型棒チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-棒チャート) |
-| スプライン チャート    | - [カテゴリ スプライン チャート](../types/spline-chart.md#{PlatformLower}-スプライン-チャートの例) <br /> - [極座標スプライン チャート](../types/polar-chart.md#{PlatformLower}-極座標スプラインーチャート) <br /> - [散布スプライン チャート](../types/scatter-chart.md#{PlatformLower}-散布スプライン-チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.md#{PlatformLower}-積層型スプライン-チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-スプライン-チャート) <br /> |
-| ポイント チャート     | - [カテゴリ ポイント チャート](../types/point-chart.md) <br /> - [散布高密度チャート](../types/scatter-chart.md#{PlatformLower}-散布高密度チャート)  <br /> - [散布マーカー チャート](../types/scatter-chart.md#{PlatformLower}-散布マーカー-チャート) <br /> - [散布バブル チャート](../types/bubble-chart.md) <br /> - [極座標型マーカーチャート](../types/polar-chart.md#{PlatformLower}-極座標型マーカー-チャート) <br /> |
-| ファイナンシャル チャート | - [折れ線モードの株価チャート](../types/stock-chart.md) <br /> - [縦棒モードの株価チャート](../types/stock-chart.md) <br /> - [棒モードの株価チャート](../types/stock-chart.md) <br /> - [ローソク足モードの株価チャート](../types/stock-chart.md) <br /> - [オーバーレイ付き株価チャート](../types/stock-chart.md) <br /> - [ズーム ペイン付き株価チャート](../types/stock-chart.md#ズーム-ペイン) <br /> - [ボリューム ペイン付き株価チャート](../types/stock-chart.md#ボリューム-ペイン) <br /> - [インジケーター ペイン付き株価チャート](../types/stock-chart.md#インジケーター-ペイン) <br /> |
-| 散布図   | - [散布高密度チャート](../types/scatter-chart.md#{PlatformLower}-散布高密度チャート) <br /> - [散布マーカー チャート](../types/scatter-chart.md#{PlatformLower}-散布マーカー-チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.md#{PlatformLower}-散布折れ線チャート) <br /> - [散布バブル チャート](../types/bubble-chart.md) <br /> - [散布スプライン チャート](../types/scatter-chart.md#{PlatformLower}-散布スプライン-チャート) <br /> - [散布エリア チャート](../types/scatter-chart.md#{PlatformLower}-散布エリア-チャート) <br /> - [散布等高線チャート](../types/scatter-chart.md#{PlatformLower}-散布等高線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリライン-チャート) (\*) <br /> - [散布ポリゴン チャート](../types/shape-chart.md#{PlatformLower}-散布ポリゴン-チャート) (\*) <br /> |
-| ラジアル チャート    | - [ラジアル折れ線チャート](../types/radial-chart.md#{PlatformLower}-ラジアル折れ線チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.md#{PlatformLower}-ラジアル-エリア-チャート) <br /> - [ラジアル円チャート](../types/radial-chart.md#{PlatformLower}-ラジアル円チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.md#{PlatformLower}-ラジアル縦棒チャート) <br /> |
-| 極座標チャート     | - [極座標型マーカー チャート](../types/polar-chart.md#{PlatformLower}-極座標型マーカー-チャート) <br /> - [極座標型折れ線チャート](../types/polar-chart.md#{PlatformLower}-極座標型折れ線チャート) <br /> - [極座標エリア チャート](../types/polar-chart.md#{PlatformLower}-極座標エリア-チャート) <br /> - [極座標スプライン チャート](../types/polar-chart.md#{PlatformLower}-極座標スプライン-チャート) <br /> - [極座標スプライン エリア チャート](../types/polar-chart.md#{PlatformLower}-極座標スプライン-エリア-チャート) <br /> |
-| 積層型チャート   | - [積層型折れ線チャート](../types/stacked-chart.md#{PlatformLower}-積層型折れ線チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.md#{PlatformLower}-積層型エリア-チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型棒チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.md#{PlatformLower}-積層型スプライン-チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-折れ線チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-エリア-チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-棒チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.md#{PlatformLower}-積層型-100-スプライン-チャート) <br /> |
+| 円チャート       | - [円チャート](../types/pie-chart.mdx) <br /> - [ドーナツ チャート](../types/donut-chart.mdx) <br /> - [ラジアル円チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル円チャート) <br /> |
+| 折れ線チャート      | - [カテゴリ折れ線チャート](../types/line-chart.mdx#{PlatformLower}-カテゴリ折れ線チャート) <br /> - [カテゴリ スプライン チャート](../types/spline-chart.mdx#{PlatformLower}-カテゴリ-スプライン-チャート) <br /> - [ステップ折れ線チャート](../types/step-chart.mdx#{PlatformLower}-ステップ折れ線チャート) <br /> - [ラジアル折れ線チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル折れ線チャート) <br /> - [極座標折れ線チャート](../types/polar-chart.mdx#{PlatformLower}-極座標型折れ線チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.mdx#{PlatformLower}-散布折れ線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリライン-チャート) (\*)  <br /> - [散布等高線チャート](../types/scatter-chart.mdx#{PlatformLower}-散布等高線チャート) <br /> - [積層型折れ線チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型折れ線チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-折れ線チャート) <br /> |
+| エリア チャート      | - [カテゴリ エリア チャート](../types/area-chart.mdx#{PlatformLower}-エリア-チャートの例) <br /> - [ステップ エリア チャート](../types/step-chart.mdx#{PlatformLower}-ステップ-エリア-チャート) <br /> - [範囲エリア チャート](../types/area-chart.mdx#{PlatformLower}-範囲エリア-チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル-エリア-チャート) <br /> - [極座標エリア チャート](../types/polar-chart.mdx#{PlatformLower}-極座標エリア-チャート) <br /> - [散布ポリゴン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリゴン-チャート) (\*) <br /> - [散布エリア チャート](../types/scatter-chart.mdx#{PlatformLower}-散布エリア-チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型エリア-チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-エリア-チャート) <br /> |
+| 縦棒チャート    | - [縦棒チャート](../types/column-chart.mdx#{PlatformLower}-縦棒チャートの例) <br /> - [棒チャート](../types/bar-chart.mdx#{PlatformLower}-棒チャートの例) <br /> - [ウォーターフォール チャート](../types/column-chart.mdx#{PlatformLower}-ウォーターフォール-チャート) <br /> - [範囲縦棒チャート](../types/column-chart.mdx#{PlatformLower}-範囲縦棒チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル縦棒チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型棒チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-棒チャート) |
+| スプライン チャート    | - [カテゴリ スプライン チャート](../types/spline-chart.mdx#{PlatformLower}-スプライン-チャートの例) <br /> - [極座標スプライン チャート](../types/polar-chart.mdx#{PlatformLower}-極座標スプラインーチャート) <br /> - [散布スプライン チャート](../types/scatter-chart.mdx#{PlatformLower}-散布スプライン-チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型スプライン-チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-スプライン-チャート) <br /> |
+| ポイント チャート     | - [カテゴリ ポイント チャート](../types/point-chart.mdx) <br /> - [散布高密度チャート](../types/scatter-chart.mdx#{PlatformLower}-散布高密度チャート)  <br /> - [散布マーカー チャート](../types/scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート) <br /> - [散布バブル チャート](../types/bubble-chart.mdx) <br /> - [極座標型マーカーチャート](../types/polar-chart.mdx#{PlatformLower}-極座標型マーカー-チャート) <br /> |
+| ファイナンシャル チャート | - [折れ線モードの株価チャート](../types/stock-chart.mdx) <br /> - [縦棒モードの株価チャート](../types/stock-chart.mdx) <br /> - [棒モードの株価チャート](../types/stock-chart.mdx) <br /> - [ローソク足モードの株価チャート](../types/stock-chart.mdx) <br /> - [オーバーレイ付き株価チャート](../types/stock-chart.mdx) <br /> - [ズーム ペイン付き株価チャート](../types/stock-chart.mdx#ズーム-ペイン) <br /> - [ボリューム ペイン付き株価チャート](../types/stock-chart.mdx#ボリューム-ペイン) <br /> - [インジケーター ペイン付き株価チャート](../types/stock-chart.mdx#インジケーター-ペイン) <br /> |
+| 散布図   | - [散布高密度チャート](../types/scatter-chart.mdx#{PlatformLower}-散布高密度チャート) <br /> - [散布マーカー チャート](../types/scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート) <br /> - [散布折れ線チャート](../types/scatter-chart.mdx#{PlatformLower}-散布折れ線チャート) <br /> - [散布バブル チャート](../types/bubble-chart.mdx) <br /> - [散布スプライン チャート](../types/scatter-chart.mdx#{PlatformLower}-散布スプライン-チャート) <br /> - [散布エリア チャート](../types/scatter-chart.mdx#{PlatformLower}-散布エリア-チャート) <br /> - [散布等高線チャート](../types/scatter-chart.mdx#{PlatformLower}-散布等高線チャート) <br /> - [散布ポリライン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリライン-チャート) (\*) <br /> - [散布ポリゴン チャート](../types/shape-chart.mdx#{PlatformLower}-散布ポリゴン-チャート) (\*) <br /> |
+| ラジアル チャート    | - [ラジアル折れ線チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル折れ線チャート) <br /> - [ラジアル エリア チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル-エリア-チャート) <br /> - [ラジアル円チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル円チャート) <br /> - [ラジアル縦棒チャート](../types/radial-chart.mdx#{PlatformLower}-ラジアル縦棒チャート) <br /> |
+| 極座標チャート     | - [極座標型マーカー チャート](../types/polar-chart.mdx#{PlatformLower}-極座標型マーカー-チャート) <br /> - [極座標型折れ線チャート](../types/polar-chart.mdx#{PlatformLower}-極座標型折れ線チャート) <br /> - [極座標エリア チャート](../types/polar-chart.mdx#{PlatformLower}-極座標エリア-チャート) <br /> - [極座標スプライン チャート](../types/polar-chart.mdx#{PlatformLower}-極座標スプライン-チャート) <br /> - [極座標スプライン エリア チャート](../types/polar-chart.mdx#{PlatformLower}-極座標スプライン-エリア-チャート) <br /> |
+| 積層型チャート   | - [積層型折れ線チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型折れ線チャート) <br /> - [積層型エリア チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型エリア-チャート) <br /> - [積層型縦棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型縦棒チャート) <br /> - [積層型棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型棒チャート) <br /> - [積層型スプライン チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型スプライン-チャート) <br /> - [積層型 100% 折れ線チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-折れ線チャート) <br /> - [積層型 100% エリア チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-エリア-チャート) <br /> - [積層型 100% 縦棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-縦棒チャート) <br /> - [積層型 100% 棒チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-棒チャート) <br /> - [積層型 100% スプライン チャート](../types/stacked-chart.mdx#{PlatformLower}-積層型-100-スプライン-チャート) <br /> |
 
 
-\* チャートに多数のデータ ソースがバインドされている場合、[散布ポリゴン チャート](../types/shape-chart.md)と[散布ポリライン チャート](../types/shape-chart.md)のパフォーマンスは他のチャートよりも優れていることに注意してください。詳細については、[シリーズ コレクション](#シリーズ-コレクション)セクションを参照してください。それ以外の場合は、他のチャートのタイプの方が高速です。
+\* チャートに多数のデータ ソースがバインドされている場合、[散布ポリゴン チャート](../types/shape-chart.mdx)と[散布ポリライン チャート](../types/shape-chart.mdx)のパフォーマンスは他のチャートよりも優れていることに注意してください。詳細については、[シリーズ コレクション](#シリーズ-コレクション)セクションを参照してください。それ以外の場合は、他のチャートのタイプの方が高速です。
 
 ### チャート アニメーション
 
-[チャート アニメーション](chart-animations.md)を有効にすると、トランジションイン アニメーションを再生している間、{Platform} チャートの最終描画シリーズがわずかに遅れます
+[チャート アニメーション](./chart-animations.mdx)を有効にすると、トランジションイン アニメーションを再生している間、{Platform} チャートの最終描画シリーズがわずかに遅れます
 
 ### チャート注釈
 
-コールアウト注釈、十字線注釈、最終値注釈などの[チャート注釈](chart-annotations.md)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
+コールアウト注釈、十字線注釈、最終値注釈などの[チャート注釈](./chart-annotations.mdx)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
 
 ### チャートのハイライト表示
 
-[チャートのハイライト表示](chart-highlighting.md)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
+[チャートのハイライト表示](./chart-highlighting.mdx)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
 
 ### チャート凡例
 
@@ -202,7 +202,7 @@ this.Chart.excludedProperties = [ "CHN",  "FRN", "GER" ];
 
 ### チャート マーカー
 
-{Platform} チャートでは、[チャート マーカー](chart-markers.md)はチャートのレイアウトの複雑さを増し、特定の情報を取得するためにデータ バインディングを実行するため、チャートのパフォーマンスに関しては特に手間がかかります。また、データ ポイントが多い場合、またはバインドされているデータ ソースが多い場合、マーカーはパフォーマンスを低下させます。したがって、マーカーが不要な場合は、チャートから削除する必要があります。
+{Platform} チャートでは、[チャート マーカー](./chart-markers.mdx)はチャートのレイアウトの複雑さを増し、特定の情報を取得するためにデータ バインディングを実行するため、チャートのパフォーマンスに関しては特に手間がかかります。また、データ ポイントが多い場合、またはバインドされているデータ ソースが多い場合、マーカーはパフォーマンスを低下させます。したがって、マーカーが不要な場合は、チャートから削除する必要があります。
 
 以下のコード例は、{Platform} チャートからマーカーを削除する方法を示します。
 
@@ -265,11 +265,11 @@ this.LineSeries.Resolution = 10;
 
 ### チャート オーバーレイ
 
-[チャート オーバーレイ](chart-overlays.md)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
+[チャート オーバーレイ](./chart-overlays.mdx)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
 
 ### チャート トレンドライン
 
-[チャート トレンドライン](chart-trendlines.md)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
+[チャート トレンドライン](./chart-trendlines.mdx)を有効にすると、{Platform} チャートのパフォーマンスがわずかに低下します。
 
 ### 軸のタイプ
 
@@ -667,7 +667,7 @@ this.LineSeries.Resolution = 10;
 
 ### 軸コレクション
 
-<ApiLink type="DataChart" /> コントロールの <ApiLink type="DataChart" member="Axes" label="Axes" /> コレクションに追加する軸が多すぎると、チャートのパフォーマンスが低下するため、シリーズ間で[軸の共有](chart-axis-layouts.md#軸共有の例)をお勧めします。
+<ApiLink type="DataChart" /> コントロールの <ApiLink type="DataChart" member="Axes" label="Axes" /> コレクションに追加する軸が多すぎると、チャートのパフォーマンスが低下するため、シリーズ間で[軸の共有](./chart-axis-layouts.mdx#軸共有の例)をお勧めします。
 
 ### シリーズ コレクション
 
@@ -689,27 +689,27 @@ this.LineSeries.Resolution = 10;
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](../types/area-chart.md)
-- [棒チャート](../types/bar-chart.md)
-- [バブル チャート](../types/bubble-chart.md)
-- [縦棒チャート](../types/column-chart.md)
-- [ドーナツ チャート](../types/donut-chart.md)
-- [円チャート](../types/pie-chart.md)
-- [ポイント チャート](../types/point-chart.md)
-- [極座標チャート](../types/polar-chart.md)
-- [ラジアル チャート](../types/radial-chart.md)
-- [シェープ チャート](../types/shape-chart.md)
-- [スプライン チャート](../types/spline-chart.md)
-- [散布図](../types/scatter-chart.md)
-- [積層型チャート](../types/stacked-chart.md)
-- [ステップ チャート](../types/step-chart.md)
-- [株価チャート](../types/stock-chart.md)
-- [チャート アニメーション](chart-animations.md)
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
-- [チャート マーカー](chart-markers.md)
-- [チャート オーバーレイ](chart-overlays.md)
-- [チャート トレンドライン](chart-trendlines.md)
+- [エリア チャート](../types/area-chart.mdx)
+- [棒チャート](../types/bar-chart.mdx)
+- [バブル チャート](../types/bubble-chart.mdx)
+- [縦棒チャート](../types/column-chart.mdx)
+- [ドーナツ チャート](../types/donut-chart.mdx)
+- [円チャート](../types/pie-chart.mdx)
+- [ポイント チャート](../types/point-chart.mdx)
+- [極座標チャート](../types/polar-chart.mdx)
+- [ラジアル チャート](../types/radial-chart.mdx)
+- [シェープ チャート](../types/shape-chart.mdx)
+- [スプライン チャート](../types/spline-chart.mdx)
+- [散布図](../types/scatter-chart.mdx)
+- [積層型チャート](../types/stacked-chart.mdx)
+- [ステップ チャート](../types/step-chart.mdx)
+- [株価チャート](../types/stock-chart.mdx)
+- [チャート アニメーション](./chart-animations.mdx)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
+- [チャート マーカー](./chart-markers.mdx)
+- [チャート オーバーレイ](./chart-overlays.mdx)
+- [チャート トレンドライン](./chart-trendlines.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx
index 945700b855..3bb7c0561a 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-tooltips.mdx
@@ -20,7 +20,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} チャート ツールチップのタイプ
 
-次の例は、開始時に <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> プロパティを "Default" に設定することでツールチップが有効にした[縦棒チャート](../types/column-chart.md)を示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。
+次の例は、開始時に <ApiLink type="CategoryChart" member="toolTipType" label="ToolTipType" /> プロパティを "Default" に設定することでツールチップが有効にした[縦棒チャート](../types/column-chart.mdx)を示しています。このプロパティはサンプルで構成可能であり、次のいずれかのオプションに設定できます。
 
 <Sample src="/charts/category-chart/column-chart-with-tooltips" height={500} alt="{Platform} ツールチップ タイプの例" />
 
@@ -62,8 +62,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャート注釈](chart-annotations.md)
-- [チャート マーカー](chart-markers.md)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャート マーカー](./chart-markers.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx
index e125206a49..6c888c78b4 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-trendlines.mdx
@@ -71,8 +71,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャート注釈](chart-annotations.md)
-- [チャートのハイライト表示](chart-highlighting.md)
+- [チャート注釈](./chart-annotations.mdx)
+- [チャートのハイライト表示](./chart-highlighting.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx
index 0ce79535a3..8b18f866cc 100644
--- a/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx
+++ b/docs/xplat/src/content/jp/components/charts/features/chart-user-annotations.mdx
@@ -96,5 +96,5 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 関連するチャート機能の詳細については、次のトピックを参照してください。
 
-- [チャートの注釈](chart-annotations.md)
-- [チャートのデータ注釈](chart-data-annotations.md)
+- [チャートの注釈](./chart-annotations.mdx)
+- [チャートのデータ注釈](./chart-data-annotations.mdx)
diff --git a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
index cd19e7169d..d223c5bed1 100644
--- a/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/area-chart.mdx
@@ -69,7 +69,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## 複数シリーズの {Platform} エリア チャート
 
-複数の[折れ線チャート](line-chart.md)および[スプライン チャート](spline-chart.md)を表示する方法と同様に、複数のエリア チャートを同じコントロールに結合することもできます。これは、複数のデータ ソースを <ApiLink type="CategoryChart" /> コントロールの <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドすることによって実現されます。
+複数の[折れ線チャート](./line-chart.mdx)および[スプライン チャート](./spline-chart.mdx)を表示する方法と同様に、複数のエリア チャートを同じコントロールに結合することもできます。これは、複数のデータ ソースを <ApiLink type="CategoryChart" /> コントロールの <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> プロパティにバインドすることによって実現されます。
 
 <Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="複数シリーズの {Platform} エリア チャート" />
 
@@ -150,7 +150,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ラジアル エリア チャート
 
-{ProductName} ラジアル エリア チャートは[ラジアル チャート](radial-chart.md)のグループに属し、データ ポイントを接続する直線のコレクションによってバインドされた塗りつぶされたポリゴンの形状を持っています。このグラフ チャートは、エリア チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
+{ProductName} ラジアル エリア チャートは[ラジアル チャート](./radial-chart.mdx)のグループに属し、データ ポイントを接続する直線のコレクションによってバインドされた塗りつぶされたポリゴンの形状を持っています。このグラフ チャートは、エリア チャートと同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
 
 
 <Sample src="/charts/data-chart/radial-area-chart" height={600} alt="{Platform} ラジアル エリア チャート" />
@@ -160,7 +160,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標型エリア チャート
 
-{ProductName} 極座標エリア チャートは[極座標チャート](polar-chart.md)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、直線で接続されてから、接続されたポイントによって表された領域を塗りつぶします。極座標エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップし、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします。
+{ProductName} 極座標エリア チャートは[極座標チャート](./polar-chart.mdx)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、直線で接続されてから、接続されたポイントによって表された領域を塗りつぶします。極座標エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップし、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします。
 
 
 <Sample src="/charts/data-chart/polar-area-chart" height={600} alt="{Platform} 極座標型エリア チャート" />
@@ -170,7 +170,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標型スプライン エリア チャート
 
-{Platform} 極座標スプライン エリア チャートは[極座標チャート](polar-chart.md)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、曲線スプラインで接続されてから接続されたポイントで表された領域を塗りつぶします。極座標スプライン エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップして、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineAreaSeries" /> にバインドします。
+{Platform} 極座標スプライン エリア チャートは[極座標チャート](./polar-chart.mdx)のグループに属し、塗りつぶされたポリゴンの形状を持ちます。頂点または角はデータ ポイントの極座標 (角度/半径) に配置され、曲線スプラインで接続されてから接続されたポイントで表された領域を塗りつぶします。極座標スプライン エリア チャートは、散布マーカー チャートと同じデータ プロットの概念を使用しますが、水平線に沿って塗りつぶされたポイントと領域を引き伸ばすのではなく、代わりに円の周りにポイントをラップして、描画された領域を塗りつぶします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineAreaSeries" /> にバインドします。
 
 <Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="{Platform} 極座標型スプライン エリア チャート" />
 
@@ -181,12 +181,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [棒チャート](./bar-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
index 1ef0534ce4..ce1803a394 100644
--- a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} 棒チャート
 
-{ProductName} 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは[縦棒チャート](column-chart.md)と非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、[縦棒チャート](column-chart.md)は垂直方向 (上下) です。
+{ProductName} 棒チャート、棒グラフ、または水平棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、同じ高さで長さが異なる水平棒でエンコードされたデータとすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらは、時間の経過とともに、項目の価値の変化を示すのに理想的です。データは、チャートの左から右にデータ ポイントの値に向かって伸びる長方形のコレクションを使用して表されます。棒チャートは[縦棒チャート](./column-chart.mdx)と非常によく似ていますが、棒チャートは時計回りに 90 度回転して描画されるため、向きが水平方向 (左から右) であり、[縦棒チャート](./column-chart.mdx)は垂直方向 (上下) です。
 
 ## {Platform} 棒チャートの例
 
@@ -65,7 +65,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 ### 以下の場合に棒チャートを使用しないでください
 
 - データが多すぎるため、Y 軸がスペースに収まらないか、判読できません。
-- 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](line-chart.md)を検討してください。
+- 詳細な時系列分析が必要なときは、時系列を含む[折れ線チャート](./line-chart.mdx)を検討してください。
 
 ### 棒チャートのデータ構造
 
@@ -94,7 +94,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 棒チャートのスタイル設定
 
-棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に[注釈値](../features/chart-annotations.md)を使用できます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="BarSeries" /> にバインドし、<ApiLink type="CalloutLayer" /> を追加します。
+棒チャートのスタイルを設定でき、パーセント比較を示すために各棒に[注釈値](../features/chart-annotations.mdx)を使用できます。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="BarSeries" /> にバインドし、<ApiLink type="CalloutLayer" /> を追加します。
 
 <Sample src="/charts/data-chart/bar-chart-styling" height={600} alt="{Platform} 棒チャートのスタイル設定" />
 
@@ -128,11 +128,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 範囲棒チャート
 
-{Platform} 範囲棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ棒チャート](bar-chart.md#{PlatformLower}-棒チャートの例)のように左から伸びるのではなく、チャートのプロット領域の中央に表示できる水平の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低値と高値の変化量を強調したり、複数の項目を比較したりするために使用されます。
+{Platform} 範囲棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ棒チャート](bar-chart.mdx#{PlatformLower}-棒チャートの例)のように左から伸びるのではなく、チャートのプロット領域の中央に表示できる水平の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低値と高値の変化量を強調したり、複数の項目を比較したりするために使用されます。
 
 範囲値は X 軸に表示され、カテゴリは Y 軸に表示されます。各棒は低値と高値の両方を視覚化するため、このチャートは日々の気温の範囲、最低価格と最高価格、または単一の値だけでは不十分な範囲を持つ測定値を示すようなシナリオに役立ちます。
 
-範囲棒チャートは、範囲が垂直柱ではなく水平棒の集まりとして表される点を除いて、[範囲縦棒チャート](column-chart.md#{PlatformLower}-範囲縦棒チャート)とすべての面で同じです。
+範囲棒チャートは、範囲が垂直柱ではなく水平棒の集まりとして表される点を除いて、[範囲縦棒チャート](column-chart.mdx#{PlatformLower}-範囲縦棒チャート)とすべての面で同じです。
 
 <ApiLink pkg="charts" type="DataChart" /> コントロールでこのチャート タイプを作成するには、データを <ApiLink pkg="charts" type="RangeBarSeries" /> にバインドします。このシリーズは `LowMemberPath` および `HighMemberPath` から低値と高値を読み取り、通常は `NumericXAxis` と `CategoryYAxis` を使用します。以下の例をご覧ください。
 
@@ -144,11 +144,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx
index 8b195fdf8e..153030ce3a 100644
--- a/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/bubble-chart.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} バブル チャート
 
-{ProductName} バブル チャートは[散布図](scatter-chart.md)の一種で、可変スケーリングのマーカーを表示して、いくつかの異なる一連のデータ内の項目間の関係を表したり、x 座標と y 座標を使用してデータ項目をプロットしたりします。データ ポイントのこれらの座標は、2 つの数値データ列によって決定されます。バブル チャートは、データの不均一な間隔またはクラスターに注意を向けます。このチャートは、科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。バブル チャートには、[散布図チャート](scatter-chart.md#{PlatformLower}-散布マーカー-チャート)の多くの特性がありますが、さまざまな半径スケール サイズを持つオプションがあります。
+{ProductName} バブル チャートは[散布図](./scatter-chart.mdx)の一種で、可変スケーリングのマーカーを表示して、いくつかの異なる一連のデータ内の項目間の関係を表したり、x 座標と y 座標を使用してデータ項目をプロットしたりします。データ ポイントのこれらの座標は、2 つの数値データ列によって決定されます。バブル チャートは、データの不均一な間隔またはクラスターに注意を向けます。このチャートは、科学データのプロットによく用いられ、予測結果からの収集データの偏差をハイライト表示できます。バブル チャートには、[散布図チャート](./scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート)の多くの特性がありますが、さまざまな半径スケール サイズを持つオプションがあります。
 
 ## {Platform} バブル チャートの例
 
@@ -55,8 +55,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [散布図](scatter-chart.md)
-- [シェープ チャート](shape-chart.md)
+- [散布図](./scatter-chart.mdx)
+- [シェープ チャート](./shape-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
index 45675485a3..589205d78e 100644
--- a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} 縦棒チャート
 
-{ProductName} 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらの縦棒は、チャートの下から上へデータ ポイント値に向かって伸びています。縦棒チャートは[棒チャート](bar-chart.md)と非常によく似ていますが、縦棒チャートは垂直方向 (上下) で描画され、[棒チャート](bar-chart.md)は水平方向 (左から右) または時計回りに 90 度回転します。
+{ProductName} 縦棒チャート、縦棒グラフ、または垂直棒チャートは、さまざまなカテゴリのデータの頻度、カウント、合計、または平均を、幅は同じで高さが異なる縦棒でエンコードされたデータによってすばやく比較するために使用される最も一般的なカテゴリ チャート タイプの 1 つです。これらの縦棒は、チャートの下から上へデータ ポイント値に向かって伸びています。縦棒チャートは[棒チャート](./bar-chart.mdx)と非常によく似ていますが、縦棒チャートは垂直方向 (上下) で描画され、[棒チャート](./bar-chart.mdx)は水平方向 (左から右) または時計回りに 90 度回転します。
 
 ## {Platform} 縦棒チャートの例
 
@@ -99,7 +99,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ウォーターフォール チャート
 
-ウォーターフォール チャートはカテゴリ チャートのグループに属し、連続するデータポイント間の差を示す垂直列のコレクションを使用して描画されます。値の正/負の変化を区別するため、列は色分けされます。ウォーターフォール チャートは、外観が[範囲縦棒チャート](column-chart.md#{PlatformLower}-範囲縦棒チャート)に似ていますが、各データ ポイントに必要な数値データ列は 2 つでなく 1 つのみです。
+ウォーターフォール チャートはカテゴリ チャートのグループに属し、連続するデータポイント間の差を示す垂直列のコレクションを使用して描画されます。値の正/負の変化を区別するため、列は色分けされます。ウォーターフォール チャートは、外観が[範囲縦棒チャート](./column-chart.mdx#{PlatformLower}-範囲縦棒チャート)に似ていますが、各データ ポイントに必要な数値データ列は 2 つでなく 1 つのみです。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="WaterfallSeries" /> にバインドします:
 
@@ -112,7 +112,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 積層型縦棒チャート
 
-積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[カテゴリ縦棒チャート](column-chart.md#{PlatformLower}-縦棒チャートの例)に似ています。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは[積層型棒チャート](stacked-chart.md#{PlatformLower}-積層型棒チャート)と同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
+積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)に似ています。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは[積層型棒チャート](./stacked-chart.mdx#{PlatformLower}-積層型棒チャート)と同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedBarSeries" /> にバインドします:
 
@@ -125,7 +125,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 積層型 100% 縦棒チャート
 
-積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で[積層型縦棒チャート](stacked-chart.md#{PlatformLower}-積層型縦棒チャート)と同じです。データを直接表現するのでなく、積層型 100 縦棒は、データ ポイント内のすべての値の合計の割合でデータを表します。
+積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で[積層型縦棒チャート](./stacked-chart.mdx#{PlatformLower}-積層型縦棒チャート)と同じです。データを直接表現するのでなく、積層型 100 縦棒は、データ ポイント内のすべての値の合計の割合でデータを表します。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="Stacked100BarSeries" /> にバインドします:
 
@@ -138,9 +138,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 範囲縦棒チャート
 
-{ProductName} 範囲縦棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ縦棒チャート](column-chart.md#{PlatformLower}-縦棒チャートの例)のように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低い値と高い値の間の変化量を強調したり、複数の項目を比較したりします。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。
+{ProductName} 範囲縦棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)のように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数の項目を比較します。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。
 
-範囲縦棒チャートは、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は[範囲エリア チャート](area-chart.md#{PlatformLower}-範囲エリア-チャート)と同じです。
+範囲縦棒チャートは、範囲が塗りつぶされた領域ではなく垂直柱の集まりで表されること以外は[範囲エリア チャート](./area-chart.mdx#{PlatformLower}-範囲エリア-チャート)と同じです。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RangeColumnSeries" /> にバインドします:
 
@@ -153,7 +153,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ラジアル縦棒チャート
 
-ラジアル縦棒チャートは、[ラジアル チャート](radial-chart.md)のグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これは[カテゴリ縦棒チャート](column-chart.md#{PlatformLower}-縦棒チャートの例)と同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。
+ラジアル縦棒チャートは、[ラジアル チャート](./radial-chart.mdx)のグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これは[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)と同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialColumnSeries" /> にバインドします:
 
@@ -168,10 +168,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [棒チャート](bar-chart.md)
-- [複合チャート](Composite-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [棒チャート](./bar-chart.mdx)
+- [複合チャート](./composite-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx
index cf7035afed..9b2e43efc3 100644
--- a/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/composite-chart.mdx
@@ -25,10 +25,10 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [棒チャート](./bar-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx
index c720fe5a63..7ed6f3479f 100644
--- a/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/data-pie-chart.mdx
@@ -186,9 +186,9 @@ ItemLegend バッジを変更することもできます。デフォルトでは
 
 ## その他のリソース
 
-- [ドーナツ チャート](donut-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
+- [ドーナツ チャート](./donut-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
index 899a951d80..c78a17e292 100644
--- a/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/donut-chart.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} ドーナツ チャート
 
-The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリック リングで表示でき、階層データの可視化を組み込みでサポートします。リングは、異なるデータ項目にバインドすることも、共通のデータ ソースを共有することもできます。
+The {ProductName} ドーナツ チャートは[円チャート](./pie-chart.mdx)と同様、変数の発生を比例的に表示します。ドーナツ型チャートは、複数の変数をコンセントリック リングで表示でき、階層データの可視化を組み込みでサポートします。リングは、異なるデータ項目にバインドすることも、共通のデータ ソースを共有することもできます。
 
 ## {Platform} ドーナツ チャートの例
 
@@ -29,13 +29,13 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と
 
 ドーナツ チャートは小さなデータ セットに適しており、一目で読みやすいです。ドーナツ チャートは、部分から全体への視覚化の 1 つのタイプにすぎません。その他は次のとおりです。
 
-- [円](pie-chart.md)
-- [積層型エリア](area-chart.md)
-- [積層型 100% エリア (積層型パーセンテージ エリア)](area-chart.md)
-- [積層型棒](bar-chart.md)
-- [積層型 100% 棒 (積層型パーセンテージ棒)](bar-chart.md)
-- [ツリーマップ](treemap-chart.md)
-- [ウォーターフォール](column-chart.md)
+- [円](./pie-chart.mdx)
+- [積層型エリア](./area-chart.mdx)
+- [積層型 100% エリア (積層型パーセンテージ エリア)](./area-chart.mdx)
+- [積層型棒](./bar-chart.mdx)
+- [積層型 100% 棒 (積層型パーセンテージ棒)](./bar-chart.mdx)
+- [ツリーマップ](./treemap-chart.mdx)
+- [ウォーターフォール](./column-chart.mdx)
 
 {Platform} ドーナツ チャートには、次のようなデータを分析するためのビューア ツールを提供するインタラクティブ機能が含まれています。
 
@@ -55,10 +55,10 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と
 
 ### 以下の場合にドーナツ チャートを使用しないでください
 
-- 時間の経過に伴う変化の比較の場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
-- 正確なデータ比較が必要である場合 - [棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを使用します。
-- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、[棒](bar-chart.md)、[折れ線](line-chart.md)、または[エリア](area-chart.md)チャートを検討してください。
-- [棒](bar-chart.md)チャートで、ビューアが値の違いを認識しやすくなります。
+- 時間の経過に伴う変化の比較の場合 - [棒](./bar-chart.mdx)、[折れ線](./line-chart.mdx)、または[エリア](./area-chart.mdx)チャートを使用します。
+- 正確なデータ比較が必要である場合 - [棒](./bar-chart.mdx)、[折れ線](./line-chart.mdx)、または[エリア](./area-chart.mdx)チャートを使用します。
+- 6 つまたは 8 つを超えるセグメント (大量のデータ) がある場合 — データ ストーリーに適している場合は、[棒](./bar-chart.mdx)、[折れ線](./line-chart.mdx)、または[エリア](./area-chart.mdx)チャートを検討してください。
+- [棒](./bar-chart.mdx)チャートで、ビューアが値の違いを認識しやすくなります。
 - 負のデータがある場合、これはドーナツ チャートで表すことができません。
 
 ## ドーナツ チャート - スライスの選択
@@ -79,9 +79,9 @@ The {ProductName} ドーナツ チャートは[円チャート](pie-chart.md)と
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [円チャート](pie-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
+- [円チャート](./pie-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx
index f9c14e5bac..b26e5f8c99 100644
--- a/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/gantt-chart.mdx
@@ -25,11 +25,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [複合チャート](composite-chart.md)
+- [棒チャート](./bar-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [複合チャート](./composite-chart.mdx)
 
-- [シェープ チャート](shape-chart.md)
+- [シェープ チャート](./shape-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
index 6f5f5ceaa6..117824d42f 100644
--- a/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/line-chart.mdx
@@ -30,8 +30,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ### {Platform} 折れ線チャートはプロジェクトに適していますか?
 
-- [エリア チャート](area-chart.md)とは異なり、折れ線チャートは X 軸 (下軸) と線の間の領域を塗りつぶしません。
-- {Platform} 折れ線チャートは、データ ポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、{Platform} [スプライン チャート](spline-chart.md)と同じです。
+- [エリア チャート](./area-chart.mdx)とは異なり、折れ線チャートは X 軸 (下軸) と線の間の領域を塗りつぶしません。
+- {Platform} 折れ線チャートは、データ ポイントをつなぐ線にスプライン補間とデータの表示を改善するスムージングがないこと以外は、{Platform} [スプライン チャート](./spline-chart.mdx)と同じです。
 
 折れ線チャートには、データに基づいて複数のバリアントがあります。以下が含まれます。
 
@@ -161,7 +161,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標型折れ線チャート
 
-極座標折れ線チャートは極座標チャートのグループに属し、極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。極座標チャートは、[散布折れ線チャート](scatter-chart.md)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントがを水平方向に引き伸ばされるのではなく、円の周りにラップされる点が異なります。
+極座標折れ線チャートは極座標チャートのグループに属し、極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。極座標チャートは、[散布折れ線チャート](./scatter-chart.mdx)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントがを水平方向に引き伸ばされるのではなく、円の周りにラップされる点が異なります。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarLineSeries" /> にバインドします:
 
@@ -174,12 +174,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx
index 1b799ec63e..07cce5e0d5 100644
--- a/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/network-chart.mdx
@@ -39,9 +39,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [バブル チャート](bubble-chart.md)
-- [散布図](scatter-chart.md)
-- [シェープ チャート](shape-chart.md)
+- [バブル チャート](./bubble-chart.mdx)
+- [散布図](./scatter-chart.mdx)
+- [シェープ チャート](./shape-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx
index 297ed21ee6..ccb9a1e86b 100644
--- a/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/pie-chart.mdx
@@ -161,9 +161,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [ドーナツ チャート](donut-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
+- [ドーナツ チャート](./donut-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx
index d3135077f7..a1e8424f47 100644
--- a/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/point-chart.mdx
@@ -57,17 +57,17 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 次のトピックに従って、<ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して、より高度なタイプの {Platform} ポイント チャートを作成できます。
 
-- [散布バブル チャート](bubble-chart.md)
-- [散布マーカー チャート](scatter-chart.md#{PlatformLower}-散布マーカー-チャート)
-- [散布高密度チャート](scatter-chart.md#{PlatformLower}-散布高密度チャート)
-- [極座標型マーカー チャート](polar-chart.md#{PlatformLower}-極座標型マーカー-チャート)
+- [散布バブル チャート](./bubble-chart.mdx)
+- [散布マーカー チャート](./scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート)
+- [散布高密度チャート](./scatter-chart.mdx#{PlatformLower}-散布高密度チャート)
+- [極座標型マーカー チャート](./polar-chart.mdx#{PlatformLower}-極座標型マーカー-チャート)
 
 ## その他のリソース
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャートのパフォーマンス](../features/chart-performance.md)
-- [チャート マーカー](../features/chart-markers.md)
+- [チャートのパフォーマンス](../features/chart-performance.mdx)
+- [チャート マーカー](../features/chart-markers.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx
index 93ff8989d2..b2a883c243 100644
--- a/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/polar-chart.mdx
@@ -15,11 +15,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} 極座標チャート
 
-{ProductName} 極座標チャートは、デカルト (x、y) 座標系の代わりに極座標 (角度、半径) 座標系を使用してチャートにデータをプロットします。言い換えれば、極座標チャートは[散布図シリーズ](scatter-chart.md)の概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。これらは、科学データのプロットによく用いられ (たとえば風向きや風速、地場の方向と強さ、ソーラー システムの機材の場所など)、予測結果からの収集データの偏差をハイライト表示できます。
+{ProductName} 極座標チャートは、デカルト (x、y) 座標系の代わりに極座標 (角度、半径) 座標系を使用してチャートにデータをプロットします。言い換えれば、極座標チャートは[散布図シリーズ](./scatter-chart.mdx)の概念を使用していますが、横の線に沿って伸びるのではなく、円の周りでデータ ポイントをラップします。これらは、科学データのプロットによく用いられ (たとえば風向きや風速、地場の方向と強さ、ソーラー システムの機材の場所など)、予測結果からの収集データの偏差をハイライト表示できます。
 
 ## {Platform} 極座標エリア チャート
 
-極座標型エリア チャートは、データ ポイントを接続するポリゴンのコレクションを使用して描画され、[カテゴリ エリア チャート](area-chart.md#{PlatformLower}-エリア-チャートの例)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って配置されるのではなく、円の周りに配置される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
+極座標型エリア チャートは、データ ポイントを接続するポリゴンのコレクションを使用して描画され、[カテゴリ エリア チャート](./area-chart.mdx#{PlatformLower}-エリア-チャートの例)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って配置されるのではなく、円の周りに配置される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/polar-area-chart" height={600} alt="{Platform} 極座標型エリア チャート" />
 
@@ -28,7 +28,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標スプライン エリア チャート
 
-極座標スプライン エリア チャートもポリゴンのコレクションとして描画されますが、[極座標エリア チャート](polar-chart.md#{PlatformLower}-極座標エリア-チャート)のように直線ではなく、データ ポイントを接続する曲線スプラインを使用します。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
+極座標スプライン エリア チャートもポリゴンのコレクションとして描画されますが、[極座標エリア チャート](./polar-chart.mdx#{PlatformLower}-極座標エリア-チャート)のように直線ではなく、データ ポイントを接続する曲線スプラインを使用します。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarAreaSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/polar-spline-area-chart" height={600} alt="{Platform} 極座標型エリア チャート" />
 
@@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標型マーカー チャート
 
-極座標型マーカー チャートは、極座標 (角度、半径) でデータ ポイントを表すマーカーのコレクションを使用して描画します。このチャートは、[散布マーカー チャート](scatter-chart.md#{PlatformLower}-散布マーカー-チャート)と同じデータ プロットの概念を使用していますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りに折り返される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarScatterSeries" /> にバインドします:
+極座標型マーカー チャートは、極座標 (角度、半径) でデータ ポイントを表すマーカーのコレクションを使用して描画します。このチャートは、[散布マーカー チャート](./scatter-chart.mdx#{PlatformLower}-散布マーカー-チャート)と同じデータ プロットの概念を使用していますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りに折り返される点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarScatterSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/polar-scatter-chart" height={600} alt="{Platform} 極座標型マーカー チャート" />
 
@@ -46,7 +46,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標型折れ線チャート
 
-極座標折れ線チャートは極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。このチャートは、[散布折れ線チャート](scatter-chart.md#{PlatformLower}-散布折れ線チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarLineSeries" /> にバインドします:
+極座標折れ線チャートは極座標 (角度/半径) のデータ ポイントを結ぶ直線のコレクションを使用して描画されます。このチャートは、[散布折れ線チャート](./scatter-chart.mdx#{PlatformLower}-散布折れ線チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarLineSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/polar-line-chart" height={600} alt="{Platform} 極座標型折れ線チャート" />
 
@@ -55,7 +55,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 極座標スプライン チャート
 
-極座標スプライン チャートは極座標 (角度、半径) でデータ ポイントを接続する曲線スプラインのコレクションを使用して描画されます。このチャートは、[散布スプライン チャート](scatter-chart.md#{PlatformLower}-散布スプライン-チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineSeries" /> にバインドします:
+極座標スプライン チャートは極座標 (角度、半径) でデータ ポイントを接続する曲線スプラインのコレクションを使用して描画されます。このチャートは、[散布スプライン チャート](./scatter-chart.mdx#{PlatformLower}-散布スプライン-チャート)と同じデータ プロットの概念を使用しますが、視覚化によってデータ ポイントが水平線に沿って引き伸ばされるのではなく、円の周りにラップされる点が異なります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="PolarSplineSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/polar-spline-chart" height={600} alt="{Platform} 極座標スプライン チャート" />
 
@@ -75,13 +75,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [ドーナツ チャート](Donut-chart.md)
-- [折れ線チャート](line-chart.md)
-- [円チャート](Pie-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [散布図](scatter-chart.md)
-- [スプライン チャート](spline-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [ドーナツ チャート](./donut-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [円チャート](./pie-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
+- [散布図](./scatter-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx
index e2637273e5..5df71d4394 100644
--- a/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/pyramid-chart.mdx
@@ -25,9 +25,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [複合チャート](composite-chart.md)
+- [棒チャート](./bar-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [複合チャート](./composite-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx
index a35025cdec..f5c7e0943a 100644
--- a/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/radial-chart.mdx
@@ -19,7 +19,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ラジアル エリア チャート
 
-{ProductName} ラジアル エリア チャートは、データ ポイントを結ぶ直線のコレクションによってバインドされた塗りつぶされた多角形の形をしています。このチャートは、[エリア チャート](area-chart.md)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
+{ProductName} ラジアル エリア チャートは、データ ポイントを結ぶ直線のコレクションによってバインドされた塗りつぶされた多角形の形をしています。このチャートは、[エリア チャート](./area-chart.mdx)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialAreaSeries" /> にバインドします。
 
 <Sample src="/charts/data-chart/radial-area-chart" height={600} alt="{Platform} ラジアル エリア チャート" />
 
@@ -28,7 +28,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ラジアル縦棒チャート
 
-ラジアル縦棒チャートは、チャートの中心からデータ ポイントの位置に向けて広がる矩形のコレクションを使用して表示されます。これは[縦棒チャート](column-chart.md)と同じデータ プロットの概念を使用していますが、データ ポイントを水平方向に引き伸ばすのではなく、データ ポイントを円でラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialColumnSeries" /> にバインドします:
+ラジアル縦棒チャートは、チャートの中心からデータ ポイントの位置に向けて広がる矩形のコレクションを使用して表示されます。これは[縦棒チャート](./column-chart.mdx)と同じデータ プロットの概念を使用していますが、データ ポイントを水平方向に引き伸ばすのではなく、データ ポイントを円でラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialColumnSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/radial-column-chart" height={600} alt="{Platform} ラジアル縦棒チャート" />
 
@@ -37,7 +37,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} ラジアル折れ線チャート
 
-{ProductName} ラジアル折れ線チャートは、データ ポイントを結ぶ直線のコレクションとして描画されます。このチャートは、[折れ線チャート](line-chart.md)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialLineSeries" /> にバインドします:
+{ProductName} ラジアル折れ線チャートは、データ ポイントを結ぶ直線のコレクションとして描画されます。このチャートは、[折れ線チャート](./line-chart.mdx)と同じデータ プロットの概念を使用しますが、データ ポイントを水平方向に引き伸ばすのではなく、円形の軸の周りにラップします。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="RadialLineSeries" /> にバインドします:
 
 <Sample src="/charts/data-chart/radial-line-chart" height={600} alt="{Platform} ラジアル折れ線チャート" />
 
@@ -71,11 +71,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [ドーナツ チャート](donut-chart.md)
-- [折れ線チャート](line-chart.md)
-- [円チャート](pie-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [ドーナツ チャート](./donut-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [円チャート](./pie-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx
index 789a0456f8..0378d3ca95 100644
--- a/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/scatter-chart.mdx
@@ -75,11 +75,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [バブル チャート](bubble-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
-- [シェープ チャート](shape-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [バブル チャート](./bubble-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
+- [シェープ チャート](./shape-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx
index 76f9c13b78..adfda69aff 100644
--- a/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/shape-chart.mdx
@@ -44,9 +44,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](line-chart.md)
-- [散布チャート](scatter-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [散布チャート](./scatter-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
index 725e4b5be9..420c3eb446 100644
--- a/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/sparkline-chart.mdx
@@ -150,9 +150,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx
index f9da3208f5..a318da2ea0 100644
--- a/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/spline-chart.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} スプライン チャート
 
-{ProductName} スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。値は y 軸に表示され、カテゴリは x 軸に表示されます。スプライン チャートは時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。スプライン チャートは、データ ポイントを接続する線がデータの表示を改善するためのスプライン補間とスムージング機能を持つこと以外のすべての面で[折れ線チャート](line-chart.md)と同じです。
+{ProductName} スプライン チャートは、スプラインのスムーズなカーブに接続された点のコレクションとして描画されるカテゴリ チャートのグループに属しています。値は y 軸に表示され、カテゴリは x 軸に表示されます。スプライン チャートは時間毎のデータの変化や複数の項目を比較する場合に用いられ、プロットされた値の合計を表示することで全体に対するデータ間の関係も表します。スプライン チャートは、データ ポイントを接続する線がデータの表示を改善するためのスプライン補間とスムージング機能を持つこと以外のすべての面で[折れ線チャート](./line-chart.mdx)と同じです。
 
 ## {Platform} スプライン チャートの例
 
@@ -88,11 +88,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](spline-chart.md)
-- [極座標チャート](polar-chart.md)
-- [ラジアル チャート](radial-chart.md)
-- [積層型チャート](stacked-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [折れ線チャート](./spline-chart.mdx)
+- [極座標チャート](./polar-chart.mdx)
+- [ラジアル チャート](./radial-chart.mdx)
+- [積層型チャート](./stacked-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/stacked-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/stacked-chart.mdx
index e94b597f21..831af76c24 100644
--- a/docs/xplat/src/content/jp/components/charts/types/stacked-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/stacked-chart.mdx
@@ -30,7 +30,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 積層型エリア チャート
 
-積層型エリア チャートは、線分で接続されたポイントのコレクションを使用して描画され、線の下のエリアが塗りつぶされ、互いの上に積層されます。積層型エリア チャートは、[エリア チャート](area-chart.md)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積層されていることです。
+積層型エリア チャートは、線分で接続されたポイントのコレクションを使用して描画され、線の下のエリアが塗りつぶされ、互いの上に積層されます。積層型エリア チャートは、[エリア チャート](./area-chart.mdx)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積層されていることです。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedAreaSeries" /> にバインドします。
 
@@ -53,7 +53,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 積層型棒チャート、または積層型棒グラフは、チャートの横棒にさまざまなサイズのフラグメントを表示することにより、さまざまなカテゴリのデータの構成を比較するために使用されるカテゴリ チャートの一種です。各棒または積層フラグメントの長さは、その全体的な値に比例します。
 
-積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、[棒チャート](bar-chart.md)とは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
+積層型棒チャートは、データを表すデータ ポイントが水平方向に隣り合って積み重ねられ、データを視覚的にグループ化するという点で、[棒チャート](./bar-chart.mdx)とは異なります。各積層は正の値と負の値の両方を含みます。すべての正の値は X 軸の正の側にグループ化され、すべての負の値は X 軸の負の側にグループ化されます。
 
 積層型棒チャートのこの例では、数値の X 軸 (チャートの下部のラベル) とカテゴリの Y 軸 (チャートの左側のラベル) があります。<ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedBarSeries" /> にバインドします:
 
@@ -75,7 +75,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 積層型縦棒チャート
 
-積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[縦棒チャート](column-chart.md)と同じです。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは積層型棒チャートと同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
+積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[縦棒チャート](./column-chart.mdx)と同じです。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは積層型棒チャートと同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedColumnSeries" /> にバインドします:
 
@@ -117,7 +117,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## {Platform} 積層型スプライン エリア チャート
 
-積層型スプライン エリア チャートは、曲線スプライン セグメントで接続されたポイントのコレクションを使用して描画され、曲線スプラインの下の領域が塗りつぶされ、互いに重ねて表示されます。積層型スプライン エリア チャートは、[エリア チャート](area-chart.md)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積み重なっていることです。
+積層型スプライン エリア チャートは、曲線スプライン セグメントで接続されたポイントのコレクションを使用して描画され、曲線スプラインの下の領域が塗りつぶされ、互いに重ねて表示されます。積層型スプライン エリア チャートは、[エリア チャート](./area-chart.mdx)とすべて同じ要件に従いますが、唯一の違いは、網掛けエリアが互いに積み重なっていることです。
 
 <ApiLink type="DataChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データを <ApiLink type="StackedSplineAreaSeries" /> にバインドします。
 
@@ -161,11 +161,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [棒チャート](bar-chart.md)
-- [縦棒チャート](column-chart.md)
-- [折れ線チャート](line-chart.md)
-- [スプライン チャート](spline-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [棒チャート](./bar-chart.mdx)
+- [縦棒チャート](./column-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [スプライン チャート](./spline-chart.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx
index dc1810229f..d3c83bffb8 100644
--- a/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/step-chart.mdx
@@ -50,9 +50,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [折れ線チャート](line-chart.md)
-- [チャート マーカー](../features/chart-markers.md)
+- [エリア チャート](./area-chart.mdx)
+- [折れ線チャート](./line-chart.mdx)
+- [チャート マーカー](../features/chart-markers.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx
index 59c2c532fd..4bd49a0ea6 100644
--- a/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/stock-chart.mdx
@@ -144,11 +144,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート機能の詳細については、以下のトピックを参照してください。
 
-- [チャート アニメーション](../features/chart-animations.md)
-- [チャート注釈](../features/chart-annotations.md)
-- [チャート ナビゲーション](../features/chart-navigation.md)
-- [チャート トレンドライン](../features/chart-trendlines.md)
-- [チャートのパフォーマンス](../features/chart-performance.md)
+- [チャート アニメーション](../features/chart-animations.mdx)
+- [チャート注釈](../features/chart-annotations.mdx)
+- [チャート ナビゲーション](../features/chart-navigation.mdx)
+- [チャート トレンドライン](../features/chart-trendlines.mdx)
+- [チャートのパフォーマンス](../features/chart-performance.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
index 454630028d..054b2a3707 100644
--- a/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/treemap-chart.mdx
@@ -127,8 +127,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 関連するチャート タイプの詳細については、以下のトピックを参照してください。
 
-- [エリア チャート](area-chart.md)
-- [シェイプ チャート](shape-chart.md)
+- [エリア チャート](./area-chart.mdx)
+- [シェイプ チャート](./shape-chart.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/dashboard-tile.mdx b/docs/xplat/src/content/jp/components/dashboard-tile.mdx
index 49fd5753c1..6d5572256b 100644
--- a/docs/xplat/src/content/jp/components/dashboard-tile.mdx
+++ b/docs/xplat/src/content/jp/components/dashboard-tile.mdx
@@ -157,12 +157,12 @@ IgrDashboardTileModule.register();
 
 コントロールはバインドしたデータを評価し、{ProductName} ツールセットから表示する視覚エフェクトを選択するため、Dashboard Tile の <ApiLink type="DataSource" /> プロパティを何にバインドするかによって、デフォルトで表示される視覚エフェクトが決まります。Dashboard Tile に表示されるデータ視覚化コントロールは次のとおりです。
 
-- [{IgPrefix}CategoryChart](charts/chart-overview.md)
-- [{IgPrefix}DataChart](charts/chart-overview.md)
-- [{IgPrefix}DataPieChart](charts/types/data-pie-chart.md)
-- [{IgPrefix}GeographicMap](geo-map.md)
-- [{IgPrefix}LinearGauge](linear-gauge.md)
-- [{IgPrefix}RadialGauge](radial-gauge.md)
+- [{IgPrefix}CategoryChart](./charts/chart-overview.mdx)
+- [{IgPrefix}DataChart](./charts/chart-overview.mdx)
+- [{IgPrefix}DataPieChart](./charts/types/data-pie-chart.mdx)
+- [{IgPrefix}GeographicMap](./geo-map.mdx)
+- [{IgPrefix}LinearGauge](./linear-gauge.mdx)
+- [{IgPrefix}RadialGauge](./radial-gauge.mdx)
 
 デフォルトで選択されるデータ視覚化は、主にスキーマとバインドした <ApiLink type="DataSource" /> の数によって決まります。たとえば、単一の数値をバインドすると <ApiLink type="RadialGauge" /> が取得されますが、互いに区別しやすい値とラベルのペアのコレクションをバインドすると <ApiLink type="DataPieChart" /> が取得されます。より多くの値パスを持つ <ApiLink type="DataSource" /> をバインドすると、バインドされたコレクションの数に応じて、複数の列シリーズまたは線シリーズを持つ <ApiLink type="DataChart" /> を受け取ります。また、<ApiLink type="GeographicMap" /> を取得するために、<ApiLink type="ShapeDataSource" /> または地理的ポイントを含むデータにバインドすることもできます。
 
diff --git a/docs/xplat/src/content/jp/components/excel-library.mdx b/docs/xplat/src/content/jp/components/excel-library.mdx
index e97f73d490..95adc7f966 100644
--- a/docs/xplat/src/content/jp/components/excel-library.mdx
+++ b/docs/xplat/src/content/jp/components/excel-library.mdx
@@ -188,7 +188,7 @@ Excel ライブラリは Excel Binary Workbook (.xlsb) フォーマットを現
 
 Excel ライブラリ モジュールをインポートした後、ワークブックを読み込みます。
 
-次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Workbook" /> の保存および読み込みを行っています。
+次のコード スニペットでは、外部の [ExcelUtility](excel-utility.mdx) クラスを使用して <ApiLink type="Workbook" /> の保存および読み込みを行っています。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/excel-utility.mdx b/docs/xplat/src/content/jp/components/excel-utility.mdx
index 567d4e6344..9c10fe6657 100644
--- a/docs/xplat/src/content/jp/components/excel-utility.mdx
+++ b/docs/xplat/src/content/jp/components/excel-utility.mdx
@@ -14,7 +14,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 # {Platform} Excel ユーティリティ
 
-[Excel ライブラリ](excel-library.md)には、Microsoft Excel ファイルの読み込みや保存が可能なユーティリティ関数があります。
+[Excel ライブラリ](./excel-library.mdx)には、Microsoft Excel ファイルの読み込みや保存が可能なユーティリティ関数があります。
 
 <PlatformBlock for="Angular">
 ```ts
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
index 860ac83bd4..bd4559a4c7 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv-blazor.mdx
@@ -58,13 +58,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ### 新しいコンポーネント
 
-- [IgbChat](./interactivity/chat.md) <Badge variant="preview" /> - メッセージの表示と入力操作を行うためのチャット UI コンポーネントです。このコンポーネントはプレビュー段階であり、現在も活発に開発が進められています。一部の機能はまだ実装されておらず、API は今後のリリースで変更される可能性があります。
-- [IgbSplitter](./layouts/splitter.md) - <ApiLink type="Splitter" /> コンポーネントは、ビューを *start* と *end* の 2 つのパネルに分割し、それらをドラッグ可能なバーで区切るサイズ変更可能な分割ペイン レイアウトを提供します。
-- [IgbHighlight](./inputs/highlight.md) - <ApiLink type="Highlight" /> コンポーネントは、既定のスロットに投影されたテキストを効率的に検索し、ハイライトする機能を提供します。
+- [IgbChat](./interactivity/chat.mdx) <Badge variant="preview" /> - メッセージの表示と入力操作を行うためのチャット UI コンポーネントです。このコンポーネントはプレビュー段階であり、現在も活発に開発が進められています。一部の機能はまだ実装されておらず、API は今後のリリースで変更される可能性があります。
+- IgbSplitter - <ApiLink type="Splitter" /> コンポーネントは、ビューを *start* と *end* の 2 つのパネルに分割し、それらをドラッグ可能なバーで区切るサイズ変更可能な分割ペイン レイアウトを提供します。
+- [IgbHighlight](./inputs/highlight.mdx) - <ApiLink type="Highlight" /> コンポーネントは、既定のスロットに投影されたテキストを効率的に検索し、ハイライトする機能を提供します。
 
 ### AI スキル
 
-- Ignite UI for Blazor は、AI アシスタントのコーディング結果を向上させる 4 つのスキルを提供するようになりました。詳細は [AI スキル ドキュメント](./ai/skills.md)をご確認ください。
+- Ignite UI for Blazor は、AI アシスタントのコーディング結果を向上させる 4 つのスキルを提供するようになりました。詳細は [AI スキル ドキュメント](./ai/skills.mdx)をご確認ください。
 
 ### バグ修正
 
@@ -488,18 +488,18 @@ Please note that the maximum size available for the icons is 24x24. You can prov
 
 #### {PackageCharts} (チャート)
 
-- <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)レイヤーを追加しました:
+- <Badge variant="preview" /> [チャート データ注釈](./charts/features/chart-data-annotations.mdx)レイヤーを追加しました:
   - データ注釈バンド レイヤー
   - データ注釈ライン レイヤー
   - データ注釈矩形レイヤー
   - データ注釈スライス レイヤー
   - データ注釈ストリップ レイヤー
 
-- [データ ツールチップ](charts/features/chart-data-tooltip.md)と[データ 凡例](charts/features/chart-data-legend.md)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティが公開されています。
+- [データ ツールチップ](./charts/features/chart-data-tooltip.mdx)と[データ 凡例](./charts/features/chart-data-legend.mdx)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティが公開されています。
 
 - <Badge variant="preview" /> チャートの <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> プロパティが更新され、新しい列挙体 `DragSelect` が含まれるようになりました。これにより、ドラッグされたプレビュー Rect は、その中に含まれるポイントを選択します。 (ベータ版)
 
-- <Badge variant="preview" /> [ValueOverlay と ValueLayer](charts/features/chart-overlays.md) は、上記にリストした <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)
+- <Badge variant="preview" /> [ValueOverlay と ValueLayer](./charts/features/chart-overlays.mdx) は、上記にリストした <Badge variant="preview" /> [チャート データ注釈](./charts/features/chart-data-annotations.mdx)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)
 
 #### 一般
 
@@ -571,20 +571,20 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
 
 ### 機能拡張
 
-- Added <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) layers:
+- Added <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) layers:
   - Data Annotation Band Layer
   - Data Annotation Line Layer
   - Data Annotation Rect Layer
   - Data Annotation Slice Layer
   - Data Annotation Strip Layer
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### List
 - <ApiLink pkg="core" type="ListItem" /> に新しいプロパティ <ApiLink type="Tabs" member="selected" label="Selected" /> を追加しました。
@@ -718,11 +718,11 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
 - Added new property on <ApiLink pkg="core" type="ListItem" /> called <ApiLink type="Tabs" member="selected" label="Selected" />
 
 #### {PackageCharts} (チャート)
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](./menus/toolbar.mdx) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
 
 ### {PackageCharts} (入力)
 
-- <Badge variant="preview" />[カラー エディター](inputs/color-editor.md)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](menus/toolbar.md) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
+- <Badge variant="preview" />[カラー エディター](./inputs/color-editor.mdx)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](./menus/toolbar.mdx) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
 
 ### **{PackageVerChanges-24-2-NOV}**
 
@@ -744,7 +744,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
 
 ### {PackageCharts} (チャート)
 
-- 新しい[データ円チャート](charts/types/data-pie-chart.md) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
+- 新しい[データ円チャート](./charts/types/data-pie-chart.mdx) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
 
 ## 一般
 
@@ -786,17 +786,17 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
 
 ## {PackageGrids}
 
-- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](grids/grid/size.md) トピックを参照してください。
+- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](./grids/_shared/size.mdx) トピックを参照してください。
 
 ### {PackageCharts} (チャート)
 
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
+- [データ凡例のグループ化](./charts/features/chart-data-legend.mdx#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
 
 ## {PackageGauges} (ゲージ)
 
 ### **{PackageVerChanges-23-2-APR2}**
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](menus/toolbar.md) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) component is a container control that analyzes and visualizes a bound ItemsSource collection or single point and returns an appropriate data visualization based on the schema and count of the data. This control utilizes a built-in [Toolbar](./menus/toolbar.mdx) component to allow you to make changes to the visualization at runtime, allowing you to see many different visualizations of your data with minimal code.
 
 ### {PackageCharts} (チャート)
 
@@ -813,7 +813,7 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
 ## **{PackageVerChanges-23-2-APR}**
 
 ### **{PackageVerChanges-23-2-MAR}**
-- New [Carousel](layouts/carousel.md) component.
+- New [Carousel](./layouts/carousel.mdx) component.
 - <ApiLink pkg="core" type="Input" />
   - Changed `change` event argument type from <ApiLink pkg="core" type="ComponentDataValueChangedEventArgs" /> to <ApiLink pkg="core" type="ComponentValueChangedEventArgs" />
 
@@ -833,18 +833,18 @@ Explore some of the publicly available [Azure maps here](https://azure.microsoft
   - `selectedItem`、`items`、および `groups` ゲッターが公開されました。
 - <ApiLink type="RadialGauge" />
   - 新しいタイトル/サブタイトルのプロパティ。<ApiLink type="RadialGauge" member="titleText" label="TitleText" />、<ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、<ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" /> など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> により、値を針の位置に対応させることができます。
-  - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。
+  - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](./radial-gauge.mdx#オプティカル-スケーリング)を参照してください。
   - 新しいハイライト針が追加されました。<ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> と <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
 - `RadialChart`
   - 新しいラベル モード
     - 新しいタイトル/サブタイトルのプロパティ。<ApiLink type="RadialGauge" member="titleText" label="TitleText" />、<ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、<ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" /> など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> により、値を針の位置に対応させることができます。
-    - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[このトピック](radial-gauge.md#オプティカル-スケーリング)を参照してください。
+    - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[このトピック](./radial-gauge.mdx#オプティカル-スケーリング)を参照してください。
     - 新しいハイライト針が追加されました。<ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> と <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
 - `RadialChart`
   - 新しいラベル モード
         <ApiLink type="CategoryAngleAxis" /> は、ラベルの位置をさらに構成できる <ApiLink type="CategoryAngleAxis" member="labelMode" label="LabelMode" /> プロパティを公開するようになりました。これにより、`Center` 列挙型を選択してデフォルト モードを切り替えることも、ラベルを円形のプロット領域に近づける新しいモード `ClosestPoint` を使用することもできます。
 
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="Toolbar" />
 
@@ -923,16 +923,16 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### {PackageCharts} (チャート)
 
-- [チャートのハイライト表示フィルター](charts/features/chart-highlight-filter.md) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
+- [チャートのハイライト表示フィルター](./charts/features/chart-highlight-filter.mdx) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via <ApiLink type="Treemap" member="fillBrushes" label="FillBrushes" />.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via <ApiLink type="Treemap" member="fillBrushes" label="FillBrushes" />.
 
 - <ApiLink type="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -946,7 +946,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 ### {PackageGrids} (Grid)
 
 - 新規機能:
-  - [状態保持](grids/grid/state-persistence.md)
+  - [状態保持](./grids/_shared/state-persistence.mdx)
 
 - <ApiLink type="BulletGraph" />
   - The Performance bar will now reflect a difference between the value and new <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> when the <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> is applied to the 'Overlay' setting. The highlight value will show a filtered/subset measured percentage as a filled in color while the remaining bar's appearance will appear faded to the assigned value, illustrating the performance in real-time.
@@ -963,7 +963,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### {PackageCharts} (チャート)
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - <ApiLink type="ValueLayer" /> という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、<ApiLink type="CategoryChart" /> と <ApiLink type="FinancialChart" /> に適用されます。
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - <ApiLink type="ValueLayer" /> という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、<ApiLink type="CategoryChart" /> と <ApiLink type="FinancialChart" /> に適用されます。
 
 ### **{PackageVerChanges-22-2.65}**
 
@@ -979,7 +979,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
   - exposed `selectedItem`, `items` and `groups` getters
 - <ApiLink type="RadialGauge" />
   - New title/subtitle properties. <ApiLink type="RadialGauge" member="titleText" label="TitleText" />, <ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> will appear near the bottom the gauge. In addition, the various title/subtitle font properties were added such as `TitleFontSize`, `TitleFontFamily`, `TitleFontStyle`, `TitleFontWeight` and <ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" />. Finally, the new <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> will allow the value to correspond with the needle's position.
-  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](radial-gauge.md#optical-scaling)
+  - New <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> and <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> properties for the <ApiLink type="RadialGauge" />. This new feature will manage the size at which labels, titles, and subtitles of the gauge have 100% optical scaling. You can read more about this new feature in this [topic](./radial-gauge.mdx#optical-scaling)
   - New highlight needle was added. <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> and <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> when both are provided a value and 'Overlay' setting, this will make the main needle to appear faded and a new needle will appear.
 - `RadialChart`
   - New Label Mode
@@ -987,12 +987,12 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### 新しいコンポーネント
 
-- [Stepper](layouts/stepper.md)
+- [Stepper](./layouts/stepper.mdx)
 
 ### 新しいコンポーネント
 
-- [Dialog](notifications/dialog.md)
-- [Select](inputs/select.md)
+- [Dialog](./notifications/dialog.mdx)
+- [Select](./inputs/select.mdx)
 
 ### {PackageGrids} (データ グリッド)
 
@@ -1015,19 +1015,19 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### {PackageDockManager} (DockManager)
 
-- [ドック マネージャー](layouts/dock-manager.md)のペイン コレクションに保護されたセッターが追加されました。ペインを作成するときに、ネストされた構造でペインを設定するのではなく、Add を呼び出す必要があります。
+- [ドック マネージャー](./layouts/dock-manager.mdx)のペイン コレクションに保護されたセッターが追加されました。ペインを作成するときに、ネストされた構造でペインを設定するのではなく、Add を呼び出す必要があります。
 
 ## **{PackageVerChanges-22-2.50}**
 
 ### 新しいコンポーネント
 
-- [コンボ](inputs/combo/overview.md)
-- [ピボット グリッド](grids/pivot-grid/overview.md)
+- [コンボ](./inputs/combo/overview.mdx)
+- [ピボット グリッド](./grids/pivot-grid/overview.mdx)
 - .NET 7.0
 
 ### **{PackageVerChanges-22-2}**
 
-- Added New Features - [State Persistence](grids/grid/state-persistence.md)
+- Added New Features - [State Persistence](./grids/_shared/state-persistence.mdx)
 
 ## 新しいコンポーネント
 
@@ -1042,13 +1042,13 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 - **GridSelectionMode** を <ApiLink type="DataGridSelectionMode" /> に変更しました。
 - **SummaryOperand** を <ApiLink type="DataSourceSummaryOperand" /> に変更しました。
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-22-1}**
 ### {PackageCharts} (チャート)
 
-- 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
-- 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
+- 高度に構成可能な [DataLegend](./charts/features/chart-data-legend.mdx) コンポーネントが追加されました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
+- 高度に構成可能な [DataToolTip](./charts/features/chart-data-tooltip.mdx) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
 - 積層シリーズのアニメーションとトランジションインのサポートが追加されました。<ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> プロパティを true に設定すると、アニメーションを有効にできます。そこから、<ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> プロパティを設定してアニメーションが完了するまでの時間を決定し、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> でアニメーションのタイプを決定できます。
 - 追加された `AssigningCategoryStyle` イベントは、<ApiLink type="DataChart" /> のすべてのシリーズで利用できるようになりました。このイベントは、背景色の <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> やハイライト表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。
 - CalloutLayer の新しい <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。
@@ -1064,21 +1064,21 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### {PackageGrids} (データ グリッド)
 
-新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。
+新機能 - [行ページング](./grids/_shared/paging.mdx)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。
 
 ### {PackageDockManager} (Dock Manager)
 
-- {Platform} ドック マネージャーは 現在 <Badge variant="preview" /> です。ドックマネージャーにより、さまざまなサイズ、位置、動作をするペインによって複雑なレイアウトを管理し、アプリ内のさまざまな場所にドッキングできます。[ドック マネージャー](layouts/dock-manager.md)を使用すると、エンドユーザーは、ピン固定、サイズ変更、移動、フローティング、および非表示にするなど、ペインをカスタマイズすることができます。
+- {Platform} ドック マネージャーは 現在 <Badge variant="preview" /> です。ドックマネージャーにより、さまざまなサイズ、位置、動作をするペインによって複雑なレイアウトを管理し、アプリ内のさまざまな場所にドッキングできます。[ドック マネージャー](./layouts/dock-manager.mdx)を使用すると、エンドユーザーは、ピン固定、サイズ変更、移動、フローティング、および非表示にするなど、ペインをカスタマイズすることができます。
 
 ### 新しいコンポーネント
 
-- [Chip](inputs/chip.md)
-- [Circular Progress](inputs/circular-progress.md)
-- [Linear Progress](inputs/linear-progress.md)
-- [Drop Down](inputs/dropdown.md)
-- [Slider & Range Slider](inputs/slider.md)
-- [Snackbar](notifications/snackbar.md)
-- [Toast](notifications/toast.md)
+- [Chip](./inputs/chip.mdx)
+- [Circular Progress](./inputs/circular-progress.mdx)
+- [Linear Progress](./inputs/linear-progress.mdx)
+- [Drop Down](./inputs/dropdown.mdx)
+- [Slider & Range Slider](./inputs/slider.mdx)
+- [Snackbar](./notifications/snackbar.mdx)
+- [Toast](./notifications/toast.mdx)
 
 ### **{PackageVerChanges-21-2.1}**
 
@@ -1100,24 +1100,24 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### **{PackageVerChanges-21-2}**
 
-- [Grid](grids/data-grid.md)
-- [TreeGrid](grids/tree-grid/overview.md)
+- [Grid](./grids/data-grid.mdx)
+- [TreeGrid](./grids/tree-grid/overview.mdx)
 
 ### 新しいコンポーネント
 
-- [Avatar](layouts/avatar.md)
-- [Badge](inputs/badge.md)
-- [Button & Icon Button](inputs/button.md)
-- [Card](layouts/card.md)
-- [Checkbox](inputs/checkbox.md)
+- [Avatar](./layouts/avatar.mdx)
+- [Badge](./inputs/badge.mdx)
+- [Button & Icon Button](./inputs/button.mdx)
+- [Card](./layouts/card.mdx)
+- [Checkbox](./inputs/checkbox.mdx)
 - Form
-- [Icon](layouts/icon.md)
-- [List](grids/list.md)
-- [Navigation Bar](menus/navbar.md)
-- [Navigation Drawer](menus/navigation-drawer.md)
-- [Radio & Radio Group](inputs/radio.md)
-- [Ripple](inputs/ripple.md)
-- [Switch](inputs/switch.md)
+- [Icon](./layouts/icon.mdx)
+- [List](./grids/list.mdx)
+- [Navigation Bar](./menus/navbar.mdx)
+- [Navigation Drawer](./menus/navigation-drawer.mdx)
+- [Radio & Radio Group](./inputs/radio.mdx)
+- [Ripple](./inputs/ripple.mdx)
+- [Switch](./inputs/switch.mdx)
 
 - Responsive layouts for horizontal label rotation based on browser / screen size.
 - Enhanced rendering for rounded labels on all platforms.
@@ -1128,7 +1128,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -1143,7 +1143,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
   - GroupSortDescriptions
 
 
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 ### チャートとマップの改善
 
@@ -1153,8 +1153,8 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### **{PackageVerChanges-21-1}**
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -1170,7 +1170,7 @@ The type of Values from <ApiLink type="PivotConfiguration" /> option is now arra
 
 ### 新しいビジュアル デザイン
 
-Added New Feature - [Row Paging](grids/data-grid/row-paging.md) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
+Added New Feature - [Row Paging](./grids/_shared/paging.mdx) which is used to split a large set of data into a sequence of pages that have similar content. With pagination, data can be displayed in a set number of rows, letting users “scroll” through their data, without needing a scroll bar. The UI for table pagination usually includes things like the current page, total pages, and clickable Previous and Next arrows/buttons that let users flip through the pages of data.
 
 ### チャートとマップ
 
@@ -1231,19 +1231,19 @@ For example, ``` <IgbCategoryChart/> ``` instead of ``` <CategoryChart/> ```
 
 ### New Components
 
-- [Avatar](layouts/avatar.md)
-- [Badge](inputs/badge.md)
-- [Button & Icon Button](inputs/button.md)
-- [Card](layouts/card.md)
-- [Checkbox](inputs/checkbox.md)
+- [Avatar](./layouts/avatar.mdx)
+- [Badge](./inputs/badge.mdx)
+- [Button & Icon Button](./inputs/button.mdx)
+- [Card](./layouts/card.mdx)
+- [Checkbox](./inputs/checkbox.mdx)
 - Form
-- [Icon](layouts/icon.md)
-- [List](grids/list.md)
-- [Navigation Bar](menus/navbar.md)
-- [Navigation Drawer](menus/navigation-drawer.md)
-- [Radio & Radio Group](inputs/radio.md)
-- [Ripple](inputs/ripple.md)
-- [Switch](inputs/switch.md)
+- [Icon](./layouts/icon.mdx)
+- [List](./grids/list.mdx)
+- [Navigation Bar](./menus/navbar.mdx)
+- [Navigation Drawer](./menus/navigation-drawer.mdx)
+- [Radio & Radio Group](./inputs/radio.mdx)
+- [Ripple](./inputs/ripple.mdx)
+- [Switch](./inputs/switch.mdx)
 
 ### Chart and Map Improvements
 
@@ -1281,10 +1281,10 @@ This release introduces a few improvements and simplifications to visual design
 ### {PackageGrids} (Data Grid)
 
 - New Features Added:
-  - [Filter Row](grids/data-grid/column-filtering.md)
-  - [Load/Save Layout Customizations](grids/data-grid/load-save-layout.md)
-  - [GroupBy Area for column grouping](grids/data-grid/row-grouping.md)
-  - [Cell Merging](grids/data-grid/cell-merging.md)
+  - [Filter Row](./grids/_shared/filtering.mdx)
+  - [Load/Save Layout Customizations](./grids/_shared/state-persistence.mdx)
+  - [GroupBy Area for column grouping](./grids/grid/groupby.mdx)
+  - [Cell Merging](./grids/_shared/cell-merging.mdx)
 - New API:
   - Added `SelectionChanged` event. Used to detect changes on selection interactions
      e.g. Multiple row selection.
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx
index 4b8240b1b6..d95c3d2282 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv-react.mdx
@@ -555,13 +555,13 @@ Please note that the maximum size available for the icons is 24x24. You can prov
 
 - チャートは `GetOthersContext()` メソッドを公開するようになりました。これにより、Others (その他) スライスのコンテンツが返されます。
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an `OverlayText` property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an `OverlayText` property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### バグ修正
 
@@ -578,7 +578,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
 バージョン 19.0.0 では、React 製品に多くの重大な変更が導入され、API の改善と整理が行われました。詳細は完全なアップデートガイドをご参照ください。
 </DocsAside>
 
-[アップデート ガイド](update-guide.md)
+[アップデート ガイド](./update-guide.mdx)
 
 ### 削除済
 
@@ -598,7 +598,7 @@ Stepper Step の `titlePosition` は、同じ動作を持つ undefined ではな
 With 19.0.0 the React product introduces many breaking changes done to improve and streamline the API. Please refer to the full Update Guide.
 </DocsAside>
 
-[Update Guide](update-guide.md)
+[Update Guide](./update-guide.mdx)
 
 ### 新しいコンポーネント
 - TileManager
@@ -673,7 +673,7 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (入力)
 
-- <Badge variant="preview" />[カラー エディター](inputs/color-editor.md)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](menus/toolbar.md) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
+- <Badge variant="preview" />[カラー エディター](./inputs/color-editor.mdx)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](./menus/toolbar.mdx) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
 
 | Bug Number | Control | Description      |
 |------------|---------|------------------|
@@ -699,7 +699,7 @@ DashboardTile <Badge variant="preview" />
 
 ### 一般
 
-- 新しい [Carousel](layouts/carousel.md) コンポーネント。
+- 新しい [Carousel](./layouts/carousel.mdx) コンポーネント。
 - <ApiLink pkg="core" type="Input" />
   - `change` イベント引数タイプを <ApiLink pkg="core" type="ComponentDataValueChangedEventArgs" /> から <ApiLink pkg="core" type="ComponentValueChangedEventArgs" /> に変更しました。
 
@@ -707,14 +707,14 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (チャート)
 
-- 新しい[データ円チャート](charts/types/data-pie-chart.md) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
+- 新しい[データ円チャート](./charts/types/data-pie-chart.mdx) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
 
-- 新しい [比例カテゴリ角度軸](charts/types/radial-chart.md) - スライスをプロットするための、<ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。
+- 新しい [比例カテゴリ角度軸](./charts/types/radial-chart.mdx) - スライスをプロットするための、<ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。
 
 ### {PackageCommon}
 
-- 新しい [Banner](notifications/banner.md) コンポーネント。
-- 新しい [DatePicker](scheduling/date-picker.md) コンポーネント。
+- 新しい [Banner](./notifications/banner.mdx) コンポーネント。
+- 新しい [DatePicker](./scheduling/date-picker.mdx) コンポーネント。
 - 新しい <ApiLink pkg="core" type="Divider" /> コンポーネント。
 - すべてのコンポーネントにネイティブ イベントのサポートが追加されました。
 - <ApiLink pkg="core" type="Icon" />
@@ -730,7 +730,7 @@ DashboardTile <Badge variant="preview" />
 ## {PackageGrids}
 
 ### **{PackageVerChanges-24-1-JUN}**
-- New [Carousel](layouts/carousel.md) component.
+- New [Carousel](./layouts/carousel.mdx) component.
 - <ApiLink pkg="core" type="Input" />
   - Changed `change` event argument type from <ApiLink pkg="core" type="ComponentDataValueChangedEventArgs" /> to <ApiLink pkg="core" type="ComponentValueChangedEventArgs" />
 
@@ -738,7 +738,7 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageGrids}
 
-- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](grids/grid/size.md) トピックを参照してください。
+- `DisplayDensity` は非推奨となり、代わりに `--ig-size` CSS カスタム プロパティが使用されるようになりました。詳細については、[グリッド サイズ](./grids/_shared/size.mdx) トピックを参照してください。
 
 - <ApiLink type="PivotGrid" /> - コンポーネントの構成が正しく適用できるようになりました。
 
@@ -757,12 +757,12 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (チャート)
 
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
+- [データ凡例のグループ化](./charts/features/chart-data-legend.mdx#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
 
-- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
+- [チャートの選択](./charts/features/chart-data-selection.mdx) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
 
-- [比例カテゴリ角度軸](charts/types/radial-chart.md) - <ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。
+- [比例カテゴリ角度軸](./charts/types/radial-chart.mdx) - <ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸により、データ チャートのすべての追加機能を使用してロバスト可能な視覚化をする円チャートの作成が可能になります。
 
 ### {PackageGauges} (ゲージ)
 
@@ -795,7 +795,7 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageGrids}
 
-- 新しい [<ApiLink type="HierarchicalGrid" />](grids/hierarchical-grid/overview.md) コンポーネント
+- 新しい [<ApiLink type="HierarchicalGrid" />](./grids/hierarchical-grid/overview.mdx) コンポーネント
 
 
 - <ApiLink type="PivotGrid" /> - Configuration of the component can now be applied correctly.
@@ -803,20 +803,20 @@ DashboardTile <Badge variant="preview" />
 
 - <ApiLink type="RadialGauge" />
   - 新しいタイトル/サブタイトルのプロパティ。<ApiLink type="RadialGauge" member="titleText" label="TitleText" />、<ApiLink type="RadialGauge" member="subtitleText" label="SubtitleText" /> はゲージの下部近くに表示されます。さらに、`TitleFontSize`、`TitleFontFamily`、`TitleFontStyle`、`TitleFontWeight`、<ApiLink type="RadialGauge" member="titleExtent" label="TitleExtent" /> など、さまざまなタイトルとサブタイトルのフォント プロパティが追加されました。最後に、新しい <ApiLink type="RadialGauge" member="titleDisplaysValue" label="TitleDisplaysValue" /> により、値を針の位置に対応させることができます。
-  - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](radial-gauge.md#オプティカル-スケーリング)を参照してください。
+  - <ApiLink type="RadialGauge" /> の新しい <ApiLink type="RadialGauge" member="opticalScalingEnabled" label="OpticalScalingEnabled" /> プロパティと <ApiLink type="RadialGauge" member="opticalScalingSize" label="OpticalScalingSize" /> プロパティ。この新機能は、ゲージのラベル、タイトル、サブタイトルが 100% のオプティカル スケーリングを持つサイズを管理します。この新機能の詳細については、[こちら](./radial-gauge.mdx#オプティカル-スケーリング)を参照してください。
   - 新しいハイライト針が追加されました。<ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> と <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
 - <ApiLink type="LinearGauge" />
   - 新しいハイライト針が追加されました。<ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> と <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> の両方に値と 'Overlay' 設定が指定されたとき、メインの針が薄く表示され、新しい針が表示されます。
 - <ApiLink type="BulletGraph" />
   - <ApiLink type="RadialGauge" member="highlightValueDisplayMode" label="HighlightValueDisplayMode" /> が 'Overlay' 設定に適用されたとき、パフォーマンス バーには値と新しい <ApiLink type="RadialGauge" member="highlightValue" label="HighlightValue" /> の差が反映されるようになりました。ハイライト値には、フィルタリング/サブセットが完了した測定パーセンテージが塗りつぶされた色で表示され、残りのバーの外観は割り当てられた値に対して薄く表示され、リアルタイムでパフォーマンスを示します。
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
 
 - <ApiLink type="Grid" member="toolbar" label="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
@@ -856,11 +856,11 @@ DashboardTile <Badge variant="preview" />
 
 ### **{PackageVerChanges-23-2-JAN}**
 
-- New [<ApiLink type="HierarchicalGrid" />](grids/hierarchical-grid/overview.md) component
+- New [<ApiLink type="HierarchicalGrid" />](./grids/hierarchical-grid/overview.mdx) component
 
 ### {PackageCharts} (チャート)
 
-- [チャートのハイライト表示フィルター](charts/features/chart-highlight-filter.md) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
+- [チャートのハイライト表示フィルター](./charts/features/chart-highlight-filter.mdx) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライト表示の表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
 
 ### **{PackageVerChanges-23-2-DEC}**
 
@@ -886,7 +886,7 @@ DashboardTile <Badge variant="preview" />
 #### {PackageGrids} (Grid)
 
 - 新規機能:
-  - [状態保持](grids/grid/state-persistence.md)
+  - [状態保持](./grids/_shared/state-persistence.mdx)
 
 #### **{PackageVerChanges-23-2}**
 
@@ -900,13 +900,13 @@ DashboardTile <Badge variant="preview" />
 
 ### 非推奨のコンポーネント
 
-> [DataGrid](grids/data-grid/overview.md) - DataGrid は非推奨です。[Grid](grids/data-grid.md) を使用してください。
+> [DataGrid](./grids/data-grid.mdx) - DataGrid は非推奨です。[Grid](./grids/data-grid.mdx) を使用してください。
 
 ## **{PackageVerChanges-23-1}**
 
 ### 新しいコンポーネント
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) コンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
 
 ## {PackageCharts} (チャート)
 
@@ -923,7 +923,7 @@ DashboardTile <Badge variant="preview" />
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- カテゴリの文字列と数値をグループ化、ソート、集計するための新しい[チャート集計](charts/features/chart-data-aggregations.md) API により、チャート データを事前に集計または計算する必要がなくなります。
+- カテゴリの文字列と数値をグループ化、ソート、集計するための新しい[チャート集計](./charts/features/chart-data-aggregations.mdx) API により、チャート データを事前に集計または計算する必要がなくなります。
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -948,8 +948,8 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageCharts} (チャート)
 
-- 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントが追加されました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
-- 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
+- 高度に構成可能な [DataLegend](./charts/features/chart-data-legend.mdx) コンポーネントが追加されました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似たコンポーネントですが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
+- 高度に構成可能な [DataToolTip](./charts/features/chart-data-tooltip.mdx) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
 - 積層シリーズのアニメーションとトランジションインのサポートが追加されました。<ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> プロパティを true に設定すると、アニメーションを有効にできます。そこから、<ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> プロパティを設定してアニメーションが完了するまでの時間を決定し、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> でアニメーションのタイプを決定できます。
 - 追加された `AssigningCategoryStyle` イベントは、<ApiLink type="DataChart" /> のすべてのシリーズで利用できるようになりました。このイベントは、背景色の <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> やハイライト表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。
 - CalloutLayer の新しい <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。
@@ -965,9 +965,9 @@ DashboardTile <Badge variant="preview" />
 
 ### {PackageGrids} (データ グリッド)
 
-新機能 - [行ページング](grids/data-grid/row-paging.md)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。
+新機能 - [行ページング](./grids/_shared/paging.mdx)を追加しました。これは、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。ページネーションを使用すると、データを設定された行数で表示することができ、ユーザーはスクロール バーを使用せずにデータを順次閲覧することができます。テーブル ページネーションの UI には通常、現在のページ、合計ページ、ユーザーがページをめくるためのクリック可能な [前へ] と [次へ] の矢印 / ボタンなどが含まれます。
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-21-2.1}**
 
@@ -982,7 +982,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - ZoomMaximumItemSpan
   - ZoomToCategoryRange
   - ZoomToItemSpan
-- New [Chart Aggregation](charts/features/chart-data-aggregations.md) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
+- New [Chart Aggregation](./charts/features/chart-data-aggregations.mdx) API for Grouping, Sorting and Summarizing Category string and numeric values, eliminating the need to pre-aggregate or calculate chart data:
   - InitialSortDescriptions
   - InitialSorts
   - SortDescriptions
@@ -997,7 +997,7 @@ Added significant improvements to default behaviors, and refined the Category Ch
   - GroupSortDescriptions
 
 
-[Chart Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+[Chart Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" />. These properties on the chart are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 
 ### {PackageGrids} (データ グリッド)
 
@@ -1009,8 +1009,8 @@ Added significant improvements to default behaviors, and refined the Category Ch
 ## データ グリッド
 ### {PackageInputs} (入力)
 
-- Added the highly-configurable [DataLegend](charts/features/chart-data-legend.md) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
-- Added the highly-configurable [DataToolTip](charts/features/chart-data-tooltip.md) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
+- Added the highly-configurable [DataLegend](./charts/features/chart-data-legend.mdx) component, which works much like the <ApiLink type="SeriesViewer" member="Legend" label="Legend" />, but it shows values of series and provides many configuration properties for filtering series rows and values columns, styling and formatting values.
+- Added the highly-configurable [DataToolTip](./charts/features/chart-data-tooltip.mdx) which displays values and titles of series as well as legend badges of series in a tooltip. This is now the default tooltip for all chart types.
 - Added animation and transition-in support for Stacked Series. Animations can be enabled by setting the <ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> property to true. From there, you can set the <ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> property to determine how long your animation should take to complete and the <ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> to determine the type of animation that takes place.
 - Added `AssigningCategoryStyle` event, is now available to all series in <ApiLink type="DataChart" />. This event is handled when you want to conditionally configure aspects of the series items such as <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> background-color and highlighting.
 - New <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> enumeration for CalloutLayer. Used to limit where the callouts are to be placed within the chart. By default, the callouts are intelligently placed in the best place but this used to force for example `TopLeft`, `TopRight`, `BottomLeft` or `BottomRight`.
@@ -1277,13 +1277,13 @@ These breaking changes were introduce in these packages and components only:
 
 | Affected Packages | Affected Components |
 | ------------------|---------------------|
-| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](excel-library.md)  |
-| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
+| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](./excel-library.mdx)  |
+| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](./spreadsheet-overview.mdx) |
+| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)  |
+| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)   |
+| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](./zoomslider-overview.mdx)  |
 | <a href="{PackageWebsite}{PackageCore}/v/{PackageVerChangedImports}" target="_blank">{PackageCore}</a> | all classes and enums  |
-| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](grids/data-grid/overview.md) |
+| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](./grids/data-grid.mdx) |
 
 - Code After Changes
 
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
index 93001b5778..eca532b885 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv-wc.mdx
@@ -474,7 +474,7 @@ Please note that the maximum size available for the icons is 24x24. You can prov
 
 #### {PackageCharts}
 
-- <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)レイヤーを追加しました:
+- <Badge variant="preview" /> [チャート データ注釈](./charts/features/chart-data-annotations.mdx)レイヤーを追加しました:
   - データ注釈バンド レイヤー
   - データ注釈ライン レイヤー
   - データ注釈矩形レイヤー
@@ -517,13 +517,13 @@ For more details please visit:
   - <ApiLink type="FilteringExpressionsTree" /> プロパティを使用して初期フィルタリングの適用が可能になりました。
 
 
-- The [Data Tooltip](charts/features/chart-data-tooltip.md) and [Data Legend](charts/features/chart-data-legend.md) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
+- The [Data Tooltip](./charts/features/chart-data-tooltip.mdx) and [Data Legend](./charts/features/chart-data-legend.mdx) expose <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> property that you can use to layout the contents of the tooltip or legend in a table or vertical layout structure.
 
 - <Badge variant="preview" /> The <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> property of the charts has been updated to include a new enumeration - `DragSelect` in which the dragged preview Rect will select the points contained within.
 
-- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](charts/features/chart-overlays.md), in addition to the <Badge variant="preview" /> [Chart Data Annotations](charts/features/chart-data-annotations.md) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
+- <Badge variant="preview" /> The [ValueOverlay and ValueLayer](./charts/features/chart-overlays.mdx), in addition to the <Badge variant="preview" /> [Chart Data Annotations](./charts/features/chart-data-annotations.mdx) listed above now expose an <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> property that can be used to overlay additional annotation text in the plot area. These appearance of these annotations can be configured by using the many OverlayText-prefixed properties. For example, the `OverlayTextBrush` property will configure the color of the overlay text.
 
-- <Badge variant="new" /> [Trendline Layer](charts/features/chart-trendlines.md) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](charts/features/chart-overlays.md) series types in the chart.
+- <Badge variant="new" /> [Trendline Layer](./charts/features/chart-trendlines.mdx) series type that allows you to apply a single trend line per trend line layer to a particular series. This allows the usage of multiple trend lines on a single series since you can have multiple [TrendlineLayer](./charts/features/chart-overlays.mdx) series types in the chart.
 
 ### バグ修正
 
@@ -564,7 +564,7 @@ For more details please visit:
 
 ### {PackageCharts}
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](./menus/toolbar.mdx) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
 
 ## {PackageCharts} (入力)
 
@@ -572,7 +572,7 @@ For more details please visit:
 
 #### {PackageCharts}
 
-- 新しい[データ円チャート](charts/types/data-pie-chart.md) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
+- 新しい[データ円チャート](./charts/types/data-pie-chart.mdx) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、強調表示、アニメーション、凡例のサポートを可能にします。
 
 ### {PackageGrids}
 
@@ -619,7 +619,7 @@ For more details please visit:
 
 ### {PackageCharts}
 
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
+- [データ凡例のグループ化](./charts/features/chart-data-legend.mdx#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
 
 ### {PackageGauges}
 
@@ -630,9 +630,9 @@ For more details please visit:
 
 ### {PackageGrids}
 
-- 新しい [<ApiLink type="HierarchicalGrid" />](grids/hierarchical-grid/overview.md) ンポーネント
+- 新しい [<ApiLink type="HierarchicalGrid" />](./grids/hierarchical-grid/overview.mdx) ンポーネント
 
-- New [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
+- New [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to plot slices similar to a pie chart, a type of data visualization where data points are represented as segments within a circular graph.
 
 - <ApiLink type="PivotGrid" member="toolbar" label="Toolbar" />
 
@@ -664,31 +664,31 @@ For more details please visit:
 - <ApiLink type="DockManager" /> - <ApiLink type="SplitPane" /> <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> is deprecated. Having isMaximized set to true on a split pane level has no real effect as split panes serve as containers only, meaning they have no actual content to be shown maximized. Use the <ApiLink type="SplitPane" member="isMaximized" label="IsMaximized" /> property of <ApiLink type="TabGroupPane" /> and/or <ApiLink type="ContentPane" /> instead.
 
 ### {PackageCharts}
-- [チャートのハイライト表示フィルター](charts/features/chart-highlight-filter.md) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライトの表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
+- [チャートのハイライト表示フィルター](./charts/features/chart-highlight-filter.mdx) - <ApiLink type="CategoryChart" /> と <ApiLink type="DataChart" /> は、データのサブセットの内外でハイライト表示およびアニメーション化する方法を公開するようになりました。このハイライトの表示はシリーズのタイプによって異なります。列およびエリア シリーズの場合、サブセットはデータの合計セットの上に表示され、サブセットはシリーズの実際のブラシによって色付けされ、合計セットは不透明度を下げます。折れ線シリーズの場合、サブセットは点線で表示されます。
 ### **{PackageVerChanges-23-2-DEC}**
 
-- [Data Legend Grouping](charts/features/chart-data-legend.md#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](charts/features/chart-data-tooltip.md#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
+- [Data Legend Grouping](./charts/features/chart-data-legend.mdx#{PlatformLower}-data-legend-grouping) & [Data Tooltip Grouping](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-data-tooltip-grouping-for-data-chart) - New grouping feature added. The property <ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> toggles grouping with each series opting in can assign group text via the <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> property. If the same value is applied to more than one series then they will appear grouped. Useful for large datasets that need to be categorized and organized for all users.
 
-- [Chart Selection](charts/features/chart-data-selection.md) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
+- [Chart Selection](./charts/features/chart-data-selection.mdx) - New series selection styling. This is adopted broadly across all category, financial and radial series for <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" />. Series can be clicked and shown a different color, brightened or faded, and focus outlines. Manage which items are effected through individual series or entire data item. Multiple series and markers are supported. Useful for illustrating various differences or similarities between values of a particular data item. Also  `SelectedSeriesItemsChanged` event and <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> are available for additional help to build out robust business requirements surrounding other actions that can take place within an application such as a popup or other screen with data analysis based on the selection.
 
-- [Proportional Category Angle Axis](charts/types/radial-chart.md) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
+- [Proportional Category Angle Axis](./charts/types/radial-chart.mdx) - New axes for the Radial Pie Series in the <ApiLink type="DataChart" />, to enable creating pie charts in the allowing robust visualizations using all the added power of the data chart.
 
-- [Treemap Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
+- [Treemap Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-highlighting) - Now exposes a <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> property that allows you to configure the mouse-over highlighting of the items in the tree map. This property takes two options: `Brighten` where the highlight will apply to the item that you hover the mouse over only, and `FadeOthers` where the highlight of the hovered item will remain the same, but everything else will fade out. This highlight is animated, and can be controlled using the <ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> property.
 
-- [Treemap Percent-based Highlighting](charts/types/treemap-chart.md#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
+- [Treemap Percent-based Highlighting](./charts/types/treemap-chart.mdx#{PlatformLower}-treemap-percent-based-highlighting) - New percent-based highlighting, allowing nodes to represent progress or subset of a collection. The appearance is shown as a fill-in of its backcolor up to a specific value either by a member on your data item or by supplying a new <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" />. Can be toggled via <ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> and styled via `FillBrushes`.
 
 - <ApiLink type="PivotGrid" member="toolbar" label="Toolbar" /> - New <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> option for ToolAction for outlining a border around specific tools of choice.
 
 ### {PackageGrids}
 
-- 新機能 (Grid) - [状態保持](grids/grid/state-persistence.md)。
+- 新機能 (Grid) - [状態保持](./grids/_shared/state-persistence.mdx)。
 
 ## **{PackageVerChanges-23-2}**
 
 
 ### {PackageLayouts}
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md)
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx)
   - クリップボードを介してチャートを画像に保存するための保存ツール アクションが追加されました。
   - ツールバーの <ApiLink type="Toolbar" member="orientation" label="Orientation" /> プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。
   - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。
@@ -704,14 +704,14 @@ For more details please visit:
 
 ### {PackageLayouts}
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
 
 
 ## {PackageCharts}
 
 ### **{PackageVerChanges-22-2.2}**
 
-- [Chart Highlight Filter](charts/features/chart-highlight-filter.md) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
+- [Chart Highlight Filter](./charts/features/chart-highlight-filter.mdx) - The <ApiLink type="CategoryChart" /> and <ApiLink type="DataChart" /> now expose a way to highlight and animate in and out of a subset of data. The display of this highlight depends on the series type. For column and area series, the subset will be shown on top of the total set of data where the subset will be colored by the actual brush of the series, and the total set will have a reduced opacity. For line series, the subset will be shown as a dotted line.
 
 ## {PackageGrids}
 
@@ -728,15 +728,15 @@ For more details please visit:
 
 ### {PackageGrids}
 
-- 新しい [Pivot Grid](grids/pivot-grid/overview.md) コンポーネント。
+- 新しい [Pivot Grid](./grids/pivot-grid/overview.mdx) コンポーネント。
 
 
 ## **{PackageVerChanges-22-2}**
 
 ### {PackageGrids}
 
-- 新しい [Grid](grids/data-grid.md) コンポーネント。
-- 新しい [Tree Grid](grids/tree-grid/overview.md) コンポーネント。
+- 新しい [Grid](./grids/data-grid.mdx) コンポーネント。
+- 新しい [Tree Grid](./grids/tree-grid/overview.mdx) コンポーネント。
 - <ApiLink type="DataGrid" />:
   - **{IgPrefix}Column** を <ApiLink type="DataGridColumn" /> に変更しました。
   - **GridCellEventArgs** を <ApiLink type="DataGridCellEventArgs" /> に変更しました。
@@ -745,9 +745,9 @@ For more details please visit:
 
 ### **{PackageVerChanges-22-1}**
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - A new series type named the <ApiLink type="ValueLayer" /> is now exposed which can allow you to render an overlay for different focal points of the plotted data such as Maximum, Minimum, and Average. This is applied to the <ApiLink type="CategoryChart" /> and <ApiLink type="FinancialChart" /> by adding to the new <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> collection.
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 
 ## {PackageGrids}
@@ -755,8 +755,8 @@ For more details please visit:
 
 ### {PackageCharts}
 
-- 高度に構成可能な [DataLegend](charts/features/chart-data-legend.md) コンポーネントを追加しました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似ていますが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
-- 高度に構成可能な [DataToolTip](charts/features/chart-data-tooltip.md) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
+- 高度に構成可能な [DataLegend](./charts/features/chart-data-legend.mdx) コンポーネントを追加しました。これは、<ApiLink type="SeriesViewer" member="Legend" label="Legend" /> とよく似ていますが、シリーズの値を表示し、シリーズの行と値の列をフィルタリングし、値のスタイルとフォーマットを行うための多くの構成プロパティを提供します。
+- 高度に構成可能な [DataToolTip](./charts/features/chart-data-tooltip.mdx) が追加されました。これは、シリーズの値とタイトル、およびシリーズの凡例バッジをツールチップに表示します。これは、すべてのチャート タイプのデフォルトのツールチップになりました。
 - 積層シリーズのアニメーションとトランジションインのサポートが追加されました。<ApiLink type="CategoryChart" member="isTransitionInEnabled" label="IsTransitionInEnabled" /> プロパティを true に設定すると、アニメーションを有効にできます。そこから、<ApiLink type="CategoryChart" member="transitionInDuration" label="TransitionInDuration" /> プロパティを設定してアニメーションが完了するまでの時間を決定し、<ApiLink type="CategoryChart" member="transitionInMode" label="TransitionInMode" /> でアニメーションのタイプを決定できます。
 - 追加された `AssigningCategoryStyle` イベントは、<ApiLink type="DataChart" /> のすべてのシリーズで利用できるようになりました。このイベントは、背景色の <ApiLink type="CrosshairLayer" member="fill" label="Fill" /> やハイライト表示など、シリーズ項目の外観を条件付きで構成する場合に処理されます。
 - CalloutLayer の新しい <ApiLink type="CalloutLayer" member="allowedPositions" label="AllowedPositions" /> 列挙体。チャート内のどこにコールアウトを配置するかを制限するために使用されます。デフォルトでは、コールアウトは最適な場所に配置されますが、これは `TopLeft`、`TopRight`、`BottomLeft`、または `BottomRight` を強制するために使用されます。
@@ -798,10 +798,10 @@ For more details please visit:
 
 - <ApiLink type="DataGrid" />:
   - 新規機能:
-  - [フィルター行](grids/data-grid/column-filtering.md)
-  - [レイアウトのカスタマイズ読み込み/保存](grids/data-grid/load-save-layout.md)
-  - [列をグループ化するための GroupBy 領域](grids/data-grid/row-grouping.md)
-  - [セルの結合](grids/data-grid/cell-merging.md)
+  - [フィルター行](./grids/_shared/filtering.mdx)
+  - [レイアウトのカスタマイズ読み込み/保存](./grids/_shared/state-persistence.mdx)
+  - [列をグループ化するための GroupBy 領域](./grids/grid/groupby.mdx)
+  - [セルの結合](./grids/_shared/cell-merging.mdx)
   - 新規 API:
   - `SelectionChanged` イベントを追加しました。複数行の選択など、選択のインタラクションの変化を検出するために使用されます。
   - 重大な変更:
@@ -1042,7 +1042,7 @@ for example:
 
 #### 追加
 
-- 新しい [Carousel](layouts/carousel.md) コンポーネント。
+- 新しい [Carousel](./layouts/carousel.mdx) コンポーネント。
 
 ## **{PackageCommonVerChanges-5.0.0}**
 
@@ -1125,13 +1125,13 @@ These breaking changes were introduce in these packages and components only:
 
 | Affected Packages | Affected Components |
 | ------------------|---------------------|
-| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](excel-library.md)  |
-| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](spreadsheet-overview.md) |
-| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](geo-map.md), [Treemap](charts/types/treemap-chart.md)  |
-| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](bullet-graph.md), [Linear Gauge](linear-gauge.md), [Radial Gauge](radial-gauge.md)   |
-| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](zoomslider-overview.md)  |
+| <a href="{PackageWebsite}{PackageExcel}/v/{PackageVerChangedImports}" target="_blank">{PackageExcel}</a> | [Excel Library](./excel-library.mdx)  |
+| <a href="{PackageWebsite}{PackageSpreadsheet}/v/{PackageVerChangedImports}" target="_blank">{PackageSpreadsheet}</a> | [Spreadsheet](./spreadsheet-overview.mdx) |
+| <a href="{PackageWebsite}{PackageMaps}/v/{PackageVerChangedImports}" target="_blank">{PackageMaps}</a> | [Geo Map](./geo-map.mdx), [Treemap](./charts/types/treemap-chart.mdx)  |
+| <a href="{PackageWebsite}{PackageGauges}/v/{PackageVerChangedImports}" target="_blank">{PackageGauges}</a> |  [Bullet Graph](./bullet-graph.mdx), [Linear Gauge](./linear-gauge.mdx), [Radial Gauge](./radial-gauge.mdx)   |
+| <a href="{PackageWebsite}{PackageCharts}/v/{PackageVerChangedImports}" target="_blank">{PackageCharts}</a>| Category Chart, Data Chart, Donut Chart, Financial Chart], Pie Chart, [Zoom Slider](./zoomslider-overview.mdx)  |
 | <a href="{PackageWebsite}{PackageCore}/v/{PackageVerChangedImports}" target="_blank">{PackageCore}</a> | all classes and enums  |
-| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](grids/data-grid/overview.md) |
+| <a href="{PackageWebsite}{PackageGrids}/v/{PackageVerChangedImports}" target="_blank">{PackageGrids}</a> | [Data Grid](./grids/data-grid.mdx) |
 
 - Code After Changes
 
@@ -1400,8 +1400,8 @@ import { IgcLiveGridComponent } from 'igniteui-webcomponents-data-grids/ES5/igc-
 
 #### **{PackageCommonVerChanges-4.3.1}**
 
-- New [Text Area](inputs/text-area.md) component.
-- New [Button Group](inputs/button-group.md) component.
+- New [Text Area](./inputs/text-area.mdx) component.
+- New [Button Group](./inputs/button-group.mdx) component.
 - New <ApiLink pkg="core" type="ToggleButton" />.
 - <ApiLink pkg="core" type="NavDrawer" /> now supports CSS transitions.
 - Position attribute for <ApiLink pkg="core" type="Toast" /> and <ApiLink pkg="core" type="Snackbar" />.
@@ -1555,8 +1555,8 @@ interface IgcComboChangeEventArgs<T> {
 - <ApiLink pkg="core" type="Button" /> - The `prefix`/`suffix` slots are no longer needed and will be removed in the next major release.
 
 #### 追加
-- 新しい [Stepper](layouts/stepper.md) コンポーネント。
-- 新しい [Combo](inputs/combo/overview.md) コンポーネント。
+- 新しい [Stepper](./layouts/stepper.mdx) コンポーネント。
+- 新しい [Combo](./inputs/combo/overview.mdx) コンポーネント。
 - <ApiLink pkg="core" type="MaskInput" /> - コンポーネント内のシンボルを削除するときにリテラル位置をスキップします。
 
 ### 修正
@@ -1581,13 +1581,13 @@ interface IgcComboChangeEventArgs<T> {
 ### 修正
 
 #### **{PackageCommonVerChanges-3.4.0}**
-- New [Stepper](layouts/stepper.md) component.
-- New [Combo](inputs/combo/overview.md) component.
+- New [Stepper](./layouts/stepper.mdx) component.
+- New [Combo](./inputs/combo/overview.mdx) component.
 - <ApiLink pkg="core" type="MaskInput" /> - Skip literal positions when deleting symbols in the component
 
 #### 追加
-- 新しい [Dialog](notifications/dialog.md) コンポーネント。
-- 新しい [Select](inputs/select.md) コンポーネント。
+- 新しい [Dialog](./notifications/dialog.mdx) コンポーネント。
+- 新しい [Select](./inputs/select.mdx) コンポーネント。
 
 ### 修正
 
@@ -1608,9 +1608,9 @@ interface IgcComboChangeEventArgs<T> {
 ### **{PackageCommonVerChanges-3.3.0}**
 
 #### 追加
-- 新しい [DateTimeInput](inputs/date-time-input.md) コンポーネント。
-- 新しい [Tabs](layouts/tabs.md) コンポーネント。
-- 新しい [Accordion](layouts/accordion.md) コンポーネント。
+- 新しい [DateTimeInput](./inputs/date-time-input.mdx) コンポーネント。
+- 新しい [Tabs](./layouts/tabs.mdx) コンポーネント。
+- 新しい [Accordion](./layouts/accordion.mdx) コンポーネント。
 - テーマのタイポグラフィ スタイル。
 
 #### 変更
@@ -1621,13 +1621,13 @@ interface IgcComboChangeEventArgs<T> {
 ### 修正
 
 #### **{PackageCommonVerChanges-3.2.0}**
-- New [Dialog](notifications/dialog.md) component.
-- New [Select](inputs/select.md) component.
+- New [Dialog](./notifications/dialog.mdx) component.
+- New [Select](./inputs/select.mdx) component.
 
 #### 追加
-- 新しい [MaskInput](inputs/mask-input.md) コンポーネント。
-- 新しい [ExpansionPanel](layouts/expansion-panel.md) コンポーネント。
-- 新しい [Tree](grids/tree.md) コンポーネント。
+- 新しい [MaskInput](./inputs/mask-input.mdx) コンポーネント。
+- 新しい [ExpansionPanel](./layouts/expansion-panel.mdx) コンポーネント。
+- 新しい [Tree](./grids/tree.mdx) コンポーネント。
 - <ApiLink pkg="core" type="Rating" /> - シンボルのサイズを制御するために、`selected` CSS パーツと公開された CSS 変数を追加しました。
 - <ApiLink pkg="core" type="IconButton" /> - スロット化されたコンテンツを許可します。
 
@@ -1672,7 +1672,7 @@ Check the official [documentation](https://www.infragistics.com/products/ignite-
 ### **{PackageCommonVerChanges-2.2.0}**
 
 #### 追加
-- 新しい [DropDown](inputs/dropdown.md) コンポーネント。
+- 新しい [DropDown](./inputs/dropdown.mdx) コンポーネント。
 - <ApiLink pkg="core" type="Calendar" />: アクティブ日付は属性を介して設定できます。
 
 #### **{PackageCommonVerChanges-2.1.1}**
@@ -1689,12 +1689,12 @@ Check the official [documentation](https://www.infragistics.com/products/ignite-
 - <ApiLink pkg="core" type="Snackbar" />: Added `toggle` method.
 
 #### 追加
-- 新しい [LinearProgress](inputs/linear-progress.md) コンポーネント。
-- 新しい [CircularProgress](inputs/circular-progress.md) コンポーネント。
-- 新しい [Chip](inputs/chip.md) コンポーネント。
-- 新しい [Snackbar](notifications/snackbar.md) コンポーネント。
-- 新しい [Toast](notifications/toast.md) コンポーネント。
-- 新しい [Rating](inputs/rating.md) コンポーネント。
+- 新しい [LinearProgress](./inputs/linear-progress.mdx) コンポーネント。
+- 新しい [CircularProgress](./inputs/circular-progress.mdx) コンポーネント。
+- 新しい [Chip](./inputs/chip.mdx) コンポーネント。
+- 新しい [Snackbar](./notifications/snackbar.mdx) コンポーネント。
+- 新しい [Toast](./notifications/toast.mdx) コンポーネント。
+- 新しい [Rating](./inputs/rating.mdx) コンポーネント。
 - コンポーネントテーマは、`configureTheme(theme: Theme)` 関数を呼び出すことで実行時に変更できます。
 
 #### **{PackageCommonVerChanges-2.0.0}**
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
index 0517714a34..5d3fc4c27a 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
@@ -221,20 +221,20 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 
 ### {PackageCharts} (チャート)
 
-- <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)レイヤーを追加しました:
+- <Badge variant="preview" /> [チャート データ注釈](./charts/features/chart-data-annotations.mdx)レイヤーを追加しました:
   - データ注釈バンド レイヤー
   - データ注釈ライン レイヤー
   - データ注釈矩形レイヤー
   - データ注釈スライス レイヤー
   - データ注釈ストリップ レイヤー
 
-- [データ ツールチップ](charts/features/chart-data-tooltip.md)と[データ 凡例](charts/features/chart-data-legend.md)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティが公開されています。
+- [データ ツールチップ](./charts/features/chart-data-tooltip.mdx)と[データ 凡例](./charts/features/chart-data-legend.mdx)では、ツールチップまたは凡例のコンテンツをテーブルまたは垂直レイアウト構造でレイアウトするために使用できる <Badge variant="preview" /> <ApiLink type="DataLegend" member="layoutMode" label="LayoutMode" /> プロパティが公開されています。
 
 - <Badge variant="preview" /> チャートの <ApiLink type="SeriesViewer" member="defaultInteraction" label="DefaultInteraction" /> プロパティが更新され、新しい列挙体 `DragSelect` が含まれるようになりました。これにより、ドラッグされたプレビュー Rect は、その中に含まれるポイントを選択します。 (ベータ版)
 
-- <Badge variant="preview" /> [ValueOverlay と ValueLayer](charts/features/chart-overlays.md) は、上記にリストした <Badge variant="preview" /> [チャート データ注釈](charts/features/chart-data-annotations.md)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)
+- <Badge variant="preview" /> [ValueOverlay と ValueLayer](./charts/features/chart-overlays.mdx) は、上記にリストした <Badge variant="preview" /> [チャート データ注釈](./charts/features/chart-data-annotations.mdx)に加えて、プロット領域に追加の注釈テキストをオーバーレイするために使用できる <ApiLink type="ValueLayer" member="overlayText" label="OverlayText" /> プロパティを公開するようになりました。これらの注釈の外観は、OverlayText プレフィックスが付いた多くのプロパティを使用して構成できます。たとえば、`OverlayTextBrush` プロパティはオーバーレイ テキストの色を構成します。 (ベータ版)
 
-- <Badge variant="new" /> [トレンドライン レイヤー](charts/features/chart-trendlines.md) シリーズ タイプを使用すると、トレンド ライン レイヤーごとに 1 つのトレンド ラインを特定のシリーズに適用できます。これにより、チャートに複数の [TrendlineLayer](charts/features/chart-overlays.md) シリーズ タイプを使用できるため、単一のシリーズで複数のトレンド ラインを使用できるようになります。
+- <Badge variant="new" /> [トレンドライン レイヤー](./charts/features/chart-trendlines.mdx) シリーズ タイプを使用すると、トレンド ライン レイヤーごとに 1 つのトレンド ラインを特定のシリーズに適用できます。これにより、チャートに複数の [TrendlineLayer](./charts/features/chart-overlays.mdx) シリーズ タイプを使用できるため、単一のシリーズで複数のトレンド ラインを使用できるようになります。
 
 ### {PackageDashboards} (ダッシュボード)
 
@@ -301,17 +301,17 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 
 ### {PackageCharts} (チャート)
 
-- <Badge variant="preview" /> [Dashboard Tile](dashboard-tile.md) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](menus/toolbar.md) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
+- <Badge variant="preview" /> [Dashboard Tile](./dashboard-tile.mdx) コンポーネントは、バインドされた ItemsSource コレクションまたは単一のポイントを分析および視覚化し、データのスキーマとカウントに基づいて適切なデータ視覚化を返すコンテナー コントロールです。このコントロールは、組み込みの [Toolbar](./menus/toolbar.mdx) コンポーネントを利用して、実行時に視覚化を変更できるようにし、最小限のコードでデータのさまざまな視覚化を表示できるようにします。
 
 ### {PackageCharts} (入力)
 
-- <Badge variant="preview" />[カラー エディター](inputs/color-editor.md)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](menus/toolbar.md) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
+- <Badge variant="preview" />[カラー エディター](./inputs/color-editor.mdx)はスタンドアロンのカラー ピッカーとして使用できるようになり、さらに [Toolbar](./menus/toolbar.mdx) コンポーネントの <Badge variant="preview" /> ToolAction に統合され、実行時に視覚化を更新できるようになりました。
 
 ## **{PackageVerChanges-24-1-SEP}**
 
-- [データ円チャート](charts/types/data-pie-chart.md) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。
+- [データ円チャート](./charts/types/data-pie-chart.mdx) - <ApiLink type="DataPieChart" /> は円ャートを表示する新しいコンポーネントです。このコンポーネントは、<ApiLink type="CategoryChart" /> と同様に動作し、基になるデータ モデルのプロパティを自動的に検出しながら、ItemLegend コンポーネントを介して選択、ハイライト表示、アニメーション、凡例のサポートを可能にします。
 
-- <Badge variant="new" /> [比例カテゴリ角度軸](charts/types/radial-chart.md) - スライスをプロットするための、<ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。
+- <Badge variant="new" /> [比例カテゴリ角度軸](./charts/types/radial-chart.mdx) - スライスをプロットするための、<ApiLink type="DataChart" /> のラジアル円シリーズの新しい軸。円チャートに似ており、データ ポイントが円グラフ内のセグメントとして表されます。
 
 - <ApiLink type="Toolbar" />
 
@@ -332,14 +332,14 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 
 ### {PackageCharts} (チャート)
 
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
+- [データ凡例のグループ化](./charts/features/chart-data-legend.mdx#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
 
-- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
+- [チャートの選択](./charts/features/chart-data-selection.mdx) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
 
-- [ツリーマップのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、<ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> プロパティを使用して制御できます。
+- [ツリーマップのハイライト表示](./charts/types/treemap-chart.mdx#{PlatformLower}-リーマップのハイライト表示) - ツリー マップの項目のマウスオーバーによるハイライト表示を構成できる <ApiLink type="SeriesViewer" member="highlightingMode" label="HighlightingMode" /> プロパティが公開されました。このプロパティには 2 つのオプションがあります: `Brighten` では、マウスを置いた項目にのみハイライト表示が適用され、`FadeOthers` では、マウスホバーした項目のハイライト表示はそのままで、それ以外はすべてフェードアウトします。このハイライト表示はアニメーション化されており、<ApiLink type="SeriesViewer" member="highlightingTransitionDuration" label="HighlightingTransitionDuration" /> プロパティを使用して制御できます。
 
-- [ツリーマップのパーセントベースのハイライト表示](charts/types/treemap-chart.md#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" /> を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。<ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> で切り替えることができ、`FillBrushes` でスタイルを設定できます。
+- [ツリーマップのパーセントベースのハイライト表示](./charts/types/treemap-chart.mdx#{PlatformLower}-ツリーマップのパーセントベースのハイライト表示) - 新しいパーセントベースのハイライト表示により、ノードはコレクションの進行状況またはサブセットを表すことができます。外観は、データ項目のメンバーによって、または新しい <ApiLink type="XYChart" member="highlightedDataSource" label="HighlightedItemsSource" /> を指定することによって、特定の値までの背景色の塗りつぶしとして表示されます。<ApiLink type="SeriesViewer" member="highlightedValuesDisplayMode" label="HighlightedValuesDisplayMode" /> で切り替えることができ、`FillBrushes` でスタイルを設定できます。
 
 - <ApiLink type="Toolbar" /> - 選択した特定のツールの周囲に境界線を描くための ToolAction の新しい <ApiLink type="ToolActionGroupHeader" member="isHighlighted" label="IsHighlighted" /> オプション。
 
@@ -352,9 +352,9 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 
 ### {PackageCharts} (チャート)
 
-- [データ凡例のグループ化](charts/features/chart-data-legend.md#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](charts/features/chart-data-tooltip.md#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
+- [データ凡例のグループ化](./charts/features/chart-data-legend.mdx#{PlatformLower}-データ凡例のグループ化) と [データ ツールチップのグループ化](./charts/features/chart-data-tooltip.mdx#{PlatformLower}-データ-チャートのデータ-ツールチップのグループ化) - 新しいグループ化機能が追加されました。<ApiLink type="DataLegend" member="groupRowVisible" label="GroupRowVisible" /> プロパティは、各シリーズのグループ化を切り替え、オプトインすると <ApiLink type="CrosshairLayer" member="dataLegendGroup" label="DataLegendGroup" /> プロパティを介してグループ テキストを割り当てることができます 同じ値が複数のシリーズに適用されている場合、それらはグループ化されて表示されます。すべてのユーザー向けに分類および整理する必要がある大規模なデータセットに役立ちます。
 
-- [チャートの選択](charts/features/chart-data-selection.md) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
+- [チャートの選択](./charts/features/chart-data-selection.mdx) - 新しいシリーズ選択のスタイル設定。これは、<ApiLink type="CategoryChart" /> および <ApiLink type="DataChart" /> のすべてのカテゴリ、財務、およびラジアル シリーズに広く採用されています。シリーズはクリックして異なる色で表示したり、明るくしたり、薄くしたり、フォーカスのアウトラインを表示したりできます。個々のシリーズまたはデータ項目全体を通じて影響を受ける項目を管理します。
 複数のシリーズとマーカーがサポートされています。特定のデータ項目の値間のさまざまな相違点や類似点を示すのに役立ちます。また、`SelectedSeriesItemsChanged` イベントと <ApiLink type="SeriesViewer" member="selectedSeriesItems" label="SelectedSeriesItems" /> は、選択内容に基づいたデータ分析を行うポップアップやその他の画面など、アプリケーション内で実行できるその他のアクションを取り巻く堅牢なビジネス要件を構築するための追加の支援として利用できます。
 
 ### {PackageGauges} (ゲージ)
@@ -380,7 +380,7 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 
 ### **{PackageVerChanges-23-2}**
 
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - This component is a companion container for UI operations to be used primarily with our charting components. The toolbar will dynamically update with a preset of properties and tool items when linked to our <ApiLink type="DataChart" /> or <ApiLink type="CategoryChart" /> components. You'll be able to create custom tools for your project allowing end users to provide changes, offering an endless amount of customization.
 
 ### {PackageGrids} - Toolbar - <Badge variant="preview" />
 
@@ -388,22 +388,22 @@ X 軸と Y 軸に `CompanionAxis` プロパティが追加され、既存の軸
 - ツールバーの <ApiLink type="Toolbar" member="orientation" label="Orientation" /> プロパティを介して垂直方向が追加されました。デフォルトでは、ツールバーは水平方向ですが、ツールバーを垂直方向に表示できるようになり、ツールが左右にポップアップ表示されます。
 - ツールバーの `renderImageFromText` メソッドを介してカスタム SVG アイコンのサポートが追加され、カスタム ツールの作成がさらに強化されました。
 
-- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](charts/types/line-chart.md#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](charts/features/chart-axis-gridlines.md#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](charts/features/chart-trendlines.md#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
+- It is now possible to apply a **dash array** to the different parts of the series of the <ApiLink type="DataChart" />. You can apply this to the [series](./charts/types/line-chart.mdx#{PlatformLower}-styling-line-chart) plotted in the chart, the [gridlines](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-axis-gridlines-properties) of the chart, and the [trendlines](./charts/features/chart-trendlines.mdx#{PlatformLower}-chart-trendlines-dash-array-example) of the series plotted in the chart.
 
 ## **{PackageVerChanges-23-1}**
 - Angular 16 support.
 
 ## 新しいコンポーネント
-- <Badge variant="preview" /> [Toolbar](menus/toolbar.md) - このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
+- <Badge variant="preview" /> [Toolbar](./menus/toolbar.mdx) - このコンポーネントは、主にチャート コンポーネントで使用される UI 操作のコンパニオン コンテナーです。ツールバーは、<ApiLink type="DataChart" /> または <ApiLink type="CategoryChart" /> コンポーネントにリンクされると、プロパティとツール項目のプリセットで動的に更新されます。プロジェクト用のカスタム ツールを作成して、エンド ユーザーが変更を提供できるようになり、無限のカスタマイズが可能になります。
 
 ## {PackageCharts} (チャート)
 
-- [ValueLayer](charts/features/chart-overlays.md#{PlatformLower}-value-layer) - <ApiLink type="ValueLayer" /> という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、<ApiLink type="CategoryChart" /> と <ApiLink type="FinancialChart" /> に適用されます。
+- [ValueLayer](./charts/features/chart-overlays.mdx#{PlatformLower}-value-layer) - <ApiLink type="ValueLayer" /> という名前の新しいシリーズ タイプが公開されました。これにより、Maximum、Minimum、Average など、プロットされたデータのさまざまな焦点のオーバーレイを描画できます。これは、新しい <ApiLink type="XYChart" member="valueLines" label="ValueLines" /> コレクションに追加することで、<ApiLink type="CategoryChart" /> と <ApiLink type="FinancialChart" /> に適用されます。
 
-- **ダッシュ配列**を <ApiLink type="DataChart" /> のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](charts/types/line-chart.md#{PlatformLower}-折れ線チャートのスタイル設定)、チャートの[グリッド線](charts/features/chart-axis-gridlines.md#{PlatformLower}-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](charts/features/chart-trendlines.md#{PlatformLower}-チャート-トレンドラインのダッシュ配列の例)に適用できます。
+- **ダッシュ配列**を <ApiLink type="DataChart" /> のシリーズのさまざまな部分に適用できるようになりました。これは、チャートにプロットされた[シリーズ](./charts/types/line-chart.mdx#{PlatformLower}-折れ線チャートのスタイル設定)、チャートの[グリッド線](./charts/features/chart-axis-gridlines.mdx#{PlatformLower}-軸グリッド線のプロパティ)、およびチャートにプロットされたシリーズの[トレンドライン](./charts/features/chart-trendlines.mdx#{PlatformLower}-チャート-トレンドラインのダッシュ配列の例)に適用できます。
 
 <DocsAside type="info" title="情報">
-The Chart's [Aggregation](charts/features/chart-data-aggregations.md) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
+The Chart's [Aggregation](./charts/features/chart-data-aggregations.mdx) will not work when using <ApiLink type="XYChart" member="includedProperties" label="IncludedProperties" /> | <ApiLink type="XYChart" member="excludedProperties" label="ExcludedProperties" /> because these properties are meant for non-aggregated data. Once you attempt to aggregate data these properties should no longer be used. The reason it does not work is because aggregation replaces the collection that is passed to the chart for render.  The include/exclude properties are designed to filter in/out properties of that data and those properties no longer exist in the new aggregated collection.
 </DocsAside>
 ## **{PackageVerChanges-22-2.2}**
 ### **{PackageVerChanges-22-2.1}**
diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx
index b18b71e624..b7f094576d 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-client.mdx
@@ -41,7 +41,7 @@ Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor 
 
 Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor** NuGet パッケージを検索してインストールします。
 
-NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](general-installing-blazor.md) トピックを参照してください。
+NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](./general-installing-blazor.mdx) トピックを参照してください。
 
 ## Ignite UI for Blazor の登録
 
@@ -111,7 +111,7 @@ public static async Task Main(string[] args)
 
 </PlatformBlock>
 
-[.NET 6 以降のアプリケーション](general-getting-started-blazor-client.md#net-6-and-later-applications) セクションの手順 2 に進みます。
+[.NET 6 以降のアプリケーション](./general-getting-started-blazor-client.mdx#net-6-and-later-applications) セクションの手順 2 に進みます。
 
 ## Ignite UI for Blazor コンポーネントの追加
 
diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx
index 66617937bc..9eb96e17f8 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-maui.mdx
@@ -56,7 +56,7 @@ Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor 
 
 Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor** NuGet パッケージを検索してインストールします。
 
-NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](general-installing-blazor.md) トピックを参照してください。
+NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](./general-installing-blazor.mdx) トピックを参照してください。
 
 ## Ignite UI for Blazor の登録
 
diff --git a/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx b/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx
index d30ef691eb..4309f8eea8 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started-blazor-web-app.mdx
@@ -43,7 +43,7 @@ Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor 
 
 Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。すべての対象プロジェクトを選択してパッケージをインストールし、**IgniteUI.Blazor** NuGet パッケージを検索してインストールします。
 
-NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](general-installing-blazor.md) トピックを参照してください。
+NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](./general-installing-blazor.mdx) トピックを参照してください。
 
 ## Ignite UI for Blazor の登録
 
diff --git a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
index 4aca053406..c53a7f2414 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started-oss.mdx
@@ -140,12 +140,12 @@ Ignite UI for Blazor コンポーネントを razor ページに追加します
 
 </PlatformBlock>
 
-軽量パッケージに含まれるコンポーネントの詳細については、[オープン ソースとプレミアム コンポーネント](general-open-source-vs-premium.md) トピックを参照してください。
+軽量パッケージに含まれるコンポーネントの詳細については、[オープン ソースとプレミアム コンポーネント](./general-open-source-vs-premium.mdx) トピックを参照してください。
 
 
-Grid Lite の機能と構成の詳細については、[Grid Lite の概要](grid-lite/overview.md)トピックを参照してください。
+Grid Lite の機能と構成の詳細については、[Grid Lite の概要](./grid-lite/overview.mdx)トピックを参照してください。
 
 ## その他のリソース
 
-- [オープン ソースとプレミアム コンポーネント](general-open-source-vs-premium.md)
-- [Grid Lite の概要](grid-lite/overview.md)
+- [オープン ソースとプレミアム コンポーネント](./general-open-source-vs-premium.mdx)
+- [Grid Lite の概要](./grid-lite/overview.mdx)
diff --git a/docs/xplat/src/content/jp/components/general-getting-started.mdx b/docs/xplat/src/content/jp/components/general-getting-started.mdx
index 89dfb9a4ae..11da3f4a54 100644
--- a/docs/xplat/src/content/jp/components/general-getting-started.mdx
+++ b/docs/xplat/src/content/jp/components/general-getting-started.mdx
@@ -31,7 +31,7 @@ import gettingStartedBlazorCard from '@xplat-images/general/getting-started-blaz
 
 [`{ProductName}`]({GithubLink}) は、Infragistics による {Platform} 向けの UI ウィジェット、コンポーネント、および Figma UI キットの完全なセットです。開発者は、デスクトップ ブラウザー、モバイル エクスペリエンス、およびプログレッシブ Web アプリ (PWA) 向けのモダンで高パフォーマンスな HTML5 および JavaScript アプリを構築できます。
 
-{ProductName} は、含まれるコンポーネントとサービスに応じて、MIT または商用ライセンスで利用可能な複数のパッケージで構成されています。コンポーネントとそのライセンスの詳細なリストについては、[ライセンス FAQ とインストール](./general-licensing.md)および[オープン ソースとプレミアム](./general-open-source-vs-premium.md) トピックを参照してください。
+{ProductName} は、含まれるコンポーネントとサービスに応じて、MIT または商用ライセンスで利用可能な複数のパッケージで構成されています。コンポーネントとそのライセンスの詳細なリストについては、[ライセンス FAQ とインストール](./general-licensing.mdx)および[オープン ソースとプレミアム](./general-open-source-vs-premium.mdx) トピックを参照してください。
 
 </PlatformBlock>
 
@@ -69,14 +69,14 @@ ig
 ig new <project-name> --framework=react --type=igr-ts --template=side-nav
 ```
 
-ウィザードのウォークスルーと認証アドオン フローについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](general-step-by-step-guide-using-cli.md)を参照してください。コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](general-cli-overview.md)を参照してください。
+コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](./general-cli-overview.mdx)を参照してください。
 
 プロンプト中にグリッド コンポーネントを追加した場合、アプリケーションが実行されると、次のようなものが表示されます。
 
 <Image src={igCliGrid} alt="" />
 
 <DocsAside type="info" title="情報">
-デフォルトでは、Ignite UI CLI は [商用ライセンス](./general-open-source-vs-premium.md#全コンポーネントの比較表)の下にある Ignite UI for React の Grid コンポーネントの Trial バージョンをインストールすることに注意してください。
+デフォルトでは、Ignite UI CLI は [商用ライセンス](./general-open-source-vs-premium.mdx#全コンポーネントの比較表)の下にある Ignite UI for React の Grid コンポーネントの Trial バージョンをインストールすることに注意してください。
 </DocsAside>
 
 あるいは、React チームが推奨する Next.js、Vite、Expo などの一般的なフレームワークを使用することも可能です。以下では、これらの方法のいずれかを使用して Ignite UI for React を利用した React アプリケーションを作成する手順をステップごとに説明します。
@@ -100,7 +100,7 @@ npm create vite@latest
 ### Ignite UI React Grid コンポーネントの追加
 
 ##### パッケージのインストール
-Ignite UI React [**Grid**](grids/data-grid.md) コンポーネントをアプリに追加するには、`igniteui-react-grids` パッケージをインストールする必要があります。
+Ignite UI React [**Grid**](./grids/data-grid.mdx) コンポーネントをアプリに追加するには、`igniteui-react-grids` パッケージをインストールする必要があります。
 
 ```cmd
 npm install igniteui-react-grids --save
@@ -188,7 +188,7 @@ ig
 ig new <project-name> --framework=webcomponents --type=igc-ts --template=side-nav
 ```
 
-ウィザードのウォークスルーと認証アドオン フローについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](general-step-by-step-guide-using-cli.md)を参照してください。コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](general-cli-overview.md)を参照してください。
+コマンド、テンプレート ID、直接認証テンプレートの全リファレンスについては、[CLI の概要](./general-cli-overview.mdx)を参照してください。
 
 ## ポリフィルのインストール
 
@@ -464,19 +464,19 @@ yarn add {PackageSpreadsheet} {PackageCore}
 <PlatformBlock for="WebComponents, React">
 
 ## チャートおよびグラフ
-{ProductName} には、[チャートとグラフ](charts/chart-overview.md)のライブラリが含まれており、65 種類以上のシチャート リーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。
+{ProductName} には、[チャートとグラフ](./charts/chart-overview.mdx)のライブラリが含まれており、65 種類以上のシチャート リーズと組み合わせを通じて、あらゆる種類のデータを魅力的でインタラクティブなグラフとダッシュボードに視覚化できるライブラリです。速度と美しさを追求し、すべてのモダンブラウザーで動作するように設計されており、完全なタッチ操作とインタラクティブ機能により、あらゆるデバイスでレスポンシブなビジュアルをすばやく構築できます。
 
 ## ゲージ
-{ProductName} は、簡単かつ直感的な方法でデータを示すために使用される[ラジアル ゲージ](radial-gauge.md)、[リニア ゲージ](linear-gauge.md)と[バレット グラフ](bullet-graph.md) コンポーネントを提供します。[ラジアル ゲージ](radial-gauge.md)には、定義済みの形状とスケールを作成するためのさまざまなカスタマイズ オプションがあります。[リニア ゲージ](linear-gauge.md)は、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。[バレット グラフ](bullet-graph.md) コンポーネントを使用すると、ダッシュボードで使用されるメーターやゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。
+{ProductName} は、簡単かつ直感的な方法でデータを示すために使用される[ラジアル ゲージ](./radial-gauge.mdx)、[リニア ゲージ](./linear-gauge.mdx)と[バレット グラフ](./bullet-graph.mdx) コンポーネントを提供します。[ラジアル ゲージ](./radial-gauge.mdx)には、定義済みの形状とスケールを作成するためのさまざまなカスタマイズ オプションがあります。[リニア ゲージ](./linear-gauge.mdx)は、スケールおよび 1 つ以上の範囲と比較した値の単純なビューを提供します。1 つのスケール、1 セットの目盛り、および 1 セットのラベルをサポートします。[バレット グラフ](./bullet-graph.mdx) コンポーネントを使用すると、ダッシュボードで使用されるメーターやゲージを単純な棒チャートに置き換えて、データの視覚化を作成できます。
 
 ## マップ
-{ProductName} [地理マップ](geo-map.md) コンポーネントは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータ セットを描画できます。複数のマップ レイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタム マーカーと色を使用して情報を表示できます。
+{ProductName} [地理マップ](./geo-map.mdx) コンポーネントは、アプリケーションで地理データを視覚化する機能を提供します。マーカー、線、多角形、さらにはインタラクティブなビットマップの形状で、多くの地理的位置で構成されるデータ セットを描画できます。複数のマップ レイヤーを地理データでオーバーレイし、特定の地理的位置をマークし、カスタム マーカーと色を使用して情報を表示できます。
 
 ## グリッドと入力
-{ProductName} は、少ない構成でデータをバインドして表示できる複数の[グリッド](grids/grids-header.md) コンポーネントを提供します。[グリッド ライト](grid-lite/overview.md) - MIT ライセンスの下にある軽量グリッド コンポーネント、[データ グリッド](grids/data-grid.md) - 商用ライセンスの下にある機能豊富なグリッド コンポーネント、[リスト](grids/list.md)、[ツリー](grids/tree.md)、さらには [スプレッドシート](spreadsheet-overview.md)の形式で提供されます。
+{ProductName} は、少ない構成でデータをバインドして表示できる複数の[グリッド](./grids/grids-header.mdx) コンポーネントを提供します。[グリッド ライト](./grid-lite/overview.mdx) - MIT ライセンスの下にある軽量グリッド コンポーネント、[データ グリッド](./grids/data-grid.mdx) - 商用ライセンスの下にある機能豊富なグリッド コンポーネント、[リスト](./grids/list.mdx)、[ツリー](./grids/tree.mdx)、さらには [スプレッドシート](./spreadsheet-overview.mdx)の形式で提供されます。
 
 ## ボタン、入力、レイアウト、メニュー
-{ProductName} は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプの[ボタン](inputs/button.md)、[入力](inputs/input.md)、[メニュー](menus/navbar.md)、[レイアウト](layouts/tabs.md)を提供します。[ストーリーブックはこちら](https://igniteui.github.io/igniteui-webcomponents)をご覧くださ。これらのコンポーネントは [Indigo Design System](https://jp.infragistics.com/products/appbuilder/ui-toolkit) に基づいており、[App Builder](https://appbuilder.indigo.design/) によって完全にサポートされており、Figma 用のすぐに使用できる UI キットによって支えられています。
+{ProductName} は、依存関係のないアプローチでカプセル化と再利用可能なコンポーネントの概念を使用して、最新の Web アプリケーションを構築できるようにするさまざまなタイプの[ボタン](./inputs/button.mdx)、[入力](./inputs/input.mdx)、[メニュー](./menus/navbar.mdx)、[レイアウト](./layouts/tabs.mdx)を提供します。[ストーリーブックはこちら](https://igniteui.github.io/igniteui-webcomponents)をご覧くださ。これらのコンポーネントは [Indigo Design System](https://jp.infragistics.com/products/appbuilder/ui-toolkit) に基づいており、[App Builder](https://appbuilder.indigo.design/) によって完全にサポートされており、Figma 用のすぐに使用できる UI キットによって支えられています。
 
 </PlatformBlock>
 
@@ -507,7 +507,7 @@ Ignite UI for Blazor は、NuGet パッケージで提供されます。Blazor 
 
 Visual Studio で、**[ツール]** → **[NuGet パッケージ マネージャー]** → **[ソリューションの NuGet パッケージの管理]** を選択して、NuGet パッケージ マネージャーを開きます。**IgniteUI.Blazor** NuGet パッケージを検索してインストールします。
 
-NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](general-installing-blazor.md) トピックを参照してください。
+NuGet を使用した Ignite UI for Blazor のインストールの詳細については、[Ignite UI for Blazor のインストール](./general-installing-blazor.mdx) トピックを参照してください。
 
 ### Ignite UI for Blazor の登録
 
diff --git a/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx b/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx
index 1d0dbdd944..05cbc18da8 100644
--- a/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx
+++ b/docs/xplat/src/content/jp/components/general-how-to-mcp-e2e.mdx
@@ -43,7 +43,7 @@ CLI MCP と Theming MCP は、2つの独立した STDIO トランスポート MC
 
 このウォークスルーは、**CLI ファースト**のセットアップで最も効果的に機能します。Ignite UI CLI がプロジェクトをスキャフォールディングし、VS Code 用の MCP 構成を自動的に初期設定するためです。
 
-各クライアントの詳細なセットアップ リファレンスが必要な場合は、[Ignite UI CLI MCP](ai/cli-mcp.md) と [Ignite UI Theming MCP](ai/theming-mcp.md) を参照してください。
+各クライアントの詳細なセットアップ リファレンスが必要な場合は、[Ignite UI CLI MCP](./ai/cli-mcp.mdx) と [Ignite UI Theming MCP](./ai/theming-mcp.mdx) を参照してください。
 
 ## ステップ 1: Ignite UI CLI で始める
 
@@ -268,10 +268,10 @@ npx --package igniteui-cli igniteui new my-app --framework=webcomponents
 
 ## 関連トピック
 
-- [Ignite UI を使った AI 支援開発](ai/ai-assisted-development-overview.md)
-- [{ProductName} スキル](ai/skills.md)
-- [Ignite UI CLI MCP](ai/cli-mcp.md)
-- [Ignite UI Theming MCP](ai/theming-mcp.md)
+- [Ignite UI を使った AI 支援開発](./ai/ai-assisted-development-overview.mdx)
+- [{ProductName} スキル](./ai/skills.mdx)
+- [Ignite UI CLI MCP](./ai/cli-mcp.mdx)
+- [Ignite UI Theming MCP](./ai/theming-mcp.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/general-installing-blazor.mdx b/docs/xplat/src/content/jp/components/general-installing-blazor.mdx
index 81bcdb1993..69310004b4 100644
--- a/docs/xplat/src/content/jp/components/general-installing-blazor.mdx
+++ b/docs/xplat/src/content/jp/components/general-installing-blazor.mdx
@@ -22,7 +22,7 @@ NuGet を使用して Ignite UI for Blazor をインストールするには、
 - [Ignite NET CLI を使用する場合](#net-cli-を使用する場合)
 - [パッケージ マネージャーを使用する場合](#パッケージ-マネージャーを使用する場合)
 
-ライセンスを取得したユーザーは、[Infragistics プライベート NuGet フィード](./general-nuget-feed.md)で提供されている公式のライセンス付き Ignite UI for Blazor NuGet パッケージを使用する必要があります。
+ライセンスを取得したユーザーは、[Infragistics プライベート NuGet フィード](./general-nuget-feed.mdx)で提供されている公式のライセンス付き Ignite UI for Blazor NuGet パッケージを使用する必要があります。
 
 <DocsAside type="info" title="情報">
 トライアル ユーザーは、[NuGet.org](https://www.nuget.org/packages/IgniteUI.Blazor) にある **IgniteUI.Blazor** トライアル NuGet パッケージをインストールできます。
@@ -39,7 +39,7 @@ NuGet を使用して Ignite UI for Blazor をインストールするには、
 <Image src={nugetPackageManagerBrowse} alt="nuget-package-manager-browse" />
 
 <DocsAside type="info" title="情報">
-Infragistics パッケージ ソースがない場合、追加するには[ Infragistics NuGet フィード トピック](./general-nuget-feed.md)を参照してください。
+Infragistics パッケージ ソースがない場合、追加するには[ Infragistics NuGet フィード トピック](./general-nuget-feed.mdx)を参照してください。
 </DocsAside>
 
 ## .NET CLI を使用する場合
diff --git a/docs/xplat/src/content/jp/components/general-licensing.mdx b/docs/xplat/src/content/jp/components/general-licensing.mdx
index 0dca891e5f..747639f166 100644
--- a/docs/xplat/src/content/jp/components/general-licensing.mdx
+++ b/docs/xplat/src/content/jp/components/general-licensing.mdx
@@ -19,7 +19,7 @@ import azureCiAddTokenVariable1 from '@xplat-images/general/azure-ci-add-token-v
 
 {ProductName} は、MIT または商用ライセンスで利用可能なパッケージで構成されています。このライセンス モデルは、プロジェクトに組み込む特定のコンポーネント、モジュール、およびサービスに応じて、商用利用と寛容なオープン ソース利用の両方をサポートします。
 
-どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープン ソースとプレミアム](./general-open-source-vs-premium.md) トピックに詳しく記載されています。
+どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープン ソースとプレミアム](./general-open-source-vs-premium.mdx) トピックに詳しく記載されています。
 
 ## {ProductName} 使用許諾契約
 商用ライセンス対象のコンポーネントには、購入・使用に関するすべての[使用条件](https://jp.infragistics.com/legal/license/igultimate-la)が適用されます。
@@ -40,7 +40,7 @@ import azureCiAddTokenVariable1 from '@xplat-images/general/azure-ci-add-token-v
 ## {ProductName} npm パッケージ - プライベート npm フィードの使用
 Npm は Node.js ランタイム環境で使用する一般的なデフォルト パッケージ マネージャーです。プロジェクトに依存するパッケージをすばやく簡単に処理できます。npm の使用方法の詳細については、[npm ヘルプ](https://docs.npmjs.com/)を参照してください。
 
-Infragistics {ProductName} は npm パッケージで提供され、[いくつかの簡単な手順](./general-getting-started.md)でプロジェクトの依存関係として追加できます。この方法を選択する場合、npm を構成する必要はありません。商用ライセンスのパッケージをインストールする場合、製品の **{ProductName} のトライアル版バージョン** の使用を開始します。
+Infragistics {ProductName} は npm パッケージで提供され、[いくつかの簡単な手順](./general-getting-started.mdx)でプロジェクトの依存関係として追加できます。この方法を選択する場合、npm を構成する必要はありません。商用ライセンスのパッケージをインストールする場合、製品の **{ProductName} のトライアル版バージョン** の使用を開始します。
 
 <DocsAside type="info" title="情報">
 トライアル版の使用を開始するとはどういう意味ですか？これは、Web ビューの一部に**ウォーターマーク**が付いた製品のバージョンを使用することを意味します。たとえば、1 か月など、有効期限が切れるまでの一定期間、ライセンス パッケージを使用することを意味するものではありません。
diff --git a/docs/xplat/src/content/jp/components/general-open-source-vs-premium.mdx b/docs/xplat/src/content/jp/components/general-open-source-vs-premium.mdx
index 6d6852ec76..d23fe7fafc 100644
--- a/docs/xplat/src/content/jp/components/general-open-source-vs-premium.mdx
+++ b/docs/xplat/src/content/jp/components/general-open-source-vs-premium.mdx
@@ -17,7 +17,7 @@ import Badge from 'igniteui-astro-components/components/mdx/Badge.astro';
 
 ## オープン ソース コンポーネント
 
-MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。[グリッド ライト](../components/grid-lite/overview.md)、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます。([全コンポーネントの比較表](#全コンポーネントの比較表))。
+MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。[グリッド ライト](../components/grid-lite/overview.mdx)、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます。([全コンポーネントの比較表](#全コンポーネントの比較表))。
 
 すべてのオープン ソース コンポーネントは、トピックのヘッダーに次のようにマークされています。<Badge variant="opensource" />
 
@@ -32,13 +32,13 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
 <PlatformBlock for="Blazor">
 
 
-- [データ グリッド](../components/grids/data-grid.md)、[階層グリッド](../components/grids/hierarchical-grid/overview.md)、[ツリー グリッド](../components/grids/tree-grid/overview.md)、[ピボット グリッド](../components/grids/pivot-grid/overview.md)
-- [ドック マネージャー](../components/layouts/dock-manager.md)
-- [チャート ライブラリ](../components/charts/chart-overview.md)
-- [マップ ライブラリ](../components/geo-map.md)
-- [Excel ライブラリ](../components/excel-library.md)
-- ゲージ - [ブレットグラフ](../components/bullet-graph.md)、[リニア ゲージ](../components/linear-gauge.md) および [ラジアル ゲージ](../components/radial-gauge.md)
-- [ツールバー](../components/menus/toolbar.md)
+- [データ グリッド](../components/grids/data-grid.mdx)、[階層グリッド](../components/grids/hierarchical-grid/overview.mdx)、[ツリー グリッド](../components/grids/tree-grid/overview.mdx)、[ピボット グリッド](../components/grids/pivot-grid/overview.mdx)
+- [ドック マネージャー](../components/layouts/dock-manager.mdx)
+- [チャート ライブラリ](../components/charts/chart-overview.mdx)
+- [マップ ライブラリ](../components/geo-map.mdx)
+- [Excel ライブラリ](../components/excel-library.mdx)
+- ゲージ - [ブレットグラフ](../components/bullet-graph.mdx)、[リニア ゲージ](../components/linear-gauge.mdx) および [ラジアル ゲージ](../components/radial-gauge.mdx)
+- [ツールバー](../components/menus/toolbar.mdx)
 
 </PlatformBlock>
 
@@ -46,14 +46,14 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
 <PlatformBlock for="React, WebComponents">
 
 
-- [データ グリッド](../components/grids/data-grid.md)、[階層グリッド](../components/grids/hierarchical-grid/overview.md)、[ツリー グリッド](../components/grids/tree-grid/overview.md)、[ピボット グリッド](../components/grids/pivot-grid/overview.md)
-- [ドック マネージャー](../components/layouts/dock-manager.md)
-- [チャート ライブラリ](../components/charts/chart-overview.md)
-- [マップ ライブラリ](../components/geo-map.md)
-- [スプレッドシート](../components/spreadsheet-overview.md)
-- [Excel ライブラリ](../components/excel-library.md)
-- ゲージ - [ブレットグラフ](../components/bullet-graph.md)、[リニア ゲージ](../components/linear-gauge.md) および [ラジアル ゲージ](../components/radial-gauge.md)
-- [ツールバー](../components/menus/toolbar.md)
+- [データ グリッド](../components/grids/data-grid.mdx)、[階層グリッド](../components/grids/hierarchical-grid/overview.mdx)、[ツリー グリッド](../components/grids/tree-grid/overview.mdx)、[ピボット グリッド](../components/grids/pivot-grid/overview.mdx)
+- [ドック マネージャー](../components/layouts/dock-manager.mdx)
+- [チャート ライブラリ](../components/charts/chart-overview.mdx)
+- [マップ ライブラリ](../components/geo-map.mdx)
+- [スプレッドシート](../components/spreadsheet-overview.mdx)
+- [Excel ライブラリ](../components/excel-library.mdx)
+- ゲージ - [ブレットグラフ](../components/bullet-graph.mdx)、[リニア ゲージ](../components/linear-gauge.mdx) および [ラジアル ゲージ](../components/radial-gauge.mdx)
+- [ツールバー](../components/menus/toolbar.mdx)
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/general-step-by-step-guide-using-cli.mdx b/docs/xplat/src/content/jp/components/general-step-by-step-guide-using-cli.mdx
index e84ef4bae9..fb7303fd9b 100644
--- a/docs/xplat/src/content/jp/components/general-step-by-step-guide-using-cli.mdx
+++ b/docs/xplat/src/content/jp/components/general-step-by-step-guide-using-cli.mdx
@@ -17,7 +17,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 Ignite UI CLI のステップバイステップ モードは、{ProductName} プロジェクトのプロジェクト作成、テンプレートの選択、テーマ設定、コンポーネント ビューの追加をガイドするインタラクティブ ウィザードです。非インタラクティブな `ig new` および `ig add` コマンドと同じ操作をカバーしますが、すべての引数を事前に指定する必要はなく、各ステップでプロンプトが表示されます。
 
-ステップバイステップ モードは、スクリプトや非インタラクティブな使用をサポートしていません。その場合は、明示的な引数を指定して `ig new` および `ig add` コマンドを使用してください。ウィザードは `Inquirer.js` を使用しています。互換性については、[サポートされているターミナル](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) を参照してください。完全な CLI リファレンスについては、[Ignite UI CLI の概要](general-cli-overview.md) を参照してください。
+ステップバイステップ モードは、スクリプトや非インタラクティブな使用をサポートしていません。その場合は、明示的な引数を指定して `ig new` および `ig add` コマンドを使用してください。ウィザードは `Inquirer.js` を使用しています。互換性については、[サポートされているターミナル](https://github.com/SBoudrias/Inquirer.js#support-os-terminals) を参照してください。完全な CLI リファレンスについては、[Ignite UI CLI の概要](general-cli-overview.mdx) を参照してください。
 
 ウィザードを起動するには、以下を実行します:
 
@@ -88,7 +88,7 @@ ig new
 アプリケーションのテーマを選択します:
 
 - **default** オプションには、デフォルトの {ProductName} テーマを含む事前コンパイル済みの CSS ファイルが含まれます。
-- **custom** オプションは、[テーマ API](./themes/overview.md) を使用した Sass ベースのカラー パレットとテーマ設定を生成します。
+- **custom** オプションは、[テーマ API](./themes/overview.mdx) を使用した Sass ベースのカラー パレットとテーマ設定を生成します。
 
 ### AI ツールの設定
 
@@ -126,7 +126,7 @@ ig new
 ig new my-app --framework=react --type=igr-ts --template=side-nav --assistants vscode --agents copilot claude
 ```
 
-使用可能なフラグ値の詳細については、[Ignite UI CLI の概要](general-cli-overview.md#ai-configuration-during-project-creation) を参照してください。
+使用可能なフラグ値の詳細については、[Ignite UI CLI の概要](general-cli-overview.mdx#ai-configuration-during-project-creation) を参照してください。
 
 ### 完了または続行
 
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx
index d7a1165818..94e3579e83 100644
--- a/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-model.mdx
@@ -39,7 +39,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 |<ApiLink type="GeographicPolylineSeries" />|<ApiLink type="GeographicShapeSeries" member="shapeMemberPath" label="ShapeMemberPath" />|線の地理的座標を含む <ApiLink type="GeographicMap" member="dataSource" label="DataSource" /> 項目のデータ列の名前を指定します。このプロパティは、x プロパティと y プロパティを持つオブジェクトの配列の配列にマップする必要があります。 |
 
 ## コード スニペット
-以下のコードは、<ApiLink type="GeographicSymbolSeries" /> を、経度と緯度の座標を使用して格納された世界の一部の都市の地理的位置を含むカスタム データ モデルにバインドする方法を示します。また、[WorldUtility](geo-map-resources-world-util.md) を使用してこれらの場所間の最短の地理的経路をプロットするために <ApiLink type="GeographicPolylineSeries" /> を使用します。
+以下のコードは、<ApiLink type="GeographicSymbolSeries" /> を、経度と緯度の座標を使用して格納された世界の一部の都市の地理的位置を含むカスタム データ モデルにバインドする方法を示します。また、[WorldUtility](./geo-map-resources-world-util.mdx) を使用してこれらの場所間の最短の地理的経路をプロットするために <ApiLink type="GeographicPolylineSeries" /> を使用します。
 
 <PlatformBlock for="Angular">
 
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx
index d97ba39ffe..134cb98b71 100644
--- a/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-binding-data-overview.mdx
@@ -19,11 +19,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 ## データ ソースの種類
 以下のセクションでは、ジオグラフィック マップ コンポーネントにバインドできるいくつかのデータ ソースをリストします。
 
-- [シェープ ファイルのバインド](geo-map-binding-shp-file.md)
-- [JSON ファイルのバインド](geo-map-binding-data-json-points.md)
-- [CSV ファイルのバインド](geo-map-binding-data-csv.md)
-- [データ モデルのバインド](geo-map-binding-data-model.md)
-- [複数ソースのバインド](geo-map-binding-multiple-sources.md)
+- [シェープ ファイルのバインド](./geo-map-binding-shp-file.mdx)
+- [JSON ファイルのバインド](./geo-map-binding-data-json-points.mdx)
+- [CSV ファイルのバインド](./geo-map-binding-data-csv.mdx)
+- [データ モデルのバインド](./geo-map-binding-data-model.mdx)
+- [複数ソースのバインド](./geo-map-binding-multiple-sources.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
index ac152a3e36..37c32d2ebe 100644
--- a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-shapes.mdx
@@ -26,7 +26,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-このトピックでは、マップ コンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、<ApiLink type="ShapefileRecord" /> クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。<ApiLink type="ShapefileRecord" /> オブジェクトの詳細については、[シェープ ファイルのバインディング](geo-map-binding-shp-file.md)のトピックを参照してください。
+このトピックでは、マップ コンポーネントに複数の地理的シリーズを表示する方法について段階的に説明します。すべての地理的シリーズは、<ApiLink type="ShapefileRecord" /> クラスを使用して形状ファイルからロードされた地理空間データに従ってプロットします。<ApiLink type="ShapefileRecord" /> オブジェクトの詳細については、[シェープ ファイルのバインディング](./geo-map-binding-shp-file.mdx)のトピックを参照してください。
 
 - <ApiLink type="GeographicSymbolSeries" /> – 主要都市の場所を表示します。
 - <ApiLink type="GeographicPolylineSeries" /> – 主要ポート間のルートを表示します。
diff --git a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx
index 7d3ceb938f..b3e68fc226 100644
--- a/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-binding-multiple-sources.mdx
@@ -36,7 +36,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## データ ソースの作成
 
-{ProductName} マップに表示するすべての地理的シリーズのデータ​​ソースを作成します。たとえば、[WorldConnections](geo-map-resources-world-connections.md) スクリプトを使用できます。
+{ProductName} マップに表示するすべての地理的シリーズのデータ​​ソースを作成します。たとえば、[WorldConnections](./geo-map-resources-world-connections.mdx) スクリプトを使用できます。
 
 
 <PlatformBlock for="Angular">
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx
index d8268c076b..cc15344bb5 100644
--- a/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-display-esri-imagery.mdx
@@ -110,7 +110,7 @@ protected override void OnInitialized()
 </PlatformBlock>
 
 ## Esri ユーティリティ
-また、Esri 画像サーバーのすべてのスタイルを定義する [EsriUtility](geo-map-resources-esri.md) を使用することもできます。
+また、Esri 画像サーバーのすべてのスタイルを定義する [EsriUtility](./geo-map-resources-esri.mdx) を使用することもできます。
 
 <PlatformBlock for="Angular">
 
diff --git a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
index 8f8303eb97..cd0e01216d 100644
--- a/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-display-heat-imagery.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {ProductName} マップ コントロールには、Shape ファイルをタイル シリーズにロードして地理空間データをロードすることにより、<ApiLink type="ShapefileRecord" /> によって生成される `ShapeFileRecord` を使用して、ヒートマップ画像を表示する機能があります。
 
-このトピックを読み進めるための前提条件として、[シェープ ファイルを地理的データにバインディング](geo-map-binding-shp-file.md)をお読みください。
+このトピックを読み進めるための前提条件として、[シェープ ファイルを地理的データにバインディング](./geo-map-binding-shp-file.mdx)をお読みください。
 
 ## {Platform} ヒート画像の表示の例
 
diff --git a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx
index be86ddf6a4..9b7f7dec45 100644
--- a/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-resources-world-connections.mdx
@@ -14,7 +14,7 @@ import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBloc
 
 # {Platform} ワールド コネクション
 
-リソース トピックは、空港の位置、飛行経路、および地理的なグリッド線を生成するためのデータユーティリティの実装を提供します。これらのデータ ソースを独自の地理データを作成するための参照点として使用できます。このユーティリティは [WorldUtil](geo-map-resources-world-util.md) と [WorldLocations](geo-map-resources-world-locations.md) スクリプトに依存していることに注意してください。
+リソース トピックは、空港の位置、飛行経路、および地理的なグリッド線を生成するためのデータユーティリティの実装を提供します。これらのデータ ソースを独自の地理データを作成するための参照点として使用できます。このユーティリティは [WorldUtil](./geo-map-resources-world-util.mdx) と [WorldLocations](./geo-map-resources-world-locations.mdx) スクリプトに依存していることに注意してください。
 
 ## コード スニペット
 
diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
index a01310a07b..0eb17a4c3e 100644
--- a/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-shape-files-reference.mdx
@@ -84,7 +84,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 このトピックに関連する追加情報については、以下のトピックを参照してください。
 
-- [シェープファイルのバインディング](geo-map-binding-shp-file.md)
+- [シェープファイルのバインディング](./geo-map-binding-shp-file.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx b/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx
index a43f3cb019..c83f5413ac 100644
--- a/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-shape-styling.mdx
@@ -62,7 +62,7 @@ import { IgcShapefileRecord } from 'igniteui-webcomponents-core';
 
 </PlatformBlock>
 
-次のコード例は、シェイプ スタイリングを設定する 4 つの異なる方法を提供する[シェイプ スタイリング ユーティリティ](geo-map-resources-shape-styling-utility.md) ファイルを使用していることに注意してください。
+次のコード例は、シェイプ スタイリングを設定する 4 つの異なる方法を提供する[シェイプ スタイリング ユーティリティ](./geo-map-resources-shape-styling-utility.mdx) ファイルを使用していることに注意してください。
 - [シェイプ比較スタイリング](#シェイプ比較スタイリング)
 - [シェイプ ランダム スタイリング](#シェイプ-ランダム-スタイリング)
 - [シェイプ範囲スタイリング](#シェイプ範囲スタイリング)
diff --git a/docs/xplat/src/content/jp/components/geo-map-type-series.mdx b/docs/xplat/src/content/jp/components/geo-map-type-series.mdx
index 2c48afb5cb..d3f1045da4 100644
--- a/docs/xplat/src/content/jp/components/geo-map-type-series.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map-type-series.mdx
@@ -24,13 +24,13 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {Platform} 地理マップ コンポーネントは、以下の種類の地理的シリーズをサポートします。
 
-- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
-- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
-- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
-- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
-- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
-- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
-- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
+- [散布図記号シリーズの使用](./geo-map-type-scatter-symbol-series.mdx)
+- [散布図比例シリーズの使用](./geo-map-type-scatter-bubble-series.mdx)
+- [散布等高線シリーズの使用](./geo-map-type-scatter-contour-series.mdx)
+- [散布図密度シリーズの使用](./geo-map-type-scatter-density-series.mdx)
+- [散布エリア シリーズの使用](./geo-map-type-scatter-area-series.mdx)
+- [シェイプ ポリゴン シリーズの使用](./geo-map-type-shape-polygon-series.mdx)
+- [シェイプ ポリライン シリーズの使用](./geo-map-type-shape-polyline-series.mdx)
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/components/geo-map.mdx b/docs/xplat/src/content/jp/components/geo-map.mdx
index 64923ac6a8..f1d5f56f67 100644
--- a/docs/xplat/src/content/jp/components/geo-map.mdx
+++ b/docs/xplat/src/content/jp/components/geo-map.mdx
@@ -207,15 +207,15 @@ ModuleManager.register(
 
 関連する {Platform} マップ機能の詳細については、以下のトピックを参照してください。
 
-- [地理マップのナビゲーション](geo-map-navigation.md)
-
-- [散布図記号シリーズの使用](geo-map-type-scatter-symbol-series.md)
-- [散布図比例シリーズの使用](geo-map-type-scatter-bubble-series.md)
-- [散布等高線シリーズの使用](geo-map-type-scatter-contour-series.md)
-- [散布図密度シリーズの使用](geo-map-type-scatter-density-series.md)
-- [散布エリア シリーズの使用](geo-map-type-scatter-area-series.md)
-- [シェイプ ポリゴン シリーズの使用](geo-map-type-shape-polygon-series.md)
-- [シェイプ ポリライン シリーズの使用](geo-map-type-shape-polyline-series.md)
+- [地理マップのナビゲーション](./geo-map-navigation.mdx)
+
+- [散布図記号シリーズの使用](./geo-map-type-scatter-symbol-series.mdx)
+- [散布図比例シリーズの使用](./geo-map-type-scatter-bubble-series.mdx)
+- [散布等高線シリーズの使用](./geo-map-type-scatter-contour-series.mdx)
+- [散布図密度シリーズの使用](./geo-map-type-scatter-density-series.mdx)
+- [散布エリア シリーズの使用](./geo-map-type-scatter-area-series.mdx)
+- [シェイプ ポリゴン シリーズの使用](./geo-map-type-shape-polygon-series.mdx)
+- [シェイプ ポリライン シリーズの使用](./geo-map-type-shape-polyline-series.mdx)
 
 ## API リファレンス
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
index 680fef26c4..d49dd8088e 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/binding.mdx
@@ -195,10 +195,10 @@ return (
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](./column-configuration.mdx)
+- [ソート](./sorting.mdx)
+- [フィルタリング](./filtering.mdx)
+- [テーマ設定とスタイル設定](./theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
index b5fe4a4dbe..c335454cf4 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/cell-template.mdx
@@ -266,10 +266,10 @@ export interface GridLiteCellContext<
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](column-configuration.mdx)
+- [ソート](sorting.mdx)
+- [フィルタリング](filtering.mdx)
+- [テーマ設定とスタイル設定](theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
index 80c48978b1..2bb342a497 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/column-configuration.mdx
@@ -333,10 +333,10 @@ return (
 
 ## その他のリソース
 
-- [データ バインディング](binding.md)
-- [ソート](sorting.md)
-- [フィルタリング](filtering.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [データ バインディング](./binding.mdx)
+- [ソート](./sorting.mdx)
+- [フィルタリング](./filtering.mdx)
+- [テーマ設定とスタイル設定](./theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
index c19074f237..c497ddfb5c 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/filtering.mdx
@@ -583,8 +583,8 @@ grid.DataPipelineConfiguration = new DataPipelineConfiguration
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [ソート](sorting.md)
+- [列の構成](./column-configuration.mdx)
+- [ソート](./sorting.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
index cae3302c46..2afc775f74 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/header-template.mdx
@@ -124,9 +124,9 @@ return (
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [セル テンプレート](cell-template.md)
-- [テーマ設定とスタイル設定](theming.md)
+- [列の構成](./column-configuration.mdx)
+- [セル テンプレート](./cell-template.mdx)
+- [テーマ設定とスタイル設定](./theming.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
index 5125127d31..8d374d2d8b 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/overview.mdx
@@ -31,7 +31,7 @@ Grid Lite は無料のオープン ソースの JavaScript データ グリッ
 
 ## 無料 {Platform} データ グリッドで利用可能な機能
 
-無料のオープン ソース {Platform} Grid Lite には、次の列ベースの機能が含まれています: ソート、フィルタリング、非表示、サイズ変更、およびさまざまな事前定義されたデータ タイプ。行仮想化を使用することで、非常に高速なパフォーマンスが実現されます。さらに、コンポーネントはキーボード ナビゲーションと [Ignite UI のテーマ フレームワーク](../themes/overview.md)を通じたテーマ化をサポートしています。
+無料のオープン ソース {Platform} Grid Lite には、次の列ベースの機能が含まれています: ソート、フィルタリング、非表示、サイズ変更、およびさまざまな事前定義されたデータ タイプ。行仮想化を使用することで、非常に高速なパフォーマンスが実現されます。さらに、コンポーネントはキーボード ナビゲーションと [Ignite UI のテーマ フレームワーク](../themes/overview.mdx)を通じたテーマ化をサポートしています。
 
 <PlatformBlock for="React, WebComponents">
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
index f5430b148a..499feea8d3 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/sorting.mdx
@@ -691,8 +691,8 @@ grid.DataPipelineConfiguration = new DataPipelineParams
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [フィルタリング](filtering.md)
+- [列の構成](./column-configuration.mdx)
+- [フィルタリング](./filtering.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
index 4bb2fcbdf0..d7da566be3 100644
--- a/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
+++ b/docs/xplat/src/content/jp/components/grid-lite/theming.mdx
@@ -46,7 +46,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 {GridLiteTitle} パッケージに付属するデフォルト テーマに加えて、別の CSS カスタム プロパティ セットを使用することで、データ グリッドの外観と操作感をさらにカスタマイズできます。
 
-詳細については、[テーマ設定](../grids/theming-grid.md)のトピックを参照してください。
+詳細については、[テーマ設定](../grids/theming-grid.mdx)のトピックを参照してください。
 
 ```css
 .grid-sample {
@@ -89,9 +89,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## その他のリソース
 
-- [列の構成](column-configuration.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
+- [列の構成](./column-configuration.mdx)
+- [フィルタリング](./filtering.mdx)
+- [ソート](./sorting.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx
index b9f615f035..d578264f13 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/advanced-filtering.mdx
@@ -356,7 +356,7 @@ igx-advanced-filtering-dialog {
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。
+コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。
 </DocsAside>
 
 ```scss
@@ -446,12 +446,12 @@ $custom-drop-down: drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。
+`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.mdx)のトピックを参照してください。
 </DocsAside>
 
 ### スキーマの使用
 
-テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
 
 すべてのコンポーネント (この場合は <ApiLink type="variable-_light-grid" label="light-grid" kind="sass" module="index.html" />、<ApiLink type="variable-_light-button" label="light-button" kind="sass" module="index.html" />、<ApiLink type="variable-_light-button-group" label="light-button-group" kind="sass" module="index.html" />、<ApiLink type="variable-_light-chip" label="light-chip" kind="sass" module="index.html" />、<ApiLink type="variable-_light-input-group" label="light-input-group" kind="sass" module="index.html" /> および <ApiLink type="variable-_light-drop-down" label="light-drop-down" kind="sass" module="index.html" />) に提供されている 2 つの定義済みスキーマのいずれかを拡張します。
 
@@ -568,7 +568,7 @@ $custom-drop-down: drop-down-theme(
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <PlatformBlock for="WebComponents">
@@ -609,16 +609,16 @@ $custom-drop-down: drop-down-theme(
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [フィルタリング](filtering.md)
-- [Excel スタイル フィルタリング](excel-style-filtering.md)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [フィルタリング](filtering.mdx)
+- [Excel スタイル フィルタリング](excel-style-filtering.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx
index d7ecaba5e6..63da838197 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/batch-editing.mdx
@@ -427,7 +427,7 @@ export class GridBatchEditingSampleComponent {
 <ComponentBlock for="Grid">
 ## Remote Paging with Batch Editing Demo
 
-[Check out the full demo configuration](remote-data-operations.md#remote-paging-with-batch-editing)
+[Check out the full demo configuration](remote-data-operations.mdx#remote-paging-with-batch-editing)
 
 <Sample src="/{ComponentSample}/data-batch-editing-remote" height={620} alt="{Platform} {ComponentTitle} Remote Paging and Batch Editing Example" />
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx
index 4641ceebdc..99ab0a03ee 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-editing.mdx
@@ -206,7 +206,7 @@ public updateCell() {
 
 ### セル編集テンプレート
 
-デフォルトのセル編集テンプレートの詳細については、[編集トピック](editing.md#テンプレートの編集)を参照してください。
+デフォルトのセル編集テンプレートの詳細については、[編集トピック](editing.mdx#テンプレートの編集)を参照してください。
 
 <PlatformBlock for="Angular">
 セルが編集モードのときに適用されるカスタム テンプレートを提供する場合は、`CellTemplateDirective` を使用できます。これを行うには、`CellEditor` ディレクティブでマークされた **ng-template** を渡し、カスタムコントロールをセルの `EditValue` に適切にバインドする必要があります。
@@ -235,12 +235,12 @@ public updateCell() {
 </igc-column>
 ```
 
-このコードは、`Race`、`Class`、および `Alignment` 列のセルに [SelectComponent](../select.md) を実装する以下のサンプルで使用されています。
+このコードは、`Race`、`Class`、および `Alignment` 列のセルに [SelectComponent](../select.mdx) を実装する以下のサンプルで使用されています。
 
 <Sample src="/{ComponentSample}/cell-selection-style" height={625} alt="{Platform} {ComponentTitle} Select の例" />
 
 <DocsAside type="info" title="情報">
-編集モードでセルの `EditValue` に加えられた変更は、終了時に適切な[編集イベント](editing.md#イベントの引数とシーケンス)をトリガーし、トランザクションが有効な場合はトランザクション状態に適用されます。
+編集モードでセルの `EditValue` に加えられた変更は、終了時に適切な[編集イベント](editing.mdx#イベントの引数とシーケンス)をトリガーし、トランザクションが有効な場合はトランザクション状態に適用されます。
 </DocsAside>
 
 <DocsAside type="info" title="情報">
@@ -993,7 +993,7 @@ row.delete();
 この例では、`CellEdit` イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします。
 
 <PlatformBlock for="Angular">
-また、[Toast](../../notifications/toast.md) を使用してカスタム エラーメッセージを表示します。
+また、[Toast](../../notifications/toast.mdx) を使用してカスタム エラーメッセージを表示します。
 
 </PlatformBlock>
 
@@ -1299,7 +1299,7 @@ public handleCellEdit(event: IgrGridEditEventArgs): void {
 ## スタイル設定
 
 <PlatformBlock for="WebComponents, Blazor, React">
-事前定義されたテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)を設定することでグリッドをさらにカスタマイズできます。
+事前定義されたテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)を設定することでグリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <ComponentBlock for="Grid">
@@ -1402,11 +1402,11 @@ Then set the related CSS properties for that class:
 
 
 <PlatformBlock for="Angular">
-The <ApiLink type="{ComponentName}" /> allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.md). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide range of properties, which allow users to style many different aspects of the grid.
+The <ApiLink type="{ComponentName}" /> allows for its cells to be styled through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide range of properties, which allow users to style many different aspects of the grid.
 
 In the below steps, we are going to go over how you can style the grid's cell in edit mode and how you can scope those styles.
 
-In order to use the [Ignite UI Theming Library](../themes/styles.md), we must first import the theme `index` file in our global styles:
+In order to use the [Ignite UI Theming Library](../themes/styles.mdx), we must first import the theme `index` file in our global styles:
 
 
 ### Importing Style Library
@@ -1422,7 +1422,7 @@ Now we can make use of all of the functions exposed by the {ProductName} theme e
 
 ### Defining a Palette
 
-After we've properly imported the index file, we create a custom palette that we can use. Let's define two colors that we like and use them to build a palette with [igx-palette](../themes/palettes.md):
+After we've properly imported the index file, we create a custom palette that we can use. Let's define two colors that we like and use them to build a palette with [igx-palette](../themes/palettes.mdx):
 
 ```scss
 $white: #fff;
@@ -1461,7 +1461,7 @@ In order for the custom theme to affect only our specific component, we can move
 This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), our styles will be applied only to our custom component.
 
  <DocsAside type="info" title="情報">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info" title="情報">
@@ -1479,13 +1479,17 @@ This way, due to {Platform}'s [ViewEncapsulation](https://angular.io/api/core/Co
 
 ### Styling Demo
 
-In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [igx-input-group](../input-group.md#styling), [igx-datepicker](../date-picker.md#styling) & [igx-checkbox](../checkbox.md#styling)
+In addition to the steps above, we can also style the controls that are used for the cells' editing templates: [igx-input-group](../input-group.mdx#styling), [igx-datepicker](../date-picker.mdx#styling) & [igx-checkbox](../checkbox.mdx#styling)
 
 <Sample src="/{ComponentSample}/editing-style" height={700} alt="{Platform} {ComponentTitle} Editing Style Example" />
 
 </PlatformBlock>
 
-`{ComponentName}` で [{ProductName} テーマ ライブラリ](../themes/styles.md) を使用してセルのスタイルを設定できます。グリッドの <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。
+<PlatformBlock for="Angular">
+
+`{ComponentName}` で [{ProductName} テーマ ライブラリ](../themes/styles.mdx) を使用してセルのスタイルを設定できます。グリッドの <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、ユーザーがグリッドのさまざまな側面をスタイル設定できる広範なプロパティを公開します。
+
+</PlatformBlock>
 
 </PlatformBlock>
 
@@ -1500,34 +1504,34 @@ In addition to the steps above, we can also style the controls that are used for
 
 <PlatformBlock for="Angular">
 
-インデックス ファイルをインポート後、カスタム パレットを作成します。好きな 2 つの色を定義し、それらを使用して [igx-palette](../themes/palettes.md) でパレットを作成しましょう。
+インデックス ファイルをインポート後、カスタム パレットを作成します。好きな 2 つの色を定義し、それらを使用して [igx-palette](../themes/palettes.mdx) でパレットを作成しましょう。
 
 
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 <ComponentBlock for=" HierarchicalGrid">
-[Searching](search.md)
+[Searching](search.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor, WebComponents, React">
 <ComponentBlock for="Grid">
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx
index 0b334b4e61..e0fd686a60 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/cell-selection.mdx
@@ -286,7 +286,7 @@ expectedData = [
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <ComponentBlock for="Grid">
@@ -438,7 +438,7 @@ $custom-grid-theme: grid-theme(
 ```
 
  <DocsAside type="info" title="情報">
- コンポーネントが [Emulated ViewEncapsulation](../themes/styles.md#表示のカプセル化) を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [Emulated ViewEncapsulation](../themes/styles.mdx#表示のカプセル化) を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  アプリケーション内に存在する可能性のある他のグリッドに影響を与えないように、スタイルを `:host` セレクターの下で範囲指定します。
  </DocsAside>
 
@@ -471,15 +471,15 @@ $custom-grid-theme: grid-theme(
 ## その他のリソース
 
 <ComponentBlock for="Grid, HierarchicalGrid">
-- [選択](selection.md)
-- [行選択](row-selection.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [仮想化とパフォーマンス](virtualization.md)
+- [選択](selection.mdx)
+- [行選択](row-selection.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx
index 8926a893bb..0b60838655 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/clipboard-interactions.mdx
@@ -54,7 +54,7 @@ IE 11のセルを**コピー**するためには、キーボード選択を使
 
 <PlatformBlock for="Angular">
 <ComponentBlock for="Grid">
-You can use a custom paste handler in order to configure **paste** behavior, have a look at our [Paste from Excel topic](paste-excel.md).
+You can use a custom paste handler in order to configure **paste** behavior, have a look at our [Paste from Excel topic](paste-excel.mdx).
 </ComponentBlock>
 
 </PlatformBlock>
@@ -82,15 +82,15 @@ Excel は、タブで区切られたテキスト (タブ区切り `/t`) を自
 ## Additional Resources
 
 <ComponentBlock for="Grid">
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Selection](selection.md)
-- [Virtualization and Performance](virtualization.md)
-- [Multi-column headers](multi-column-headers.md)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Selection](selection.mdx)
+- [Virtualization and Performance](virtualization.mdx)
+- [Multi-column headers](multi-column-headers.mdx)
 </ComponentBlock>
 
 Our community is active and always welcoming to new ideas.
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx
index fbd165ee43..1c84541619 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/collapsible-column-groups.mdx
@@ -58,9 +58,9 @@ npm install igniteui-react-grids
 ```
 </PlatformBlock>
 
-{ProductName} については、[はじめに](../../general-getting-started.md) トピックををご覧ください。
+{ProductName} については、[はじめに](../../general-getting-started.mdx) トピックををご覧ください。
 
-そのため、[複数列ヘッダー](multi-column-headers.md)のトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。
+そのため、[複数列ヘッダー](multi-column-headers.mdx)のトピックを簡単に確認することを強くお勧めします。グリッドで列グループを設定する方法の詳細情報を参照してください。
 
 ## 使用方法
 
@@ -315,14 +315,14 @@ const collapsibleIndicatorTemplate = (ctx: IgrColumnTemplateContext) => {
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx
index 61666f4764..c8e0ecefed 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-hiding.mdx
@@ -704,7 +704,7 @@ export class AppModule {}
 - **Alphabetical** (列をアルファベット順で並べ替え)
 - **DisplayOrder** (列を {ComponentTitle} で表示される順序によって並べ替え)
 
-このオプションにラジオ ボタンを追加します。[**IgxRadio**](../radio-button.md) モジュールを追加します。
+このオプションにラジオ ボタンを追加します。[**IgxRadio**](../radio-button.mdx) モジュールを追加します。
 
 ```typescript
 import {
@@ -959,11 +959,11 @@ $custom-button: button-theme(
 ```
 
 > **Note**
->`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](themes/sass/palettes.md)のトピックを参照してください。
+>`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](themes/sass/palettes.mdx)のトピックを参照してください。
 
 ### スキーマの使用
 
-テーマ エンジンを使用して [**スキーマ**](themes/sass/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+テーマ エンジンを使用して [**スキーマ**](themes/sass/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
 
 ```scss
 // Extending the dark column actions schema
@@ -1023,7 +1023,7 @@ $custom-button: button-theme(
 <PlatformBlock for="Blazor, WebComponents, React">
 ## スタイル設定
 
-グリッドは、利用可能な [CSS 変数](../theming-grid.md)の一部を設定することでさらにカスタマイズできます。
+グリッドは、利用可能な [CSS 変数](../theming-grid.mdx)の一部を設定することでさらにカスタマイズできます。
 これを実現するために、最初にグリッドに割り当てるクラスを使用します。
 
 <ComponentBlock for="Grid">
@@ -1209,14 +1209,14 @@ $custom-button: button-theme(
 
 ## その他のリソース
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [フィルタリング](filtering.md)
-- [ページング](paging.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [フィルタリング](filtering.mdx)
+- [ページング](paging.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx
index 9c1c515b3a..c02fda04e8 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-moving.mdx
@@ -18,7 +18,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {ComponentTitle} の列の並べ替えと移動
 
-{Platform} {ComponentTitle} の {ProductName} 列移動機能を使用すると、列をすばやく簡単に並べ替えることができます。これは、列移動 API を使用するか、マウスまたはタッチ ジェスチャを使用してヘッダーを別の位置にドラッグ アンド ドロップすることによって実行できます。{Platform} {ComponentTitle} では、ピン固定された列とピン固定されていない列、および[複数列ヘッダー](multi-column-headers.md)に対しても列の移動を有効にすることができます。
+{Platform} {ComponentTitle} の {ProductName} 列移動機能を使用すると、列をすばやく簡単に並べ替えることができます。これは、列移動 API を使用するか、マウスまたはタッチ ジェスチャを使用してヘッダーを別の位置にドラッグ アンド ドロップすることによって実行できます。{Platform} {ComponentTitle} では、ピン固定された列とピン固定されていない列、および[複数列ヘッダー](multi-column-headers.mdx)に対しても列の移動を有効にすることができます。
 
 <DocsAside type="info" title="情報">
 列と列グループ間の順序変更は、それらが階層の同じレベルにあり、両方が同じグループにある場合にのみ許可されます。列/列グループが最上位の列である場合、列/列グループ間を移動できます。
@@ -411,7 +411,7 @@ $dark-grid-column-moving-theme: grid-theme(
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 
 色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:
 
@@ -453,15 +453,15 @@ $dark-grid-column-moving-theme: grid-theme(
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-- [検索](search.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
+- [検索](search.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx
index c44d389eb0..7d255f33ae 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-pinning.mdx
@@ -823,7 +823,7 @@ public toggleColumn(col: IgcColumnComponent) {
 <ComponentBlock for="Grid">
 ## Styling
 
-The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.md). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
+The <ApiLink type="{ComponentName}" /> allows styling through the [{ProductName} Theme Library](../themes/styles.mdx). The grid's <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> exposes a wide variety of properties, which allow the customization of all the features of the grid.
 
 In the below steps, we are going through the steps of customizing the grid's Pinning styling.
 
@@ -880,7 +880,7 @@ $custom-theme: grid-theme(
 The `$custom-theme` contains the same properties as the one in the previous section, but this time the colors are not hardcoded. Instead, the custom `igx-palette` was used and the colors were obtained through its primary and secondary colors, with a given color variant.
 
 ### Defining Custom Schemas
-You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.md). The **schema** is the recipe of a theme.
+You can go even further and build flexible structure that has all the benefits of a [**schema**](../themes/sass/schemas.mdx). The **schema** is the recipe of a theme.
 Extend one of the two predefined schemas, that are provided for every component. In our case, we would use `$_light_grid`.
 
 ```scss
@@ -917,7 +917,7 @@ In order for the custom theme to affect only specific component, you can move al
 
 This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation), your styles will be applied only to your custom component.
  <DocsAside type="info" title="情報">
- If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+ If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
  </DocsAside>
 
  <DocsAside type="info" title="情報">
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
index 96a9a89494..1b5cb6b579 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-resizing.mdx
@@ -781,7 +781,7 @@ $custom-grid-theme: grid-theme(
 ```
 
  <DocsAside type="info" title="情報">
- コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  </DocsAside>
 
 ```scss
@@ -814,11 +814,11 @@ $custom-grid-theme: grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。
+`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.mdx)のトピックを参照してください。
 </DocsAside>
 
 ### スキーマの使用
-テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
 
 すべてのコンポーネントに提供されている定義済みのスキーマを拡張します。この場合は、<ApiLink type="variable-_light-grid" label="light-grid" kind="sass" module="index.html" /> スキーマです。
 
@@ -870,7 +870,7 @@ $custom-grid-theme: grid-theme(
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 サイズ変更ハンドルの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <PlatformBlock for="WebComponents">
@@ -911,14 +911,14 @@ $custom-grid-theme: grid-theme(
 
 ## その他のリソース
 
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [選択](selection.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx
index 280c719147..bfd7fc05ec 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-selection.mdx
@@ -50,7 +50,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 デフォルトの選択モードは `None` です。`Single` または `Multiple` に設定されると、すべての列は <ApiLink type="Column" member="selectable" label="Selectable" /> になります。列を選択するには、列をクリックして <ApiLink type="Column" member="selected" label="Selected" /> としてマークします。列が選択不可な場合、ホバー時に選択スタイルはヘッダーに適用されません。
 
 <DocsAside type="info" title="情報">
-[複数列ヘッダー](multi-column-headers.md)機能は <ApiLink type="Column" member="selectable" label="Selectable" /> 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、<ApiLink type="ColumnGroupComponent" /> は <ApiLink type="Column" member="selectable" label="Selectable" /> です。さらに、すべての <ApiLink type="Column" member="selectable" label="Selectable" /> 子孫が <ApiLink type="Column" member="selected" label="Selected" /> である場合、コンポーネントは <ApiLink type="Column" member="selected" label="Selected" /> としてマークされます。
+[複数列ヘッダー](multi-column-headers.mdx)機能は <ApiLink type="Column" member="selectable" label="Selectable" /> 入力に反映されません。その子の 1 つ以上で選択動作が有効な場合、<ApiLink type="ColumnGroupComponent" /> は <ApiLink type="Column" member="selectable" label="Selectable" /> です。さらに、すべての <ApiLink type="Column" member="selectable" label="Selectable" /> 子孫が <ApiLink type="Column" member="selected" label="Selected" /> である場合、コンポーネントは <ApiLink type="Column" member="selected" label="Selected" /> としてマークされます。
 </DocsAside>
 
 <ComponentBlock for="Grid">
@@ -91,7 +91,7 @@ API 操作の詳細については、[API リファレンス](#api-リファレ
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドの `class` を設定する必要があります。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。一部の色を変更したい場合は、最初にグリッドの `class` を設定する必要があります。
 
 <PlatformBlock for="WebComponents">
 ```html
@@ -139,10 +139,10 @@ API 操作の詳細については、[API リファレンス](#api-リファレ
 <DocsAside type="info" title="情報">
 </DocsAside>
 <ComponentBlock for="Grid">
->Please note that [row selection](row-selection.md) and [column selection](column-selection.md) can't be manipulated independently. They depend on the same `variables`.
+>Please note that [row selection](row-selection.mdx) and [column selection](column-selection.mdx) can't be manipulated independently. They depend on the same `variables`.
 </ComponentBlock>
 
->[行選択](row-selection.md)と[列選択](column-selection.md)は個別に操作できないことに注意してください。同じ`変数`に依存します。
+>[行選択](row-selection.mdx)と[列選択](column-selection.mdx)は個別に操作できないことに注意してください。同じ`変数`に依存します。
 
 **選択**と**ホバー**のスタイル設定を変更します。 <br/>
 
@@ -187,7 +187,7 @@ $custom-grid-theme: grid-theme(
 Internet Explorer 11 のコンポーネントをスタイル設定するには、CSS 変数をサポートしていないため、別のアプローチが必要です。
 
 <DocsAside type="info" title="情報">
-コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、`::ng-deep` の前に `:host` セレクターを含めるようにしてください。
+コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を`解除する`必要があります。カスタム テーマが他のコンポーネントに影響しないようにするには、`::ng-deep` の前に `:host` セレクターを含めるようにしてください。
 </DocsAside>
 
 ```scss
@@ -214,16 +214,16 @@ Internet Explorer 11 のコンポーネントをスタイル設定するには
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [選択](selection.md)
-- [セル選択](cell-selection.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [仮想化とパフォーマンス](virtualization.md)
+- [選択](selection.mdx)
+- [セル選択](cell-selection.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
index ab274282cd..799aee161d 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/column-types.mdx
@@ -205,7 +205,7 @@ const formatOptions : IgrColumnPipeArgs = {
 | Hawaii Standard Time      |‘UTC-10’                   |
 | India Standard Time       |‘UTC+4’                    |
 
-`{ComponentName}` は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](../data-grid.md#カスタム表示形式)を示します。
+`{ComponentName}` は、**Date オブジェクト**、**数値 (ミリ秒)** または **ISO 日付/時刻文字列**の日付値を受け取ります。このセクションは、[カスタム表示書式を構成する方法](../data-grid.mdx#カスタム表示形式)を示します。
 
 
 サンプルでは、特定の列タイプで使用可能な書式を紹介するために、さまざまな書式設定オプションを指定しています。たとえば、以下は日付オブジェクトの **time** 部分の書式設定オプションのサンプルです。
@@ -455,7 +455,7 @@ const formatOptions : IgrColumnPipeArgs = {
 *display - デフォルトの en-US ロケールの場合、USD コードは省略記号 $ または記号 US$ で表すことができます。
 
 <ComponentBlock for="Grid">
-セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](cell-editing.md#セル編集と編集テンプレートの例)を参照してください。
+セルの値を編集すると、**通貨記号**がサフィックスまたはプレフィックスとして表示されます。詳細については、公式の[セル編集トピック](cell-editing.mdx#セル編集と編集テンプレートの例)を参照してください。
 </ComponentBlock>
 
 <DocsAside type="info" title="情報">
@@ -571,7 +571,7 @@ const formatOptions : IgrColumnPipeArgs = {
 
 ## デフォルトの編集テンプレート
 
-[{ComponentTitle} 編集トピック](editing.md#テンプレートの編集)の編集テンプレート部分を参照してください。
+[{ComponentTitle} 編集トピック](editing.mdx#テンプレートの編集)の編集テンプレート部分を参照してください。
 
 ## カスタム編集テンプレートとフォーマッタ
 
@@ -729,6 +729,6 @@ public init(column: IgxColumnComponent) {
 
 ## その他のリソース
 
-カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
-- [編集](editing.md)
-- [集計](summaries.md)
+カスタム テンプレートについては、[セル編集トピック](cell-editing.mdx#セル編集テンプレート)を参照してください。
+- [編集](editing.mdx)
+- [集計](summaries.mdx)
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
index aa061e0260..8c62595cea 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/conditional-cell-styling.mdx
@@ -1268,21 +1268,21 @@ const editDone = (event: IgrGridEditEventArgs) => {
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [編集](editing.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [列の非表示](column-hiding.md)
-- [選択](selection.md)
-- [検索](search.md)
-
-- [複数列ヘッダー](multi-column-headers.md)
-- [サイズ](size.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [編集](editing.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [列の非表示](column-hiding.mdx)
+- [選択](selection.mdx)
+- [検索](search.mdx)
+
+- [複数列ヘッダー](multi-column-headers.mdx)
+- [サイズ](size.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
index 2e655eb468..ff08cec9a2 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/editing.mdx
@@ -18,12 +18,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 # {Platform} {ComponentTitle} 編集
 
 {Platform} {ComponentTitle} の {ProductName} セル編集機能を使用すると、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。<ApiLink type="{ComponentName}" /> は、これらの操作をカスタマイズできる強力なパブリック API を提供します。データ操作のフェーズは次のとおりです。
-- [セル編集](cell-editing.md)
-- [行編集](row-editing.md)
+- [セル編集](cell-editing.mdx)
+- [行編集](row-editing.mdx)
 - 一括編集 (追加予定)
 
 <PlatformBlock for="Angular">
-さらに、**セル編集**は、[CellEditor ディレクティブ](cell-editing.md#セル編集テンプレート)または [Row ディレクティブ](row-editing.md#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできる、列のデータ型に基づくいくつかのデフォルト エディターを公開します。
+さらに、**セル編集**は、[CellEditor ディレクティブ](cell-editing.mdx#セル編集テンプレート)または [Row ディレクティブ](row-editing.mdx#行編集オーバーレイのカスタマイズ)を介して簡単にカスタマイズできる、列のデータ型に基づくいくつかのデフォルト エディターを公開します。
 
 </PlatformBlock>
 
@@ -63,19 +63,19 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - `currency` データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の <ApiLink pkg="core" type="Input" /> を使用します。
 - `percent` パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ <ApiLink pkg="core" type="Input" /> を使用します。
 
-- カスタム テンプレートについては、[セル編集トピック](cell-editing.md#セル編集テンプレート)を参照してください。
+- カスタム テンプレートについては、[セル編集トピック](cell-editing.mdx#セル編集テンプレート)を参照してください。
 
 <ComponentBlock for="Grid">
-すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.md#デフォルトのテンプレート)にあります。
+すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.mdx#デフォルトのテンプレート)にあります。
 </ComponentBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-All available column data types could be found in the official [Column types topic](column-types.md#default-template).
+All available column data types could be found in the official [Column types topic](column-types.mdx#default-template).
 </ComponentBlock>
 
 ### イベントの引数とシーケンス
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.md)および[**セルの編集**](cell-editing.md)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。
+グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、[**行の編集**](row-editing.mdx)および[**セルの編集**](cell-editing.mdx)のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。
 </ComponentBlock>
 
  | イベント           | 説明                                                                                                                                               | 引数                  | キャンセル可能 |
@@ -191,39 +191,31 @@ function onSorting(args: IgrSortingEventArgs) {
 ## その他のリソース
 
 <PlatformBlock for="Angular, WebComponents, React">
-- [列のデータ型](column-types.md#デフォルトのテンプレート)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-
-<ComponentBlock for="HierarchicalGrid">
-[Searching](search.md)
-</ComponentBlock>
+- [列のデータ型](column-types.mdx#デフォルトのテンプレート)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Summaries](summaries.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
-- [Searching](search.md)
-
-</ComponentBlock>
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Summaries](summaries.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
+- [Searching](search.mdx)
 
-<ComponentBlock for="HierarchicalGrid">
-[Searching](search.md)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
index 87c81183b7..5d1d088ab6 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/excel-style-filtering.mdx
@@ -590,7 +590,7 @@ public webGridFilterAltIconTemplate = (ctx: IgcCellTemplateContext) => {
 <PlatformBlock for="Angular">
 ## 一意の列値戦略
 
-Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。詳細については、[{ComponentTitle} リモート データ操作](remote-data-operations.md#一意の列値ストラテジ)で説明されています。
+Excel スタイル フィルタリング ダイアログ内のリスト項目は、それぞれの列の一意の値を表します。これらの値は手動で提供し、ロード オン デマンドすることができます。詳細については、[{ComponentTitle} リモート データ操作](remote-data-operations.mdx#一意の列値ストラテジ)で説明されています。
 
 </PlatformBlock>
 
@@ -813,7 +813,7 @@ We scope most of the components' mixins within `.igx-excel-filter` and `.igx-exc
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
@@ -911,14 +911,14 @@ $custom-drop-down:drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。
+`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.mdx)のトピックを参照してください。
 </DocsAside>
 
 ### スキーマの使用
 
 <Sample src="/{ComponentSample}/excel-style-filtering-style" height={950} alt="{Platform} {ComponentTitle} Excel スタイルのフィルタリング スタイル" />
 
-テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+テーマ エンジンを使用して[**スキーマ**](../themes/sass/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
index d00c00328d..6b290daff3 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/export-excel.mdx
@@ -74,10 +74,10 @@ v12.2.1 以降では、エクスポーター サービスは root で提供さ
 すべてが正常に完了すると、{ComponentTitle} コンポーネントと 2 つのエクスポート ボタンが表示されます。それぞれのボタンを押すと、エクスポート プロセスがトリガーされ、ブラウザーは <ApiLink type="{ComponentName}" /> コンポーネントのデータを Excel または PDF 形式で含む 「ExportedDataFile.xlsx」 または 「ExportedDataFile.pdf」 という名前のファイルをダウンロードします。
 </PlatformBlock>
 
-<PlatformBlock for="Blazor">
+<PlatformBlock for="Angular">
 ## すべてのデータのエクスポート
 
-**ページング**などのリモート操作を使用する場合、グリッドは一度に完全なデータ セットにアクセスできない場合があります。このような場合は、[Excel エクスポート サービス](../exporter-excel.md)を使用し、利用可能な場合は完全なデータ コレクションを渡すことをお勧めします。
+**ページング**などのリモート操作を使用する場合、グリッドは一度に完全なデータ セットにアクセスできない場合があります。このような場合は、[Excel エクスポート サービス](../exporter-excel.mdx)を使用し、利用可能な場合は完全なデータ コレクションを渡すことをお勧めします。
 
 ```ts
 public exportButtonHandler() {
@@ -105,7 +105,7 @@ When offering PDF downloads for remote data, consider fetching the complete data
 <ComponentBlock for="Grid">
 ## 複数列ヘッダー グリッドのエクスポート
 
-定義された[複数列ヘッダー](multi-column-headers.md)を使用して <ApiLink type="{ComponentName}" /> をエクスポートできます。すべてのヘッダーは、<ApiLink type="{ComponentName}" /> に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、`ExporterOption` `IgnoreMultiColumnHeaders` を **true** に設定できます。
+定義された[複数列ヘッダー](multi-column-headers.mdx)を使用して <ApiLink type="{ComponentName}" /> をエクスポートできます。すべてのヘッダーは、<ApiLink type="{ComponentName}" /> に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、`ExporterOption` `IgnoreMultiColumnHeaders` を **true** に設定できます。
 
 <PlatformBlock for="Angular">
 <Sample src="/{ComponentSample}/excel-exporting" height={750} alt="{Platform} {ComponentTitle} Grouped Data Excel Exporter Example" />
@@ -248,14 +248,14 @@ igRegisterScript("WebHierarchicalGridExportEventFreezeHeaders", (ev) => {
 |制限|説明|
 |--- |--- |
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|セルのスタイル設定|Excel エクスポーター サービスは、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、[Excel ライブラリ](../../excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel エクスポーター サービスは、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、[Excel ライブラリ](../../excel-library.mdx)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 |制限|説明|
 |--- |--- |
 |階層レベル|Excel エクスポーター サービスは、最大 8 レベルの階層を作成できます。|
 |ワークシートの最大サイズ|Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。|
-|セルのスタイル設定|Excel エクスポーター サービスは、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、[Excel ライブラリ](../../excel-library.md)を使用することをお勧めします。|
+|セルのスタイル設定|Excel エクスポーター サービスは、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、[Excel ライブラリ](../../excel-library.mdx)を使用することをお勧めします。|
 |幅の広い PDF レイアウト|非常に幅の広い Grid は、PDF の列がページに収まるように縮小されることがあります。ドキュメントを読みやすく保つために、エクスポートする前に列幅を適用するか、優先度の低いフィールドを非表示にしてください。|
 
 ```ts
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
index c51d76effc..5ecd91a072 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/filtering.mdx
@@ -21,8 +21,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 {Platform} {ComponentTitle} の {ProductName} フィルタリングは、特定の基準または条件に基づいてデータを選択的に表示または非表示にする機能です。<ApiLink type="{ComponentName}" /> コンポーネントが豊富なフィルタリング API とすべてのフィルタリング機能を提供するバインドされたデータ コンテナがあります。ここで利用可能なフィルタリング タイプは次の 3 つです。
 
 - クイック フィルタリング
-- [Excel スタイル フィルタリング](excel-style-filtering.md)
-- [高度なフィルタリング](advanced-filtering.md)
+- [Excel スタイル フィルタリング](excel-style-filtering.mdx)
+- [高度なフィルタリング](advanced-filtering.mdx)
 
 ## {Platform} {ComponentTitle} フィルタリングの例
 
@@ -87,7 +87,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 </PlatformBlock>
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-[高度なフィルタリング](advanced-filtering.md) を有効にするには、`AllowAdvancedFiltering` 入力プロパティを **true** に設定します。
+[高度なフィルタリング](advanced-filtering.mdx) を有効にするには、`AllowAdvancedFiltering` 入力プロパティを **true** に設定します。
 </ComponentBlock>
 
 <PlatformBlock for="Angular">
@@ -472,14 +472,14 @@ import { FilteringLogic } from "igniteui-react-grids";
 <ComponentBlock for="Grid, HierarchicalGrid">
 ## Remote Filtering
 
-The <ApiLink type="{ComponentName}" /> supports remote filtering, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md) topic.
+The <ApiLink type="{ComponentName}" /> supports remote filtering, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.mdx) topic.
 </ComponentBlock>
 </PlatformBlock>
 
 <PlatformBlock for="Angular, WebComponents">
 ## リモート フィルタリング
 
-`{ComponentName}` はリモート フィルタリングをサポートします。詳細については、[{ComponentTitle} リモート データの操作](remote-data-operations.md)をご確認ください。
+`{ComponentName}` はリモート フィルタリングをサポートします。詳細については、[{ComponentTitle} リモート データの操作](remote-data-operations.mdx)をご確認ください。
 
 In the sample below, inspect the “Product Name” and “Discontinued” columns filters menus. For the “Discontinued” column filter, we have limited the number of operands to All, True and False. For the “Product Name” column filter – we have modified the Contains and Does Not Contain operands logic to perform case sensitive search and added also Empty and Not Empty operands.
 
@@ -768,7 +768,7 @@ public matchingRecordsOnlyStrategy = new TreeGridMatchingRecordsOnlyFilteringStr
 <PlatformBlock for="Angular">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 ```html
@@ -863,7 +863,7 @@ $dark-button: button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/sass/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### スタイル設定
@@ -900,9 +900,13 @@ $custom-grid: grid-theme(
 
 </PlatformBlock>
 
+<PlatformBlock for="Angular">
+
 ## スキーマの使用
 
-テーマ エンジンを使用して[スキーマ](../themes/sass/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+テーマ エンジンを使用して[スキーマ](../themes/sass/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。**スキーマ**はテーマを使用する方法です。
+
+</PlatformBlock>
 
 <PlatformBlock for="Angular">
 <ComponentBlock for="Grid, TreeGrid">
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx
index 91a9427b3f..47b1ea6da6 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/keyboard-navigation.mdx
@@ -105,9 +105,9 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - <kbd>ENTER</kbd> - 編集モードに入る
 - <kbd>F2</kbd> - 編集モードに入る
 - <kbd>ESC</kbd> - 編集モードを終了する
-- <kbd>TAB</kbd> - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。[行編集](row-editing.md)が有効な場合、フォーカスを編集可能な一番右のセルから **[キャンセル]** および **[完了]** ボタンへ移動し、**[完了]** ボタンから行の一番左の編集可能なセルへ移動します。
-- <kbd>SHIFT</kbd> + <kbd>TAB</kbd> - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。[行編集](row-editing.md)が有効な場合、フォーカスを編集可能な一番右のセルから **[キャンセル]** および **[完了]** ボタンへ移動し、**[完了]** ボタンから行の一番右の編集可能なセルへ移動します。
-- <kbd>SPACE</kbd> - [行の選択](row-selection.md)が有効な場合、行を選択します。
+- <kbd>TAB</kbd> - 編集モードのセルがある場合のみ使用できます。行の次の編集可能なセルにフォーカスを移動します。行の最後のセルに達した場合、フォーカスを次の行の最初の編集可能なセルに移動します。[行編集](row-editing.mdx)が有効な場合、フォーカスを編集可能な一番右のセルから **[キャンセル]** および **[完了]** ボタンへ移動し、**[完了]** ボタンから行の一番左の編集可能なセルへ移動します。
+- <kbd>SHIFT</kbd> + <kbd>TAB</kbd> - 編集モードのセルがある場合のみ使用できます。行の一つ前の編集可能なセルにフォーカスを移動します。行の最初のセルに達した場合、フォーカスを前の行の最後の編集可能なセルに移動します。[行編集](row-editing.mdx)が有効な場合、フォーカスを編集可能な一番右のセルから **[キャンセル]** および **[完了]** ボタンへ移動し、**[完了]** ボタンから行の一番右の編集可能なセルへ移動します。
+- <kbd>SPACE</kbd> - [行の選択](row-selection.mdx)が有効な場合、行を選択します。
 - <kbd>ALT</kbd> + <kbd>←</kbd> または <kbd>ALT</kbd> + <kbd>↑</kbd> -
 
   グループ行はグループを縮小します。
@@ -377,14 +377,14 @@ igRegisterScript("WebGridCustomKBNav", (evtArgs) => {
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
index ae5e3d022a..562df65da1 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/live-data.mdx
@@ -23,7 +23,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 ## {Platform} ライブ データ更新の例
 
 以下のサンプルは、すべてのレコードが 1 秒間に複数回更新される場合の {ComponentTitle} のパフォーマンスを示しています。UI コントロールを使用して、読み込むレコードの数と更新の頻度を選択します。
-同じデータを[縦棒チャート](../../charts/types/column-chart.md)に入力して、Ignite UI for Angular の強力なチャート作成機能を体験してください。`Chart` ボタンには、選択した行の Category Prices per Region データが表示され、`Chart` 列ボタンには現在の行の同じデータが表示されます。
+同じデータを[縦棒チャート](../../charts/types/column-chart.mdx)に入力して、Ignite UI for Angular の強力なチャート作成機能を体験してください。`Chart` ボタンには、選択した行の Category Prices per Region データが表示され、`Chart` 列ボタンには現在の行の同じデータが表示されます。
 
 <Sample src="/{ComponentSample}/finjs" height={700} alt="{Platform} ライブ データ更新の例" />
 
@@ -105,7 +105,7 @@ const startUpdate = () => {
 
 ```
 
-データ フィールド値の変更またはデータ オブジェクト / データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは、[複雑なデータ オブジェクト](../data-grid.md#complex-data-binding)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
+データ フィールド値の変更またはデータ オブジェクト / データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは、[複雑なデータ オブジェクト](../data-grid.mdx#complex-data-binding)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
 
 ```tsx
 <{ComponentSelector}>
@@ -115,7 +115,7 @@ const startUpdate = () => {
 
 </PlatformBlock>
 
-データ フィールド値の変更またはデータ オブジェクト/データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは[複合データ オブジェクト](../data-grid.md#複雑なデータ-バインディング)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
+データ フィールド値の変更またはデータ オブジェクト/データ コレクション参照の変更により、対応するパイプがトリガーされます。ただし、これは[複合データ オブジェクト](../data-grid.mdx#複雑なデータ-バインディング)にバインドされている列には当てはまりません。この状況を解決するには、プロパティを含むデータ オブジェクトの新しいオブジェクト参照を提供します。例:
 
 <PlatformBlock for="Blazor">
 ```Razor
@@ -225,7 +225,7 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
 [ComponentFactoryResolver](https://angular.io/api/core/ComponentFactoryResolver) を使用して、DockSlot および Grid コンポーネントをオンザフライで作成できます。
 
 ### DockManager コンポーネント
-[Dock Manager](../../layouts/dock-manager.md) WebComponent を利用し、ドケットまたはフローティング パネルを使用して独自の Web ビューを作成します。新しいフローティング パネルを追加するには、右側のアクション ペインを開き、[フローティング ペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。
+[Dock Manager](../../layouts/dock-manager.mdx) WebComponent を利用し、ドケットまたはフローティング パネルを使用して独自の Web ビューを作成します。新しいフローティング パネルを追加するには、右側のアクション ペインを開き、[フローティング ペインの追加] ボタンをクリックします。新しいペインを目的の場所にドラッグアンドドロップします。
 
 </PlatformBlock>
 
@@ -236,15 +236,15 @@ this.hubConnection.invoke('updateparameters', frequency, volume, live, updateAll
 
 ## その他のリソース
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
index e45d81adb3..2eda0dccd3 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-column-headers.mdx
@@ -395,7 +395,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 </ComponentBlock>
 
-すべての <ApiLink type="ColumnGroup" /> は、[移動](column-moving.md)、[ピン固定](column-pinning.md)、および[非表示](column-hiding.md)をサポートしています。
+すべての <ApiLink type="ColumnGroup" /> は、[移動](column-moving.mdx)、[ピン固定](column-pinning.mdx)、および[非表示](column-hiding.mdx)をサポートしています。
 <DocsAside type="info" title="情報">
 列セットと列グループがある場合、ピン固定は列の一番上の親レベルでのみ可能です。具体的には、ネストされた column groups または columns ごとのピン固定は許可されていません。 <br />
 columns と column groups 間の移動は、それらが階層内の同じレベルにあり、両方が同じ `group` にある場合にのみ許可されます。 <br />
@@ -787,7 +787,7 @@ $custom-theme: igx-grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
->コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。
+>コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化に`解除する`必要があります。
 </DocsAside>
 
  ```scss
@@ -824,12 +824,12 @@ $custom-theme: igx-grid-theme(
 ```
 
 <DocsAside type="info" title="情報">
-`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/palette.md)のトピックを参照してください。
+`igx-color` および `igx-palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/palette.mdx)のトピックを参照してください。
 </DocsAside>
 
 ### スキーマの使用
 
-テーマ エンジンを使用して[スキーマ](../themes/schemas.md)の利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
+テーマ エンジンを使用して[スキーマ](../themes/schemas.mdx)の利点を活用でき、堅牢で柔軟な構造を構築できます。スキーマはテーマを使用する方法です。
 
 すべてのコンポーネントに提供されている 2 つの定義済みスキーマのいずれかを拡張します。この場合は `_light-grid`です。
 
@@ -886,7 +886,7 @@ import 'core-js/es7/array';
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <PlatformBlock for="WebComponents">
@@ -928,15 +928,15 @@ import 'core-js/es7/array';
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [Grid の概要](../data-grid.md)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-- [グループ化](groupby.md)
+- [Grid の概要](../data-grid.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
+- [グループ化](groupby.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx
index 21f0cf85b1..9ef7434f7e 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/multi-row-layout.mdx
@@ -228,7 +228,7 @@ import multiRowLayout1 from '@xplat-images/multi-row-layout-1.png';
 <PlatformBlock for="Angular">
 ## スタイル設定
 
-<ApiLink type="{ComponentName}" /> を使用すると、[{ProductName} テーマ ライブラリ](../themes/styles.md)でスタイルを設定できます。<ApiLink type="Theme" /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+<ApiLink type="{ComponentName}" /> を使用すると、[{ProductName} テーマ ライブラリ](../themes/styles.mdx)でスタイルを設定できます。<ApiLink type="Theme" /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下は、グリッドの複数行レイアウト スタイルをカスタマイズする手順です。
 
@@ -293,7 +293,7 @@ $custom-theme: grid-theme(
 
 ### カスタム スキーマの定義
 
-[**スキーマ**](../themes/sass/schemas.md)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
+[**スキーマ**](../themes/sass/schemas.mdx)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
 
 すべてのコンポーネントに提供される 2 つの事前定義されたスキーマのいずれかを拡張します。この場合、`$_light_grid` を使用します。
 
@@ -337,7 +337,7 @@ $my-custom-schema: extend($light-schema, (
 このように、{Platform} の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。
 
  <DocsAside type="info" title="情報">
- コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  </DocsAside>
 
  <DocsAside type="info" title="情報">
@@ -367,7 +367,7 @@ $my-custom-schema: extend($light-schema, (
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <PlatformBlock for="WebComponents">
@@ -409,11 +409,11 @@ $my-custom-schema: extend($light-schema, (
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [ソート](sorting.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [ソート](sorting.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
index 7c045c46f1..39e23c6790 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/paging.mdx
@@ -95,7 +95,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。
 
-ページングとグループ化の統合については、[グループ化](groupby.md#{PlatformLower}-grid-ページングでグループ化)のトピックで説明しています。
+ページングとグループ化の統合については、[グループ化](groupby.mdx#{PlatformLower}-grid-ページングでグループ化)のトピックで説明しています。
 
 </ComponentBlock>
 
@@ -219,12 +219,12 @@ TO-DO H-GRID CODE SNIPPET
 
 ## リモート ページング
 
-リモート ページングは、データ取得を担当するサービスと、<ApiLink type="{ComponentName}" /> の構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、[リモート データ操作](remote-data-operations.md#リモート-ページング)トピックをご覧ください。
+リモート ページングは、データ取得を担当するサービスと、<ApiLink type="{ComponentName}" /> の構築とデータ サブスクリプションを担当するコンポーネントを宣言することで実現できます。詳細については、[リモート データ操作](remote-data-operations.mdx#リモート-ページング)トピックをご覧ください。
 
 <ComponentBlock for="Grid">
 ## Remote Paging with Custom Template
 
-In some cases you may want to define your own paging behavior and this is when we can take advantage of the <ApiLink type="PaginatorContent" /> and add our custom logic along with it. [This section](remote-data-operations.md#remote-paging-with-custom-igx-paginator-content) explains how we are going to extend the Remote Paging example in order to demonstrate this.
+In some cases you may want to define your own paging behavior and this is when we can take advantage of the <ApiLink type="PaginatorContent" /> and add our custom logic along with it. [This section](remote-data-operations.mdx#remote-paging-with-custom-igx-paginator-content) explains how we are going to extend the Remote Paging example in order to demonstrate this.
 
 </ComponentBlock>
 
@@ -233,7 +233,7 @@ In some cases you may want to define your own paging behavior and this is when w
 <PlatformBlock for="Angular">
 ## カスタム テンプレートのリモート ページング
 
-独自のページング動作を定義するために、`PaginatorContent` を使用してカスタム ロジックを追加できます。[このセクション](remote-data-operations.md#カスタム-igx-paginator-content-のリモート-ページング)では、上記を実証するために、リモート ページングの例を拡張する方法を説明します。
+独自のページング動作を定義するために、`PaginatorContent` を使用してカスタム ロジックを追加できます。[このセクション](remote-data-operations.mdx#カスタム-igx-paginator-content-のリモート-ページング)では、上記を実証するために、リモート ページングの例を拡張する方法を説明します。
 
 ```scss
 @use "igniteui-angular/theming" as *;
@@ -281,7 +281,7 @@ We scope the <ApiLink pkg="core" type="Button" /> mixin within `.igx-paginator__
 </DocsAside>
 
 <DocsAside type="info" title="情報">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
@@ -355,7 +355,7 @@ $dark-button: button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-<ApiLink pkg="core" type="Color" /> および `Palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.md)のトピックを参照してください。
+<ApiLink pkg="core" type="Color" /> および `Palette` は、色を生成および取得するための重要な機能です。使い方の詳細については[パレット](../themes/sass/palettes.mdx)のトピックを参照してください。
 </DocsAside>
 
 ### スキーマの使用
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
index 1bf8dde826..f6d115fe01 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/remote-data-operations.mdx
@@ -1804,7 +1804,7 @@ BLAZOR CODE SNIPPET HERE
 <ComponentBlock for="Grid">
 ### Remote Paging with Batch editing
 
-With the examples so far we clarified how to set up the <ApiLink type="{ComponentName}" /> with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.md).
+With the examples so far we clarified how to set up the <ApiLink type="{ComponentName}" /> with remote data. Now, let's focus on enabling batch editing for the grid by following the [Batch Editing topic/guide](batch-editing.mdx).
 
 Before continuing with the sample it is good to clarify the current use case. When pagination is done on the server, the grid contains the data only for the current page and if we add new rows the newly added rows (with Batch Editing) will be concatenated with the current data that the grid contains. Therefore, if the server returns no data for a given page, grid's data source will be consisted only from the newly added rows, which the grid will paginate based on the defined pagination settings (page, perPage).
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
index 9e0e35d633..aa7efae696 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-adding.mdx
@@ -513,7 +513,7 @@ this.treeGrid.beginAddRowByIndex(null);       // Spawns the add row UI as the fi
 
 ## 動作
 
-行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、[{ComponentTitle} 行の編集](row-editing.md)のトピックを参照してください。
+行追加 UI は、エンド ユーザーに整合性のある編集エクスペリエンスを提供するように設計されているため、行編集 UI と同じ動作をします。詳細については、[{ComponentTitle} 行の編集](row-editing.mdx)のトピックを参照してください。
 
 行追加 UI を介して新しい行が追加された後、その位置や表示状態は、<ApiLink type="{ComponentName}" /> のソート、フィルタリングおよびグループ化の状態によって決定されます。これらの状態のいずれも適用されていない <ApiLink type="{ComponentName}" /> では、最後のレコードとして表示されます。スナックバーが短時間表示され、<ApiLink type="{ComponentName}" /> が表示されていない場合にはエンド ユーザーがコントロールの位置までスクロールするためのボタンが含まれています。
 
@@ -662,7 +662,7 @@ igRegisterScript("rowEditActionsTemplate", (endRowEdit) => {
 
 ## その他のリソース
 
-- [{ComponentTitle} 編集](editing.md)
+- [{ComponentTitle} 編集](editing.mdx)
 
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx
index 02cf6272cb..341ef457de 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-drag.mdx
@@ -72,7 +72,7 @@ In this example, we'll handle dragging a row from one grid to another, removing
 ### ドロップエリア
 
 行ドラッグを簡単に有効にできました。次は行ドロップを処理する方法を設定する必要があります。
-[Drop ディレクティブ](../drag-drop.md)を使用して、行をドロップする場所を定義できます。
+[Drop ディレクティブ](../drag-drop.mdx)を使用して、行をドロップする場所を定義できます。
 
 はじめに、アプリ モジュールに `DragDropModule` をインポートする必要があります。
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx
index e6c36481a6..889632fa28 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-editing.mdx
@@ -603,16 +603,16 @@ const rowEditActionsTemplate =(ctx: IgrGridRowEditActionsTemplateContext) => {
 
 ## Styling
 
-Using the [{ProductName} Theme Library](themes/index.md), we can greatly alter the Row Editing overlay.
+Using the [{ProductName} Theme Library](themes/index.mdx), we can greatly alter the Row Editing overlay.
 
 The Row Editing overlay is a composite element - its UI is comprised of a couple of other components:
 
-- [igx-banner](banner.md) in order to render its contents
-- [igx-button](button.md)s are rendered in the default template (for the `Done` and `Cancel` buttons).
+- [igx-banner](banner.mdx) in order to render its contents
+- [igx-button](button.mdx)s are rendered in the default template (for the `Done` and `Cancel` buttons).
 
-In the below example, we will make use of those two components' styling options, ([button styling](button.md#styling) & [banner-styling](../banner.md#styling)), to customize the experience of our `{ComponentName}`'s Row Editing.
+In the below example, we will make use of those two components' styling options, ([button styling](button.mdx#styling) & [banner-styling](../banner.mdx#styling)), to customize the experience of our `{ComponentName}`'s Row Editing.
 
-We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.md#styling).
+We will also style the current cell's editor and background to make it more distinct. You can learn more about cell styling in this [topic](cell-editing.mdx#styling).
 
 ### Import Theme
 
@@ -659,7 +659,7 @@ This will apply our custom banner theme to the Row Editing overlay. However, sin
 Since the Row Editing overlay makes use of a lot of other components' themes, styling it via the global styles can affect other parts of our application (e.g. banners, buttons, etc.). The best way to prevent that is to scope our banner theme. We can define our styles (including the [theme import](#import-theme)) in the component containing our `{ComponentName}`.
 
 <DocsAside type="info" title="情報">
-If the component is using an [Emulated](themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
+If the component is using an [Emulated](themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to penetrate this encapsulation using `::ng-deep` in order to style the grid.
 We wrap the statement inside of a `:host` selector to prevent our styles from affecting elements outside of our component:
 </DocsAside>
 
@@ -695,7 +695,7 @@ To further customize our Row Editing overlay, we can pass a custom template so w
 </{ComponentSelector}>
 ```
 
-After we've defined our custom buttons, we can make use of the <ApiLink type="function-button-theme" label="button-theme" kind="sass" module="index.html" /> to style them. You can learn more about `igx-button` styling in this [topic](../button.md#styling). We can create a custom theme for our `Done` and `Cancel`:
+After we've defined our custom buttons, we can make use of the <ApiLink type="function-button-theme" label="button-theme" kind="sass" module="index.html" /> to style them. You can learn more about `igx-button` styling in this [topic](../button.mdx#styling). We can create a custom theme for our `Done` and `Cancel`:
 
 ```scss
 // custom.component.scss
@@ -714,7 +714,7 @@ We scope our `@include` statement in `.custom-buttons` so that it is only applie
 
 ### Demo
 
-After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.md#styling). The result of all the combined styles can be seen below:
+After styling the banner and buttons, we also define a custom style for [the cell in edit mode](cell-editing.mdx#styling). The result of all the combined styles can be seen below:
 
 
 <Sample src="/{ComponentSample}/row-editing-style" height={560} alt="{Platform} {ComponentTitle} Row Editing Styling Example" />
@@ -730,7 +730,7 @@ The sample will not be affected by the selected global theme from **Change Theme
 <PlatformBlock for="WebComponents, Blazor, React">
 ## Styling
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -781,16 +781,16 @@ Then set the related CSS properties for that class:
 ## Additional Resources
 
 <PlatformBlock for="Angular">
-- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.md)
+- [Build CRUD operations with igxGrid](/general/how-to/how-to-perform-crud.mdx)
 
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Transactions](batch-editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Transactions](batch-editing.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [{ComponentTitle} Editing](editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx
index da21161997..7bc1e02ba6 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-pinning.mdx
@@ -599,7 +599,7 @@ This would allow reordering the rows and moving them between the pinned and unpi
 <PlatformBlock for="WebComponents, Blazor, React">
 ## デモ
 
-In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.md).
+In addition to the predefined themes, the grid could be further customized by setting some of the available [CSS properties](../theming-grid.mdx).
 In case you would like to change some of the colors, you need to set a class for the grid first:
 
 <PlatformBlock for="WebComponents">
@@ -640,7 +640,7 @@ Then set the related CSS properties for that class:
 <PlatformBlock for="Angular">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 次に、そのクラスに関連する CSS プロパティを設定します。
@@ -658,7 +658,7 @@ To begin the customization of the row pinning feature, you need to import the `i
 
 ### スタイル設定
 
-`{ComponentName}` を使用すると、[{ProductName} テーマ ライブラリ](../themes/styles.md)を介してスタイルを設定できます。{ComponentTitle} の <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、{ComponentTitle} のすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+`{ComponentName}` を使用すると、[{ProductName} テーマ ライブラリ](../themes/styles.mdx)を介してスタイルを設定できます。{ComponentTitle} の <ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、{ComponentTitle} のすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 ```scss
 $custom-grid-theme: grid-theme(
@@ -686,7 +686,7 @@ $custom-grid-theme: grid-theme(
 
 次に、<ApiLink type="function-grid-theme" label="grid-theme" kind="sass" module="index.html" /> を拡張し、必要に応じて行のピン固定をカスタマイズするために必要なパラメーターを受け入れる新しいテーマを作成します。
 
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`. However, in order to prevent the custom theme to leak to other components, be sure to include the `:host` selector before `::ng-deep`:
 
 ```scss
 $custom-grid-theme: grid-theme(
@@ -721,14 +721,14 @@ $custom-grid-theme: grid-theme(
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 コミュニティは常に新しいアイデアを歓迎しています。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx
index c8c11976b9..4456e0c755 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/row-selection.mdx
@@ -887,16 +887,16 @@ const headSelectorTemplate = (ctx: IgrHeadSelectorTemplateContext) => {
 ## その他のリソース
 
 <ComponentBlock for="Grid, TreeGrid">
-- [選択](selection.md)
-- [セル選択](cell-selection.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [仮想化とパフォーマンス](virtualization.md)
+- [選択](selection.mdx)
+- [セル選択](cell-selection.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx
index c024ecceca..878c7badc7 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/search.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/search.mdx
@@ -845,7 +845,7 @@ public updateSearch() {
 その他のコンポーネントを使用するためにユーザー インターフェイスを作成し、検索バー全体のデザインを向上します。検索入力の左側に検索または削除アイコン、検索オプションのチップ、右側にはマテリアル デザイン アイコンと Ripple スタイルのボタンを組み合わせたナビゲーションを表示できます。
 
 <PlatformBlock for="Angular">
-[**InputGroup**](../input-group.md)、[**Icon**](../icon.md)、[**Ripple**](../ripple.md)、[**Button**](../button.md)、[**Chip**](../chip.md) のモジュールを使用します。
+[**InputGroup**](../input-group.mdx)、[**Icon**](../icon.mdx)、[**Ripple**](../ripple.mdx)、[**Button**](../button.mdx)、[**Chip**](../chip.mdx) のモジュールを使用します。
 
 </PlatformBlock>
 
@@ -925,7 +925,7 @@ builder.Services.AddIgniteUIBlazor(
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
-[InputGroup](../input-group.md) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、<ApiLink type="{ComponentName}" member="findNext" /> の `ClearSearch` メソッドを呼び出してハイライト表示をクリアします。
+[InputGroup](../input-group.mdx) 内のすべてのコンポーネントをラップします。左側で検索と 削除/クリア アイコンを切り替えます (検索入力が空かどうかに基づきます)。中央に入力を配置します。更に削除アイコンがクリックされたときに `SearchText` を更新し、<ApiLink type="{ComponentName}" member="findNext" /> の `ClearSearch` メソッドを呼び出してハイライト表示をクリアします。
 
 </PlatformBlock>
 
@@ -1391,15 +1391,15 @@ public updateSearch() {
 
 ## その他のリソース
 
-- [仮想化とパフォーマンス](virtualization.md)
-- [フィルタリング](filtering.md)
-- [ページング](paging.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [フィルタリング](filtering.mdx)
+- [ページング](paging.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx
index 3dae83b7c8..c005072745 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/selection.mdx
@@ -43,7 +43,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 ## {Platform} {ComponentTitle} 選択のオプション
 
 <ComponentBlock for="Grid, HierarchicalGrid">
-{ProductName} <ApiLink type="{ComponentName}" /> コンポーネントは、[行選択](row-selection.md)、[セル選択](cell-selection.md)、[列選択](column-selection.md)の 3 つの選択モードを提供します。デフォルトでは、<ApiLink type="{ComponentName}" /> で**複数セル選択**モードのみが有効になっています。選択モードの変更または有効化は、`RowSelection`、`CellSelection` または <ApiLink type="Column" member="selectable" label="Selectable" /> プロパティを使用します。
+{ProductName} <ApiLink type="{ComponentName}" /> コンポーネントは、[行選択](row-selection.mdx)、[セル選択](cell-selection.mdx)、[列選択](column-selection.mdx)の 3 つの選択モードを提供します。デフォルトでは、<ApiLink type="{ComponentName}" /> で**複数セル選択**モードのみが有効になっています。選択モードの変更または有効化は、`RowSelection`、`CellSelection` または <ApiLink type="Column" member="selectable" label="Selectable" /> プロパティを使用します。
 
 </ComponentBlock>
 
@@ -60,7 +60,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 </ComponentBlock>
 
-> 詳細については、[行選択トピック](row-selection.md)を参照してください。
+> 詳細については、[行選択トピック](row-selection.mdx)を参照してください。
 
 ### {Platform} {ComponentTitle} セル選択
 
@@ -71,7 +71,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - `Multiple` - <ApiLink type="{ComponentName}" /> の選択のデフォルト状態です。複数セルの選択は、マウスの左ボタンを連続してクリックした後、マウスをセル上にドラッグすることで利用できます。
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-> 詳細については、[セル選択トピック](cell-selection.md)を参照してください。
+> 詳細については、[セル選択トピック](cell-selection.mdx)を参照してください。
 
 </ComponentBlock>
 
@@ -86,7 +86,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - Range column selection (列の範囲選択) - <kbd>SHIFT</kbd> キーを押しながら + <kbd>マウス クリック</kbd>、その間のすべての列が選択されます。
 
 <ComponentBlock for="Grid, TreeGrid, HierarchicalGrid">
-> 詳細については、[列選択トピック](column-selection.md)を参照してください。
+> 詳細については、[列選択トピック](column-selection.mdx)を参照してください。
 
 </ComponentBlock>
 
@@ -575,14 +575,14 @@ import "core-js/es7/array";
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [行の選択](row-selection.md)
-- [セルの選択](cell-selection.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [仮想化とパフォーマンス](virtualization.md)
+- [行の選択](row-selection.mdx)
+- [セルの選択](cell-selection.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [仮想化とパフォーマンス](virtualization.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx
index 4f43191eef..2b31866c8d 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/size.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/size.mdx
@@ -973,16 +973,18 @@ public webGridSetGridSize(sender: any, args: IgrPropertyEditorPropertyDescriptio
 
 ## その他のリソース
 
-- [仮想化とパフォーマンス](virtualization.md)
-- [編集](editing.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
-- [検索](search.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
+- [編集](editing.mdx)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
+</ComponentBlock>
+<ComponentBlock for="Grid, TreeGrid">
+- [検索](search.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx
index 3759807c74..072fa399e4 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/sizing.mdx
@@ -299,7 +299,7 @@ import hgridHeightPercentagesV2 from '@xplat-images/grid_sizing/hgrid-height-per
 ## その他のリソース
 
 <ComponentBlock for="Grid">
-- [仮想化とパフォーマンス](virtualization.md)
+- [仮想化とパフォーマンス](virtualization.mdx)
 </ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx
index 4705888f1a..1e0612ab7e 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/sorting.mdx
@@ -611,14 +611,14 @@ const sortingExpressions: IgrSortingExpression[] = [
 <PlatformBlock for="Angular">
 ## Remote Sorting
 
-The <ApiLink type="{ComponentName}" /> supports remote sorting, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.md) topic.
+The <ApiLink type="{ComponentName}" /> supports remote sorting, which is demonstrated in the [{ComponentTitle} Remote Data Operations](remote-data-operations.mdx) topic.
 
 </PlatformBlock>
 </ComponentBlock>
 
 ## リモート ソート
 
-`{ComponentName}` はリモート仮想化をサポートします。詳細については、[{ComponentTitle} リモート データ操作](remote-data-operations.md)で説明されています。
+`{ComponentName}` はリモート仮想化をサポートします。詳細については、[{ComponentTitle} リモート データ操作](remote-data-operations.mdx)で説明されています。
 
 <PlatformBlock for="Angular">
 - `IgxSortHeaderIconDirective` – re-templates the sorting icon when no sorting is applied.
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx
index ae57c743dd..fbe3bc373f 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/state-persistence.mdx
@@ -66,8 +66,8 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - <ApiLink type="GridStateInfo" member="expansion" label="Expansion" />
 - <ApiLink type="PivotConfiguration" />
   - Pivot Configuration properties defined by the <ApiLink type="PivotConfiguration" /> interface.
-  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section.
-  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.md#restoring-pivot-strategies) section.
+  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section.
+  - Pivot Row and Column strategies are also restored using application level code, see [Restoring Pivot Strategies](state-persistence.mdx#restoring-pivot-strategies) section.
 </PlatformBlock>
 
 <PlatformBlock for="Blazor, React">
@@ -78,14 +78,14 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 - <ApiLink type="GridStateInfo" member="expansion" label="Expansion" />
 - <ApiLink type="PivotConfiguration" />
   - Pivot Configuration properties defined by the <ApiLink type="PivotConfiguration" /> interface.
-  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.md#restoring-pivot-configuration) section.
+  - Pivot Dimension and Value functions are restored using application level code, see [Restoring Pivot Configuration](state-persistence.mdx#restoring-pivot-configuration) section.
 </PlatformBlock>
 
 </ComponentBlock>
 
 <PlatformBlock for="Angular">
 <ComponentBlock for="Grid, HierarchicalGrid, TreeGrid">
-> The <ApiLink type="GridState" /> does not take care of templates. Go to [Restoring Column](state-persistence.md#restoring-columns) section to see how to restore column templates.
+> The <ApiLink type="GridState" /> does not take care of templates. Go to [Restoring Column](state-persistence.mdx#restoring-columns) section to see how to restore column templates.
 
 </ComponentBlock>
 </PlatformBlock>
@@ -383,9 +383,9 @@ gridState.options = { cellSelection: false, sorting: false };
 <ComponentBlock for="Grid, HierarchicalGrid, TreeGrid">
 ## 列の復元
 
-<ApiLink type="GridState" /> will not persist columns templates, column formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. Let's show how to do this for templated columns:
+<ApiLink type="GridState" /> will not persist columns templates, column formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. Let's show how to do this for templated columns:
 
-<ApiLink type="GridState" /> はデフォルトで列テンプレート、列フォーマッタなどを保持しません ([制限](state-persistence.md#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。
+<ApiLink type="GridState" /> はデフォルトで列テンプレート、列フォーマッタなどを保持しません ([制限](state-persistence.mdx#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。テンプレート化された列でこれを行う方法を示します。
 
 <PlatformBlock for="Angular">
 ```html
@@ -635,9 +635,9 @@ function onColumnInit(s: IgrGridComponent, e: IgrColumnComponentEventArgs) {
 <ComponentBlock for="PivotGrid">
 ## ピボット構成の復元
 
-<ApiLink type="GridState" /> will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.md#limitations)). Restoring any of these can be achieved with code on application level. The <ApiLink type="{ComponentName}" /> exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this:
+<ApiLink type="GridState" /> will not persist pivot dimension functions, value formatters, etc. by default (see [limitations](state-persistence.mdx#limitations)). Restoring any of these can be achieved with code on application level. The <ApiLink type="{ComponentName}" /> exposes two events which can be used to set back any custom functions you have in the configuration: `DimensionInit` and `ValueInit`. Let's show how to do this:
 
-<ApiLink type="GridState" /> は、デフォルトではピボット ディメンション関数、値フォーマッタなどを保持しません ([制限](state-persistence.md#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`{ComponentName}` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (`DimensionInit` と `ValueInit`) を公開します。以下はその方法です。
+<ApiLink type="GridState" /> は、デフォルトではピボット ディメンション関数、値フォーマッタなどを保持しません ([制限](state-persistence.mdx#制限)を参照)。これらの復元は、アプリケーション レベルのコードで実現できます。`{ComponentName}` は、構成に含まれるカスタム関数を戻すために使用できる 2 つのイベント (`DimensionInit` と `ValueInit`) を公開します。以下はその方法です。
 
 <PlatformBlock for="Angular">
 ```html
@@ -1132,15 +1132,15 @@ Add snippet for blazor for restore state
 
 ## その他のリソース
 
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [選択](selection.md)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [選択](selection.mdx)
 </ComponentBlock>
 
 <ComponentBlock for="PivotGrid">
 
 <PlatformBlock for="WebComponents">
-- [Pivot Grid Remote Operations](remote-operations.md)
+- [Pivot Grid Remote Operations](remote-operations.mdx)
 </PlatformBlock>
 </ComponentBlock>
\ No newline at end of file
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx
index f6f85c622e..88a0da9669 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/summaries.mdx
@@ -222,7 +222,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 </PlatformBlock>
 </ComponentBlock>
 
-すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.md#デフォルトのテンプレート)にあります。
+すべての利用可能な列データ型は、公式の[列タイプトピック](column-types.mdx#デフォルトのテンプレート)にあります。
 
 <ComponentBlock for="Grid">
 <PlatformBlock for="Angular">
@@ -1374,7 +1374,7 @@ const summaryFormatter = (summary: IgrSummaryResult, summaryOperand: IgrSummaryO
 <PlatformBlock for="WebComponents, Blazor, React">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <ComponentBlock for="Grid, TreeGrid">
@@ -1482,7 +1482,7 @@ The last step is to **include** the component mixins:
 ```
 
 <DocsAside type="info" title="情報">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
  ```scss
@@ -1522,12 +1522,12 @@ $custom-theme: grid-summary-theme(
 ```
 
 <DocsAside type="info" title="情報">
-The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.md) topic for detailed guidance on how to use them.
+The `igx-color` and `igx-palette` are powerful functions for generating and retrieving colors. Please refer to [Palettes](../themes/palettes.mdx) topic for detailed guidance on how to use them.
 </DocsAside>
 
 ### Using Schemas
 
-Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.md). A **schema** is a recipe of a theme.
+Going further with the theming engine, you can build a robust and flexible structure that benefits from [**schemas**](../themes/sass/schemas.mdx). A **schema** is a recipe of a theme.
 
 Extend one of the two predefined schemas, that are provided for every component, in this case - <ApiLink type="variable-_light-grid-summary" label="_light-grid-summary" kind="sass" module="index.html" />:
 
@@ -1587,7 +1587,7 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 ソート動作のスタイル設定は、すべてのテーマ関数とコンポーネント mixins が存在する `index` ファイルをインポートする必要があります。
 
 <ComponentBlock for="Grid">
-- [Selection-based Aggregates](selection-based-aggregates.md)
+- [Selection-based Aggregates](selection-based-aggregates.mdx)
 
 </ComponentBlock>
 
@@ -1595,15 +1595,15 @@ Don't forget to include the themes in the same way as it was demonstrated above.
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [Column Data Types](column-types.md#default-template)
-- [Virtualization and Performance](virtualization.md)
-- [Paging](paging.md)
-- [Filtering](filtering.md)
-- [Sorting](sorting.md)
-- [Column Moving](column-moving.md)
-- [Column Pinning](column-pinning.md)
-- [Column Resizing](column-resizing.md)
-- [Selection](selection.md)
+- [Column Data Types](column-types.mdx#default-template)
+- [Virtualization and Performance](virtualization.mdx)
+- [Paging](paging.mdx)
+- [Filtering](filtering.mdx)
+- [Sorting](sorting.mdx)
+- [Column Moving](column-moving.mdx)
+- [Column Pinning](column-pinning.mdx)
+- [Column Resizing](column-resizing.mdx)
+- [Selection](selection.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx
index 2ee9af9140..ad906269f7 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/toolbar.mdx
@@ -1392,7 +1392,7 @@ This replaces the old toolbar template directive. If you are migrating from a ve
 <PlatformBlock for="Angular">
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 ```html
@@ -1468,7 +1468,7 @@ If `$legacy-support` is set to `false(default)`, include the component css varia
 ```
 
 <DocsAside type="info" title="情報">
-If the component is using an [Emulated](../themes/styles.md#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
+If the component is using an [Emulated](../themes/styles.mdx#view-encapsulation) ViewEncapsulation, it is necessary to `penetrate` this encapsulation using `::ng-deep`:
 </DocsAside>
 
 ```scss
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx
index 1288ca77b3..9c699de6e2 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/validation.mdx
@@ -533,7 +533,7 @@ The below sample demonstrates the cross-field validation in action.
 
 ## スタイル設定
 
-[{ProductName} テーマ ライブラリ](../themes/index.md)を使用して、編集時のデフォルトの検証スタイルを変更できます。
+[{ProductName} テーマ ライブラリ](../themes/index.mdx)を使用して、編集時のデフォルトの検証スタイルを変更できます。
 
 以下の例では、検証メッセージの公開されたテンプレートを使用します。ツールチップをポップアウトし、および、検証のデフォルトの外観を変更するためにエラー時の色をオーバーライドします。
 また、無効な行をより明確にするために背景のスタイルを設定します。
@@ -664,29 +664,31 @@ public cellStyles = {
 ## その他のリソース
 
 <PlatformBlock for="Angular">
-- [igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.md)
+- [igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.mdx)
 
-- [{ComponentTitle} 編集](editing.md)
-- [{ComponentTitle} 行の編集](row-editing.md)
-- [{ComponentTitle} 行の追加](row-adding.md)
-- [{ComponentTitle} トランザクション](batch-editing.md)
+- [{ComponentTitle} 編集](editing.mdx)
+- [{ComponentTitle} 行の編集](row-editing.mdx)
+- [{ComponentTitle} 行の追加](row-adding.mdx)
+- [{ComponentTitle} トランザクション](batch-editing.mdx)
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 <ComponentBlock for="Grid">
-- [{ComponentTitle} Editing](editing.md)
-- [{ComponentTitle} Row Editing](row-editing.md)
-- [{ComponentTitle} Row Adding](row-adding.md)
-- [{ComponentTitle} Transactions](batch-editing.md)
+- [{ComponentTitle} Editing](editing.mdx)
+- [{ComponentTitle} Row Editing](row-editing.mdx)
+- [{ComponentTitle} Row Adding](row-adding.mdx)
+- [{ComponentTitle} Transactions](batch-editing.mdx)
 </ComponentBlock>
 
 </PlatformBlock>
 
 
-- [{ComponentTitle} 編集](editing.md)
-- [{ComponentTitle} 行の編集](row-editing.md)
-- [{ComponentTitle} 行の追加](row-adding.md)
-- [{ComponentTitle} トランザクション](batch-editing.md)
+<ComponentBlock for="Grid, HierarchicalGrid, TreeGrid">
+- [{ComponentTitle} 編集](editing.mdx)
+- [{ComponentTitle} 行の編集](row-editing.mdx)
+- [{ComponentTitle} 行の追加](row-adding.mdx)
+- [{ComponentTitle} トランザクション](batch-editing.mdx)
+</ComponentBlock>
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx
index fccc1764fe..97f34131be 100644
--- a/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx
+++ b/docs/xplat/src/content/jp/components/grids/_shared/virtualization.mdx
@@ -47,7 +47,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 <PlatformBlock for="Angular">
 ## リモート仮想化
 
-<ApiLink type="{ComponentName}" /> はリモート仮想化をサポートします。詳細については、[リモート データ操](remote-data-operations.md)作で説明されています。
+<ApiLink type="{ComponentName}" /> はリモート仮想化をサポートします。詳細については、[リモート データ操](remote-data-operations.mdx)作で説明されています。
 
 </PlatformBlock>
 
@@ -108,14 +108,14 @@ igRegisterScript("CellTemplate", (ctx) => {
 
 ## その他のリソース
 
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [集計](summaries.md)
-- [列の移動](column-moving.md)
-- [列のピン固定](column-pinning.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [ページング](paging.mdx)
+- [フィルタリング](filtering.mdx)
+- [ソート](sorting.mdx)
+- [集計](summaries.mdx)
+- [列の移動](column-moving.mdx)
+- [列のピン固定](column-pinning.mdx)
+- [列のサイズ変更](column-resizing.mdx)
+- [選択](selection.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/data-grid.mdx b/docs/xplat/src/content/jp/components/grids/data-grid.mdx
index 98141dfe63..e8bb69fdeb 100644
--- a/docs/xplat/src/content/jp/components/grids/data-grid.mdx
+++ b/docs/xplat/src/content/jp/components/grids/data-grid.mdx
@@ -55,8 +55,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 {Platform} Data Grid を初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。
 
-- [作業の開始](../general-getting-started-blazor-client.md)
-- [NuGet パッケージの追加](../general-nuget-feed.md)
+- [作業の開始](../general-getting-started.mdx)
 
 </PlatformBlock>
 
@@ -78,7 +77,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 グリッドを使用するには、次のインポートも含める必要があります。
 
-対応するスタイルも参照する必要があります。[テーマ](../themes/overview.md)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
+対応するスタイルも参照する必要があります。[テーマ](../themes/overview.mdx)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
 
 ```razor
 <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
@@ -121,7 +120,7 @@ npm install --save {PackageGrids}
 
 
 
-グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](data-grid.md#{PlatformLower}-grid-スタイル設定の構成) セクションを参照してください。
+グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](./data-grid.mdx#{PlatformLower}-grid-スタイル設定の構成) セクションを参照してください。
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -135,7 +134,7 @@ import { IgrGrid } from "igniteui-react-grids";
 ```
 </PlatformBlock>
 
-対応するスタイルも参照する必要があります。[テーマ](../themes/overview.md)のライトまたはダーク オプションを選択し、プロジェクトの構成に基づいてインポートできます。
+対応するスタイルも参照する必要があります。[テーマ](../themes/overview.mdx)のライトまたはダーク オプションを選択し、プロジェクトの構成に基づいてインポートできます。
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -158,7 +157,7 @@ import 'igniteui-react-grids/grids/themes/light/bootstrap.css'
 
 </PlatformBlock>
 
-グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定]((data-grid.md#styling-{PlatformLower}-grid)) セクションを参照してください。
+グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](./data-grid.mdx#styling-{PlatformLower}-grid) セクションを参照してください。
 
 </PlatformBlock>
 
@@ -272,7 +271,7 @@ constructor() {
 
 グリッド編集の各操作にはバッチ操作が含まれます。つまり、API には、編集を単一のサーバー呼び出しにグループ化するオプションがあります。または、グリッドの操作を使用して、グリッドの編集を実行したり、発生した操作を更新したりできます。CRUD 操作を備えた編集グリッドとしての優れた開発者エクスペリエンスに加えて、Angular グリッドには Excel のようなキーボード ナビゲーションが含まれます。一般的なデフォルトのグリッド ナビゲーションに加えて、お客様のニーズを満たすためにナビゲーション オプションを上書きするオプションが含まれています。優れたナビゲーション スキームを備えた編集可能なグリッドは、最新の業務アプリケーションにとって重要であり、Ignite UI グリッドを使用すると簡単になります。
 
-このトピックに続いて、[セル テンプレート](data-grid.md#セル-テンプレート) と[セル編集テンプレート](data-grid.md#セル編集テンプレート) および編集について詳しく学習します。
+このトピックに続いて、[セル テンプレート](./data-grid.mdx#セル-テンプレート) と[セル編集テンプレート](./data-grid.mdx#セル編集テンプレート) および編集について詳しく学習します。
 
 ## グリッドの列構成
 
@@ -713,7 +712,7 @@ function formatTitleCase(value) {
 
 
 
-`ngModel` を使用して**セル テンプレート**を介してデータを変更する場合、適切な API メソッドを呼び出して、Angular グリッドの基になるデータ コレクションで値が正しく更新されることを確認する必要があります。上記のスニペットでは、`ngModelChange` 呼び出しはグリッドの[編集 API](grid/cell-editing.md#api-を介した編集) を通過し、グリッドの編集パイプラインを通過し、[トランザクション](grid/batch-editing.md) (該当する場合) を適切にトリガーし、[集計](grid/summaries.md)、[選択](grid/selection.md)などの処理を行います。ただし、この `ngModelChange` はユーザーが編集を完了したときだけでなく、セルが変更され、より多くの API  呼び出しが発生します。
+`ngModel` を使用して**セル テンプレート**を介してデータを変更する場合、適切な API メソッドを呼び出して、Angular グリッドの基になるデータ コレクションで値が正しく更新されることを確認する必要があります。上記のスニペットでは、`ngModelChange` 呼び出しはグリッドの[編集 API](./_shared/cell-editing.mdx#api-を介した編集) を通過し、グリッドの編集パイプラインを通過し、[トランザクション](./_shared/batch-editing.mdx) (該当する場合) を適切にトリガーし、[集計](./_shared/summaries.mdx)、[選択](./_shared/selection.mdx)などの処理を行います。ただし、この `ngModelChange` はユーザーが編集を完了したときだけでなく、セルが変更され、より多くの API  呼び出しが発生します。
 
 
 </PlatformBlock>
@@ -733,7 +732,7 @@ function formatTitleCase(value) {
 </PlatformBlock>
 
 
-適切に実装されると、セル編集テンプレートは、セルの <ApiLink type="CellType" member="editValue" label="EditValue" /> がグリッド[編集イベント サイクル](grid/editing.md#イベントの引数とシーケンス)を正しく渡します。
+適切に実装されると、セル編集テンプレートは、セルの <ApiLink type="CellType" member="editValue" label="EditValue" /> がグリッド[編集イベント サイクル](./_shared/editing.mdx#イベントの引数とシーケンス)を正しく渡します。
 
 ### セル編集テンプレート
 
@@ -1148,7 +1147,7 @@ const columnPipeArgs: IgrColumnPipeArgs = {
 
 `OrderDate` 列は <ApiLink type="ColumnPipeArgs" member="format" label="Format" /> および <ApiLink type="ColumnPipeArgs" member="timezone" label="Timezone" /> プロパティのみに遵守しますが、`UnitPrice` は <ApiLink type="ColumnPipeArgs" member="digitsInfo" label="DigitsInfo" /> のみに遵守します。
 
-すべての利用可能な列データ型は、公式の[列タイプ トピック](grid/column-types.md#デフォルトのテンプレート)にあります。
+すべての利用可能な列データ型は、公式の[列タイプ トピック](./_shared/column-types.mdx#デフォルトのテンプレート)にあります。
 
 
 <PlatformBlock for="Angular, WebComponents, React">
@@ -2291,9 +2290,9 @@ igRegisterScript("AddressEditCellTemplate", (ctx) => {
 
 詳細については、これらのリソースを参照してください。
 
-- [Grid キーボード ナビゲーション](grid/keyboard-navigation.md)
-- [TreeGrid キーボード ナビゲーション](tree-grid/keyboard-navigation.md)
-- [Hierarchical Grid キーボード ナビゲーション](hierarchical-grid/keyboard-navigation.md)
+- [Grid キーボード ナビゲーション](./_shared/keyboard-navigation.mdx)
+- [TreeGrid キーボード ナビゲーション](./tree-grid/keyboard-navigation.mdx)
+- [Hierarchical Grid キーボード ナビゲーション](./hierarchical-grid/keyboard-navigation.mdx)
 - [ブログ (英語)](https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility) - Improving Usability, Accessibility and ARIA Compliance with Grid keyboard navigation
 
 
@@ -2308,7 +2307,7 @@ igRegisterScript("AddressEditCellTemplate", (ctx) => {
 
 ## 状態保持
 
-新しい組み込み済みの [GridState](state-persistence.md) ディレクティブ を使用することで、パーシステンス フレームワークの実装がより簡単になりました。
+新しい組み込み済みの [GridState](./state-persistence.mdx) ディレクティブ を使用することで、パーシステンス フレームワークの実装がより簡単になりました。
 
 
 </PlatformBlock>
@@ -2350,7 +2349,7 @@ platformBrowserDynamic()
 <PlatformBlock for="WebComponents, Blazor, React">
 
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../grids/theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../grids/theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 
 <PlatformBlock for="WebComponents">
 ```html
@@ -2449,17 +2448,17 @@ platformBrowserDynamic()
 
 
 
-- [Grid サイズ変更](grid/sizing.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [ページング](grid/paging.md)
-- [フィルタリング](grid/filtering.md)
-- [ソート](grid/sorting.md)
-- [集計](grid/summaries.md)
-- [列の移動](grid/column-moving.md)
-- [列のピン固定](grid/column-pinning.md)
-- [列のサイズ変更](grid/column-resizing.md)
-- [選択](grid/selection.md)
-- [列のデータ型](grid/column-types.md#デフォルトのテンプレート)
+- [Grid サイズ変更](./_shared/sizing.mdx)
+- [仮想化とパフォーマンス](./_shared/virtualization.mdx)
+- [ページング](./_shared/paging.mdx)
+- [フィルタリング](./_shared/filtering.mdx)
+- [ソート](./_shared/sorting.mdx)
+- [集計](./_shared/summaries.mdx)
+- [列の移動](./_shared/column-moving.mdx)
+- [列のピン固定](./_shared/column-pinning.mdx)
+- [列のサイズ変更](./_shared/column-resizing.mdx)
+- [選択](./_shared/selection.mdx)
+- [列のデータ型](./_shared/column-types.mdx#デフォルトのテンプレート)
 
 
 
@@ -2471,17 +2470,17 @@ platformBrowserDynamic()
 
 
 
-- [Grid サイズ変更](grid/sizing.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [ページング](grid/paging.md)
-- [フィルタリング](grid/filtering.md)
-- [ソート](grid/sorting.md)
-- [集計](grid/summaries.md)
-- [列の移動](grid/column-moving.md)
-- [列のピン固定](grid/column-pinning.md)
-- [列のサイズ変更](grid/column-resizing.md)
-- [選択](grid/selection.md)
-- [列のデータ型](grid/column-types.md#デフォルトのテンプレート)
+- [Grid サイズ変更](./_shared/sizing.mdx)
+- [仮想化とパフォーマンス](./_shared/virtualization.mdx)
+- [ページング](./_shared/paging.mdx)
+- [フィルタリング](./_shared/filtering.mdx)
+- [ソート](./_shared/sorting.mdx)
+- [集計](./_shared/summaries.mdx)
+- [列の移動](./_shared/column-moving.mdx)
+- [列のピン固定](./_shared/column-pinning.mdx)
+- [列のサイズ変更](./_shared/column-resizing.mdx)
+- [選択](./_shared/selection.mdx)
+- [列のデータ型](./_shared/column-types.mdx#デフォルトのテンプレート)
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx
index 95d65a7a25..c89b6ad051 100644
--- a/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grid/groupby.mdx
@@ -554,7 +554,7 @@ igRegisterScript("GroupByRowSelectorTemplate", (ctx) => {
 
 ## 集計でグループ化
 
-グループ化と要約の統合については、[集計](summaries.md#summaries-with-group-by)トピックで説明しています。
+グループ化と要約の統合については、[集計](../_shared/summaries.mdx#summaries-with-group-by)トピックで説明しています。
 
 ## キーボード ナビゲーション
 
@@ -648,7 +648,7 @@ public getParsedDate(date: any) {
 
 ## スタイル設定
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
 
 <PlatformBlock for="WebComponents">
@@ -684,7 +684,7 @@ public getParsedDate(date: any) {
 
 <PlatformBlock for="Angular">
 
-[{ProductName} テーマ ライブラリ](../themes/styles.md)でスタイルを設定できます。theme は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+[{ProductName} テーマ ライブラリ](../themes/styles.mdx)でスタイルを設定できます。theme は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下の手順では、グリッドの Group By スタイルをカスタマイズする手順を実行しています。
 
@@ -771,7 +771,7 @@ $custom-chips-theme: chip-theme(
 
 ### カスタム スキーマの定義
 
-[**スキーマ**](../themes/sass/schemas.md)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
+[**スキーマ**](../themes/sass/schemas.mdx)のすべての利点を備えた柔軟な構造を構築できます。**スキーマ**はテーマを作成させるための方法です。
 すべてのコンポーネントに提供される 2 つの事前定義されたスキーマのいずれかを拡張します。この場合、`$_light_grid` を使用します。
 
 ```scss
@@ -817,7 +817,7 @@ $custom-theme: grid-theme(
 このように、{Platform} の [ViewEncapsulation](https://{Platform}.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。
 
  <DocsAside type="info" title="情報">
- コンポーネントが [Emulated](../themes/styles.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [Emulated](../themes/styles.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  </DocsAside>
 
  <DocsAside type="info" title="情報">
@@ -860,15 +860,15 @@ $custom-theme: grid-theme(
 
 ## その他のリソース
 
-- [Grid の概要](../data-grid.md)
-- [仮想化とパフォーマンス](virtualization.md)
-- [ページング](paging.md)
-- [フィルタリング](filtering.md)
-- [ソート](sorting.md)
-- [列の移動](column-moving.md)
-- [集計](summaries.md)
-- [列のサイズ変更](column-resizing.md)
-- [選択](selection.md)
+- [Grid の概要](../data-grid.mdx)
+- [仮想化とパフォーマンス](../_shared/virtualization.mdx)
+- [ページング](../_shared/paging.mdx)
+- [フィルタリング](../_shared/filtering.mdx)
+- [ソート](../_shared/sorting.mdx)
+- [列の移動](../_shared/column-moving.mdx)
+- [集計](../_shared/summaries.mdx)
+- [列のサイズ変更](../_shared/column-resizing.mdx)
+- [選択](../_shared/selection.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx
index 1bbde2efd7..980603470a 100644
--- a/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grid/paste-excel.mdx
@@ -672,7 +672,7 @@ export class PasteHandler {
 
 ## その他のリソース
 
-- [Excel エクスポーター](export-excel.md) - Excel エクスポーター サービスを使用して、グリッドから Excel にデータをエクスポートします。選択したデータのみをグリッドからエクスポートするオプションもあります。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、ExcelExporterService の export メソッドを呼び出して最初の引数として グリッド コンポーネントを渡します。
+- [Excel エクスポーター](../_shared/export-excel.mdx) - Excel エクスポーター サービスを使用して、グリッドから Excel にデータをエクスポートします。選択したデータのみをグリッドからエクスポートするオプションもあります。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式はフィルタリングやソートなどの機能が使用でき、ExcelExporterService の export メソッドを呼び出して最初の引数として グリッド コンポーネントを渡します。
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx
index 35b398edcb..1ead501a6f 100644
--- a/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grid/selection-based-aggregates.mdx
@@ -63,14 +63,14 @@ const dates = data.filter(rec => isDate(rec));
 
 ## その他のリソース
 
-- [Grid の概要](../data-grid.md)
+- [Grid の概要](../data-grid.mdx)
 - [選択サービス]({environment:{Platform}ApiUrl}/classes/gridselectionservice.html)
-- [行の選択](row-selection.md)
-- [セルの選択](cell-selection.md)
+- [行の選択](../_shared/row-selection.mdx)
+- [セルの選択](../_shared/cell-selection.mdx)
 - [NumberSummaryOperand]({environment:{Platform}ApiUrl}/classes/numbersummaryoperand.html)
 - [DateSummaryOperand]({environment:{Platform}ApiUrl}/classes/datesummaryoperand.html)
-- [集計](summaries.md)
-- [ページング](paging.md)
+- [集計](../_shared/summaries.mdx)
+- [ページング](../_shared/paging.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/grids-header.mdx b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
index 59fae75170..ec9aa2ce35 100644
--- a/docs/xplat/src/content/jp/components/grids/grids-header.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grids-header.mdx
@@ -229,18 +229,18 @@ h3#excel-library-for-the-angular-grid ~ h3{
 <ul id="features-list">
 <li>
 
-数百万のレコードをロードできる[**仮想化された行と列**](grid/virtualization.md)
+数百万のレコードをロードできる[**仮想化された行と列**](./_shared/virtualization.mdx)
 
 </li>
 
 <li>
 
-[**セル**](grid/cell-editing.md)および[**行**](grid/row-editing.md)オプションを使用した[**インライン編集**](grid/editing.md)
+[**セル**](./_shared/cell-editing.mdx)および[**行**](./_shared/row-editing.mdx)オプションを使用した[**インライン編集**](./_shared/editing.mdx)
 </li>
 
 <li>
 
-[**セル**](grid/cell-editing.md)を使用した[**インライン編集**](grid/editing.md)
+[**セル**](./_shared/cell-editing.mdx)を使用した[**インライン編集**](./_shared/editing.mdx)
 
 </li>
 
@@ -248,31 +248,31 @@ h3#excel-library-for-the-angular-grid ~ h3{
 
 <li>
 
-[**Excel スタイル フィルタリング**](grid/excel-style-filtering.md)と [**Excel キーボード ナビゲーション**](grid/keyboard-navigation.md)機能
+[**Excel スタイル フィルタリング**](./_shared/excel-style-filtering.mdx)と [**Excel キーボード ナビゲーション**](./_shared/keyboard-navigation.mdx)機能
 
 </li>
 
 <li>
 
-インタラクティブな [**Outlook スタイルのようなグループ化**](grid/groupby.md)
+インタラクティブな [**Outlook スタイルのようなグループ化**](./grid/groupby.mdx)
 
 </li>
 
 <li>
 
-グリッド セルまたは列のデータに基づいた[**列集計**](grid/summaries.md)
+グリッド セルまたは列のデータに基づいた[**列集計**](./_shared/summaries.mdx)
 
 </li>
 
 <li>
 
-[**Excel へのエクスポート**](grid/export-excel.md)
+[**Excel へのエクスポート**](./_shared/export-excel.mdx)
 
 </li>
 
 <li>
 
-行の高さとサイズ変更を調整する[**サイズ**](grid/size.md)
+行の高さとサイズ変更を調整する[**サイズ**](./_shared/size.mdx)
 
 </li>
 
@@ -302,7 +302,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     imagePosition="right"
     title="{Platform} グリッドのページング、ソート、フィルタリング & 検索"
 >
-<p>Allow users to navigate your data set with our default [pager](grid/paging.md) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](grid/search.md) on the grid, and several [advanced filtering](grid/advanced-filtering.md) options, including data-type based [Microsoft Excel-style Filtering](grid/excel-style-filtering.md).</p>
+<p>Allow users to navigate your data set with our default [pager](./_shared/paging.mdx) or create your own template to give your own paging experience. With complete support for single and multi-column sorting, full-text [search](./_shared/search.mdx) on the grid, and several [advanced filtering](./_shared/advanced-filtering.mdx) options, including data-type based [Microsoft Excel-style Filtering](./_shared/excel-style-filtering.mdx).</p>
 </Feature>
 
 <Feature
@@ -312,7 +312,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     imagePosition="right"
     title="インライン {Platform} グリッド編集"
 >
-<p>We provide you default [cell templates for editable columns](data-grid.md#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.</p>
+<p>We provide you default [cell templates for editable columns](./data-grid.mdx#cell-editing-template) which are based on the data type of the column. You can define your own custom templates for editable columns and override default behavior for committing and discarding changes in the cell value.</p>
 </Feature>
 
 <Feature
@@ -322,7 +322,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     imagePosition="right"
     title="キーボード ナビゲーションと行/セルの選択"
 >
-<p>Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](grid/keyboard-navigation.md) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. <a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Learn about our most recent enhancements to this feature</a>.</p>
+<p>Ensure accessibility compliance and improve usability, enabling Excel-like [keyboard navigation](./_shared/keyboard-navigation.mdx) in the {Platform} data grid, using the up, down, right, left, tab, and Enter keys. You can toggle single or multiple row selection in the {Platform} grid using the mouse or keyboard to select or de-select full rows, or use the built-in select all / de-select all checkbox in the grid toolbar to work with row selection. <a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">Learn about our most recent enhancements to this feature</a>.</p>
 </Feature>
 
 <Feature
@@ -342,7 +342,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     imagePosition="right"
     title="列のグループ化、ピン固定、集計"
 >
-<p>Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](grid/summaries.md) or custom summary templates. Enable users to interactively [hide](grid/column-hiding.md) or [move columns](grid/column-moving.md), with full support for interactive [column pinning](grid/column-pinning.md), during move, drag, and reorder operations.</p>
+<p>Group columns or pre-set column groups via mouse interaction, touch or our API, with support for built-in column [summaries](./_shared/summaries.mdx) or custom summary templates. Enable users to interactively [hide](./_shared/column-hiding.mdx) or [move columns](./_shared/column-moving.mdx), with full support for interactive [column pinning](./_shared/column-pinning.mdx), during move, drag, and reorder operations.</p>
 </Feature>
 
 <Feature
@@ -352,7 +352,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     imagePosition="right"
     title="複数列ヘッダー"
 >
-<p>Enable [multi-column headers](grid/multi-column-headers.md), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.</p>
+<p>Enable [multi-column headers](./_shared/multi-column-headers.mdx), allowing you to group columns under a common header. Every column group could be a representation of combinations between other groups or columns, with full support for column pinning, interactive column moving within groups, sorting, and hiding groups.</p>
 </Feature>
 
 <PlatformBlock for="Angular">
@@ -379,7 +379,7 @@ h3#excel-library-for-the-angular-grid ~ h3{
     title="{Platform} Grid の Excel ライブラリ"
 >
     <div id="list-features">
-<p>Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](excel-library.md) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.</p>
+<p>Full support for exporting data grids to XLXS, XLS, TSV or CSV. The {ProductName} [Excel library](./excel-library.mdx) includes 300+ formulas, Table support, Conditional Formatting, Chart creation and more – all without needing Microsoft Excel on the client machine.</p>
     </div>
 </Feature>
 
@@ -392,101 +392,101 @@ h3#excel-library-for-the-angular-grid ~ h3{
 <ul>
 <li>
 
-[インライン編集](grid/editing.md)
+[インライン編集](./_shared/editing.mdx)
 
 </li>
 
 <li>
 
-[行と列のフィルタリング](grid/filtering.md)
+[行と列のフィルタリング](./_shared/filtering.mdx)
 
 </li>
 <li>
 
-[グリッドのソート](grid/sorting.md)
+[グリッドのソート](./_shared/sorting.mdx)
 </li>
 
 <li>
 
-[列のグループ化](grid/groupby.md)
+[列のグループ化](./grid/groupby.mdx)
 
 </li>
 <li>
 
-[列の集計](grid/summaries.md)
+[列の集計](./_shared/summaries.mdx)
 
 </li>
 <li>
 
-[ピン固定列](grid/column-pinning.md)
+[ピン固定列](./_shared/column-pinning.mdx)
 
 </li>
 </ul>
 <ul>
 <li>
 
-[列の移動](grid/column-moving.md)
+[列の移動](./_shared/column-moving.mdx)
 
 </li>
 <li>
 
-[セルのコピーおよび貼り付け](grid/clipboard-interactions.md)
+[セルのコピーおよび貼り付け](./_shared/clipboard-interactions.mdx)
 
 </li>
 <li>
 
-[セルのスタイル設定](grid/conditional-cell-styling.md)
+[セルのスタイル設定](./_shared/conditional-cell-styling.mdx)
 
 </li>
 <li>
 
-[リアルタイム/ライブ データのテーマ](grid/live-data.md)
+[リアルタイム/ライブ データのテーマ](./_shared/live-data.mdx)
 
 </li>
 
 <li>
 
-[グリッド ページング](grid/paging.md)
+[グリッド ページング](./_shared/paging.mdx)
 
 </li>
 <li>
 
-[行選択](grid/selection.md)
+[行選択](./_shared/selection.mdx)
 
 </li>
 <li>
 
-[セル選択](grid/cell-selection.md)
+[セル選択](./_shared/cell-selection.mdx)
 
 </li>
 </ul>
 <ul>
 <li>
 
-[グリッド レベルの検索](grid/search.md)
+[グリッド レベルの検索](./_shared/search.mdx)
 
 </li>
 
 <li>
 
-[複数列ヘッダー](grid/multi-column-headers.md)
+[複数列ヘッダー](./_shared/multi-column-headers.mdx)
 
 </li>
 
 <li>
 
-[仮想化とパフォーマンス](grid/virtualization.md)
+[仮想化とパフォーマンス](./_shared/virtualization.mdx)
 
 </li>
 <li>
 
-[列のサイズ変更](grid/column-resizing.md)
+[列のサイズ変更](./_shared/column-resizing.mdx)
 
 </li>
 
 <li>
 
-[列の非表示](grid/column-hiding.md)
+[列の非表示](./_shared/column-hiding.mdx)
 
 </li>
 
@@ -530,7 +530,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
         <ul>
 
 - <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/support/ignite-ui-angular-help">{Platform} サポート ホーム ページをご覧ください。</a>
-- {Platform} [ドキュメント](../general-getting-started.md)を読み、{Platform} サンプルを試してください。
+- {Platform} [ドキュメント](../general-getting-started.mdx)を読み、{Platform} サンプルを試してください。
 - 最新の情報は、<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/community/blogs/tags/Ignite%2bUI%2bfor%2b{Platform}">{Platform} ブログをご覧ください。</a>
 - <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/products/ignite-ui-angular/grid-table">サポート ケースの送信</a>
 - {Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">参照アプリケーションを試してください。</a>
@@ -551,13 +551,13 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
     <igc-expansion-panel indicator-position="end">
         <span slot="title">Why should I choose the Infragistics {ProductName} Data Grid?</span>
         <ul>
-            <li>数百万のレコードをロードできる[仮想化された行と列](grid/virtualization.md)</li>
-            <li>セル、行、および[一括更新](grid/batch-editing.md)オプションを使用した[インライン編集](grid/row-editing.md)</li>
-            <li>[Excel スタイル フィルタリング](grid/excel-style-filtering.md)と [Excel キーボード ナビゲーション](grid/keyboard-navigation.md)機能</li>
-            <li>インタラクティブな [Outlook スタイルのようなグループ化](grid/groupby.md)</li>
-            <li>グリッド セルまたは列のデータに基づいた[列集計](grid/summaries.md)</li>
-            <li>[Excel へのエクスポート](grid/export-excel.md)</li>
-            <li>行の高さとサイズ変更を調整する[サイズ](grid/size.md)</li>
+            <li>数百万のレコードをロードできる[仮想化された行と列](./_shared/virtualization.mdx)</li>
+            <li>セル、行、および[一括更新](./_shared/batch-editing.mdx)オプションを使用した[インライン編集](./_shared/row-editing.mdx)</li>
+            <li>[Excel スタイル フィルタリング](./_shared/excel-style-filtering.mdx)と [Excel キーボード ナビゲーション](./_shared/keyboard-navigation.mdx)機能</li>
+            <li>インタラクティブな [Outlook スタイルのようなグループ化](./grid/groupby.mdx)</li>
+            <li>グリッド セルまたは列のデータに基づいた[列集計](./_shared/summaries.mdx)</li>
+            <li>[Excel へのエクスポート](./_shared/export-excel.mdx)</li>
+            <li>行の高さとサイズ変更を調整する[サイズ](./_shared/size.mdx)</li>
         </ul>
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
@@ -571,6 +571,6 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
         <span slot="title">{Platform} と Infragistics {ProductName} Data Grid コントロールのインストール方法を教えてください。</span>
-        <p>{Platform} Data Grid の使用を開始するには、[作業の開始ガイド](../general-getting-started.md)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。</p>
+        <p>{Platform} Data Grid の使用を開始するには、[作業の開始ガイド](../general-getting-started.mdx)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。</p>
     </igc-expansion-panel>
 </FaqAccordion>
diff --git a/docs/xplat/src/content/jp/components/grids/grids.mdx b/docs/xplat/src/content/jp/components/grids/grids.mdx
index 22a6940368..6b3219197c 100644
--- a/docs/xplat/src/content/jp/components/grids/grids.mdx
+++ b/docs/xplat/src/content/jp/components/grids/grids.mdx
@@ -237,21 +237,21 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 
 
 <ul id="features-list">
-<li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
+<li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
 
-<li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
+<li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
 
-<li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
+<li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
 
-<li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
+<li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
 
-<li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
+<li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
 
 <PlatformBlock for="React, WebComponents">
-<li>Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)</li>
+<li>Export to Excel, including [Data Visualization](../excel-library-working-with-charts.mdx)</li>
 </PlatformBlock>
 
-<li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+<li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
 
 <li>Full touch support for mobile app development</li>
 </ul>
@@ -306,8 +306,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid includes every option for mouse and [touch-driven selection](data-grid/cell-selection.md) by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid includes every option for mouse and [touch-driven selection](./_shared/cell-selection.mdx) by cell and row level, including modes like SingleCell, SingleRow, MultipleCell, MultipleRow, RangeCell and more.</p>
     </div>
 </div>
 
@@ -318,8 +318,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid has the ability to configure [mouse and touch-driven selection](data-grid/cell-selection.md) for both cells and rows. You can select either single or multiple cells and rows, and the ability to use range selection is also available.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid has the ability to configure [mouse and touch-driven selection](./_shared/cell-selection.mdx) for both cells and rows. You can select either single or multiple cells and rows, and the ability to use range selection is also available.</p>
     </div>
 </div>
 
@@ -330,8 +330,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridCellRowSelection} alt="Animation of cell selection capabilities within {Platform} Data Grid" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid component includes the options to [select rows and cells](data-grid/cell-selection.md) using both the user’s mouse and touchscreen. The available modes for cell and row selection include MultipleCell, MultipleRow, SingleCell, SingleRow, and RangeCell.</p>
+        <span class="h3 features__heading">{Platform} Grid Cell and Row Selection<a class="anchorjs-link" href="data-grid/column-filtering.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid component includes the options to [select rows and cells](./_shared/cell-selection.mdx) using both the user’s mouse and touchscreen. The available modes for cell and row selection include MultipleCell, MultipleRow, SingleCell, SingleRow, and RangeCell.</p>
     </div>
 </div>
 
@@ -346,8 +346,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
         <Image src={gridFiltering} alt="{Platform} Data Grid のフィルタリング機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドには、フィルタリングされる列のデータ型に基づいた[列フィルタリング](data-grid/column-filtering.md)が含まれています。たとえば、列が DateTime フィールドの場合、Last Month、This Quarter、Next Week などのフィルターを使用できます。</p>
+        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドには、フィルタリングされる列のデータ型に基づいた[列フィルタリング](./_shared/filtering.mdx)が含まれています。たとえば、列が DateTime フィールドの場合、Last Month、This Quarter、Next Week などのフィルターを使用できます。</p>
     </div>
 </div>
 
@@ -360,8 +360,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
         <Image src={gridFiltering} alt="{Platform} Data Grid のフィルタリング機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>ユーザーは、{Platform} データ グリッドのデータ型に基づいて[列をフィルタリングする](data-grid/column-filtering.md)ことができます。たとえば、列が数値型プロパティである場合、Greater Than、Less Than、Equal To などのフィルタリング オプションを使用できます。</p>
+        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>ユーザーは、{Platform} データ グリッドのデータ型に基づいて[列をフィルタリングする](./_shared/filtering.mdx)ことができます。たとえば、列が数値型プロパティである場合、Greater Than、Less Than、Equal To などのフィルタリング オプションを使用できます。</p>
     </div>
 </div>
 
@@ -374,8 +374,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
         <Image src={gridFiltering} alt="{Platform} Data Grid のフィルタリング機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" />
     </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{ProductName} データ グリッドを使用すると、ユーザーは、フィルターが適用されるデータ型に基づいて[列をフィルタリング](data-grid/column-filtering.md)できます。たとえば、列がデータ 項目の文字列型プロパティである場合、Contains、Starts With、EndsWith などのフィルタリング オプションを使用できます。</p>
+        <span class="h3 features__heading">{Platform} Grid フィルタリング<a class="anchorjs-link" href="data-grid/cell-editing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{ProductName} データ グリッドを使用すると、ユーザーは、フィルターが適用されるデータ型に基づいて[列をフィルタリング](./_shared/filtering.mdx)できます。たとえば、列がデータ 項目の文字列型プロパティである場合、Contains、Starts With、EndsWith などのフィルタリング オプションを使用できます。</p>
     </div>
 </div>
 
@@ -388,8 +388,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="{Platform} Data Grid の列移動機能のアニメーション" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>[列の順序](data-grid/column-moving.md)の再配置は、{Platform} データ グリッドでクリックアンドドラッグするのと同じくらい簡単です。完全なアニメーション エンジンも含まれているため、このインタラクションの UX を制御できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>[列の順序](./_shared/column-moving.mdx)の再配置は、{Platform} データ グリッドでクリックアンドドラッグするのと同じくらい簡単です。完全なアニメーション エンジンも含まれているため、このインタラクションの UX を制御できます。</p>
     </div>
 </div>
 
@@ -400,8 +400,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="{Platform} Data Grid の列移動機能のアニメーション" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>ユーザーは、列ヘッダーをクリックしてドラッグするだけで、{Platform} データ グリッドに表示される列の[順序を変更](data-grid/column-moving.md)できます。この列の動作に組み込みのアニメーションを使用するオプションも含まれています。</p>
+        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>ユーザーは、列ヘッダーをクリックしてドラッグするだけで、{Platform} データ グリッドに表示される列の[順序を変更](./_shared/column-moving.mdx)できます。この列の動作に組み込みのアニメーションを使用するオプションも含まれています。</p>
     </div>
 </div>
 
@@ -412,8 +412,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnMoving} alt="{Platform} Data Grid の列移動機能のアニメーション" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドには、列をクリックおよびドラッグして[列を並べ替えて再配置する](data-grid/column-moving.md)機能が組み込まれています。列のドラッグによる移動をアニメーション化する機能を使用して、アプリケーションのユーザー エクスペリエンスをより細かく制御できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列移動<a class="anchorjs-link" href="data-grid/column-moving.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドには、列をクリックおよびドラッグして[列を並べ替えて再配置する](./_shared/column-moving.mdx)機能が組み込まれています。列のドラッグによる移動をアニメーション化する機能を使用して、アプリケーションのユーザー エクスペリエンスをより細かく制御できます。</p>
     </div>
 </div>
 
@@ -427,8 +427,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="{Platform} Data Grid の列ピン固定機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データグリッドの左右の[列ピン固定](data-grid/column-pinning.md)を使用すると、ユーザーは 1 つの列または複数の任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データグリッドの左右の[列ピン固定](./_shared/column-pinning.mdx)を使用すると、ユーザーは 1 つの列または複数の任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。</p>
     </div>
 </div>
 
@@ -440,8 +440,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="{Platform} Data Grid の列ピン固定機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データグリッドの左右の[列ピン固定](data-grid/column-pinning.md)を使用すると、ユーザーは 1 つの列または複数の列を任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データグリッドの左右の[列ピン固定](./_shared/column-pinning.mdx)を使用すると、ユーザーは 1 つの列または複数の列を任意の順序でロックできるため、水平方向にスクロールしながら列の位置を維持できます。</p>
     </div>
 </div>
 
@@ -453,8 +453,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right">
 <Image src={gridColumnPinning} alt="{Platform} Data Grid の列ピン固定機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッド コンポーネントには左側または右側に[列を固定する](data-grid/column-pinning.md)機能があります。列が固定またはピン固定されると、ユーザーがグリッドを水平方向にスクロールしている間、列はその位置を維持します。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ピン固定<a class="anchorjs-link" href="data-grid/column-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッド コンポーネントには左側または右側に[列を固定する](./_shared/column-pinning.mdx)機能があります。列が固定またはピン固定されると、ユーザーがグリッドを水平方向にスクロールしている間、列はその位置を維持します。</p>
     </div>
 </div>
 
@@ -467,8 +467,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="{Platform} Data Grid コンポーネントの列のサイズ変更機能が有効になっているデータ グリッド" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データグリッドは、[列のサイズ変更](data-grid/column-resizing.md)機能をサポートし、テーブル内の他の列に関して、データ グリッド列の表示方法を柔軟に変更できるようにします。</p>
+        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データグリッドは、[列のサイズ変更](./_shared/column-resizing.mdx)機能をサポートし、テーブル内の他の列に関して、データ グリッド列の表示方法を柔軟に変更できるようにします。</p>
     </div>
 </div>
 
@@ -479,7 +479,7 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="{Platform} Data Grid コンポーネントの列のサイズ変更機能が有効になっているデータ グリッド" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
         <p>{ProductName} データ グリッドは、列の境界線をクリックおよびドラッグして[列のサイズを変更する]機能をユーザーに提供します。オプションで、列のサイズ変更をアニメーション化するアニメーション エンジンもあります。</p>
     </div>
 </div>
@@ -491,8 +491,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnResizing} alt="{Platform} Data Grid コンポーネントの列のサイズ変更機能が有効になっているデータ グリッド" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データグリッドを使用すると、ユーザーはグリッドにある[列のサイズを変更](data-grid/column-resizing.md)できます。データ テーブルは、サイズ変更操作がすぐに実行されるように、またはドラッグが解放されるまで延期されるように、ユーザーがサイズ変更モードを構成できる機能を備えています。</p>
+        <span class="h3 features__heading">{Platform} Grid 列サイズ変更<a class="anchorjs-link" href="data-grid/column-resizing.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データグリッドを使用すると、ユーザーはグリッドにある[列のサイズを変更](./_shared/column-resizing.mdx)できます。データ テーブルは、サイズ変更操作がすぐに実行されるように、またはドラッグが解放されるまで延期されるように、ユーザーがサイズ変更モードを構成できる機能を備えています。</p>
     </div>
 </div>
 
@@ -505,8 +505,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="{Platform} Data Grid コンポーネントの列のソート機能が有効になっているデータ グリッド" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、単一、複数、またはトリステート列のソート構成で、昇順および降順の[列ソート](data-grid/column-sorting.md)をサポートします。ソートは、ヘッダーをクリックするか、列オプションのドロップダウンを使用してトリガーされます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、単一、複数、またはトリステート列のソート構成で、昇順および降順の[列ソート](./_shared/sorting.mdx)をサポートします。ソートは、ヘッダーをクリックするか、列オプションのドロップダウンを使用してトリガーされます。</p>
     </div>
 </div>
 
@@ -517,8 +517,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="{Platform} Data Grid コンポーネントの列のソート機能が有効になっているデータ グリッド" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>[列データのソート](data-grid/column-sorting.md)を昇順または降順で実行する機能は、{Platform} データ グリッドで利用できます。ユーザーは、単一、複数、またはトリステートのソート構成でソートすることができ、ヘッダーをクリックするとソートがデフォルトでトリガーされます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>[列データのソート](./_shared/sorting.mdx)を昇順または降順で実行する機能は、{Platform} データ グリッドで利用できます。ユーザーは、単一、複数、またはトリステートのソート構成でソートすることができ、ヘッダーをクリックするとソートがデフォルトでトリガーされます。</p>
     </div>
 </div>
 
@@ -529,8 +529,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSorting} alt="Blazor のソート可能なグリッドの例" class="b-lazy b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>プロジェクト用の {Platform} ソート可能グリッドをお探しですか? {ProductName} データ グリッド コンポーネントには、[列データをソートする](data-grid/column-sorting.md)機能が組み込まれており、単一、複数、またはトリステートのソートの構成を利用できます。デフォルトでは、グリッド内の特定の列をソートするには、列ヘッダーをクリックしますが、列オプション ダイアログを使用してソートすることもできます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列ソート<a class="anchorjs-link" href="data-grid/column-sorting.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>プロジェクト用の {Platform} ソート可能グリッドをお探しですか? {ProductName} データ グリッド コンポーネントには、[列データをソートする](./_shared/sorting.mdx)機能が組み込まれており、単一、複数、またはトリステートのソートの構成を利用できます。デフォルトでは、グリッド内の特定の列をソートするには、列ヘッダーをクリックしますが、列オプション ダイアログを使用してソートすることもできます。</p>
     </div>
 </div>
 
@@ -543,8 +543,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="{Platform} Data Grid の列集計機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、データ グリッドのフッター領域またはグループ ヘッダー[列集計](data-grid/column-summaries.md)をサポートします。これは、Count、Sum、Min、Max、Avg などの値を表示するのに最適です。</p>
+        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、データ グリッドのフッター領域またはグループ ヘッダー[列集計](./_shared/summaries.mdx)をサポートします。これは、Count、Sum、Min、Max、Avg などの値を表示するのに最適です。</p>
     </div>
 </div>
 
@@ -555,8 +555,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="{Platform} Data Grid の列集計機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>[列集計](data-grid/column-summaries.md) は、{Platform} データ グリッドのフッター領域に表示でき、グループ ヘッダーにも表示するように構成可能なオプションもあります。これは、他の集計オプションの中でも、数値データの Sum、Minimum、および Maximum を表示するのに役立ちます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>[列集計](./_shared/summaries.mdx) は、{Platform} データ グリッドのフッター領域に表示でき、グループ ヘッダーにも表示するように構成可能なオプションもあります。これは、他の集計オプションの中でも、数値データの Sum、Minimum、および Maximum を表示するのに役立ちます。</p>
     </div>
 </div>
 
@@ -567,8 +567,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 <div class="feature">
     <div class="feature__image feature__image--right"><Image src={gridColumnSummaries} alt="{Platform} Data Grid の列集計機能のアイコン" class="b-lazy b-lazy-gifs b-loaded responsive-img" /></div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>ユーザーは、{Platform} データ グリッド コンポーネントで[列集計](data-grid/column-summaries.md)を適用することができます。これらの集計には、数値データの Sum、Minimum、Maximum などを表示する機能があり、グリッドのフッターまたはグループ ヘッダーに表示するように構成できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列集計<a class="anchorjs-link" href="data-grid/column-summaries.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>ユーザーは、{Platform} データ グリッド コンポーネントで[列集計](./_shared/summaries.mdx)を適用することができます。これらの集計には、数値データの Sum、Minimum、Maximum などを表示する機能があり、グリッドのフッターまたはグループ ヘッダーに表示するように構成できます。</p>
     </div>
 </div>
 
@@ -582,8 +582,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="{Platform} Data Grid の列タイプ機能のアイコン表現" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、さまざまな列タイプに加えて、テンプレート[列タイプ](data-grid/column-types.md)とスパークライン テンプレート タイプをサポートしており、グリッド内のデータの表示方法を完全に柔軟に設定できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、さまざまな列タイプに加えて、テンプレート[列タイプ](./_shared/column-types.mdx)とスパークライン テンプレート タイプをサポートしており、グリッド内のデータの表示方法を完全に柔軟に設定できます。</p>
     </div>
 </div>
 
@@ -595,8 +595,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="{Platform} Data Grid の列タイプ機能のアイコン表現" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドには、データ ソースで使用される多様なデータ型に固有のさまざまな[列タイプ](data-grid/column-types.md)があります。さらに、テンプレート列を使用すると、その列のセル内にほぼすべてのものを配置することが可能で、ユーザーは UI を完全に柔軟に変更できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドには、データ ソースで使用される多様なデータ型に固有のさまざまな[列タイプ](./_shared/column-types.mdx)があります。さらに、テンプレート列を使用すると、その列のセル内にほぼすべてのものを配置することが可能で、ユーザーは UI を完全に柔軟に変更できます。</p>
     </div>
 </div>
 
@@ -608,8 +608,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnTypes} alt="{Platform} Data Grid の列タイプ機能のアイコン表現" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{ProductName} データ グリッドを使用すると、ユーザーはさまざまなデータ型固有の[列タイプ](data-grid/column-types.md)を利用して、データを最も効果的に表示できます。データがもう少し複雑な場合は、追加のテンプレート列があり、グリッドのデータ ソースの特定の部分を表示するための独自のセル コンテンツを定義できます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列タイプ<a class="anchorjs-link" href="data-grid/column-types.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{ProductName} データ グリッドを使用すると、ユーザーはさまざまなデータ型固有の[列タイプ](./_shared/column-types.mdx)を利用して、データを最も効果的に表示できます。データがもう少し複雑な場合は、追加のテンプレート列があり、グリッドのデータ ソースの特定の部分を表示するための独自のセル コンテンツを定義できます。</p>
     </div>
 </div>
 
@@ -624,8 +624,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="{Platform} Data Grid の列アニメーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、列の非表示や列の移動などのイベント時に[列のアニメーション](data-grid/column-animation.md)をサポートします。{Platform} データ グリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。</p>
+        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、列の非表示や列の移動などのイベント時に列のアニメーションをサポートします。{Platform} データ グリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。</p>
     </div>
 </div>
 
@@ -637,8 +637,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="{Platform} Data Grid の列アニメーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{ProductName} データ グリッド コンポーネントには、ユーザーが実行できるさまざまなアクションに応じて[列ヘッダーとセルをアニメーション化する](data-grid/column-animation.md)機能が組み込まれています。たとえば、列の追加、非表示、移動アクションなどに使用できるさまざまなアニメーションがあります。</p>
+        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{ProductName} データ グリッド コンポーネントには、ユーザーが実行できるさまざまなアクションに応じて列ヘッダーとセルをアニメーション化する機能が組み込まれています。たとえば、列の追加、非表示、移動アクションなどに使用できるさまざまなアニメーションがあります。</p>
     </div>
 </div>
 
@@ -650,8 +650,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnAnimations} alt="{Platform} Data Grid の列アニメーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、列の非表示や列の移動などのイベント時に[列アニメーション](data-grid/column-animation.md)をサポートします。{Platform} データグリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。</p>
+        <span class="h3 features__heading">{Platform} Grid 列アニメーション<a class="anchorjs-link" href="data-grid/column-animation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、列の非表示や列の移動などのイベント時に列アニメーションをサポートします。{Platform} データグリッドで列アニメーションが設定されている場合、対応するアニメーションはその列のすべてのセルに対して発生します。</p>
     </div>
 </div>
 
@@ -665,8 +665,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="{Platform} Data Grid の列オプション ダイアログ機能のアイコン" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、および並べ替えの機能をサポートします。[列オプション](data-grid/column-options.md)は、列ホバーの Kebab メニューを介して、すべての列でデフォルトでオンになっています。</p>
+        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、各列ヘッダに表示される UI による列のグループ化、非表示、移動、固定、フィルター、および並べ替えの機能をサポートします。列オプションは、列ホバーの Kebab メニューを介して、すべての列でデフォルトでオンになっています。</p>
     </div>
 </div>
 
@@ -678,8 +678,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="{Platform} Data Grid の列オプション ダイアログ機能のアイコン" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>Kebab メニューは、{ProductName} データ グリッドの列ヘッダーで使用できます。クリックすると、その列の[オプション ダイアログ](data-grid/column-options.md)が開きます。このダイアログを使用すると、ユーザーは、そのダイアログの対象列をグループ化、ソート、非表示、移動、固定、およびフィルタリングできます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>Kebab メニューは、{ProductName} データ グリッドの列ヘッダーで使用できます。クリックすると、その列のオプション ダイアログが開きます。このダイアログを使用すると、ユーザーは、そのダイアログの対象列をグループ化、ソート、非表示、移動、固定、およびフィルタリングできます。</p>
     </div>
 </div>
 
@@ -691,8 +691,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridColumnOptionsDialog} alt="{Platform} Data Grid の列オプション ダイアログ機能のアイコン" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドの各列は、同じ場所 ([列オプション ダイアログ](data-grid/column-options.md)) からソート、グループ化、非表示、移動、および固定できます。グリッドの各列ヘッダーには、マウスをホバーすると Kebab メニューが表示され、クリックするとこのダイアログが表示されます。</p>
+        <span class="h3 features__heading">{Platform} Grid 列オプション ダイアログ<a class="anchorjs-link" href="data-grid/column-options.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドの各列は、同じ場所 (列オプション ダイアログ) からソート、グループ化、非表示、移動、および固定できます。グリッドの各列ヘッダーには、マウスをホバーすると Kebab メニューが表示され、クリックするとこのダイアログが表示されます。</p>
     </div>
 </div>
 
@@ -706,8 +706,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid lets you [group rows](data-grid/row-grouping.md) into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid lets you [group rows](./grid/groupby.mdx) into a ‘sticky header’ Row Group. Like the Group By feature in Microsoft Outlook, your users have an easy way to visually group data based on their own criteria.</p>
     </div>
 </div>
 
@@ -719,8 +719,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {ProductName} Data Grid gives users the ability to [group rows](data-grid/row-grouping.md) into a “sticky header” Row Group. Users can visualize data items that are alike by grouping them by the columns with the similar data entries in a Microsoft Outlook-style way.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {ProductName} Data Grid gives users the ability to [group rows](./grid/groupby.mdx) into a “sticky header” Row Group. Users can visualize data items that are alike by grouping them by the columns with the similar data entries in a Microsoft Outlook-style way.</p>
     </div>
 </div>
 
@@ -732,8 +732,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowColumnGrouping} alt="Animation of outlook style grouping features on the {Platform} Data Grid" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>The {Platform} Data Grid component includes the ability to [group columns](data-grid/row-grouping.md), directly inspired by the way groupings are visualized in Microsoft Outlook. It is also possible to group multiple columns in the grid and display them with multiple group headers or combine them all into one.</p>
+        <span class="h3 features__heading">{Platform} Grid Column and Row Outlook Style Grouping<a class="anchorjs-link" href="data-grid/row-grouping.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>The {Platform} Data Grid component includes the ability to [group columns](./grid/groupby.mdx), directly inspired by the way groupings are visualized in Microsoft Outlook. It is also possible to group multiple columns in the grid and display them with multiple group headers or combine them all into one.</p>
     </div>
 </div>
 
@@ -746,8 +746,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     title="{Platform} Grid ページング"
 >
     <Image slot="image" src={gridPaging} alt="{Platform} Data Grid のデータ グリッド ページング機能のアイコン" class="b-lazy b-loaded responsive-img" />
-<span class="h3 features__heading">{Platform} Grid Paging<a class="anchorjs-link" href="data-grid/row-paging.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッド [ページング コンポーネント](data-grid/row-paging.md)は、簡単なナビゲーション UI を使用して、データの配列を取り込み、そのデータの一部をページとして出力するように設計されています。</p>
+<span class="h3 features__heading">{Platform} Grid Paging<a class="anchorjs-link" href="data-grid/row-paging.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッド [ページング コンポーネント](./_shared/paging.mdx)は、簡単なナビゲーション UI を使用して、データの配列を取り込み、そのデータの一部をページとして出力するように設計されています。</p>
 </Feature>
 
 
@@ -766,8 +766,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="{Platform} Data Grid の行ピン固定機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドを使用すると、データ グリッドの上部に[行をピン固定](data-grid/row-pinning.md)できます。行をピン固定するとその行がグリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の (または元の) 行は低い不透明度で描画され、ユーザーにこれは特別な行であることをわかりやすくします。</p>
+        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドを使用すると、データ グリッドの上部に[行をピン固定](./_shared/row-pinning.mdx)できます。行をピン固定するとその行がグリッドの最上部に複製され、薄い灰色の背景で固定されたままになり、実際の (または元の) 行は低い不透明度で描画され、ユーザーにこれは特別な行であることをわかりやすくします。</p>
     </div>
 </div>
 
@@ -779,8 +779,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="{Platform} Data Grid の行ピン固定機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>ユーザーは、{Platform} Data Grid の上部に[行をピン固定](data-grid/row-pinning.md)できます。行がピン固定されると、グリッドの一番上にコピーされ、ユーザーが垂直にスクロールする間、カスタマイズ可能な背景でその位置にロックされたままになります。コピーされた元の行は元の位置に表示されますが、不透明度は低くなります。</p>
+        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>ユーザーは、{Platform} Data Grid の上部に[行をピン固定](./_shared/row-pinning.mdx)できます。行がピン固定されると、グリッドの一番上にコピーされ、ユーザーが垂直にスクロールする間、カスタマイズ可能な背景でその位置にロックされたままになります。コピーされた元の行は元の位置に表示されますが、不透明度は低くなります。</p>
     </div>
 </div>
 
@@ -792,8 +792,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridRowPinning} alt="{Platform} Data Grid の行ピン固定機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{ProductName} Data Grid コンポーネントには、[行をピン固定](data-grid/row-pinning.md) をグリッドの最上部に組み込み、ヘッダーの下に表示する組み込みの機能があります。これらの行は、ユーザーがグリッドを垂直方向にスクロールするときに、固定解除されるまで垂直にあります。</p>
+        <span class="h3 features__heading">{Platform} Grid 行ピン固定<a class="anchorjs-link" href="data-grid/row-pinning.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{ProductName} Data Grid コンポーネントには、[行をピン固定](./_shared/row-pinning.mdx) をグリッドの最上部に組み込み、ヘッダーの下に表示する組み込みの機能があります。これらの行は、ユーザーがグリッドを垂直方向にスクロールするときに、固定解除されるまで垂直にあります。</p>
     </div>
 </div>
 
@@ -807,8 +807,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="{Platform} Data Grid のキーボード ナビゲーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} データ グリッドは、Excel のような広範な[キーボード ナビゲーション](data-grid/cell-activation.md)をサポートします。上、下、右、左、タブ、および Enter キーを使用して、{Platform} データ グリッドで Excel のようなキーボード ナビゲーションを有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して単一または複数の行の選択を切り替えて、行全体を選択または選択解除できます。</p>
+        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} データ グリッドは、Excel のような広範なキーボード ナビゲーションをサポートします。上、下、右、左、タブ、および Enter キーを使用して、{Platform} データ グリッドで Excel のようなキーボード ナビゲーションを有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して単一または複数の行の選択を切り替えて、行全体を選択または選択解除できます。</p>
     </div>
 </div>
 
@@ -820,8 +820,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="{Platform} Data Grid のキーボード ナビゲーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>ユーザーは左矢印、右矢印、上矢印、下矢印、Enter、および Tab キーを使用して、{Platform} データ グリッドで Excel のような[キーボード ナビゲーション](data-grid/cell-activation.md)を実行できます。これにより、グリッドのエンドユーザー操作が向上し、グリッド全体でよりアクセスしやすい編集が可能になります。</p>
+        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>ユーザーは左矢印、右矢印、上矢印、下矢印、Enter、および Tab キーを使用して、{Platform} データ グリッドで Excel のようなキーボード ナビゲーションを実行できます。これにより、グリッドのエンドユーザー操作が向上し、グリッド全体でよりアクセスしやすい編集が可能になります。</p>
     </div>
 </div>
 
@@ -833,8 +833,8 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
     <div class="feature__image feature__image--right"><Image src={gridKeyboardNavigation} alt="{Platform} Data Grid のキーボード ナビゲーション機能のアニメーション" class="b-lazy b-loaded responsive-img" />
 </div>
     <div class="feature__details">
-        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.md" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
-        <p>{Platform} Data Grid コンポーネントを使用すると、Microsoft Excel と同じように動作する[キーボード ナビゲーション](data-grid/cell-activation.md)を有効にできます。ユーザーのキーボードの矢印、Tab および Enter キーを使用すると、ナビゲーションを考慮してアクセシビリティと使いやすさが向上します。</p>
+        <span class="h3 features__heading">{Platform} Grid キーボード ナビゲーション<a class="anchorjs-link" href="data-grid/cell-activation.mdx" aria-label="Anchor" data-anchorjs-icon style="padding-left: 0.375em;"></a></span>
+        <p>{Platform} Data Grid コンポーネントを使用すると、Microsoft Excel と同じように動作するキーボード ナビゲーションを有効にできます。ユーザーのキーボードの矢印、Tab および Enter キーを使用すると、ナビゲーションを考慮してアクセシビリティと使いやすさが向上します。</p>
     </div>
 </div>
 
@@ -847,25 +847,25 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
 </ul>
 <ul>
-    <li>[Grid Paging](data-grid/row-paging.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Remote Data Load on Demand](data-grid/remote-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Grid Paging](./_shared/paging.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Remote Data Load on Demand](./_shared/remote-data-operations.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -880,24 +880,24 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
 </ul>
 <ul>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Remote Data Load on Demand](data-grid/remote-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Remote Data Load on Demand](./_shared/remote-data-operations.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -912,23 +912,23 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 
 <div id="list-features-included">
 <ul>
-    <li>[Grid Editing](data-grid/cell-editing.md)</li>
-    <li>[Cell Selection](data-grid/cell-selection.md)</li>
-    <li>[Cell Templates](data-grid/column-types.md#template-column)</li>
-    <li>[Column Filtering](data-grid/column-filtering.md)</li>
-    <li>[Column Hiding](data-grid/column-chooser.md)</li>
-    <li>[Column Moving](data-grid/column-moving.md)</li>
-    <li>[Column Summaries](data-grid/column-summaries.md)</li>
-    <li>[Custom Grid Toolbar](data-grid/column-chooser.md#toolbars-column-chooser-ui)</li>
+    <li>[Grid Editing](./_shared/cell-editing.mdx)</li>
+    <li>[Cell Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Cell Templates](./_shared/column-types.mdx#template-column)</li>
+    <li>[Column Filtering](./_shared/filtering.mdx)</li>
+    <li>[Column Hiding](./_shared/column-hiding.mdx)</li>
+    <li>[Column Moving](./_shared/column-moving.mdx)</li>
+    <li>[Column Summaries](./_shared/summaries.mdx)</li>
+    <li>[Custom Grid Toolbar](./_shared/column-hiding.mdx#toolbars-column-chooser-ui)</li>
 </ul>
 <ul>
-    <li>[Fixed/Pinned Columns](data-grid/column-pinning.md)</li>
-    <li>[Grid Sorting](data-grid/column-sorting.md)</li>
-    <li>[Real-time/Live Data](data-grid/live-data.md)</li>
-    <li>[Resizable Columns](data-grid/column-resizing.md)</li>
-    <li>[Row Grouping](data-grid/row-grouping.md)</li>
-    <li>[Row Selection](data-grid/cell-selection.md)</li>
-    <li>[Virtualization and Performance](data-grid/performance.md)</li>
+    <li>[Fixed/Pinned Columns](./_shared/column-pinning.mdx)</li>
+    <li>[Grid Sorting](./_shared/sorting.mdx)</li>
+    <li>[Real-time/Live Data](./_shared/live-data.mdx)</li>
+    <li>[Resizable Columns](./_shared/column-resizing.mdx)</li>
+    <li>[Row Grouping](./grid/groupby.mdx)</li>
+    <li>[Row Selection](./_shared/cell-selection.mdx)</li>
+    <li>[Virtualization and Performance](./_shared/virtualization.mdx)</li>
 </ul>
 </div>
 
@@ -971,7 +971,7 @@ Web コンポーネントは、既存の Web 標準に準拠した Web ベース
 Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセスするための複数のオプションがあります。
         <ul>
             <li><a class="no-external-icon" href="{environment:infragisticsBaseUrl}/support/{ProductSpinal}-help">{Platform} サポート ホーム ページ</a>をご覧ください。</li>
-            <li>{Platform} [ドキュメント](..\general-getting-started.md)を読み、{Platform} サンプルを試してください。</li>
+            <li>{Platform} [ドキュメント](../general-getting-started.mdx)を読み、{Platform} サンプルを試してください。</li>
             <li>最新の情報は、<a class="no-external-icon" href="http://infragistics.com/community/blogs/tags/Ignite%2bUI%2bfor%2b{Platform}">{Platform} ブログをご覧ください。</a> </li>
             <li>アカウントにサインインした後、<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/my-account/support-activity">サポート ケースを送信します。</a> </li>
             <li>{Platform} <a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">参照アプリケーションをお試しください。</a></li>
@@ -996,13 +996,13 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
         <div class="faqs-accordion h4">Why should I choose the Infragistics {ProductName} Data Grid?</div>
                 <div class="faqs-accordion-panel">
             <ul>
-                <li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
-                <li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
-                <li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
-                <li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
-                <li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
-                <li>Export to Excel, including [Data Visualization](..\excel-library-working-with-charts.md)</li>
-                <li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+                <li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
+                <li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
+                <li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
+                <li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
+                <li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
+                <li>Export to Excel, including [Data Visualization](../excel-library-working-with-charts.mdx)</li>
+                <li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
                 <li>Full touch support for mobile app development</li>
             </ul>
         </div>
@@ -1025,7 +1025,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
     <div class="faqs-accordion-content">
         <div class="faqs-accordion h4">Infragistics {ProductName} Data Grid コントロールを個別に購入できますか？</div>
                 <div class="faqs-accordion-panel">
-        {Platform} Data Grid の使用を開始するには、[作業の開始ガイド](..\general-getting-started.md)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。
+        {Platform} Data Grid の使用を開始するには、[作業の開始ガイド](../general-getting-started.mdx)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。
         </div>
     </div>
 </div>
@@ -1044,12 +1044,12 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
         <div class="faqs-accordion h4">Why should I choose the Infragistics {ProductName} Data Grid?</div>
                 <div class="faqs-accordion-panel">
             <ul>
-                <li>[Virtualized Rows and Columns](data-grid/live-data.md) so you can load millions of records</li>
-                <li>[Inline Editing](data-grid/cell-editing.md) with Cell, Row, and Batch Update options</li>
-                <li>[Excel-style Filtering](data-grid/column-filtering.md) and full [Excel Keyboard Navigation](data-grid/cell-activation.md) capability</li>
-                <li>Interactive [Outlook-style Grouping](data-grid/row-grouping.md)</li>
-                <li>[Column Summaries](data-grid/column-summaries.md) based on any data in a grid cell or column</li>
-                <li>[Cell and Row Selection](data-grid/cell-selection.md) for Single and Multi-Select</li>
+                <li>[Virtualized Rows and Columns](./_shared/live-data.mdx) so you can load millions of records</li>
+                <li>[Inline Editing](./_shared/cell-editing.mdx) with Cell, Row, and Batch Update options</li>
+                <li>[Excel-style Filtering](./_shared/filtering.mdx) and full Excel Keyboard Navigation capability</li>
+                <li>Interactive [Outlook-style Grouping](./grid/groupby.mdx)</li>
+                <li>[Column Summaries](./_shared/summaries.mdx) based on any data in a grid cell or column</li>
+                <li>[Cell and Row Selection](./_shared/cell-selection.mdx) for Single and Multi-Select</li>
                 <li>Full touch support for mobile app development</li>
             </ul>
         </div>
@@ -1072,7 +1072,7 @@ Infragistics の {Platform} 製品の受賞歴のあるサポートにアクセ
     <div class="faqs-accordion-content">
         <div class="faqs-accordion h4">Infragistics {ProductName} Data Grid コントロールを個別に購入できますか？</div>
                 <div class="faqs-accordion-panel">
-        {Platform} Data Grid の使用を開始するには、[作業の開始ガイド](..\general-getting-started.md)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。
+        {Platform} Data Grid の使用を開始するには、[作業の開始ガイド](../general-getting-started.mdx)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、{Platform} 開発のベスト プラクティス ガイドです。
         </div>
     </div>
 </div>
diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx
index 4642f9b64d..ab38669305 100644
--- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx
+++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/load-on-demand.mdx
@@ -1094,7 +1094,7 @@ igRegisterScript("OnGridCreated", (args) => {
 
 ## その他のリソース
 
-- [Hierarchical Grid コンポーネント](overview.md)
+- [Hierarchical Grid コンポーネント](./overview.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
index a735fd4b78..cc11ac0290 100644
--- a/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grids/hierarchical-grid/overview.mdx
@@ -43,8 +43,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 {Platform} 階層グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。
 
-- [作業の開始](../../general-getting-started-blazor-client.md)
-- [NuGet パッケージの追加](../../general-nuget-feed.md)
+- [作業の開始](../../general-getting-started.mdx)
 
 </PlatformBlock>
 
@@ -62,7 +61,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 グリッドを使用するには、次のインポートも含める必要があります。
 
-対応するスタイルも参照する必要があります。[テーマ](../../themes/overview.md)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
+対応するスタイルも参照する必要があります。[テーマ](../../themes/overview.mdx)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
 
 ```razor
 <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
@@ -107,7 +106,7 @@ import 'igniteui-webcomponents-grids/grids/combined.js';
 
 </PlatformBlock>
 
-階層グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](overview.md#スタイル設定)セクションを参照してください。
+階層グリッドの外観をカスタマイズする方法の詳細については、[スタイル設定](./overview.mdx#スタイル設定)セクションを参照してください。
 
 <PlatformBlock for="WebComponents">
 ```typescript
@@ -129,7 +128,7 @@ Or to link it:
 ```
 
 </PlatformBlock>
-For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](overview.md#Styling) section.
+For more details on how to customize the appearance of the hierarchical grid, you may have a look at the [styling](./overview.mdx#Styling) section.
 
 </PlatformBlock>
 
@@ -804,14 +803,14 @@ function buildUrl(dataState) {
 
 CRUD API メソッドの呼び出しは,各グリッド インスタンスで可能です。
 
-「[igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.md)」トピックを確認してください。
+「[igxGrid で CRUD 操作を構築する](../general/how-to/how-to-perform-crud.mdx)」トピックを確認してください。
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
 ## スタイル設定
-igxHierarchicalGrid を使用すると、[Ignite UI for Angular Theme ライブラリ](../themes/sass/component-themes.md) でスタイルを設定できます。<ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
+igxHierarchicalGrid を使用すると、[Ignite UI for Angular Theme ライブラリ](../themes/sass/component-themes.mdx) でスタイルを設定できます。<ApiLink type="function-grid-theme" label="theme" kind="sass" module="index.html" /> は、グリッドのすべての機能をカスタマイズできるさまざまなプロパティを公開します。
 
 以下の手順では、igxHierarchicalGrid スタイルをカスタマイズする手順を実行しています。
 
@@ -877,7 +876,7 @@ $custom-theme: grid-theme(
 ```
 
 ### カスタム スキーマの定義
-[**schema**](../themes/sass/schemas.md) のすべての利点を備えた柔軟な構造を構築できます。**schema** はテーマを作成させるための方法です。
+[**schema**](../themes/sass/schemas.mdx) のすべての利点を備えた柔軟な構造を構築できます。**schema** はテーマを作成させるための方法です。
 すべてのコンポーネントに提供される 2 つの事前定義されたスキーマのいずれかを拡張します。この場合、`$_light_grid` を使用します。
 
 ```scss
@@ -922,7 +921,7 @@ $custom-theme: grid-theme(
 このように、Angular の [ViewEncapsulation](https://angular.io/api/core/Component#encapsulation) により、スタイルはカスタム コンポーネントにのみ適用されます。
 
  <DocsAside type="info" title="情報">
- コンポーネントが [`Emulated`](../themes/sass/component-themes.md#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+ コンポーネントが [`Emulated`](../themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、グリッドのスタイルを設定するには、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
  </DocsAside>
 
  <DocsAside type="info" title="情報">
@@ -949,7 +948,7 @@ $custom-theme: grid-theme(
 <PlatformBlock for="WebComponents, Blazor, React">
 
 ## スタイル設定
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。ヘッダーの背景とテキストの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。ヘッダーの背景とテキストの色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:
 
 <PlatformBlock for="WebComponents">
 ```html
diff --git a/docs/xplat/src/content/jp/components/grids/list.mdx b/docs/xplat/src/content/jp/components/grids/list.mdx
index bbe5a36db3..1356767b1b 100644
--- a/docs/xplat/src/content/jp/components/grids/list.mdx
+++ b/docs/xplat/src/content/jp/components/grids/list.mdx
@@ -103,7 +103,7 @@ defineComponents(IgcListComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ### リスト項目の追加
 
diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx
index cbd7d4c339..9d7214499e 100644
--- a/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/overview.mdx
@@ -767,7 +767,7 @@ Blazor で <ApiLink type="PivotConfiguration" member="pivotKeys" label="PivotKey
 
 ## スタイル設定
 
-{Platform} ピボット グリッドは、ベース グリッドと同じ [CSS プロパティ](../grid/theming-grid) を共有します。スタイルを設定するには、目的のプロパティ値を設定し、ピボット グリッド コンポーネントにスコープするだけです。
+{Platform} ピボット グリッドは、ベース グリッドと同じ [CSS プロパティ](../theming-grid.mdx) を共有します。スタイルを設定するには、目的のプロパティ値を設定し、ピボット グリッド コンポーネントにスコープするだけです。
 
 ```css
 igc-pivot-grid {
diff --git a/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx b/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx
index c26e791ed7..29151368ec 100644
--- a/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx
+++ b/docs/xplat/src/content/jp/components/grids/pivot-grid/remote-operations.mdx
@@ -217,7 +217,7 @@ public noopSortStrategy = NoopSortingStrategy.instance();
 ## その他のリソース
 
 
-- [{Platform} グリッドの概要](overview.md)
+- [{Platform} グリッドの概要](./overview.mdx)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/xplat/src/content/jp/components/grids/theming-grid.mdx b/docs/xplat/src/content/jp/components/grids/theming-grid.mdx
index 6aef612127..f0c419cc82 100644
--- a/docs/xplat/src/content/jp/components/grids/theming-grid.mdx
+++ b/docs/xplat/src/content/jp/components/grids/theming-grid.mdx
@@ -118,34 +118,34 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 <PlatformBlock for="Angular">
 
-- [グリッドのサイズ設定](grid/sizing.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [ページング](grid/paging.md)
-- [フィルタリング](grid/filtering.md)
-- [ソート](grid/sorting.md)
-- [集計](grid/summaries.md)
-- [列の移動](grid/column-moving.md)
-- [列のピン固定](grid/column-pinning.md)
-- [列のサイズ変更](grid/column-resizing.md)
-- [選択](grid/selection.md)
-- [列のデータ タイプ](grid/column-types.md#デフォルトのテンプレート)
+- [グリッドのサイズ設定](./_shared/sizing.mdx)
+- [仮想化とパフォーマンス](./_shared/virtualization.mdx)
+- [ページング](./_shared/paging.mdx)
+- [フィルタリング](./_shared/filtering.mdx)
+- [ソート](./_shared/sorting.mdx)
+- [集計](./_shared/summaries.mdx)
+- [列の移動](./_shared/column-moving.mdx)
+- [列のピン固定](./_shared/column-pinning.mdx)
+- [列のサイズ変更](./_shared/column-resizing.mdx)
+- [選択](./_shared/selection.mdx)
+- [列のデータ タイプ](./_shared/column-types.mdx#デフォルトのテンプレート)
 
 
 </PlatformBlock>
 
 <PlatformBlock for="Blazor">
 
-- [グリッドのサイズ設定](grid/sizing.md)
-- [仮想化とパフォーマンス](grid/virtualization.md)
-- [ページング](grid/paging.md)
-- [フィルタリング](grid/filtering.md)
-- [ソート](grid/sorting.md)
-- [集計](grid/summaries.md)
-- [列の移動](grid/column-moving.md)
-- [列のピン固定](grid/column-pinning.md)
-- [列のサイズ変更](grid/column-resizing.md)
-- [選択](grid/selection.md)
-- [列のデータ タイプ](grid/column-types.md#デフォルトのテンプレート)
+- [グリッドのサイズ設定](./_shared/sizing.mdx)
+- [仮想化とパフォーマンス](./_shared/virtualization.mdx)
+- [ページング](./_shared/paging.mdx)
+- [フィルタリング](./_shared/filtering.mdx)
+- [ソート](./_shared/sorting.mdx)
+- [集計](./_shared/summaries.mdx)
+- [列の移動](./_shared/column-moving.mdx)
+- [列のピン固定](./_shared/column-pinning.mdx)
+- [列のサイズ変更](./_shared/column-resizing.mdx)
+- [選択](./_shared/selection.mdx)
+- [列のデータ タイプ](./_shared/column-types.mdx#デフォルトのテンプレート)
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx
index cfb58b7570..885e9b18e1 100644
--- a/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx
+++ b/docs/xplat/src/content/jp/components/grids/tree-grid/overview.mdx
@@ -46,8 +46,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 {Platform} ツリー グリッドを初期化するには、`{PackageGrids}` パッケージをインストールする必要があります。
 
-- [作業の開始](../../general-getting-started-blazor-client.md)
-- [NuGet パッケージの追加](../../general-nuget-feed.md)
+- [作業の開始](../../general-getting-started.mdx)
 
 </PlatformBlock>
 
@@ -65,7 +64,7 @@ IgniteUI.Blazor パッケージの追加については、以下のトピック
 
 ツリー グリッドを使用するには、次のインポートも含める必要があります:
 
-対応するスタイルも参照する必要があります。[テーマ](../../themes/overview.md)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
+対応するスタイルも参照する必要があります。[テーマ](../../themes/overview.mdx)の 1 つにライトモードのオプションまたはダークモードのオプションを選択し、プロジェクト構成に基づいてインポートできます:
 
 ```razor
 <link href="_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css" rel="stylesheet" />
@@ -103,7 +102,7 @@ You also need to include the following import to use the tree grid:
 import 'igniteui-webcomponents-grids/grids/combined';
 ```
 
-The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.md) and based on your project configuration to import it:
+The corresponding styles should also be referenced. You can choose light or dark option for one of the [themes](../../themes/overview.mdx) and based on your project configuration to import it:
 
 ```typescript
 import 'igniteui-webcomponents-grids/grids/themes/light/bootstrap.css';
@@ -115,7 +114,7 @@ Or to link it:
 <link rel='stylesheet' href='node_modules/igniteui-webcomponents-grids/grids/themes/light/bootstrap.css'>
 ```
 
-For more details on how to customize the appearance of the tree grid, you may have a look at the [styling](overview.md#web-components-tree-grid-styling-configuration) section.
+For more details on how to customize the appearance of the tree grid, you may have a look at the [styling](./overview.mdx#web-components-tree-grid-styling-configuration) section.
 </PlatformBlock>
 
 </PlatformBlock>
@@ -157,7 +156,7 @@ export class AppModule {}
 ## 使用方法
 
 ツリー グリッドはグリッドと多くの機能を共有していますが、データを階層的に表示する機能も追加されています。
-ツリー グリッドは、各データ オブジェクトの[子コレクション](overview.md#子コレクション)または各データ オブジェクトに[プライマリキーまたは外部キー](overview.md#プライマリと外部キー)を使用してデータ オブジェクト内の関係を定義できます。
+ツリー グリッドは、各データ オブジェクトの[子コレクション](./overview.mdx#子コレクション)または各データ オブジェクトに[プライマリキーまたは外部キー](./overview.mdx#プライマリと外部キー)を使用してデータ オブジェクト内の関係を定義できます。
 
 ### ツリー セル
 
@@ -378,7 +377,7 @@ public class EmployeesItem
 
 </PlatformBlock>
 
-上記のコードの結果は、この記事の冒頭の[ツリー グリッドの例](./overview.md#例)セクションで確認できます。
+上記のコードの結果は、この記事の冒頭の[ツリー グリッドの例](./overview.mdx#例)セクションで確認できます。
 
 ### プライマリと外部キー
 **プライマリと外部キー**オプションを使用した際に各データ オブジェクトはプライマリキーと外部キーを含みます。プライマリキーは現在のデータ オブジェクトの一意識別子、外部キーは親の一意識別子です。元のデータ ソースを含むツリー グリッドの `data` プロパティがフラット コレクションになります。
@@ -504,7 +503,7 @@ const data = [
 
 ## {Platform} ツリー グリッド スタイル設定の構成
 
-定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.md)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
+定義済みのテーマに加えて、利用可能な [CSS プロパティ](../theming-grid.mdx)のいくつかを設定することで、グリッドをさらにカスタマイズできます。
 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります:
 
 <PlatformBlock for="WebComponents">
diff --git a/docs/xplat/src/content/jp/components/grids/tree.mdx b/docs/xplat/src/content/jp/components/grids/tree.mdx
index 19be53eb05..e80e5d9c2e 100644
--- a/docs/xplat/src/content/jp/components/grids/tree.mdx
+++ b/docs/xplat/src/content/jp/components/grids/tree.mdx
@@ -53,7 +53,7 @@ import { defineComponents, IgcTreeComponent } from 'igniteui-webcomponents';
 defineComponents(IgcTreeComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/badge.mdx b/docs/xplat/src/content/jp/components/inputs/badge.mdx
index 4bda314a5d..05bedee379 100644
--- a/docs/xplat/src/content/jp/components/inputs/badge.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/badge.mdx
@@ -45,7 +45,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcBadgeComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/button-group.mdx b/docs/xplat/src/content/jp/components/inputs/button-group.mdx
index 34a4c12846..8ff501f24e 100644
--- a/docs/xplat/src/content/jp/components/inputs/button-group.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/button-group.mdx
@@ -89,7 +89,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbButtonGroupModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 {ProductName} ボタン グループがインポートされたので、<ApiLink pkg="core" type="ButtonGroup" /> とそのボタンの基本構成を開始できます。
 
diff --git a/docs/xplat/src/content/jp/components/inputs/button.mdx b/docs/xplat/src/content/jp/components/inputs/button.mdx
index f3e49a21ed..81967cea12 100644
--- a/docs/xplat/src/content/jp/components/inputs/button.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/button.mdx
@@ -49,7 +49,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcButtonComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx
index 603709b527..c129338579 100644
--- a/docs/xplat/src/content/jp/components/inputs/checkbox.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/checkbox.mdx
@@ -48,7 +48,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcCheckboxComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/chip.mdx b/docs/xplat/src/content/jp/components/inputs/chip.mdx
index 0fe5862abc..17e0200e39 100644
--- a/docs/xplat/src/content/jp/components/inputs/chip.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/chip.mdx
@@ -46,7 +46,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcChipComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx
index 2f32a237c6..5bc4769063 100644
--- a/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/circular-progress.mdx
@@ -47,7 +47,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcCircularProgressComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx
index e4d8245dde..bb450a8086 100644
--- a/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/combo/overview.mdx
@@ -49,7 +49,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcComboComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx
index 101395985e..3dc2c818b6 100644
--- a/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/date-time-input.mdx
@@ -43,7 +43,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcDateTimeInput);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx
index 9faa275a5e..7485812dc5 100644
--- a/docs/xplat/src/content/jp/components/inputs/dropdown.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/dropdown.mdx
@@ -51,7 +51,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcDropdownComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
@@ -74,7 +74,7 @@ import { IgrDropdown } from 'igniteui-react';
 import 'igniteui-webcomponents/themes/light/bootstrap.css';
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/inputs/file-input.mdx b/docs/xplat/src/content/jp/components/inputs/file-input.mdx
index 6d239cb7b4..1d4abd51db 100644
--- a/docs/xplat/src/content/jp/components/inputs/file-input.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/file-input.mdx
@@ -62,7 +62,7 @@ defineComponents(IgcFileInputComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ## 構成
 
diff --git a/docs/xplat/src/content/jp/components/inputs/highlight.mdx b/docs/xplat/src/content/jp/components/inputs/highlight.mdx
index 999cc4aa28..1334c443ac 100644
--- a/docs/xplat/src/content/jp/components/inputs/highlight.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/highlight.mdx
@@ -80,7 +80,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbHighlightModule));
 
 </PlatformBlock>
 
-{ProductName} の全体的な導入については、[**はじめに**](../general-getting-started.md) を参照してください。
+{ProductName} の全体的な導入については、[**はじめに**](../general-getting-started.mdx) を参照してください。
 
 <ApiLink type="Highlight" /> コンポーネントを使い始める最もシンプルな例は次のとおりです。
 
diff --git a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx
index a1b5ed14c8..0bae5b8ca0 100644
--- a/docs/xplat/src/content/jp/components/inputs/icon-button.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/icon-button.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # {Platform} Icon Button (アイコン ボタン) の概要
 
-{ProductName} Icon Button コンポーネントを使用すると、開発者は登録済みのアイコンをアプリケーションのボタンとして使用できます。[アイコン](../layouts/icon.md) コンポーネントのすべての機能を備えていますが、[ボタン](button.md) コンポーネントの機能も追加しています。
+{ProductName} Icon Button コンポーネントを使用すると、開発者は登録済みのアイコンをアプリケーションのボタンとして使用できます。[アイコン](../layouts/icon.mdx) コンポーネントのすべての機能を備えていますが、[ボタン](./button.mdx) コンポーネントの機能も追加しています。
 
 ## {Platform} Icon Button の例
 
@@ -47,7 +47,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcIconButtonComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/input.mdx b/docs/xplat/src/content/jp/components/inputs/input.mdx
index d6444cbd5e..bfb8c4c4a1 100644
--- a/docs/xplat/src/content/jp/components/inputs/input.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/input.mdx
@@ -79,7 +79,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcInputComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx
index c9526b85c4..b0dd43fdd3 100644
--- a/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/linear-progress.mdx
@@ -45,7 +45,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcLinearProgressComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx
index 67d556088a..1377a54500 100644
--- a/docs/xplat/src/content/jp/components/inputs/mask-input.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/mask-input.mdx
@@ -106,7 +106,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ### マスクのルール
 次の表は、サポートされている組み込みのマスク ルールを示しています:
diff --git a/docs/xplat/src/content/jp/components/inputs/radio.mdx b/docs/xplat/src/content/jp/components/inputs/radio.mdx
index f0e4416a12..bbdcb38f3c 100644
--- a/docs/xplat/src/content/jp/components/inputs/radio.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/radio.mdx
@@ -48,7 +48,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRadioComponent, IgcRadioGroupComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/rating.mdx b/docs/xplat/src/content/jp/components/inputs/rating.mdx
index 6f1e41f5ea..55eb64636a 100644
--- a/docs/xplat/src/content/jp/components/inputs/rating.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/rating.mdx
@@ -84,7 +84,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRatingComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/ripple.mdx b/docs/xplat/src/content/jp/components/inputs/ripple.mdx
index a4251f5142..f1bfc1b4eb 100644
--- a/docs/xplat/src/content/jp/components/inputs/ripple.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/ripple.mdx
@@ -45,7 +45,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcRippleComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 </PlatformBlock>
 
diff --git a/docs/xplat/src/content/jp/components/inputs/select.mdx b/docs/xplat/src/content/jp/components/inputs/select.mdx
index 582798671d..2892db1774 100644
--- a/docs/xplat/src/content/jp/components/inputs/select.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/select.mdx
@@ -52,7 +52,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSelectComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/slider.mdx b/docs/xplat/src/content/jp/components/inputs/slider.mdx
index 73ca74485e..1f3b2877dc 100644
--- a/docs/xplat/src/content/jp/components/inputs/slider.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/slider.mdx
@@ -46,7 +46,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSliderComponent, IgcRangeSliderComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/switch.mdx b/docs/xplat/src/content/jp/components/inputs/switch.mdx
index e20b33bf24..c02ed330b4 100644
--- a/docs/xplat/src/content/jp/components/inputs/switch.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/switch.mdx
@@ -49,7 +49,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcSwitchComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/text-area.mdx b/docs/xplat/src/content/jp/components/inputs/text-area.mdx
index cda1178d46..dcd2f5ae44 100644
--- a/docs/xplat/src/content/jp/components/inputs/text-area.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/text-area.mdx
@@ -63,7 +63,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 defineComponents(IgcTextareaComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx
index fdfdeddf93..b89a5c329d 100644
--- a/docs/xplat/src/content/jp/components/inputs/tooltip.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/tooltip.mdx
@@ -95,7 +95,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[「作業の開始」](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[「作業の開始」](../general-getting-started.mdx)トピックを参照してください。
 
 これで、{Platform} <ApiLink pkg="core" type="Tooltip" /> の基本構成から始めることができます。
 
diff --git a/docs/xplat/src/content/jp/components/interactivity/chat.mdx b/docs/xplat/src/content/jp/components/interactivity/chat.mdx
index 904ba856e3..480c538d71 100644
--- a/docs/xplat/src/content/jp/components/interactivity/chat.mdx
+++ b/docs/xplat/src/content/jp/components/interactivity/chat.mdx
@@ -981,7 +981,7 @@ igc-chat::part(empty-state) {
 - <ApiLink type="ChatMessageAttachment" />
 - <ApiLink type="ChatRenderers" />
 - <ApiLink type="ChatTemplateRenderer" />
-- [スタイル設定およびテーマ](../themes/overview.md)
+- [スタイル設定およびテーマ](../themes/overview.mdx)
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/layouts/accordion.mdx b/docs/xplat/src/content/jp/components/layouts/accordion.mdx
index bcc8dd5e8a..cbaf62e99b 100644
--- a/docs/xplat/src/content/jp/components/layouts/accordion.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/accordion.mdx
@@ -54,7 +54,7 @@ import { defineComponents, IgcAccordionComponent } from 'igniteui-webcomponents'
 defineComponents(IgcAccordionComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
index 85656c8c30..8a96d06f89 100644
--- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
@@ -84,7 +84,7 @@ defineComponents(IgcAvatarComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 <ApiLink pkg="core" type="Avatar" /> は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。<ApiLink pkg="core" type="Avatar" /> の宣言は次のように簡単です。
 
diff --git a/docs/xplat/src/content/jp/components/layouts/card.mdx b/docs/xplat/src/content/jp/components/layouts/card.mdx
index df0e335456..d1e50401d0 100644
--- a/docs/xplat/src/content/jp/components/layouts/card.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/card.mdx
@@ -106,7 +106,7 @@ defineComponents(IgcCardComponent );
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 次に、デモのカード テンプレートを表すために、以下のコードを追加します:
 
diff --git a/docs/xplat/src/content/jp/components/layouts/carousel.mdx b/docs/xplat/src/content/jp/components/layouts/carousel.mdx
index 028c0afa2d..d271580bb7 100644
--- a/docs/xplat/src/content/jp/components/layouts/carousel.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/carousel.mdx
@@ -92,7 +92,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 {ProductName} カルーセルがインポートされたので、<ApiLink pkg="core" type="Carousel" /> とそのボタンの基本構成を開始できます。
 
@@ -636,7 +636,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCarouselModule));
 
 デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。
 
-カルーセル [アニメーション](carousel.md#アニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
+カルーセル [アニメーション](./carousel.mdx#アニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
 
 ### キーボード ナビゲーション
 
diff --git a/docs/xplat/src/content/jp/components/layouts/divider.mdx b/docs/xplat/src/content/jp/components/layouts/divider.mdx
index beb8844d66..726e6d027f 100644
--- a/docs/xplat/src/content/jp/components/layouts/divider.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/divider.mdx
@@ -100,7 +100,7 @@ defineComponents(IgcDividerComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 <ApiLink pkg="core" type="Divider" /> は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。<ApiLink pkg="core" type="Divider" /> の宣言は次のように簡単です:
 
diff --git a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx
index e35b1ac3e1..e222a71d71 100644
--- a/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/dock-manager.mdx
@@ -156,7 +156,7 @@ this.dockManager.layout = {
 各タイプのペインには <ApiLink type="DocumentHost" member="size" label="Size" /> プロパティがあります。親の方向に応じて、サイズはペインの幅または高さに影響します。ペインのサイズはその兄弟ペインのサイズに相対し、デフォルトは 100 です。2 つの兄弟ペインがあり、最初のペインのサイズが 200 に設定され、2 番目のペインのサイズが 100 に設定されている場合、最初のペインは 2 番目のペインの 2 倍のサイズになり、これら 2 つのペインが使用可能なスペースをすべて埋めてしまいます。親の絶対サイズが 900px の場合、それぞれ 600px と 300px にサイズ設定されます。特定のペインのサイズをピクセル単位で指定する場合は、使用可能なすべてのスペースの相対的な配分に依存するのではなく、親の分割ペインの `useFixedSize` を設定する必要があります。
 
 <PlatformBlock for="WebComponents">
- 詳細については、[分割ペインの固定サイズ モード](dock-manager-customization.md#分割ペインの固定サイズ-モード) トピックを参照してください。
+ 詳細については、[分割ペインの固定サイズ モード](./dock-manager-customization.mdx#分割ペインの固定サイズ-モード) トピックを参照してください。
  </PlatformBlock>
 
 エンドユーザーは、ランタイムにレイアウトをカスタマイズするために以下のアクションを実行できます。
@@ -908,7 +908,7 @@ igc-dockmanager::part(pane-header-maximize-button) {
 
 - <kbd>ALT</kbd> + <kbd>F3</kbd> アクティブなペインを閉じます。
 
-サンプル [demo](dock-manager.md#{PlatformLower}-ドック-マネージャーの例) で上記のすべてのアクションを練習しましょう。
+サンプル [demo](./dock-manager.mdx#{PlatformLower}-ドック-マネージャーの例) で上記のすべてのアクションを練習しましょう。
 
 ## スタイル設定
 
diff --git a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx
index 27f5af31af..a3e8e160fe 100644
--- a/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/expansion-panel.mdx
@@ -45,7 +45,7 @@ import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponen
 defineComponents(IgcExpansionPanelComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
@@ -174,7 +174,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 
 
 ## コンポーネントのカスタマイズ
-<ApiLink pkg="core" type="ExpansionPanel" /> コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。[Input](../inputs/input.md)、チャート、さらには他の展開パネルを描画できます!
+<ApiLink pkg="core" type="ExpansionPanel" /> コントロールを使用すると、あらゆる種類のコンテンツを本体内に追加できます。[Input](../inputs/input.mdx)、チャート、さらには他の展開パネルを描画できます!
 
 <ApiLink pkg="core" type="ExpansionPanel" /> を使用すると、公開された **title**、_subTitle_、および **indicator** スロット全体でヘッダーを簡単にカスタマイズできます。
 
diff --git a/docs/xplat/src/content/jp/components/layouts/icon.mdx b/docs/xplat/src/content/jp/components/layouts/icon.mdx
index 10700f70b1..a4b001ea56 100644
--- a/docs/xplat/src/content/jp/components/layouts/icon.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/icon.mdx
@@ -43,7 +43,7 @@ import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";
 defineComponents(IgcIconComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/layouts/splitter.mdx b/docs/xplat/src/content/jp/components/layouts/splitter.mdx
index e20052a39e..5fc27b1675 100644
--- a/docs/xplat/src/content/jp/components/layouts/splitter.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/splitter.mdx
@@ -46,7 +46,7 @@ import { defineComponents, IgcSplitterComponent } from 'igniteui-webcomponents';
 defineComponents(IgcSplitterComponent);
 ```
 
-{ProductName} の概要については、[**作業の開始**](../general-getting-started.md) トピックを参照してください。
+{ProductName} の概要については、[**作業の開始**](../general-getting-started.mdx) トピックを参照してください。
 
 </PlatformBlock>
 
@@ -412,7 +412,7 @@ igc-splitter {
 
 ## API リファレンス
 <ApiRef pkg="core" types={["Splitter"]} />
-- [`スタイル設定とテーマ`](../themes/overview.md)
+- [`スタイル設定とテーマ`](../themes/overview.mdx)
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/layouts/stepper.mdx b/docs/xplat/src/content/jp/components/layouts/stepper.mdx
index 852f190697..df7e672017 100644
--- a/docs/xplat/src/content/jp/components/layouts/stepper.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/stepper.mdx
@@ -52,7 +52,7 @@ import { defineComponents, IgcStepperComponent } from 'igniteui-webcomponents';
 defineComponents(IgcStepperComponent);
 ```
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 </PlatformBlock>
diff --git a/docs/xplat/src/content/jp/components/layouts/tabs.mdx b/docs/xplat/src/content/jp/components/layouts/tabs.mdx
index 363bc27793..c346ff2b6b 100644
--- a/docs/xplat/src/content/jp/components/layouts/tabs.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/tabs.mdx
@@ -90,7 +90,7 @@ defineComponents(IgcTabsComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 単純な <ApiLink pkg="core" type="Tabs" /> の宣言は次のように行われます:
 
diff --git a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx
index 6d2c558ca6..8244583e8f 100644
--- a/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/tile-manager.mdx
@@ -181,7 +181,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ## レイアウト
 
@@ -827,7 +827,7 @@ igc-tile:nth-child(n+2)::part(trigger) {
 
 - <ApiLink pkg="core" type="TileManager" />
 - <ApiLink pkg="core" type="Tile" />
-- [スタイル設定 & テーマ](../themes/overview.md)
+- [スタイル設定 & テーマ](../themes/overview.mdx)
 
 ## その他のリソース
 
diff --git a/docs/xplat/src/content/jp/components/linear-gauge.mdx b/docs/xplat/src/content/jp/components/linear-gauge.mdx
index 9799493499..839f1abcbf 100644
--- a/docs/xplat/src/content/jp/components/linear-gauge.mdx
+++ b/docs/xplat/src/content/jp/components/linear-gauge.mdx
@@ -1192,5 +1192,5 @@ ModuleManager.register(
 
 その他のゲージ タイプの詳細については、以下のトピックを参照してください。
 
-- [ブレット グラフ](bullet-graph.md)
-- [ラジアル ゲージ](radial-gauge.md)
+- [ブレット グラフ](./bullet-graph.mdx)
+- [ラジアル ゲージ](./radial-gauge.mdx)
diff --git a/docs/xplat/src/content/jp/components/menus/navbar.mdx b/docs/xplat/src/content/jp/components/menus/navbar.mdx
index fee364df53..a41b7aff88 100644
--- a/docs/xplat/src/content/jp/components/menus/navbar.mdx
+++ b/docs/xplat/src/content/jp/components/menus/navbar.mdx
@@ -64,7 +64,7 @@ defineComponents(IgcNavbarComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx
index 9cf092fa50..a6abbe73c1 100644
--- a/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx
+++ b/docs/xplat/src/content/jp/components/menus/navigation-drawer.mdx
@@ -106,7 +106,7 @@ defineComponents(IgcNavDrawerComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ## Navigation Drawer 項目の追加
 
diff --git a/docs/xplat/src/content/jp/components/nextjs-usage.mdx b/docs/xplat/src/content/jp/components/nextjs-usage.mdx
index 21e12f6340..1d484b9659 100644
--- a/docs/xplat/src/content/jp/components/nextjs-usage.mdx
+++ b/docs/xplat/src/content/jp/components/nextjs-usage.mdx
@@ -75,7 +75,7 @@ yarn add {PackageSpreadsheet} {PackageCore}
 
 ## コンポーネント モジュールのインポート
 
-はじめに、使いたいコンポーネントの必要なモジュールをインポートします。[**GeographicMap**](geo-map.md) コンポーネントに対してこれを行います。
+はじめに、使いたいコンポーネントの必要なモジュールをインポートします。[**GeographicMap**](./geo-map.mdx) コンポーネントに対してこれを行います。
 
 <PlatformBlock for="React">
 
@@ -200,7 +200,7 @@ export default function DynamicButtonComponent() {
 
 </PlatformBlock>
 
-ただし、より複雑なコンポーネント (通常は子コンポーネントを含む [**IgrGrid**](grids/data-grid.md) など) を使用する場合は、すべての子コンポーネントを動的にインポートしないことが重要です。コンポーネントは次のように使用する必要があります。
+ただし、より複雑なコンポーネント (通常は子コンポーネントを含む [**IgrGrid**](./grids/data-grid.mdx) など) を使用する場合は、すべての子コンポーネントを動的にインポートしないことが重要です。コンポーネントは次のように使用する必要があります。
 
 <PlatformBlock for="React">
 
@@ -302,8 +302,8 @@ const nextConfig = {
 
 ## その他のリソース
 
-- [Ignite UI for React](../components/general-getting-started.md)
-- [Grid の概要](../components/grids/data-grid.md)
+- [Ignite UI for React](../components/general-getting-started.mdx)
+- [Grid の概要](../components/grids/data-grid.mdx)
 - [Next.js ドキュメント](https://nextjs.org/docs)
 
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/xplat/src/content/jp/components/notifications/banner.mdx b/docs/xplat/src/content/jp/components/notifications/banner.mdx
index ae34bf4091..c7361d528b 100644
--- a/docs/xplat/src/content/jp/components/notifications/banner.mdx
+++ b/docs/xplat/src/content/jp/components/notifications/banner.mdx
@@ -89,7 +89,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbBannerModule));
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ### Banner の表示
 
diff --git a/docs/xplat/src/content/jp/components/notifications/dialog.mdx b/docs/xplat/src/content/jp/components/notifications/dialog.mdx
index f1ab989f64..d9e5733bd1 100644
--- a/docs/xplat/src/content/jp/components/notifications/dialog.mdx
+++ b/docs/xplat/src/content/jp/components/notifications/dialog.mdx
@@ -74,7 +74,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 </PlatformBlock>
 
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx
index 79a41c0e5f..f8bdf3d76a 100644
--- a/docs/xplat/src/content/jp/components/notifications/snackbar.mdx
+++ b/docs/xplat/src/content/jp/components/notifications/snackbar.mdx
@@ -102,7 +102,7 @@ defineComponents(IgcSnackbarComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 Snackbar コンポーネントを表示する最も簡単な方法は、<ApiLink pkg="core" type="Snackbar" member="show" label="Show" /> メソッドを使用して、ボタン クリックで呼び出すことです。
 
diff --git a/docs/xplat/src/content/jp/components/notifications/toast.mdx b/docs/xplat/src/content/jp/components/notifications/toast.mdx
index cc1348a054..85eaed158b 100644
--- a/docs/xplat/src/content/jp/components/notifications/toast.mdx
+++ b/docs/xplat/src/content/jp/components/notifications/toast.mdx
@@ -91,7 +91,7 @@ defineComponents(IgcToastComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 
 <PlatformBlock for="Blazor">
diff --git a/docs/xplat/src/content/jp/components/radial-gauge.mdx b/docs/xplat/src/content/jp/components/radial-gauge.mdx
index 8bc745b1b8..07494c0712 100644
--- a/docs/xplat/src/content/jp/components/radial-gauge.mdx
+++ b/docs/xplat/src/content/jp/components/radial-gauge.mdx
@@ -48,8 +48,8 @@ npm install --save {PackageGauges}
 
 
 IgniteUI.Blazor パッケージの追加については、以下のトピックを参照してください。
-- [作業の開始](general-getting-started.md)
-- [NuGet パッケージの追加](general-nuget-feed.md)
+- [作業の開始](./general-getting-started.mdx)
+- [NuGet パッケージの追加](./general-nuget-feed.mdx)
 
 以下の名前空間を追加してコントロールの実装を開始できます。
 
@@ -1247,5 +1247,5 @@ IgrRadialGaugeModule.register();
 
 その他のゲージ タイプの詳細については、以下のトピックを参照してください。
 
-- [ブレット グラフ](bullet-graph.md)
-- [リニア ゲージ](linear-gauge.md)
+- [ブレット グラフ](./bullet-graph.mdx)
+- [リニア ゲージ](./linear-gauge.mdx)
diff --git a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx
index 7d0a4a8ff6..4dc07db5ed 100644
--- a/docs/xplat/src/content/jp/components/scheduling/calendar.mdx
+++ b/docs/xplat/src/content/jp/components/scheduling/calendar.mdx
@@ -90,7 +90,7 @@ defineComponents(IgcCalendarComponent);
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 {ProductName} <ApiLink pkg="core" type="Calendar" /> の使用を開始する最も簡単な方法は次のとおりです。
 
diff --git a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx
index 395ca81a76..825e0c5a60 100644
--- a/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx
+++ b/docs/xplat/src/content/jp/components/scheduling/date-picker.mdx
@@ -81,7 +81,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
 
 </PlatformBlock>
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ## {Platform} Date Picker コンポーネントの使用
 
@@ -479,7 +479,7 @@ DatePicker は `dialog` モードもサポートしています。
 
 ## スタイル設定
 
-<ApiLink pkg="core" type="DatePicker" /> コンポーネントは <ApiLink pkg="core" type="Input" /> コンポーネントおよび <ApiLink pkg="core" type="Calendar" /> コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、[Input のスタイル設定](../inputs/input.md#スタイル設定)と [Calendar のスタイル設定](calendar.md#スタイル設定)を参照してください。
+<ApiLink pkg="core" type="DatePicker" /> コンポーネントは <ApiLink pkg="core" type="Input" /> コンポーネントおよび <ApiLink pkg="core" type="Calendar" /> コンポーネントから派生するため、使用可能なすべての CSS パーツを公開します。詳細については、[Input のスタイル設定](../inputs/input.mdx#スタイル設定)と [Calendar のスタイル設定](./calendar.mdx#スタイル設定)を参照してください。
 
 ```css
 igc-date-picker::part(header) {
diff --git a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx
index 9984db182a..a86aea4b9e 100644
--- a/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx
+++ b/docs/xplat/src/content/jp/components/scheduling/date-range-picker.mdx
@@ -95,7 +95,7 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule));
 
 これで、{Platform} <ApiLink pkg="core" type="DateRangePicker" /> の基本構成から始めることができます。
 
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
+{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
 
 ## 使用方法
 
@@ -732,9 +732,9 @@ return (
 
 </PlatformBlock>
 
-<ApiLink pkg="core" type="DateRangePicker" member="disabledDates" label="DisabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [無効日](./calendar.md#日付の無効化)
+<ApiLink pkg="core" type="DateRangePicker" member="disabledDates" label="DisabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [無効日](./calendar.mdx#日付の無効化)
 
-同様に、カレンダーに 1 日または複数の日付を特別な日として設定したい場合も可能です。この場合は <ApiLink pkg="core" type="DateRangePicker" member="specialDates" label="SpecialDates" /> プロパティを使用します。([特別な日](./calendar.md#特定の日付))
+同様に、カレンダーに 1 日または複数の日付を特別な日として設定したい場合も可能です。この場合は <ApiLink pkg="core" type="DateRangePicker" member="specialDates" label="SpecialDates" /> プロパティを使用します。([特別な日](./calendar.mdx#特定の日付))
 
 ### フォーム
 
@@ -756,7 +756,7 @@ return (
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholder" label="Placeholder" /> | string | シングル インプット モード時のプレースホルダー テキスト。 |
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholderStart" label="PlaceholderStart" /> | string | 開始日入力 (2 インプット モード) のプレースホルダー テキスト。 |
 | <ApiLink pkg="core" type="DateRangePicker" member="placeholderEnd" label="PlaceholderEnd" /> | string | 終了日入力 (2 インプット モード) のプレースホルダー テキスト。 |
-| <ApiLink pkg="core" type="DateRangePicker" member="outlined" label="Outlined" /> | boolean | [Material テーマ](../themes/overview.md)で、入力部分をアウトライン表示にするかどうかを設定します。 |
+| <ApiLink pkg="core" type="DateRangePicker" member="outlined" label="Outlined" /> | boolean | [Material テーマ](../themes/overview.mdx)で、入力部分をアウトライン表示にするかどうかを設定します。 |
 | <ApiLink pkg="core" type="DateRangePicker" member="prompt" label="Prompt" /> | string | 入力マスクで未入力部分に表示されるプロンプト文字。 |
 | <ApiLink pkg="core" type="DateRangePicker" member="resourceStrings" label="ResourceStrings" /> | IgcDateRangePickerResourceStrings | 日付範囲ピッカーとカレンダーをローカライズするためのリソース文字列。 |
 
@@ -940,7 +940,7 @@ return (
 
 ## スタイル設定
 
-<ApiLink pkg="core" type="DateRangePicker" /> コンポーネントは <ApiLink pkg="core" type="Calendar" /> コンポーネントを使用しているため、Calendar の CSS パーツも継承されており、両コンポーネントをシームレスにスタイル設定できます。Calendar コンポーネントで使用可能なすべての CSS パーツの一覧はこちらをご覧ください: [カレンダーのスタイル設定](calendar.md#スタイル設定)。Calendar の CSS パーツに加えて、<ApiLink pkg="core" type="DateRangePicker" /> は以下のような独自の CSS パーツも提供しており、外観をさらにカスタマイズできます:
+<ApiLink pkg="core" type="DateRangePicker" /> コンポーネントは <ApiLink pkg="core" type="Calendar" /> コンポーネントを使用しているため、Calendar の CSS パーツも継承されており、両コンポーネントをシームレスにスタイル設定できます。Calendar コンポーネントで使用可能なすべての CSS パーツの一覧はこちらをご覧ください: [カレンダーのスタイル設定](./calendar.mdx#スタイル設定)。Calendar の CSS パーツに加えて、<ApiLink pkg="core" type="DateRangePicker" /> は以下のような独自の CSS パーツも提供しており、外観をさらにカスタマイズできます:
 
 |名前|説明|
 |--|--|
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx
index dddcd33705..030693e893 100644
--- a/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx
+++ b/docs/xplat/src/content/jp/components/spreadsheet-chart-adapter.mdx
@@ -88,7 +88,7 @@ Spreadsheet ChartAdapter は、折れ線、エリア、縦棒、ドーナツを
 
 <DocsAside type="info" title="情報">
 
-以下のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
+以下のコード スニペットでは、外部の [ExcelUtility](./excel-utility.mdx) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
 </DocsAside>
 
 ハイパーリンクを使用するように {Platform} スプレッドシート コントロールを設定するときは、<ApiLink type="SpreadsheetChartAdapter" /> クラスをインポートする必要があります。
diff --git a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx
index 01d878a283..02bcb48789 100644
--- a/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx
+++ b/docs/xplat/src/content/jp/components/spreadsheet-overview.mdx
@@ -160,7 +160,7 @@ ModuleManager.register(
 
 <DocsAside type="info" title="情報">
 
-次のコード スニペットでは、外部の [ExcelUtility](excel-utility.md) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
+次のコード スニペットでは、外部の [ExcelUtility](./excel-utility.mdx) クラスを使用して <ApiLink type="Spreadsheet" member="workbook" label="Workbook" /> を保存およびロードしています。
 </DocsAside>
 
 以下は、ワークブックを {Platform} スプレッドシートにロードする方法を示しています。
diff --git a/docs/xplat/src/content/jp/components/update-guide.mdx b/docs/xplat/src/content/jp/components/update-guide.mdx
index dd6fb0bcf0..c1e25bd245 100644
--- a/docs/xplat/src/content/jp/components/update-guide.mdx
+++ b/docs/xplat/src/content/jp/components/update-guide.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # アップデート ガイド
 
-Ignite UI for React バージョニング は、最初の数字がコードがサポートする React のメジャー バージョンで、2 番目の数字はメジャー バージョン リリースの数字です。重大な変更はメジャー リリースとメジャー リリースの間にリリースされる場合があります。Ignite UI for React 各リリースのすべての変更の一覧は、製品 [CHANGELOG](./general-changelog-dv-react.md) をご覧ください。
+Ignite UI for React バージョニング は、最初の数字がコードがサポートする React のメジャー バージョンで、2 番目の数字はメジャー バージョン リリースの数字です。重大な変更はメジャー リリースとメジャー リリースの間にリリースされる場合があります。Ignite UI for React 各リリースのすべての変更の一覧は、製品 [CHANGELOG](./general-changelog-dv-react.mdx) をご覧ください。
 
 
 ## 18.9.0 から 19.0.0 の場合
@@ -90,7 +90,7 @@ Ignite UI for React バージョニング は、最初の数字がコードが
 
 - コンポーネントには、デフォルトで非機能的な `name` プロパティが付与されなくなりました。`name` プロパティは、主に <ApiLink pkg="core" type="Input" /> や <ApiLink type="Combo" /> などのフォーム入力コンポーネントにおいてネイティブの機能を持つため、**igniteui-react** のコンポーネントにのみ残されています。
 - Ignite UI for React コンポーネントでは、React の[ドキュメント](https://react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)に従って必要な場合を除き、`key` プロパティは不要になりました。
-- [IgrDataGrid](./grids/data-grid/overview.md) は、**igniteui-react-grids** パッケージの一部ではなくなりました。より軽量な構成を実現するため、**igniteui-react-data-grids** パッケージに移動されました。
+- [IgrDataGrid](./grids/data-grid.mdx) は、**igniteui-react-grids** パッケージの一部ではなくなりました。より軽量な構成を実現するため、**igniteui-react-data-grids** パッケージに移動されました。
 - バージョン **18.9.0** ではクラスとして公開されていたいくつかの型は、現在ではタイプとしてエクスポート されるようになりました。これらは以下のように使用できます:
 
 <PlatformBlock for="React">
diff --git a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx
index 07a6832f63..49af793c42 100644
--- a/docs/xplat/src/content/jp/components/zoomslider-overview.mdx
+++ b/docs/xplat/src/content/jp/components/zoomslider-overview.mdx
@@ -152,7 +152,7 @@ IgcZoomSliderModule.register();
 
 ## その他のリソース
 
-チャートの詳細については、[グラフの機能](charts/chart-features.md)トピックを参照してください。
+チャートの詳細については、[グラフの機能](./charts/chart-features.mdx)トピックを参照してください。
 
 
 ## API リファレンス
diff --git a/docs/xplat/src/content/jp/toc.json b/docs/xplat/src/content/jp/toc.json
index 5d6b1004ac..959793318a 100644
--- a/docs/xplat/src/content/jp/toc.json
+++ b/docs/xplat/src/content/jp/toc.json
@@ -11,7 +11,7 @@
             "Angular"
         ],
         "name": "エージェント ワークフロー",
-        "href": "ai/ai-assisted-development-overview.md",
+        "href": "ai/ai-assisted-development-overview.mdx",
         "new": true
     },
     {
@@ -19,7 +19,7 @@
             "Angular"
         ],
         "name": "エージェント スキル",
-        "href": "ai/skills.md",
+        "href": "ai/skills.mdx",
         "new": true
     },
     {
@@ -27,7 +27,7 @@
             "Angular"
         ],
         "name": "CLI MCP",
-        "href": "ai/cli-mcp.md",
+        "href": "ai/cli-mcp.mdx",
         "new": true
     },
     {
@@ -35,7 +35,7 @@
             "Angular"
         ],
         "name": "Theming MCP",
-        "href": "ai/theming-mcp.md",
+        "href": "ai/theming-mcp.mdx",
         "new": true
     },
     {
@@ -43,7 +43,7 @@
             "Angular"
         ],
         "name": "Maker フレームワーク",
-        "href": "ai/maker-framework.md",
+        "href": "ai/maker-framework.mdx",
         "new": true
     },
     {
@@ -60,11 +60,11 @@
         "items": [
             {
                 "name": "ライセンス付き NuGet フィードの追加",
-                "href": "general-nuget-feed.md"
+                "href": "general-nuget-feed.mdx"
             },
             {
                 "name": "Ignite UI for Blazor のインストール",
-                "href": "general-installing-blazor.md"
+                "href": "general-installing-blazor.mdx"
             }
         ]
     },
@@ -74,7 +74,7 @@
             "Angular"
         ],
         "name": "作業の開始",
-        "href": "general-getting-started.md",
+        "href": "general-getting-started.mdx",
         "default": true
     },
     {
@@ -83,7 +83,7 @@
             "Angular"
         ],
         "name": "ローカリゼーション (i18n)",
-        "href": "localization.md",
+        "href": "localization.mdx",
         "new": true
     },
     {
@@ -91,7 +91,7 @@
             "Angular"
         ],
         "name": "オープン ソース vs プレミアム",
-        "href": "general-open-source-vs-premium.md",
+        "href": "general-open-source-vs-premium.mdx",
         "new": true
     },
     {
@@ -104,24 +104,24 @@
         "items": [
             {
                 "name": "Blazor Server のアプリケーション",
-                "href": "general-getting-started.md",
+                "href": "general-getting-started.mdx",
                 "default": true
             },
             {
                 "name": "Blazor WebAssembly のアプリケーション",
-                "href": "general-getting-started-blazor-client.md"
+                "href": "general-getting-started-blazor-client.mdx"
             },
             {
                 "name": "Blazor Web App",
-                "href": "general-getting-started-blazor-web-app.md"
+                "href": "general-getting-started-blazor-web-app.mdx"
             },
             {
                 "name": ".NET MAUI Blazor のアプリケーション",
-                "href": "general-getting-started-blazor-maui.md"
+                "href": "general-getting-started-blazor-maui.mdx"
             },
             {
                 "name": "オープン ソース ライブラリ",
-                "href": "general-getting-started-oss.md",
+                "href": "general-getting-started-oss.mdx",
                 "new": true
             }
         ]
@@ -132,7 +132,7 @@
             "Blazor"
         ],
         "name": "Ignite UI CLI",
-        "href": "general-cli-overview.md",
+        "href": "general-cli-overview.mdx",
         "updated": true,
         "items": [
             {
@@ -140,7 +140,7 @@
                     "Angular"
                 ],
                 "name": "Ignite UI CLI を使ったステップ バイ ステップ ガイド",
-                "href": "general-step-by-step-guide-using-cli.md",
+                "href": "general-step-by-step-guide-using-cli.mdx",
                 "new": true
             }
         ]
@@ -151,7 +151,7 @@
             "Angular"
         ],
         "name": "ライセンス",
-        "href": "general-licensing.md"
+        "href": "general-licensing.mdx"
     },
     {
         "exclude": [
@@ -167,7 +167,7 @@
                     "Blazor"
                 ],
                 "name": "CLI MCP と Theming MCP を使ったアプリのビルド",
-                "href": "general-how-to-mcp-e2e.md",
+                "href": "general-how-to-mcp-e2e.mdx",
                 "new": true
             }
         ]
@@ -187,7 +187,7 @@
                     "WebComponents"
                 ],
                 "name": "Blazor Excel ライブラリ",
-                "href": "blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.md"
+                "href": "blazor-excel-library-temporarily-stop-automatic-calculation-of-formulas-to-speed-up-processing.mdx"
             },
             {
                 "exclude": [
@@ -196,7 +196,7 @@
                     "WebComponents"
                 ],
                 "name": "サーバーの負荷を軽減するために Excel ファイルを読み書きする方法",
-                "href": "blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.md"
+                "href": "blazor-webassembly-how-to-read-and-write-excel-files-to-reduce-server-load.mdx"
             },
             {
                 "exclude": [
@@ -206,7 +206,7 @@
                     "Blazor"
                 ],
                 "name": "Blazor チャートでマーカー表示をカスタマイズする方法",
-                "href": "customize-marker-display-in-blazor-charts.md"
+                "href": "customize-marker-display-in-blazor-charts.mdx"
             }
         ]
     },
@@ -217,7 +217,7 @@
             "WebComponents"
         ],
         "name": "変更ログ",
-        "href": "general-changelog-dv-blazor.md",
+        "href": "general-changelog-dv-blazor.mdx",
         "updated": true
     },
     {
@@ -227,7 +227,7 @@
             "WebComponents"
         ],
         "name": "変更ログ",
-        "href": "general-changelog-dv-react.md",
+        "href": "general-changelog-dv-react.mdx",
         "updated": true
     },
     {
@@ -237,7 +237,7 @@
             "Blazor"
         ],
         "name": "変更ログ",
-        "href": "general-changelog-dv-wc.md",
+        "href": "general-changelog-dv-wc.mdx",
         "updated": true
     },
     {
@@ -247,7 +247,7 @@
             "WebComponents"
         ],
         "name": "変更ログ",
-        "href": "general-changelog-dv.md",
+        "href": "general-changelog-dv.mdx",
         "updated": true
     },
     {
@@ -257,7 +257,7 @@
             "WebComponents"
         ],
         "name": "Ignite UI for React と Next.js の統合",
-        "href": "nextjs-usage.md"
+        "href": "nextjs-usage.mdx"
     },
     {
         "exclude": [
@@ -266,7 +266,7 @@
             "WebComponents"
         ],
         "name": "アップデート ガイド",
-        "href": "update-guide.md",
+        "href": "update-guide.mdx",
         "new": true
     },
     {
@@ -278,7 +278,7 @@
     },
     {
         "name": "アクセシビリティの遵守",
-        "href": "interactivity/accessibility-compliance.md"
+        "href": "interactivity/accessibility-compliance.mdx"
     },
     {
         "exclude": [
@@ -289,7 +289,7 @@
         ],
         "name": "グリッド & リスト",
         "header": true,
-        "href": "grids/grids.md"
+        "href": "grids/grids.mdx"
     },
     {
         "exclude": [
@@ -297,7 +297,7 @@
         ],
         "name": "グリッド & リスト",
         "header": true,
-        "href": "grids/grids-header.md",
+        "href": "grids/grids-header.mdx",
         "premium": true
     },
     {
@@ -305,14 +305,14 @@
             "Angular"
         ],
         "name": "グリッド",
-        "href": "grids/data-grid.md",
+        "href": "grids/data-grid.mdx",
         "items": [
             {
                 "exclude": [
                     "Angular"
                 ],
                 "name": "セルの結合",
-                "href": "grids/grid/cell-merging.md",
+                "href": "grids/grid/cell-merging.mdx",
                 "premium": true,
                 "new": true
             },
@@ -321,7 +321,7 @@
                     "Angular"
                 ],
                 "name": "クリップボードの操作",
-                "href": "grids/grid/clipboard-interactions.md",
+                "href": "grids/grid/clipboard-interactions.mdx",
                 "premium": true
             },
             {
@@ -329,7 +329,7 @@
                     "Angular"
                 ],
                 "name": "縮小可能な列グループ",
-                "href": "grids/grid/collapsible-column-groups.md",
+                "href": "grids/grid/collapsible-column-groups.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -338,7 +338,7 @@
                     "Angular"
                 ],
                 "name": "列の非表示",
-                "href": "grids/grid/column-hiding.md",
+                "href": "grids/grid/column-hiding.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -347,7 +347,7 @@
                     "Angular"
                 ],
                 "name": "列の移動",
-                "href": "grids/grid/column-moving.md",
+                "href": "grids/grid/column-moving.mdx",
                 "premium": true
             },
             {
@@ -355,7 +355,7 @@
                     "Angular"
                 ],
                 "name": "列のピン固定",
-                "href": "grids/grid/column-pinning.md",
+                "href": "grids/grid/column-pinning.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -364,7 +364,7 @@
                     "Angular"
                 ],
                 "name": "列のサイズ変更",
-                "href": "grids/grid/column-resizing.md",
+                "href": "grids/grid/column-resizing.mdx",
                 "premium": true
             },
             {
@@ -372,7 +372,7 @@
                     "Angular"
                 ],
                 "name": "列のタイプ",
-                "href": "grids/grid/column-types.md",
+                "href": "grids/grid/column-types.mdx",
                 "premium": true
             },
             {
@@ -380,7 +380,7 @@
                     "Angular"
                 ],
                 "name": "条件付きスタイル設定",
-                "href": "grids/grid/conditional-cell-styling.md",
+                "href": "grids/grid/conditional-cell-styling.mdx",
                 "premium": true
             },
             {
@@ -388,14 +388,14 @@
                     "Angular"
                 ],
                 "name": "編集",
-                "href": "grids/grid/editing.md",
+                "href": "grids/grid/editing.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの編集",
-                        "href": "grids/grid/cell-editing.md",
+                        "href": "grids/grid/cell-editing.mdx",
                         "premium": true
                     },
                     {
@@ -403,7 +403,7 @@
                             "Angular"
                         ],
                         "name": "カスケード コンボ",
-                        "href": "grids/grid/cascading-combos.md",
+                        "href": "grids/grid/cascading-combos.mdx",
                         "premium": true
                     },
                     {
@@ -411,7 +411,7 @@
                             "Angular"
                         ],
                         "name": "行の追加",
-                        "href": "grids/grid/row-adding.md",
+                        "href": "grids/grid/row-adding.mdx",
                         "premium": true
                     },
                     {
@@ -419,7 +419,7 @@
                             "Angular"
                         ],
                         "name": "行の編集",
-                        "href": "grids/grid/row-editing.md",
+                        "href": "grids/grid/row-editing.mdx",
                         "premium": true
                     }
                 ]
@@ -429,7 +429,7 @@
                     "Angular"
                 ],
                 "name": "エクスポート",
-                "href": "grids/grid/export-excel.md",
+                "href": "grids/grid/export-excel.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -438,14 +438,14 @@
                     "Angular"
                 ],
                 "name": "フィルタリング",
-                "href": "grids/grid/filtering.md",
+                "href": "grids/grid/filtering.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "高度なフィルタリング",
-                        "href": "grids/grid/advanced-filtering.md",
+                        "href": "grids/grid/advanced-filtering.mdx",
                         "premium": true
                     },
                     {
@@ -453,7 +453,7 @@
                             "Angular"
                         ],
                         "name": "Excel スタイル フィルタリング",
-                        "href": "grids/grid/excel-style-filtering.md",
+                        "href": "grids/grid/excel-style-filtering.mdx",
                         "premium": true
                     }
                 ]
@@ -463,7 +463,7 @@
                     "Angular"
                 ],
                 "name": "グループ化",
-                "href": "grids/grid/groupby.md",
+                "href": "grids/grid/groupby.mdx",
                 "premium": true
             },
             {
@@ -471,7 +471,7 @@
                     "Angular"
                 ],
                 "name": "ライブ データ / リアルタイム",
-                "href": "grids/grid/live-data.md",
+                "href": "grids/grid/live-data.mdx",
                 "premium": true
             },
             {
@@ -479,7 +479,7 @@
                     "Angular"
                 ],
                 "name": "マスター / 詳細",
-                "href": "grids/grid/master-detail.md",
+                "href": "grids/grid/master-detail.mdx",
                 "premium": true
             },
             {
@@ -487,7 +487,7 @@
                     "Angular"
                 ],
                 "name": "キーボード ナビゲーション",
-                "href": "grids/grid/keyboard-navigation.md",
+                "href": "grids/grid/keyboard-navigation.mdx",
                 "premium": true
             },
             {
@@ -498,7 +498,7 @@
                     "Blazor"
                 ],
                 "name": "マスターと詳細",
-                "href": "grids/grid/master-detail.md",
+                "href": "grids/grid/master-detail.mdx",
                 "premium": true
             },
             {
@@ -506,7 +506,7 @@
                     "Angular"
                 ],
                 "name": "複数列ヘッダー",
-                "href": "grids/grid/multi-column-headers.md",
+                "href": "grids/grid/multi-column-headers.mdx",
                 "premium": true
             },
             {
@@ -514,7 +514,7 @@
                     "Angular"
                 ],
                 "name": "ツールバー",
-                "href": "grids/grid/toolbar.md",
+                "href": "grids/grid/toolbar.mdx",
                 "premium": true
             },
             {
@@ -522,7 +522,7 @@
                     "Angular"
                 ],
                 "name": "複数行レイアウト",
-                "href": "grids/grid/multi-row-layout.md",
+                "href": "grids/grid/multi-row-layout.mdx",
                 "premium": true
             },
             {
@@ -530,7 +530,7 @@
                     "Angular"
                 ],
                 "name": "ページング",
-                "href": "grids/grid/paging.md",
+                "href": "grids/grid/paging.mdx",
                 "premium": true
             },
             {
@@ -538,7 +538,7 @@
                     "Angular"
                 ],
                 "name": "Excel から貼り付け",
-                "href": "grids/grid/paste-excel.md",
+                "href": "grids/grid/paste-excel.mdx",
                 "premium": true
             },
             {
@@ -546,7 +546,7 @@
                     "Angular"
                 ],
                 "name": "リモート データ操作",
-                "href": "grids/grid/remote-data-operations.md",
+                "href": "grids/grid/remote-data-operations.mdx",
                 "premium": true
             },
             {
@@ -554,7 +554,7 @@
                     "Angular"
                 ],
                 "name": "行の操作",
-                "href": "grids/grid/row-actions.md",
+                "href": "grids/grid/row-actions.mdx",
                 "premium": true
             },
             {
@@ -562,7 +562,7 @@
                     "Angular"
                 ],
                 "name": "行のドラッグ",
-                "href": "grids/grid/row-drag.md",
+                "href": "grids/grid/row-drag.mdx",
                 "premium": true
             },
             {
@@ -570,7 +570,7 @@
                     "Angular"
                 ],
                 "name": "行のピン固定",
-                "href": "grids/grid/row-pinning.md",
+                "href": "grids/grid/row-pinning.mdx",
                 "premium": true
             },
             {
@@ -578,7 +578,7 @@
                     "Angular"
                 ],
                 "name": "検索",
-                "href": "grids/grid/search.md",
+                "href": "grids/grid/search.mdx",
                 "premium": true
             },
             {
@@ -586,14 +586,14 @@
                     "Angular"
                 ],
                 "name": "選択",
-                "href": "grids/grid/selection.md",
+                "href": "grids/grid/selection.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの選択",
-                        "href": "grids/grid/cell-selection.md",
+                        "href": "grids/grid/cell-selection.mdx",
                         "premium": true
                     },
                     {
@@ -601,7 +601,7 @@
                             "Angular"
                         ],
                         "name": "列の選択",
-                        "href": "grids/grid/column-selection.md",
+                        "href": "grids/grid/column-selection.mdx",
                         "premium": true
                     },
                     {
@@ -609,7 +609,7 @@
                             "Angular"
                         ],
                         "name": "行の選択",
-                        "href": "grids/grid/row-selection.md",
+                        "href": "grids/grid/row-selection.mdx",
                         "premium": true
                     }
                 ]
@@ -619,7 +619,7 @@
                     "Angular"
                 ],
                 "name": "サイズ",
-                "href": "grids/grid/size.md",
+                "href": "grids/grid/size.mdx",
                 "premium": true
             },
             {
@@ -627,7 +627,7 @@
                     "Angular"
                 ],
                 "name": "サイズ設定",
-                "href": "grids/grid/sizing.md",
+                "href": "grids/grid/sizing.mdx",
                 "premium": true
             },
             {
@@ -635,7 +635,7 @@
                     "Angular"
                 ],
                 "name": "ソート",
-                "href": "grids/grid/sorting.md",
+                "href": "grids/grid/sorting.mdx",
                 "premium": true
             },
             {
@@ -643,7 +643,7 @@
                     "Angular"
                 ],
                 "name": "状態の保持",
-                "href": "grids/grid/state-persistence.md",
+                "href": "grids/grid/state-persistence.mdx",
                 "premium": true
             },
             {
@@ -651,7 +651,7 @@
                     "Angular"
                 ],
                 "name": "集計",
-                "href": "grids/grid/summaries.md",
+                "href": "grids/grid/summaries.mdx",
                 "premium": true
             },
             {
@@ -659,7 +659,7 @@
                     "Angular"
                 ],
                 "name": "仮想化とパフォーマンス",
-                "href": "grids/grid/virtualization.md",
+                "href": "grids/grid/virtualization.mdx",
                 "premium": true
             },
             {
@@ -667,7 +667,7 @@
                     "Angular"
                 ],
                 "name": "テーマ設定",
-                "href": "grids/theming-grid.md",
+                "href": "grids/theming-grid.mdx",
                 "premium": true
             },
             {
@@ -675,7 +675,7 @@
                     "Angular"
                 ],
                 "name": "アイコンのカスタマイズ",
-                "href": "grids/grid/icons.md",
+                "href": "grids/grid/icons.mdx",
                 "premium": true
             }
         ]
@@ -685,7 +685,7 @@
             "Angular"
         ],
         "name": "階層グリッド",
-        "href": "grids/hierarchical-grid/overview.md",
+        "href": "grids/hierarchical-grid/overview.mdx",
         "premium": true,
         "items": [
             {
@@ -693,7 +693,7 @@
                     "Angular"
                 ],
                 "name": "セルの結合",
-                "href": "grids/hierarchical-grid/cell-merging.md",
+                "href": "grids/hierarchical-grid/cell-merging.mdx",
                 "premium": true,
                 "new": true
             },
@@ -702,7 +702,7 @@
                     "Angular"
                 ],
                 "name": "縮小可能な列グループ",
-                "href": "grids/hierarchical-grid/collapsible-column-groups.md",
+                "href": "grids/hierarchical-grid/collapsible-column-groups.mdx",
                 "premium": true
             },
             {
@@ -710,7 +710,7 @@
                     "Angular"
                 ],
                 "name": "列の非表示",
-                "href": "grids/hierarchical-grid/column-hiding.md",
+                "href": "grids/hierarchical-grid/column-hiding.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -719,7 +719,7 @@
                     "Angular"
                 ],
                 "name": "列の移動",
-                "href": "grids/hierarchical-grid/column-moving.md",
+                "href": "grids/hierarchical-grid/column-moving.mdx",
                 "premium": true
             },
             {
@@ -727,7 +727,7 @@
                     "Angular"
                 ],
                 "name": "列のピン固定",
-                "href": "grids/hierarchical-grid/column-pinning.md",
+                "href": "grids/hierarchical-grid/column-pinning.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -736,7 +736,7 @@
                     "Angular"
                 ],
                 "name": "列のサイズ変更",
-                "href": "grids/hierarchical-grid/column-resizing.md",
+                "href": "grids/hierarchical-grid/column-resizing.mdx",
                 "premium": true
             },
             {
@@ -744,7 +744,7 @@
                     "Angular"
                 ],
                 "name": "列のタイプ",
-                "href": "grids/hierarchical-grid/column-types.md",
+                "href": "grids/hierarchical-grid/column-types.mdx",
                 "premium": true
             },
             {
@@ -752,7 +752,7 @@
                     "Angular"
                 ],
                 "name": "条件付きスタイル設定",
-                "href": "grids/hierarchical-grid/conditional-cell-styling.md",
+                "href": "grids/hierarchical-grid/conditional-cell-styling.mdx",
                 "premium": true
             },
             {
@@ -760,14 +760,14 @@
                     "Angular"
                 ],
                 "name": "編集",
-                "href": "grids/hierarchical-grid/editing.md",
+                "href": "grids/hierarchical-grid/editing.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの編集",
-                        "href": "grids/hierarchical-grid/cell-editing.md",
+                        "href": "grids/hierarchical-grid/cell-editing.mdx",
                         "premium": true
                     },
                     {
@@ -775,7 +775,7 @@
                             "Angular"
                         ],
                         "name": "行の追加",
-                        "href": "grids/hierarchical-grid/row-adding.md",
+                        "href": "grids/hierarchical-grid/row-adding.mdx",
                         "premium": true
                     },
                     {
@@ -783,7 +783,7 @@
                             "Angular"
                         ],
                         "name": "行の編集",
-                        "href": "grids/hierarchical-grid/row-editing.md",
+                        "href": "grids/hierarchical-grid/row-editing.mdx",
                         "premium": true
                     }
                 ]
@@ -793,7 +793,7 @@
                     "Angular"
                 ],
                 "name": "エクスポート",
-                "href": "grids/hierarchical-grid/export-excel.md",
+                "href": "grids/hierarchical-grid/export-excel.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -802,14 +802,14 @@
                     "Angular"
                 ],
                 "name": "フィルタリング",
-                "href": "grids/hierarchical-grid/filtering.md",
+                "href": "grids/hierarchical-grid/filtering.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "高度なフィルタリング",
-                        "href": "grids/hierarchical-grid/advanced-filtering.md",
+                        "href": "grids/hierarchical-grid/advanced-filtering.mdx",
                         "premium": true
                     },
                     {
@@ -817,7 +817,7 @@
                             "Angular"
                         ],
                         "name": "Excel スタイル フィルタリング",
-                        "href": "grids/hierarchical-grid/excel-style-filtering.md",
+                        "href": "grids/hierarchical-grid/excel-style-filtering.mdx",
                         "premium": true
                     }
                 ]
@@ -827,7 +827,7 @@
                     "Angular"
                 ],
                 "name": "複数列ヘッダー",
-                "href": "grids/hierarchical-grid/multi-column-headers.md",
+                "href": "grids/hierarchical-grid/multi-column-headers.mdx",
                 "premium": true
             },
             {
@@ -838,7 +838,7 @@
                     "WebComponents"
                 ],
                 "name": "複数行レイアウト",
-                "href": "grids/hierarchical-grid/multi-row-layout.md",
+                "href": "grids/hierarchical-grid/multi-row-layout.mdx",
                 "premium": true
             },
             {
@@ -849,7 +849,7 @@
                     "WebComponents"
                 ],
                 "name": "ページング",
-                "href": "grids/hierarchical-grid/paging.md",
+                "href": "grids/hierarchical-grid/paging.mdx",
                 "premium": true
             },
             {
@@ -857,7 +857,7 @@
                     "Angular"
                 ],
                 "name": "リモート データ操作",
-                "href": "grids/hierarchical-grid/remote-data-operations.md",
+                "href": "grids/hierarchical-grid/remote-data-operations.mdx",
                 "premium": true
             },
             {
@@ -865,7 +865,7 @@
                     "Angular"
                 ],
                 "name": "行の操作",
-                "href": "grids/hierarchical-grid/row-actions.md",
+                "href": "grids/hierarchical-grid/row-actions.mdx",
                 "premium": true
             },
             {
@@ -873,7 +873,7 @@
                     "Angular"
                 ],
                 "name": "行のドラッグ",
-                "href": "grids/hierarchical-grid/row-drag.md",
+                "href": "grids/hierarchical-grid/row-drag.mdx",
                 "premium": true
             },
             {
@@ -881,7 +881,7 @@
                     "Angular"
                 ],
                 "name": "行のピン固定",
-                "href": "grids/hierarchical-grid/row-pinning.md",
+                "href": "grids/hierarchical-grid/row-pinning.mdx",
                 "premium": true
             },
             {
@@ -889,14 +889,14 @@
                     "Angular"
                 ],
                 "name": "選択",
-                "href": "grids/hierarchical-grid/selection.md",
+                "href": "grids/hierarchical-grid/selection.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの選択",
-                        "href": "grids/hierarchical-grid/cell-selection.md",
+                        "href": "grids/hierarchical-grid/cell-selection.mdx",
                         "premium": true
                     },
                     {
@@ -904,7 +904,7 @@
                             "Angular"
                         ],
                         "name": "列の選択",
-                        "href": "grids/hierarchical-grid/column-selection.md",
+                        "href": "grids/hierarchical-grid/column-selection.mdx",
                         "premium": true
                     },
                     {
@@ -912,7 +912,7 @@
                             "Angular"
                         ],
                         "name": "行の選択",
-                        "href": "grids/hierarchical-grid/row-selection.md",
+                        "href": "grids/hierarchical-grid/row-selection.mdx",
                         "premium": true
                     }
                 ]
@@ -922,7 +922,7 @@
                     "Angular"
                 ],
                 "name": "サイズ",
-                "href": "grids/hierarchical-grid/size.md",
+                "href": "grids/hierarchical-grid/size.mdx",
                 "premium": true
             },
             {
@@ -930,7 +930,7 @@
                     "Angular"
                 ],
                 "name": "サイズ設定",
-                "href": "grids/hierarchical-grid/sizing.md",
+                "href": "grids/hierarchical-grid/sizing.mdx",
                 "premium": true
             },
             {
@@ -938,7 +938,7 @@
                     "Angular"
                 ],
                 "name": "ソート",
-                "href": "grids/hierarchical-grid/sorting.md",
+                "href": "grids/hierarchical-grid/sorting.mdx",
                 "premium": true
             },
             {
@@ -946,7 +946,7 @@
                     "Angular"
                 ],
                 "name": "状態の保持",
-                "href": "grids/hierarchical-grid/state-persistence.md",
+                "href": "grids/hierarchical-grid/state-persistence.mdx",
                 "premium": true
             },
             {
@@ -954,7 +954,7 @@
                     "Angular"
                 ],
                 "name": "集計",
-                "href": "grids/hierarchical-grid/summaries.md",
+                "href": "grids/hierarchical-grid/summaries.mdx",
                 "premium": true
             },
             {
@@ -962,7 +962,7 @@
                     "Angular"
                 ],
                 "name": "ツールバー",
-                "href": "grids/hierarchical-grid/toolbar.md",
+                "href": "grids/hierarchical-grid/toolbar.mdx",
                 "premium": true
             },
             {
@@ -970,7 +970,7 @@
                     "Angular"
                 ],
                 "name": "仮想化とパフォーマンス",
-                "href": "grids/hierarchical-grid/virtualization.md",
+                "href": "grids/hierarchical-grid/virtualization.mdx",
                 "premium": true
             },
             {
@@ -981,7 +981,7 @@
                     "WebComponents"
                 ],
                 "name": "キーボード ナビゲーション",
-                "href": "grids/hierarchical-grid/keyboard-navigation.md",
+                "href": "grids/hierarchical-grid/keyboard-navigation.mdx",
                 "premium": true
             },
             {
@@ -989,7 +989,7 @@
                     "Angular"
                 ],
                 "name": "ロードオンデマンド",
-                "href": "grids/hierarchical-grid/load-on-demand.md",
+                "href": "grids/hierarchical-grid/load-on-demand.mdx",
                 "premium": true
             }
         ]
@@ -999,7 +999,7 @@
             "Angular"
         ],
         "name": "ピボット グリッド",
-        "href": "grids/pivot-grid/overview.md",
+        "href": "grids/pivot-grid/overview.mdx",
         "premium": true,
         "items": [
             {
@@ -1010,7 +1010,7 @@
                     "Blazor"
                 ],
                 "name": "選択",
-                "href": "grids/pivot-grid/selection.md",
+                "href": "grids/pivot-grid/selection.mdx",
                 "premium": true
             },
             {
@@ -1018,7 +1018,7 @@
                     "Angular"
                 ],
                 "name": "状態の保持",
-                "href": "grids/pivot-grid/state-persistence.md",
+                "href": "grids/pivot-grid/state-persistence.mdx",
                 "premium": true
             },
             {
@@ -1027,7 +1027,7 @@
                     "WebComponents"
                 ],
                 "name": "機能",
-                "href": "grids/pivot-grid/features.md",
+                "href": "grids/pivot-grid/features.mdx",
                 "premium": true
             },
             {
@@ -1037,7 +1037,7 @@
                     "Blazor"
                 ],
                 "name": "リモート操作",
-                "href": "grids/pivot-grid/remote-operations.md",
+                "href": "grids/pivot-grid/remote-operations.mdx",
                 "premium": true
             }
         ]
@@ -1047,7 +1047,7 @@
             "Angular"
         ],
         "name": "ツリー グリッド",
-        "href": "grids/tree-grid/overview.md",
+        "href": "grids/tree-grid/overview.mdx",
         "premium": true,
         "items": [
             {
@@ -1055,7 +1055,7 @@
                     "Angular"
                 ],
                 "name": "セルの結合",
-                "href": "grids/tree-grid/cell-merging.md",
+                "href": "grids/tree-grid/cell-merging.mdx",
                 "premium": true,
                 "new": true
             },
@@ -1064,7 +1064,7 @@
                     "Angular"
                 ],
                 "name": "クリップボードの操作",
-                "href": "grids/tree-grid/clipboard-interactions.md",
+                "href": "grids/tree-grid/clipboard-interactions.mdx",
                 "premium": true
             },
             {
@@ -1072,7 +1072,7 @@
                     "Angular"
                 ],
                 "name": "縮小可能な列グループ",
-                "href": "grids/tree-grid/collapsible-column-groups.md",
+                "href": "grids/tree-grid/collapsible-column-groups.mdx",
                 "premium": true
             },
             {
@@ -1080,7 +1080,7 @@
                     "Angular"
                 ],
                 "name": "列のタイプ",
-                "href": "grids/tree-grid/column-types.md",
+                "href": "grids/tree-grid/column-types.mdx",
                 "premium": true
             },
             {
@@ -1088,7 +1088,7 @@
                     "Angular"
                 ],
                 "name": "条件付きスタイル設定",
-                "href": "grids/tree-grid/conditional-cell-styling.md",
+                "href": "grids/tree-grid/conditional-cell-styling.mdx",
                 "premium": true
             },
             {
@@ -1096,7 +1096,7 @@
                     "Angular"
                 ],
                 "name": "列の非表示",
-                "href": "grids/tree-grid/column-hiding.md",
+                "href": "grids/tree-grid/column-hiding.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -1106,7 +1106,7 @@
                     "React"
                 ],
                 "name": "列の移動",
-                "href": "grids/tree-grid/column-moving.md",
+                "href": "grids/tree-grid/column-moving.mdx",
                 "premium": true
             },
             {
@@ -1114,7 +1114,7 @@
                     "Angular"
                 ],
                 "name": "列のピン固定",
-                "href": "grids/tree-grid/column-pinning.md",
+                "href": "grids/tree-grid/column-pinning.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -1123,7 +1123,7 @@
                     "Angular"
                 ],
                 "name": "列のサイズ変更",
-                "href": "grids/tree-grid/column-resizing.md",
+                "href": "grids/tree-grid/column-resizing.mdx",
                 "premium": true
             },
             {
@@ -1131,14 +1131,14 @@
                     "Angular"
                 ],
                 "name": "編集",
-                "href": "grids/tree-grid/editing.md",
+                "href": "grids/tree-grid/editing.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの編集",
-                        "href": "grids/tree-grid/cell-editing.md",
+                        "href": "grids/tree-grid/cell-editing.mdx",
                         "premium": true
                     },
                     {
@@ -1146,7 +1146,7 @@
                             "Angular"
                         ],
                         "name": "行の追加",
-                        "href": "grids/tree-grid/row-adding.md",
+                        "href": "grids/tree-grid/row-adding.mdx",
                         "premium": true
                     },
                     {
@@ -1154,7 +1154,7 @@
                             "Angular"
                         ],
                         "name": "行の編集",
-                        "href": "grids/tree-grid/row-editing.md",
+                        "href": "grids/tree-grid/row-editing.mdx",
                         "premium": true
                     }
                 ]
@@ -1164,7 +1164,7 @@
                     "Angular"
                 ],
                 "name": "エクスポート",
-                "href": "grids/tree-grid/export-excel.md",
+                "href": "grids/tree-grid/export-excel.mdx",
                 "premium": true,
                 "updated": true
             },
@@ -1173,14 +1173,14 @@
                     "Angular"
                 ],
                 "name": "フィルタリング",
-                "href": "grids/tree-grid/filtering.md",
+                "href": "grids/tree-grid/filtering.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "高度なフィルタリング",
-                        "href": "grids/tree-grid/advanced-filtering.md",
+                        "href": "grids/tree-grid/advanced-filtering.mdx",
                         "premium": true
                     },
                     {
@@ -1189,7 +1189,7 @@
                             "React"
                         ],
                         "name": "Excel スタイル フィルタリング",
-                        "href": "grids/tree-grid/excel-style-filtering.md",
+                        "href": "grids/tree-grid/excel-style-filtering.mdx",
                         "premium": true
                     }
                 ]
@@ -1200,7 +1200,7 @@
                     "React"
                 ],
                 "name": "キーボード ナビゲーション",
-                "href": "grids/tree-grid/keyboard-navigation.md",
+                "href": "grids/tree-grid/keyboard-navigation.mdx",
                 "premium": true
             },
             {
@@ -1208,7 +1208,7 @@
                     "Angular"
                 ],
                 "name": "複数列ヘッダー",
-                "href": "grids/tree-grid/multi-column-headers.md",
+                "href": "grids/tree-grid/multi-column-headers.mdx",
                 "premium": true
             },
             {
@@ -1219,7 +1219,7 @@
                     "Blazor"
                 ],
                 "name": "複数行レイアウト",
-                "href": "grids/tree-grid/multi-row-layout.md",
+                "href": "grids/tree-grid/multi-row-layout.mdx",
                 "premium": true
             },
             {
@@ -1227,7 +1227,7 @@
                     "Angular"
                 ],
                 "name": "ページング",
-                "href": "grids/tree-grid/paging.md",
+                "href": "grids/tree-grid/paging.mdx",
                 "premium": true
             },
             {
@@ -1238,7 +1238,7 @@
                     "Blazor"
                 ],
                 "name": "リモート データ操作",
-                "href": "grids/tree-grid/remote-data-operations.md",
+                "href": "grids/tree-grid/remote-data-operations.mdx",
                 "premium": true
             },
             {
@@ -1246,7 +1246,7 @@
                     "Angular"
                 ],
                 "name": "行の操作",
-                "href": "grids/tree-grid/row-actions.md",
+                "href": "grids/tree-grid/row-actions.mdx",
                 "premium": true
             },
             {
@@ -1254,7 +1254,7 @@
                     "Angular"
                 ],
                 "name": "行のドラッグ",
-                "href": "grids/tree-grid/row-drag.md",
+                "href": "grids/tree-grid/row-drag.mdx",
                 "premium": true
             },
             {
@@ -1262,7 +1262,7 @@
                     "Angular"
                 ],
                 "name": "行のピン固定",
-                "href": "grids/tree-grid/row-pinning.md",
+                "href": "grids/tree-grid/row-pinning.mdx",
                 "premium": true
             },
             {
@@ -1270,7 +1270,7 @@
                     "Angular"
                 ],
                 "name": "検索",
-                "href": "grids/tree-grid/search.md",
+                "href": "grids/tree-grid/search.mdx",
                 "premium": true
             },
             {
@@ -1278,14 +1278,14 @@
                     "Angular"
                 ],
                 "name": "選択",
-                "href": "grids/tree-grid/selection.md",
+                "href": "grids/tree-grid/selection.mdx",
                 "items": [
                     {
                         "exclude": [
                             "Angular"
                         ],
                         "name": "セルの選択",
-                        "href": "grids/tree-grid/cell-selection.md",
+                        "href": "grids/tree-grid/cell-selection.mdx",
                         "premium": true
                     },
                     {
@@ -1293,7 +1293,7 @@
                             "Angular"
                         ],
                         "name": "列の選択",
-                        "href": "grids/tree-grid/column-selection.md",
+                        "href": "grids/tree-grid/column-selection.mdx",
                         "premium": true
                     },
                     {
@@ -1301,7 +1301,7 @@
                             "Angular"
                         ],
                         "name": "行の選択",
-                        "href": "grids/tree-grid/row-selection.md",
+                        "href": "grids/tree-grid/row-selection.mdx",
                         "premium": true
                     }
                 ]
@@ -1311,7 +1311,7 @@
                     "Angular"
                 ],
                 "name": "サイズ",
-                "href": "grids/tree-grid/size.md",
+                "href": "grids/tree-grid/size.mdx",
                 "premium": true
             },
             {
@@ -1319,7 +1319,7 @@
                     "Angular"
                 ],
                 "name": "サイズ設定",
-                "href": "grids/tree-grid/sizing.md",
+                "href": "grids/tree-grid/sizing.mdx",
                 "premium": true
             },
             {
@@ -1327,7 +1327,7 @@
                     "Angular"
                 ],
                 "name": "ソート",
-                "href": "grids/tree-grid/sorting.md",
+                "href": "grids/tree-grid/sorting.mdx",
                 "premium": true
             },
             {
@@ -1335,7 +1335,7 @@
                     "Angular"
                 ],
                 "name": "状態の保持",
-                "href": "grids/tree-grid/state-persistence.md",
+                "href": "grids/tree-grid/state-persistence.mdx",
                 "premium": true
             },
             {
@@ -1343,7 +1343,7 @@
                     "Angular"
                 ],
                 "name": "集計",
-                "href": "grids/tree-grid/summaries.md",
+                "href": "grids/tree-grid/summaries.mdx",
                 "premium": true
             },
             {
@@ -1351,7 +1351,7 @@
                     "Angular"
                 ],
                 "name": "ツールバー",
-                "href": "grids/tree-grid/toolbar.md",
+                "href": "grids/tree-grid/toolbar.mdx",
                 "premium": true
             },
             {
@@ -1359,7 +1359,7 @@
                     "Angular"
                 ],
                 "name": "仮想化とパフォーマンス",
-                "href": "grids/tree-grid/virtualization.md",
+                "href": "grids/tree-grid/virtualization.mdx",
                 "premium": true
             },
             {
@@ -1369,7 +1369,7 @@
                     "Blazor"
                 ],
                 "name": "ロードオンデマンド",
-                "href": "grids/tree-grid/load-on-demand.md",
+                "href": "grids/tree-grid/load-on-demand.mdx",
                 "premium": true
             },
             {
@@ -1378,7 +1378,7 @@
                     "React"
                 ],
                 "name": "ライブ データ / リアルタイム",
-                "href": "grids/tree-grid/live-data.md",
+                "href": "grids/tree-grid/live-data.mdx",
                 "premium": true
             }
         ]
@@ -1388,14 +1388,14 @@
             "Angular"
         ],
         "name": "グリッド ライト",
-        "href": "grid-lite/overview.md",
+        "href": "grid-lite/overview.mdx",
         "items": [
             {
                 "exclude": [
                     "Angular"
                 ],
                 "name": "列の構成",
-                "href": "grid-lite/column-configuration.md",
+                "href": "grid-lite/column-configuration.mdx",
                 "items": [
                     {
                         "exclude": [
@@ -1403,7 +1403,7 @@
                             "Blazor"
                         ],
                         "name": "セル テンプレート",
-                        "href": "grid-lite/cell-template.md",
+                        "href": "grid-lite/cell-template.mdx",
                         "new": true
                     },
                     {
@@ -1412,7 +1412,7 @@
                             "Blazor"
                         ],
                         "name": "ヘッダー テンプレート",
-                        "href": "grid-lite/header-template.md",
+                        "href": "grid-lite/header-template.mdx",
                         "new": true
                     }
                 ],
@@ -1423,7 +1423,7 @@
                     "Angular"
                 ],
                 "name": "データ バインディング",
-                "href": "grid-lite/binding.md",
+                "href": "grid-lite/binding.mdx",
                 "new": true
             },
             {
@@ -1431,7 +1431,7 @@
                     "Angular"
                 ],
                 "name": "フィルタリング",
-                "href": "grid-lite/filtering.md",
+                "href": "grid-lite/filtering.mdx",
                 "new": true
             },
             {
@@ -1439,7 +1439,7 @@
                     "Angular"
                 ],
                 "name": "ソート",
-                "href": "grid-lite/sorting.md",
+                "href": "grid-lite/sorting.mdx",
                 "new": true
             },
             {
@@ -1447,7 +1447,7 @@
                     "Angular"
                 ],
                 "name": "テーマ設定",
-                "href": "grid-lite/theming.md",
+                "href": "grid-lite/theming.mdx",
                 "new": true
             }
         ],
@@ -1458,14 +1458,14 @@
             "Angular"
         ],
         "name": "リスト",
-        "href": "grids/list.md"
+        "href": "grids/list.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ツリー",
-        "href": "grids/tree.md"
+        "href": "grids/tree.mdx"
     },
     {
         "exclude": [
@@ -1475,27 +1475,27 @@
             "React"
         ],
         "name": "テーブル / グリッド",
-        "href": "grids/data-grid/overview.md",
+        "href": "grids/data-grid/overview.mdx",
         "premium": true,
         "items": [
             {
                 "name": "アクセシビリティの遵守",
-                "href": "grids/data-grid/accessibility.md",
+                "href": "grids/data-grid/accessibility.mdx",
                 "premium": true
             },
             {
                 "name": "ライブ データのバインド",
-                "href": "grids/data-grid/live-data.md",
+                "href": "grids/data-grid/live-data.mdx",
                 "premium": true
             },
             {
                 "name": "ローカル データのバインディング",
-                "href": "grids/data-grid/local-data.md",
+                "href": "grids/data-grid/local-data.mdx",
                 "premium": true
             },
             {
                 "name": "ローカリゼーション",
-                "href": "grids/data-grid/localization.md",
+                "href": "grids/data-grid/localization.mdx",
                 "premium": true
             },
             {
@@ -1503,7 +1503,7 @@
                     "Blazor"
                 ],
                 "name": "比較データのバインディング",
-                "href": "grids/data-grid/type-comparison-table.md",
+                "href": "grids/data-grid/type-comparison-table.mdx",
                 "premium": true
             },
             {
@@ -1511,7 +1511,7 @@
                     "Blazor"
                 ],
                 "name": "ヒートマップ データのバインディング",
-                "href": "grids/data-grid/type-heatmap-table.md",
+                "href": "grids/data-grid/type-heatmap-table.mdx",
                 "premium": true
             },
             {
@@ -1519,7 +1519,7 @@
                     "Blazor"
                 ],
                 "name": "マトリックス データのバインディング",
-                "href": "grids/data-grid/type-matrix-table.md",
+                "href": "grids/data-grid/type-matrix-table.mdx",
                 "premium": true
             },
             {
@@ -1527,7 +1527,7 @@
                     "Blazor"
                 ],
                 "name": "周期性データのバインディング",
-                "href": "grids/data-grid/type-periodic-table.md",
+                "href": "grids/data-grid/type-periodic-table.mdx",
                 "premium": true
             },
             {
@@ -1535,112 +1535,112 @@
                     "Blazor"
                 ],
                 "name": "仮想データのバインディング",
-                "href": "grids/data-grid/remote-data.md",
+                "href": "grids/data-grid/remote-data.mdx",
                 "premium": true
             },
             {
                 "name": "セルのアクティブ化",
-                "href": "grids/data-grid/cell-activation.md",
+                "href": "grids/data-grid/cell-activation.mdx",
                 "premium": true
             },
             {
                 "name": "グリッド編集",
-                "href": "grids/data-grid/cell-editing.md",
+                "href": "grids/data-grid/cell-editing.mdx",
                 "premium": true
             },
             {
                 "name": "セル選択",
-                "href": "grids/data-grid/cell-selection.md",
+                "href": "grids/data-grid/cell-selection.mdx",
                 "premium": true
             },
             {
                 "name": "列アニメーション",
-                "href": "grids/data-grid/column-animation.md",
+                "href": "grids/data-grid/column-animation.mdx",
                 "premium": true
             },
             {
                 "name": "列フィルタリング",
-                "href": "grids/data-grid/column-filtering.md",
+                "href": "grids/data-grid/column-filtering.mdx",
                 "premium": true
             },
             {
                 "name": "列移動",
-                "href": "grids/data-grid/column-moving.md",
+                "href": "grids/data-grid/column-moving.mdx",
                 "premium": true
             },
             {
                 "name": "列の選択",
-                "href": "grids/data-grid/column-chooser.md",
+                "href": "grids/data-grid/column-chooser.mdx",
                 "premium": true
             },
             {
                 "name": "列のオプション",
-                "href": "grids/data-grid/column-options.md",
+                "href": "grids/data-grid/column-options.mdx",
                 "premium": true
             },
             {
                 "name": "列のピン固定",
-                "href": "grids/data-grid/column-pinning.md",
+                "href": "grids/data-grid/column-pinning.mdx",
                 "premium": true
             },
             {
                 "name": "列サイズの変更",
-                "href": "grids/data-grid/column-resizing.md",
+                "href": "grids/data-grid/column-resizing.mdx",
                 "premium": true
             },
             {
                 "name": "列のソート",
-                "href": "grids/data-grid/column-sorting.md",
+                "href": "grids/data-grid/column-sorting.mdx",
                 "premium": true
             },
             {
                 "name": "列スパークライン",
-                "href": "grids/data-grid/type-sparkline-table.md",
+                "href": "grids/data-grid/type-sparkline-table.mdx",
                 "premium": true
             },
             {
                 "name": "列集計",
-                "href": "grids/data-grid/column-summaries.md",
+                "href": "grids/data-grid/column-summaries.mdx",
                 "premium": true
             },
             {
                 "name": "列タイプ",
-                "href": "grids/data-grid/column-types.md",
+                "href": "grids/data-grid/column-types.mdx",
                 "premium": true
             },
             {
                 "name": "高いパフォーマンス",
-                "href": "grids/data-grid/performance.md",
+                "href": "grids/data-grid/performance.mdx",
                 "premium": true
             },
             {
                 "name": "水平方向のスクロール",
-                "href": "grids/data-grid/horizontal-scrolling.md",
+                "href": "grids/data-grid/horizontal-scrolling.mdx",
                 "premium": true
             },
             {
                 "name": "グリッド レイアウトの読み込みと保存",
-                "href": "grids/data-grid/load-save-layout.md",
+                "href": "grids/data-grid/load-save-layout.mdx",
                 "premium": true
             },
             {
                 "name": "行グループ",
-                "href": "grids/data-grid/row-grouping.md",
+                "href": "grids/data-grid/row-grouping.mdx",
                 "premium": true
             },
             {
                 "name": "行のハイライト表示",
-                "href": "grids/data-grid/row-highlighting.md",
+                "href": "grids/data-grid/row-highlighting.mdx",
                 "premium": true
             },
             {
                 "name": "行のページング",
-                "href": "grids/data-grid/row-paging.md",
+                "href": "grids/data-grid/row-paging.mdx",
                 "premium": true
             },
             {
                 "name": "行のピン固定",
-                "href": "grids/data-grid/row-pinning.md",
+                "href": "grids/data-grid/row-pinning.mdx",
                 "premium": true
             },
             {
@@ -1648,7 +1648,7 @@
                     "Angular"
                 ],
                 "name": "テーマ設定",
-                "href": "grids/theming.md",
+                "href": "grids/theming.mdx",
                 "premium": true
             }
         ]
@@ -1658,47 +1658,47 @@
             "Blazor"
         ],
         "name": "スプレッドシート",
-        "href": "spreadsheet-overview.md",
+        "href": "spreadsheet-overview.mdx",
         "premium": true,
         "items": [
             {
                 "name": "アクティブ化",
-                "href": "spreadsheet-activation.md",
+                "href": "spreadsheet-activation.mdx",
                 "premium": true
             },
             {
                 "name": "チャート アダプター",
-                "href": "spreadsheet-chart-adapter.md",
+                "href": "spreadsheet-chart-adapter.mdx",
                 "premium": true
             },
             {
                 "name": "クリップボード",
-                "href": "spreadsheet-clipboard.md",
+                "href": "spreadsheet-clipboard.mdx",
                 "premium": true
             },
             {
                 "name": "条件付き書式",
-                "href": "spreadsheet-conditional-formatting.md",
+                "href": "spreadsheet-conditional-formatting.mdx",
                 "premium": true
             },
             {
                 "name": "Spreadsheet の構成",
-                "href": "spreadsheet-configuring.md",
+                "href": "spreadsheet-configuring.mdx",
                 "premium": true
             },
             {
                 "name": "コマンド",
-                "href": "spreadsheet-commands.md",
+                "href": "spreadsheet-commands.mdx",
                 "premium": true
             },
             {
                 "name": "データ検証",
-                "href": "spreadsheet-data-validation.md",
+                "href": "spreadsheet-data-validation.mdx",
                 "premium": true
             },
             {
                 "name": "ハイパーリンク",
-                "href": "spreadsheet-hyperlinks.md",
+                "href": "spreadsheet-hyperlinks.mdx",
                 "premium": true
             },
             {
@@ -1706,7 +1706,7 @@
                     "Blazor"
                 ],
                 "name": "Excel ユーティリティ",
-                "href": "excel-utility.md",
+                "href": "excel-utility.mdx",
                 "premium": true
             }
         ]
@@ -1717,14 +1717,14 @@
     },
     {
         "name": "ダッシュボード タイル",
-        "href": "dashboard-tile.md",
+        "href": "dashboard-tile.mdx",
         "premium": true,
         "preview": true
     },
     {
         "note": "THIS NODE IS FOR THE NEW STRUCTURE OF CHARTS",
         "name": "チャート",
-        "href": "charts/chart-overview.md",
+        "href": "charts/chart-overview.mdx",
         "premium": true,
         "header": true
     },
@@ -1736,7 +1736,7 @@
             "Angular"
         ],
         "name": "リアルタイム データのバインド",
-        "href": "category-chart-high-frequency.md",
+        "href": "category-chart-high-frequency.mdx",
         "premium": true
     },
     {
@@ -1747,7 +1747,7 @@
             "Angular"
         ],
         "name": "大規模データのバインド",
-        "href": "category-chart-high-volume.md",
+        "href": "category-chart-high-volume.mdx",
         "premium": true
     },
     {
@@ -1758,49 +1758,49 @@
             "Angular"
         ],
         "name": "複数データ ソースのバインド",
-        "href": "financial-chart-multiple-data.md",
+        "href": "financial-chart-multiple-data.mdx",
         "premium": true
     },
     {
         "name": "エリア チャート",
-        "href": "charts/types/area-chart.md",
+        "href": "charts/types/area-chart.mdx",
         "premium": true
     },
     {
         "name": "棒チャート",
-        "href": "charts/types/bar-chart.md",
+        "href": "charts/types/bar-chart.mdx",
         "updated": true,
         "premium": true
     },
     {
         "name": "バブル チャート",
-        "href": "charts/types/bubble-chart.md",
+        "href": "charts/types/bubble-chart.mdx",
         "premium": true
     },
     {
         "name": "縦棒チャート",
-        "href": "charts/types/column-chart.md",
+        "href": "charts/types/column-chart.mdx",
         "premium": true
     },
     {
         "name": "複合チャート",
-        "href": "charts/types/composite-chart.md",
+        "href": "charts/types/composite-chart.mdx",
         "premium": true
     },
     {
         "name": "データ円チャート",
-        "href": "charts/types/data-pie-chart.md",
+        "href": "charts/types/data-pie-chart.mdx",
         "premium": true,
         "new": true
     },
     {
         "name": "ドーナツ チャート",
-        "href": "charts/types/donut-chart.md",
+        "href": "charts/types/donut-chart.mdx",
         "premium": true
     },
     {
         "name": "ファイナンシャル / 株価チャート",
-        "href": "charts/types/stock-chart.md",
+        "href": "charts/types/stock-chart.mdx",
         "premium": true
     },
     {
@@ -1811,12 +1811,12 @@
             "WebComponents"
         ],
         "name": "ガント チャート",
-        "href": "charts/types/gantt-chart.md",
+        "href": "charts/types/gantt-chart.mdx",
         "premium": true
     },
     {
         "name": "折れ線チャート",
-        "href": "charts/types/line-chart.md",
+        "href": "charts/types/line-chart.mdx",
         "premium": true,
         "updated": true
     },
@@ -1828,22 +1828,22 @@
             "WebComponents"
         ],
         "name": "ネットワーク チャート",
-        "href": "charts/types/network-chart.md",
+        "href": "charts/types/network-chart.mdx",
         "premium": true
     },
     {
         "name": "円チャート",
-        "href": "charts/types/pie-chart.md",
+        "href": "charts/types/pie-chart.mdx",
         "premium": true
     },
     {
         "name": "ポイント チャート",
-        "href": "charts/types/point-chart.md",
+        "href": "charts/types/point-chart.mdx",
         "premium": true
     },
     {
         "name": "極座標チャート",
-        "href": "charts/types/polar-chart.md",
+        "href": "charts/types/polar-chart.mdx",
         "premium": true
     },
     {
@@ -1854,160 +1854,160 @@
             "WebComponents"
         ],
         "name": "ピラミッド チャート",
-        "href": "charts/types/pyramid-chart.md",
+        "href": "charts/types/pyramid-chart.mdx",
         "premium": true
     },
     {
         "name": "ラジアル チャート",
-        "href": "charts/types/radial-chart.md",
+        "href": "charts/types/radial-chart.mdx",
         "premium": true
     },
     {
         "name": "散布図",
-        "href": "charts/types/scatter-chart.md",
+        "href": "charts/types/scatter-chart.mdx",
         "premium": true
     },
     {
         "name": "シェープ チャート",
-        "href": "charts/types/shape-chart.md",
+        "href": "charts/types/shape-chart.mdx",
         "premium": true
     },
     {
         "name": "スプライン チャート",
-        "href": "charts/types/spline-chart.md",
+        "href": "charts/types/spline-chart.mdx",
         "premium": true
     },
     {
         "name": "スパークライン",
-        "href": "charts/types/sparkline-chart.md",
+        "href": "charts/types/sparkline-chart.mdx",
         "premium": true
     },
     {
         "name": "積層型チャート",
-        "href": "charts/types/stacked-chart.md",
+        "href": "charts/types/stacked-chart.mdx",
         "premium": true
     },
     {
         "name": "ステップ チャート",
-        "href": "charts/types/step-chart.md",
+        "href": "charts/types/step-chart.mdx",
         "premium": true
     },
     {
         "name": "ツリーマップ",
-        "href": "charts/types/treemap-chart.md",
+        "href": "charts/types/treemap-chart.mdx",
         "premium": true,
         "updated": true
     },
     {
         "name": "チャート API",
-        "href": "charts/chart-api.md",
+        "href": "charts/chart-api.mdx",
         "premium": true,
         "updated": true
     },
     {
         "name": "チャート機能",
-        "href": "charts/chart-features.md",
+        "href": "charts/chart-features.mdx",
         "items": [
             {
                 "name": "軸グリッド線",
-                "href": "charts/features/chart-axis-gridlines.md",
+                "href": "charts/features/chart-axis-gridlines.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "軸レイアウト",
-                "href": "charts/features/chart-axis-layouts.md",
+                "href": "charts/features/chart-axis-layouts.mdx",
                 "premium": true
             },
             {
                 "name": "軸オプション",
-                "href": "charts/features/chart-axis-options.md",
+                "href": "charts/features/chart-axis-options.mdx",
                 "premium": true
             },
             {
                 "name": "軸タイプ",
-                "href": "charts/features/chart-axis-types.md",
+                "href": "charts/features/chart-axis-types.mdx",
                 "premium": true
             },
             {
                 "name": "チャート アニメーション",
-                "href": "charts/features/chart-animations.md",
+                "href": "charts/features/chart-animations.mdx",
                 "premium": true
             },
             {
                 "name": "チャートの注釈",
-                "href": "charts/features/chart-annotations.md",
+                "href": "charts/features/chart-annotations.mdx",
                 "premium": true
             },
             {
                 "name": "チャートのデータ注釈",
-                "href": "charts/features/chart-data-annotations.md",
+                "href": "charts/features/chart-data-annotations.mdx",
                 "premium": true,
                 "preview": true
             },
             {
                 "name": "ダッシュボードでのチャート作成",
-                "href": "dashboard-tile.md",
+                "href": "dashboard-tile.mdx",
                 "premium": true,
                 "preview": true
             },
             {
                 "name": "チャートのデータ集計",
-                "href": "charts/features/chart-data-aggregations.md",
+                "href": "charts/features/chart-data-aggregations.mdx",
                 "premium": true
             },
             {
                 "name": "チャートのデータ フィルタリング",
-                "href": "charts/features/chart-data-filtering.md",
+                "href": "charts/features/chart-data-filtering.mdx",
                 "premium": true
             },
             {
                 "name": "チャートのデータ凡例",
-                "href": "charts/features/chart-data-legend.md",
+                "href": "charts/features/chart-data-legend.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "チャートのデータ ツールチップ",
-                "href": "charts/features/chart-data-tooltip.md",
+                "href": "charts/features/chart-data-tooltip.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "チャートのデータの選択",
-                "href": "charts/features/chart-data-selection.md",
+                "href": "charts/features/chart-data-selection.mdx",
                 "premium": true
             },
             {
                 "name": "チャートの強調表示フィルター",
-                "href": "charts/features/chart-highlight-filter.md",
+                "href": "charts/features/chart-highlight-filter.mdx",
                 "premium": true
             },
             {
                 "name": "チャートのハイライト表示",
-                "href": "charts/features/chart-highlighting.md",
+                "href": "charts/features/chart-highlighting.mdx",
                 "premium": true
             },
             {
                 "name": "チャート マーカー",
-                "href": "charts/features/chart-markers.md",
+                "href": "charts/features/chart-markers.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "チャート ナビゲーション",
-                "href": "charts/features/chart-navigation.md",
+                "href": "charts/features/chart-navigation.mdx",
                 "premium": true
             },
             {
                 "name": "チャート オーバーレイ",
-                "href": "charts/features/chart-overlays.md",
+                "href": "charts/features/chart-overlays.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "チャート パフォーマンス",
-                "href": "charts/features/chart-performance.md",
+                "href": "charts/features/chart-performance.mdx",
                 "premium": true
             },
             {
@@ -2015,23 +2015,23 @@
                     "Blazor"
                 ],
                 "name": "チャートの同期",
-                "href": "charts/features/chart-synchronization.md",
+                "href": "charts/features/chart-synchronization.mdx",
                 "premium": true
             },
             {
                 "name": "チャート ツールチップ",
-                "href": "charts/features/chart-tooltips.md",
+                "href": "charts/features/chart-tooltips.mdx",
                 "premium": true
             },
             {
                 "name": "チャート トレンドライン",
-                "href": "charts/features/chart-trendlines.md",
+                "href": "charts/features/chart-trendlines.mdx",
                 "premium": true,
                 "updated": true
             },
             {
                 "name": "チャートのユーザー注釈",
-                "href": "charts/features/chart-user-annotations.md",
+                "href": "charts/features/chart-user-annotations.mdx",
                 "premium": true,
                 "preview": true
             }
@@ -2039,7 +2039,7 @@
     },
     {
         "name": "データ ソース",
-        "href": "data-chart-data-sources.md",
+        "href": "data-chart-data-sources.mdx",
         "exclude": [
             "React",
             "WebComponents",
@@ -2050,86 +2050,86 @@
     {
         "name": "マップ",
         "header": true,
-        "href": "geo-map.md",
+        "href": "geo-map.mdx",
         "premium": true
     },
     {
         "name": "地理エリア マップ",
-        "href": "geo-map-type-scatter-area-series.md",
+        "href": "geo-map-type-scatter-area-series.mdx",
         "premium": true
     },
     {
         "name": "地理等高線マップ",
-        "href": "geo-map-type-scatter-contour-series.md",
+        "href": "geo-map-type-scatter-contour-series.mdx",
         "premium": true
     },
     {
         "name": "地理高密度マップ",
-        "href": "geo-map-type-scatter-density-series.md",
+        "href": "geo-map-type-scatter-density-series.mdx",
         "premium": true
     },
     {
         "name": "地理バブル マップ",
-        "href": "geo-map-type-scatter-bubble-series.md",
+        "href": "geo-map-type-scatter-bubble-series.mdx",
         "premium": true
     },
     {
         "name": "地理記号マップ",
-        "href": "geo-map-type-scatter-symbol-series.md",
+        "href": "geo-map-type-scatter-symbol-series.mdx",
         "premium": true
     },
     {
         "name": "地理ポリゴン マップ",
-        "href": "geo-map-type-shape-polygon-series.md",
+        "href": "geo-map-type-shape-polygon-series.mdx",
         "premium": true
     },
     {
         "name": "地理ポリライン マップ",
-        "href": "geo-map-type-shape-polyline-series.md",
+        "href": "geo-map-type-shape-polyline-series.mdx",
         "premium": true
     },
     {
         "name": "地理マップ API",
-        "href": "maps/map-api.md",
+        "href": "maps/map-api.mdx",
         "premium": true
     },
     {
         "name": "地理マップの機能",
-        "href": "geo-map.md",
+        "href": "geo-map.mdx",
         "items": [
             {
                 "name": "CSV ファイルのバインド",
-                "href": "geo-map-binding-data-csv.md",
+                "href": "geo-map-binding-data-csv.mdx",
                 "premium": true
             },
             {
                 "name": "JSON ファイルのバインド",
-                "href": "geo-map-binding-data-json-points.md",
+                "href": "geo-map-binding-data-json-points.mdx",
                 "premium": true
             },
             {
                 "name": "データ モデルのバインド",
-                "href": "geo-map-binding-data-model.md",
+                "href": "geo-map-binding-data-model.mdx",
                 "premium": true
             },
             {
                 "name": "シェープ ファイルのバインド",
-                "href": "geo-map-binding-shp-file.md",
+                "href": "geo-map-binding-shp-file.mdx",
                 "premium": true
             },
             {
                 "name": "複数シェープのバインド",
-                "href": "geo-map-binding-multiple-shapes.md",
+                "href": "geo-map-binding-multiple-shapes.mdx",
                 "premium": true
             },
             {
                 "name": "複数ソースのバインド",
-                "href": "geo-map-binding-multiple-sources.md",
+                "href": "geo-map-binding-multiple-sources.mdx",
                 "premium": true
             },
             {
                 "name": "Azure 画像の表示",
-                "href": "geo-map-display-azure-imagery.md",
+                "href": "geo-map-display-azure-imagery.mdx",
                 "premium": true
             },
             {
@@ -2137,12 +2137,12 @@
                     "Blazor"
                 ],
                 "name": "Bing 画像の表示",
-                "href": "geo-map-display-bing-imagery.md",
+                "href": "geo-map-display-bing-imagery.mdx",
                 "premium": true
             },
             {
                 "name": "Esri 画像の表示",
-                "href": "geo-map-display-esri-imagery.md",
+                "href": "geo-map-display-esri-imagery.mdx",
                 "premium": true
             },
             {
@@ -2150,22 +2150,22 @@
                     "Blazor"
                 ],
                 "name": "ヒート画像の表示",
-                "href": "geo-map-display-heat-imagery.md",
+                "href": "geo-map-display-heat-imagery.mdx",
                 "premium": true
             },
             {
                 "name": "OSM 画像の表示",
-                "href": "geo-map-display-osm-imagery.md",
+                "href": "geo-map-display-osm-imagery.mdx",
                 "premium": true
             },
             {
                 "name": "コンテンツのナビゲーション",
-                "href": "geo-map-navigation.md",
+                "href": "geo-map-navigation.mdx",
                 "premium": true
             },
             {
                 "name": "シェープ ファイルの参照",
-                "href": "geo-map-shape-files-reference.md",
+                "href": "geo-map-shape-files-reference.mdx",
                 "premium": true
             },
             {
@@ -2173,7 +2173,7 @@
                     "Blazor"
                 ],
                 "name": "シェープ スタイリング",
-                "href": "geo-map-shape-styling.md",
+                "href": "geo-map-shape-styling.mdx",
                 "premium": true
             },
             {
@@ -2181,27 +2181,27 @@
                     "Blazor"
                 ],
                 "name": "シェープ スタイリング ユーティリティ",
-                "href": "geo-map-resources-shape-styling-utility.md",
+                "href": "geo-map-resources-shape-styling-utility.mdx",
                 "premium": true
             },
             {
                 "name": "Esri ユーティリティ",
-                "href": "geo-map-resources-esri.md",
+                "href": "geo-map-resources-esri.mdx",
                 "premium": true
             },
             {
                 "name": "ワールド コネクション",
-                "href": "geo-map-resources-world-connections.md",
+                "href": "geo-map-resources-world-connections.mdx",
                 "premium": true
             },
             {
                 "name": "ワールド ロケーション",
-                "href": "geo-map-resources-world-locations.md",
+                "href": "geo-map-resources-world-locations.mdx",
                 "premium": true
             },
             {
                 "name": "ワールド ユーティリティ",
-                "href": "geo-map-resources-world-util.md",
+                "href": "geo-map-resources-world-util.mdx",
                 "premium": true
             }
         ]
@@ -2218,28 +2218,28 @@
             "Angular"
         ],
         "name": "アコーディオン",
-        "href": "layouts/accordion.md"
+        "href": "layouts/accordion.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "アバター",
-        "href": "layouts/avatar.md"
+        "href": "layouts/avatar.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "カード",
-        "href": "layouts/card.md"
+        "href": "layouts/card.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "カルーセル",
-        "href": "layouts/carousel.md",
+        "href": "layouts/carousel.mdx",
         "new": true
     },
     {
@@ -2247,14 +2247,14 @@
             "Angular"
         ],
         "name": "ドック マネージャー",
-        "href": "layouts/dock-manager.md",
+        "href": "layouts/dock-manager.mdx",
         "items": [
             {
                 "exclude": [
                     "Angular"
                 ],
                 "name": "ペインの更新",
-                "href": "layouts/dock-manager-updating-panes.md",
+                "href": "layouts/dock-manager-updating-panes.mdx",
                 "premium": true
             },
             {
@@ -2262,7 +2262,7 @@
                     "Angular"
                 ],
                 "name": "フレームの埋め込み",
-                "href": "layouts/dock-manager-embedding-frames.md",
+                "href": "layouts/dock-manager-embedding-frames.mdx",
                 "premium": true
             },
             {
@@ -2272,7 +2272,7 @@
                     "React"
                 ],
                 "name": "デスクトップ統合",
-                "href": "layouts/dock-manager-electron.md",
+                "href": "layouts/dock-manager-electron.mdx",
                 "premium": true
             },
             {
@@ -2282,7 +2282,7 @@
                     "Blazor"
                 ],
                 "name": "カスタマイズ",
-                "href": "layouts/dock-manager-customization.md",
+                "href": "layouts/dock-manager-customization.mdx",
                 "premium": true,
                 "updated": true
             }
@@ -2293,28 +2293,28 @@
             "Angular"
         ],
         "name": "展開パネル",
-        "href": "layouts/expansion-panel.md"
+        "href": "layouts/expansion-panel.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ステッパー",
-        "href": "layouts/stepper.md"
+        "href": "layouts/stepper.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "タブ",
-        "href": "layouts/tabs.md"
+        "href": "layouts/tabs.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "デバイダー",
-        "href": "layouts/divider.md",
+        "href": "layouts/divider.mdx",
         "new": true
     },
     {
@@ -2322,7 +2322,7 @@
             "Angular"
         ],
         "name": "スプリッター",
-        "href": "layouts/splitter.md",
+        "href": "layouts/splitter.mdx",
         "new": true
     },
     {
@@ -2330,7 +2330,7 @@
             "Angular"
         ],
         "name": "タイル マネージャー",
-        "href": "layouts/tile-manager.md",
+        "href": "layouts/tile-manager.mdx",
         "new": true
     },
     {
@@ -2339,7 +2339,7 @@
     },
     {
         "name": "ツールバー",
-        "href": "menus/toolbar.md",
+        "href": "menus/toolbar.mdx",
         "premium": true,
         "updated": true
     },
@@ -2348,14 +2348,14 @@
             "Angular"
         ],
         "name": "ナビゲーション バー",
-        "href": "menus/navbar.md"
+        "href": "menus/navbar.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ナビゲーション ドロワー",
-        "href": "menus/navigation-drawer.md"
+        "href": "menus/navigation-drawer.mdx"
     },
     {
         "name": "フレームワーク",
@@ -2363,36 +2363,36 @@
     },
     {
         "name": "Excel ライブラリ",
-        "href": "excel-library.md",
+        "href": "excel-library.mdx",
         "items": [
             {
                 "name": "セルの使用",
-                "href": "excel-library-using-cells.md",
+                "href": "excel-library-using-cells.mdx",
                 "premium": true
             },
             {
                 "name": "テーブルの使用",
-                "href": "excel-library-using-tables.md",
+                "href": "excel-library-using-tables.mdx",
                 "premium": true
             },
             {
                 "name": "ワークブックの使用",
-                "href": "excel-library-using-workbooks.md",
+                "href": "excel-library-using-workbooks.mdx",
                 "premium": true
             },
             {
                 "name": "ワークシートの使用",
-                "href": "excel-library-using-worksheets.md",
+                "href": "excel-library-using-worksheets.mdx",
                 "premium": true
             },
             {
                 "name": "チャートの使用",
-                "href": "excel-library-working-with-charts.md",
+                "href": "excel-library-working-with-charts.mdx",
                 "premium": true
             },
             {
                 "name": "スパークラインを使用した作業",
-                "href": "excel-library-working-with-sparklines.md",
+                "href": "excel-library-working-with-sparklines.mdx",
                 "premium": true
             },
             {
@@ -2400,7 +2400,7 @@
                     "Blazor"
                 ],
                 "name": "Excel ユーティリティ",
-                "href": "excel-utility.md",
+                "href": "excel-utility.mdx",
                 "premium": true
             }
         ]
@@ -2411,17 +2411,17 @@
     },
     {
         "name": "ブレッドグラフ",
-        "href": "bullet-graph.md",
+        "href": "bullet-graph.mdx",
         "premium": true
     },
     {
         "name": "リニア ゲージ",
-        "href": "linear-gauge.md",
+        "href": "linear-gauge.mdx",
         "premium": true
     },
     {
         "name": "ラジアル ゲージ",
-        "href": "radial-gauge.md",
+        "href": "radial-gauge.mdx",
         "premium": true
     },
     {
@@ -2436,35 +2436,35 @@
             "Angular"
         ],
         "name": "バッジ",
-        "href": "inputs/badge.md"
+        "href": "inputs/badge.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ボタン",
-        "href": "inputs/button.md"
+        "href": "inputs/button.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ボタン グループ",
-        "href": "inputs/button-group.md"
+        "href": "inputs/button-group.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "チェックボックス",
-        "href": "inputs/checkbox.md"
+        "href": "inputs/checkbox.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "円形プログレス",
-        "href": "inputs/circular-progress.md",
+        "href": "inputs/circular-progress.mdx",
         "new": true
     },
     {
@@ -2472,7 +2472,7 @@
             "Angular"
         ],
         "name": "リニア プログレス",
-        "href": "inputs/linear-progress.md",
+        "href": "inputs/linear-progress.mdx",
         "new": true
     },
     {
@@ -2480,11 +2480,11 @@
             "Angular"
         ],
         "name": "チップ",
-        "href": "inputs/chip.md"
+        "href": "inputs/chip.mdx"
     },
     {
         "name": "カラー エディター",
-        "href": "inputs/color-editor.md",
+        "href": "inputs/color-editor.mdx",
         "premium": true,
         "preview": true
     },
@@ -2493,19 +2493,19 @@
             "Angular"
         ],
         "name": "コンボ ボックス",
-        "href": "inputs/combo/overview.md",
+        "href": "inputs/combo/overview.mdx",
         "items": [
             {
                 "name": "機能",
-                "href": "inputs/combo/features.md"
+                "href": "inputs/combo/features.mdx"
             },
             {
                 "name": "テンプレート",
-                "href": "inputs/combo/templates.md"
+                "href": "inputs/combo/templates.mdx"
             },
             {
                 "name": "単一選択",
-                "href": "inputs/combo/single-selection.md"
+                "href": "inputs/combo/single-selection.mdx"
             }
         ]
     },
@@ -2514,35 +2514,35 @@
             "Angular"
         ],
         "name": "ドロップダウン",
-        "href": "inputs/dropdown.md"
+        "href": "inputs/dropdown.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "アイコン",
-        "href": "layouts/icon.md"
+        "href": "layouts/icon.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "アイコン ボタン",
-        "href": "inputs/icon-button.md"
+        "href": "inputs/icon-button.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "入力",
-        "href": "inputs/input.md"
+        "href": "inputs/input.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "クエリ ビルダー",
-        "href": "inputs/query-builder.md",
+        "href": "inputs/query-builder.mdx",
         "new": true
     },
     {
@@ -2552,7 +2552,7 @@
             "Blazor"
         ],
         "name": "ファイル入力",
-        "href": "inputs/file-input.md",
+        "href": "inputs/file-input.mdx",
         "new": true
     },
     {
@@ -2560,7 +2560,7 @@
             "Angular"
         ],
         "name": "マスク入力",
-        "href": "inputs/mask-input.md",
+        "href": "inputs/mask-input.mdx",
         "new": true
     },
     {
@@ -2568,49 +2568,49 @@
             "Angular"
         ],
         "name": "日時入力",
-        "href": "inputs/date-time-input.md"
+        "href": "inputs/date-time-input.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ラジオ & ラジオ グループ",
-        "href": "inputs/radio.md"
+        "href": "inputs/radio.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "選択",
-        "href": "inputs/select.md"
+        "href": "inputs/select.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "評価",
-        "href": "inputs/rating.md"
+        "href": "inputs/rating.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "スイッチ",
-        "href": "inputs/switch.md"
+        "href": "inputs/switch.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "テキスト エリア",
-        "href": "inputs/text-area.md"
+        "href": "inputs/text-area.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ハイライト",
-        "href": "inputs/highlight.md"
+        "href": "inputs/highlight.mdx"
     },
     {
         "name": "インタラクション",
@@ -2621,7 +2621,7 @@
             "Angular"
         ],
         "name": "チャット",
-        "href": "interactivity/chat.md",
+        "href": "interactivity/chat.mdx",
         "new": true,
         "platforms": {
             "Blazor": { "new": false, "preview": true }
@@ -2632,14 +2632,14 @@
             "Angular"
         ],
         "name": "リップル",
-        "href": "inputs/ripple.md"
+        "href": "inputs/ripple.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ツールチップ",
-        "href": "inputs/tooltip.md",
+        "href": "inputs/tooltip.mdx",
         "new": true
     },
     {
@@ -2647,14 +2647,14 @@
             "Angular"
         ],
         "name": "スライダー & 範囲スライダー",
-        "href": "inputs/slider.md"
+        "href": "inputs/slider.mdx"
     },
     {
         "exclude": [
             "Blazor"
         ],
         "name": "ズーム スライダー",
-        "href": "zoomslider-overview.md"
+        "href": "zoomslider-overview.mdx"
     },
     {
         "exclude": [
@@ -2668,28 +2668,28 @@
             "Angular"
         ],
         "name": "バナー",
-        "href": "notifications/banner.md"
+        "href": "notifications/banner.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "スナックバー",
-        "href": "notifications/snackbar.md"
+        "href": "notifications/snackbar.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "トースト",
-        "href": "notifications/toast.md"
+        "href": "notifications/toast.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "ダイアログ",
-        "href": "notifications/dialog.md"
+        "href": "notifications/dialog.mdx"
     },
     {
         "exclude": [
@@ -2703,21 +2703,21 @@
             "Angular"
         ],
         "name": "カレンダー",
-        "href": "scheduling/calendar.md"
+        "href": "scheduling/calendar.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "日付ピッカー",
-        "href": "scheduling/date-picker.md"
+        "href": "scheduling/date-picker.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "日付範囲ピッカー",
-        "href": "scheduling/date-range-picker.md",
+        "href": "scheduling/date-range-picker.mdx",
         "new": true
     },
     {
@@ -2732,49 +2732,49 @@
             "Angular"
         ],
         "name": "概要",
-        "href": "themes/overview.md"
+        "href": "themes/overview.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "構成",
-        "href": "themes/configuration.md"
+        "href": "themes/configuration.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "エレベーション",
-        "href": "themes/elevations.md"
+        "href": "themes/elevations.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "パレット",
-        "href": "themes/palettes.md"
+        "href": "themes/palettes.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "タイポグラフィ",
-        "href": "themes/typography.md"
+        "href": "themes/typography.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "スタイル",
-        "href": "themes/styles.md"
+        "href": "themes/styles.mdx"
     },
     {
         "exclude": [
             "Angular"
         ],
         "name": "カスタム Tailwind クラス",
-        "href": "themes/tailwind.md",
+        "href": "themes/tailwind.mdx",
         "new": true
     }
 ]
diff --git a/docs/xplat/src/pages/index.astro b/docs/xplat/src/pages/index.astro
index ccd91ef13f..c67ee0b4dc 100644
--- a/docs/xplat/src/pages/index.astro
+++ b/docs/xplat/src/pages/index.astro
@@ -21,7 +21,7 @@ const toc: TocItem[] = existsSync(tocPath)
     : [];
 
 function hrefToSlug(href: string): string {
-    return href.replace(/\\/g, '/').replace(/\.md$/i, '').toLowerCase().replace(/\/index$/, '');
+    return href.replace(/\\/g, '/').replace(/\.(md|mdx)$/i, '').toLowerCase().replace(/\/index$/, '');
 }
 
 function findDefaultSlug(items: TocItem[]): string | null {
diff --git a/migration.md b/migration.md
deleted file mode 100644
index 8fa15a6649..0000000000
--- a/migration.md
+++ /dev/null
@@ -1,588 +0,0 @@
-# DocFX → MDX Migration Guide
-
-This guide covers every change needed when moving a doc page from the old DocFX workflow (Angular: `igniteui-docfx`, Xplat: `igniteui-xplat-docs`) to the new Astro-based MDX workflow (`docs-template`).
-
----
-
-## Table of Contents
-
-1. [Repo & file locations](#1-repo--file-locations)
-2. [Dev server & build commands](#2-dev-server--build-commands)
-3. [File format: `.md` → `.mdx`](#3-file-format-md--mdx)
-4. [Frontmatter](#4-frontmatter)
-5. [Links](#5-links)
-6. [Samples (`<code-view>` / `` `sample=… `` → `<Sample>`)](#6-samples)
-7. [Images](#7-images)
-8. [Callout boxes (`>[!NOTE]` → `<DocsAside>`)](#8-callout-boxes)
-9. [Inline styles / `<p class="highlight">` → `<div>`](#9-inline-styles)
-10. [API links (`ApiLink`)](#10-api-links)
-11. [Platform-conditional content — Xplat only (`<!-- Platform -->` → `<PlatformBlock>`)](#11-platform-conditional-content--xplat-only)
-12. [Table of contents (`toc.yml` → `toc.json`)](#12-table-of-contents)
-13. [Environment variables (`{environment:…}`)](#13-environment-variables)
-14. [`docConfig.json` / `docComponents.json` — still used](#14-docconfigjson--doccomponentsjson--still-used)
-15. [`global.json` — unchanged](#15-globaljson--unchanged)
-16. [Image filename casing](#16-image-filename-casing)
-17. [Grid template files](#17-grid-template-files)
-18. [Adding a new page — checklist](#18-adding-a-new-page--checklist)
-
----
-
-## 1. Repo & file locations
-
-| | Old (DocFX) | New (MDX) |
-|---|---|---|
-| Angular content | `igniteui-docfx/en/components/` | `docs-template/docs/angular/src/content/en/components/` |
-| Angular JP content | `igniteui-docfx/jp/components/` | `docs-template/docs/angular/src/content/jp/components/` |
-| Angular images | `igniteui-docfx/en/images/` | `docs-template/docs/angular/src/content/en/images/` |
-| Xplat content | `igniteui-xplat-docs/doc/en/components/` | `docs-template/docs/xplat/src/content/en/components/` |
-| Xplat images | `igniteui-xplat-docs/doc/en/images/` | `docs-template/docs/xplat/src/assets/images/` (alias `@xplat-images`) |
-
-The overall directory structure (folder names, sub-folder nesting) is otherwise identical between old and new.
-
----
-
-## 2. Dev server & build commands
-
-### Angular
-
-```bash
-# old (DocFX)
-NODE_ENV=development npm start -- --lang en
-
-# new (Astro)
-npm run dev:en          # development server, English
-npm run dev:jp          # development server, Japanese
-npm run build:en        # build, English
-npm run build-staging:en
-npm run build-staging:jp
-```
-
-### Xplat
-
-```bash
-# old (DocFX/Yarn)
-yarn run build-docfx-react     # generate React output
-yarn run build-docfx-blazor
-
-# new (Astro)
-cd docs-template
-npm run build:staging:react:en
-npm run build:staging:wc:en
-npm run build:staging:blazor:en
-```
-
-The `NODE_ENV` variable (`development` / `staging` / `production`) and `DOCS_LANG` variable (`en` / `jp` / `kr`) are still used to pick the right URLs from `environment.json`.
-
----
-
-## 3. File format: `.md` → `.mdx`
-
-Rename every file from `.md` to `.mdx`. The content stays mostly the same — MDX is a superset of Markdown — but JSX component tags are now allowed.
-
----
-
-## 4. Frontmatter
-
-| Field | Old | New |
-|---|---|---|
-| Description | `_description:` | `description:` |
-| Keywords | `_keywords:` | `keywords:` |
-| License | `_license:` | `license:` |
-| LLM summary | none or existing value | `llms.description:` |
-| Language | `_language: ja` | `_language: ja` *(unchanged)* |
-| Schema / `last_updated` | kept as-is | kept as-is |
-| `mentionedTypes` | kept as-is | kept as-is |
-
-Remove the leading underscore from `_description`, `_keywords`, and `_license`. All other frontmatter fields are unchanged.
-
-**Old:**
-```yaml
----
-title: Angular Card Component
-_description: With Angular Card…
-_keywords: Angular Card component, …
-_license: MIT
----
-```
-
-**New:**
-```yaml
----
-title: Angular Card Component
-description: With Angular Card…
-keywords: Angular Card component, …
-license: MIT
-llms:
-  description: Configure the Angular Card layout, media, actions, styling, and accessibility for application content.
----
-```
-
-`llms.description` is required for every English and Japanese topic. It supplies the page summary in `llms.txt`, so write a specific one-sentence account of the component or feature and the tasks covered. Do not copy marketing calls to action from `description`. For shared xplat topics, build tokens such as `{Platform}` and `{ComponentTitle}` are allowed.
-
-Validate migrated metadata with the read-only check:
-
-```bash
-npm run check:llms-metadata
-```
-
----
-
-## 5. Links
-
-Internal cross-page links no longer use `.md` file extensions or relative paths. Use root-relative paths without extension.
-
-| | Old | New |
-|---|---|---|
-| Internal link | `[Getting Started](general/getting-started.md)` | `[Getting Started](/general/getting-started)` |
-| Anchor link | `[section](page.md#anchor)` | `[section](/page#anchor)` |
-| External links | unchanged | unchanged |
-
----
-
-## 6. Samples
-
-### Angular
-
-**Old (`<code-view>`):**
-```html
-<code-view style="height: 500px"
-           data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/layouts/card-sample-0/"
-           alt="Angular Card Example">
-</code-view>
-```
-
-**New (`<Sample>`):**
-```mdx
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-<Sample src="/layouts/card-sample-0" height={500} alt="Angular Card Example" />
-```
-
-- `data-demos-base-url` is gone; the correct base URL is injected automatically from `environment.json` based on `NODE_ENV`.
-- `height` is a JSX number prop, not a CSS string.
-- The closing `/` on the path is optional and usually omitted.
-
-### Xplat
-
-**Old (backtick macro):**
-```
-`sample="/layouts/card/overview", height="640", alt="{Platform} Card Example"`
-```
-
-**New (`<Sample>`):**
-```mdx
-<Sample src="/layouts/card/overview" height={640} alt="{Platform} Card Example" />
-```
-
-The `{Platform}` token is still resolved at build time; no change needed there.
-
----
-
-## 7. Images
-
-### Angular
-
-**Old (`<img>` with `data-src`):**
-```html
-<img class="b-lazy responsive-img"
-     src="../../images/general/landing-grid-page.png"
-     data-src="../../images/general/landing-grid-page.png"
-     alt="Angular Data Grid">
-```
-
-**New (Astro `<Image>`):**
-```mdx
-import { Image } from 'astro:assets';
-import landingGridPage from '../../images/general/landing-grid-page.png';
-
-<Image src={landingGridPage} alt="Angular Data Grid" />
-```
-
-- Import the image as an ES module at the top of the file (after frontmatter).
-- Use `<Image>` from `astro:assets` for static images that benefit from optimisation.
-- For purely decorative inline SVGs you can still use a plain `<img src={…} />` with the imported variable.
-
-### Xplat
-
-Images live under `docs/xplat/src/assets/images/` and are imported via the `@xplat-images` path alias:
-
-```mdx
-import { Image } from 'astro:assets';
-import nodejs from '@xplat-images/general/nodejs.svg';
-
-<Image src={nodejs} alt="NodeJS" />
-```
-
-### Casing rule (CI fix)
-
-Image filenames **must use lowercase extensions** (`.jpg`, `.png`, `.svg`). Linux CI is case-sensitive; `.JPG` or `.PNG` will pass locally on Windows but break the build on GitHub Actions. Use `git mv` to rename files so Git tracks the change:
-
-```bash
-git mv image.JPG image.jpg
-```
-
----
-
-## 8. Callout boxes
-
-**Old (DocFX alert syntax):**
-```markdown
->[!NOTE]
-> Text of the note.
-
->[!WARNING]
-> Text of the warning.
-```
-
-**New (`<DocsAside>`):**
-```mdx
-import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
-
-<DocsAside type="note">
-Text of the note.
-</DocsAside>
-
-<DocsAside type="caution">
-Text of the warning.
-</DocsAside>
-```
-
-Supported `type` values: `note`, `tip`, `caution`, `danger`.
-
----
-
-## 9. Inline styles
-
-### `<p class="highlight">` paragraph
-
-`<p class="highlight">` works fine in MDX when the content is inline text with no blank lines inside the tag. Use a `<div>` when the content spans multiple paragraphs (i.e., has blank lines between sentences), because a blank line inside a JSX `<p>` causes an MDX parse error.
-
-```mdx
-<!-- works – single inline paragraph -->
-<p class="highlight">Short description text.</p>
-
-<!-- use div when content has blank lines or multiple block elements -->
-<div class="highlight">
-
-First paragraph.
-
-Second paragraph.
-
-</div>
-```
-
-### `<style>` blocks
-
-In MDX, pass the CSS as a template literal child:
-
-**Old (plain HTML):**
-```html
-<style>
-.my-class { color: red; }
-</style>
-```
-
-**New (MDX template literal):**
-```mdx
-<style>{`
-.my-class { color: red; }
-`}</style>
-```
-
-An alternative that also works (used in some older angular pages) is:
-```mdx
-<style dangerouslySetInnerHTML={{__html: `.my-class { color: red; }`}} />
-```
-
-Prefer the template literal form — it is simpler and matches the pattern used across most pages in this repo.
-
----
-
-## 10. API links
-
-Use **`ApiLink`** when documentation text mentions a public API symbol and should link to the generated API reference. This includes component classes, events, enums, interfaces, methods, and properties.
-
-### `ApiLink` — inline link to a single API symbol
-
-```mdx
-import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
-
-<!-- Simple type link -->
-<ApiLink type="IgxCardComponent" />
-
-<!-- Specify the package explicitly when it cannot be inferred -->
-<ApiLink type="IgxGridComponent" pkg="grids" />
-
-<!-- Link to a member (method / property) -->
-<ApiLink type="IgxGridComponent" member="filter" />
-
-<!-- Custom display label -->
-<ApiLink type="IgxGridComponent" label="Data Grid" />
-```
-
-`ApiLink` resolves through the generated API symbol registry. By default, it tries platform naming conventions first. For example, Angular `<ApiLink type="Calendar" />` resolves as `IgxCalendarComponent` before considering the duplicate raw `Calendar` registry key.
-
-Use `pkg` only when the registry has multiple valid symbols for the same requested API link and the intended package must be explicit:
-
-```mdx
-<!-- Choose the main product package instead of a Lite/core duplicate -->
-<ApiLink pkg="core" type="Calendar" />
-
-<!-- Choose the standalone inputs package -->
-<ApiLink pkg="inputs" type="CheckboxChangeEventArgs" />
-
-<!-- Choose the igniteui-*-core API package -->
-<ApiLink pkg="geo-core" type="NumberFormatSpecifier" />
-```
-
-Use `kind` when the same symbol name exists as different API kinds:
-
-```mdx
-<ApiLink kind="enum" type="TransactionType" />
-```
-
-If the correct package differs by platform, keep the link platform-specific:
-
-```mdx
-<PlatformBlock for="React">
-<ApiLink pkg="inputs" type="CheckboxChangeEventArgs" />
-</PlatformBlock>
-
-<PlatformBlock for="Blazor">
-<ApiLink pkg="core" type="CheckboxChangeEventArgs" />
-</PlatformBlock>
-```
-
-Run `npm run check-mdx-links` or a platform-specific variant after editing API links. The checker prints an **Ambiguous ApiLinks** section, writes an `api-link-ambiguity-report*.md` file, and fails when a referenced `ApiLink` can resolve to more than one registry symbol. The report also lists all duplicate registry keys, even when no current docs reference them.
-
-The component replaces the old pattern of writing the raw API URL:
-```markdown
-<!-- Old DocFX pattern -->
-[`IgxCardComponent`]({environment:angularApiUrl}/classes/igxcardcomponent.html)
-```
-
----
-
-## 11. Platform-conditional content — Xplat only
-
-The old xplat repo used HTML comments as platform guards:
-
-**Old:**
-```markdown
-<!-- React -->
-Content only for React.
-<!-- end: React -->
-
-<!-- WebComponents, Blazor -->
-Content for WC and Blazor.
-<!-- end: WebComponents, Blazor -->
-```
-
-**New (`<PlatformBlock>`):**
-```mdx
-import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
-
-<PlatformBlock for="React">
-
-Content only for React.
-
-</PlatformBlock>
-
-<PlatformBlock for="WebComponents, Blazor">
-
-Content for WC and Blazor.
-
-</PlatformBlock>
-```
-
-Valid platform names: `Angular`, `React`, `WebComponents`, `Blazor`.
-
-- Always leave a blank line after the opening tag and before the closing tag.
-- Do not self-close `<PlatformBlock />` — it must have children.
-- Fenced code blocks inside `<PlatformBlock>` are automatically filtered by platform during generation, so you can still stack multiple code blocks one after another for different platforms inside a single block.
-
----
-
-## 12. Table of contents
-
-| | Old | New |
-|---|---|---|
-| Angular format | `toc.yml` (YAML) | `toc.json` (JSON) |
-| Xplat format | `docfx/en/components/toc.json` | `docs/xplat/src/content/en/components/toc.json` |
-| File extension in href | `.md` | `.mdx` |
-| Platform exclusion (xplat) | `"exclude": ["Angular", "Blazor"]` | same |
-| Status values | `"status": "NEW"` / `"NEW_REACT"` | `"status": "new"` / `"updated"` |
-| Default page (angular) | first item implicitly | `"default": true` on the entry |
-
-**Old Angular toc.yml:**
-```yaml
-- name: Getting started
-  href: general/getting-started.md
-  new: false
-```
-
-**New Angular toc.json:**
-```json
-{
-  "name": "Getting started",
-  "href": "general/getting-started.mdx",
-  "new": false,
-  "default": true
-}
-```
-
-**Xplat TOC entry with platform exclusion:**
-```json
-{
-  "exclude": ["Angular", "React", "WebComponents"],
-  "name": "Installing Ignite UI for Blazor",
-  "href": "general-installing-blazor.mdx",
-  "status": "new"
-}
-```
-
----
-
-## 13. Environment variables
-
-`environment.json` is still read and its structure is **unchanged**. The token `{environment:demosBaseUrl}` and similar are **no longer written literally in MDX files** — they are only used internally by the framework and in `environment.json` itself.
-
-The `angularApiUrl` key was removed from the new `environment.json` (it is no longer needed since API URLs are resolved by `ApiLink` automatically).
-
----
-
-## 14. `docConfig.json` / `docComponents.json` — still used
-
-Both files are carried over without change to `docs-template/docs/xplat/`. They continue to define:
-
-- Platform-specific token replacements (`{ProductName}`, `{Platform}`, `{IgPrefix}`, `{PackageGrids}`, etc.)
-- Shared component mappings (`Grid`, `TreeGrid`, `PivotGrid`, `HierarchicalGrid`) that drive the `_shared/` → per-grid file generation
-
-Nothing in these files needs to change when migrating content.
-
----
-
-## 15. `global.json` — unchanged
-
-`global.json` is copied as-is. All nav bar settings, locale flags, and redirect configuration remain identical.
-
----
-
-## 16. Image filename casing
-
-All image file extensions must be lowercase. This was not enforced by the DocFX build (which ran on Windows), but the Astro build on Linux CI is case-sensitive and will fail with a Vite "Could not resolve" error.
-
-| Bad (causes CI failure) | Good |
-|---|---|
-| `screenshot.JPG` | `screenshot.jpg` |
-| `diagram.PNG` | `diagram.png` |
-| `logo.SVG` | `logo.svg` |
-
-Rename using `git mv` so the rename is tracked:
-
-```bash
-git mv docs/angular/src/content/jp/images/general/generate-token.JPG \
-       docs/angular/src/content/jp/images/general/generate-token.jpg
-```
-
----
-
-## 17. Grid template files
-
-Both Angular and Xplat have **shared template files** that generate multiple per-grid pages (Grid, TreeGrid, HierarchicalGrid, PivotGrid). The authoring model carried over to MDX but the template syntax changed.
-
-### Angular — `grids_templates/`
-
-Files live in `docs/angular/src/content/<lang>/grids_templates/`. Each file is a shared template that the build expands into per-grid pages under `components/grid/`, `components/treegrid/`, etc.
-
-**Do not edit the generated per-grid files directly** — always edit the template in `grids_templates/`.
-
-| Old (DocFX `@@` syntax) | New (`ComponentBlock` / token) |
-|---|---|
-| `@@igComponent` | `{ComponentTitle}` |
-| `@@if (igxName === 'IgxGrid') { ... }` | `<ComponentBlock for="Grid">...</ComponentBlock>` |
-| `@@if (igxName !== 'IgxGrid') { ... }` | `<ComponentBlock for="TreeGrid, HierarchicalGrid, PivotGrid">...</ComponentBlock>` |
-| `_canonicalLink: grid/advanced-filtering` | `canonicalLink: grid/advanced-filtering` (no underscore) |
-
-**Old (`@@` syntax):**
-```markdown
-@@if (igxName === 'IgxGrid') {
----
-title: Angular Grid Advanced Filtering
----
-}
-@@if (igxName !== 'IgxGrid') {
----
-title: Angular Grid Advanced Filtering
-_canonicalLink: grid/advanced-filtering
----
-}
-
-# Angular @@igComponent Advanced Filtering
-
-@@if (igxName === 'IgxGrid') {
-<code-view iframe-src="{environment:demosBaseUrl}/grid/grid-advanced-filtering" height="530"></code-view>
-}
-```
-
-**New (`ComponentBlock`):**
-```mdx
-<ComponentBlock for="Grid">
-
----
-title: Angular Grid Advanced Filtering
----
-
-</ComponentBlock>
-<ComponentBlock for="TreeGrid, HierarchicalGrid, PivotGrid">
-
----
-title: Angular Grid Advanced Filtering
-canonicalLink: grid/advanced-filtering
----
-
-</ComponentBlock>
-
-import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
-
-# Angular {ComponentTitle} Advanced Filtering
-
-<ComponentBlock for="Grid">
-<Sample src="/grid/grid-advanced-filtering" height={530} alt="Angular Grid Advanced Filtering Example" />
-</ComponentBlock>
-```
-
-Valid `for` values: `Grid`, `TreeGrid`, `HierarchicalGrid`, `PivotGrid`.
-
-### Xplat — `grids/_shared/`
-
-Files live in `docs/xplat/src/content/<lang>/components/grids/_shared/`. The structure and tokens are **unchanged** from the old repo — the `sharedComponents` frontmatter array still drives generation:
-
-```yaml
----
-sharedComponents: ["Grid", "TreeGrid", "HierarchicalGrid"]
----
-```
-
-Tokens like `{ComponentTitle}`, `{ComponentName}`, `{ComponentSample}`, `{ComponentApiMembers}` still work as before. The only syntax changes are the same as for any other MDX file: frontmatter key underscore removal, `<Sample>` instead of backtick macro, `<PlatformBlock>` instead of comment guards.
-
----
-
-## 18. Adding a new page — checklist
-
-Use this checklist when creating a new MDX page in either `angular` or `xplat`.
-
-- [ ] **File**: create `<name>.mdx` (not `.md`) in the correct `src/content/<lang>/components/` subfolder
-- [ ] **Frontmatter**: use `description:`, `keywords:`, `license:` (no leading underscore)
-- [ ] **LLM metadata**: add a specific `llms.description` to every English and Japanese frontmatter block
-- [ ] **Imports**: add all component imports immediately after the frontmatter closing `---`
-- [ ] **Sample**: use `<Sample src="…" height={…} alt="…" />` — no `<code-view>` or backtick macro
-- [ ] **Images**: import with ES `import`, use `<Image>` from `astro:assets`; filenames must be lowercase-extension
-- [ ] **Callouts**: use `<DocsAside type="note|tip|caution|danger">` — no `>[!NOTE]`
-- [ ] **API links**: use `<ApiLink type="…" />` inline for API symbols
-- [ ] **Platform blocks** (xplat only): use `<PlatformBlock for="…">` — no HTML comment guards
-- [ ] **Internal links**: root-relative, no `.mdx` extension, no `.md` extension
-- [ ] **TOC**: add an entry to `toc.json` with `.mdx` extension in `href`
-- [ ] **`mentionedTypes`** (xplat): list at least one component class name in frontmatter
-- [ ] **Validation**: run `npm run check:llms-metadata`
diff --git a/package.json b/package.json
index eceea8fe33..b9310ccea4 100644
--- a/package.json
+++ b/package.json
@@ -139,7 +139,12 @@
     "check-mdx-links:broken:angular": "node --experimental-strip-types scripts/check-mdx-links.mjs --platform=angular --resolve-only --list-broken --broken-limit=100 --broken-md=reports/mdx-broken-links-angular.md --list-ambiguities --ambiguity-md=reports/api-link-ambiguity-report-angular.md --fail-on-ambiguity",
     "check-mdx-links:broken:react": "node --experimental-strip-types scripts/check-mdx-links.mjs --platform=react --resolve-only --list-broken --broken-limit=100 --broken-md=reports/mdx-broken-links-react.md --list-ambiguities --ambiguity-md=reports/api-link-ambiguity-report-react.md --fail-on-ambiguity",
     "check-mdx-links:broken:wc": "node --experimental-strip-types scripts/check-mdx-links.mjs --platform=wc --resolve-only --list-broken --broken-limit=100 --broken-md=reports/mdx-broken-links-wc.md --list-ambiguities --ambiguity-md=reports/api-link-ambiguity-report-wc.md --fail-on-ambiguity",
-    "check-mdx-links:broken:blazor": "node --experimental-strip-types scripts/check-mdx-links.mjs --platform=blazor --resolve-only --list-broken --broken-limit=100 --broken-md=reports/mdx-broken-links-blazor.md --list-ambiguities --ambiguity-md=reports/api-link-ambiguity-report-blazor.md --fail-on-ambiguity"
+    "check-mdx-links:broken:blazor": "node --experimental-strip-types scripts/check-mdx-links.mjs --platform=blazor --resolve-only --list-broken --broken-limit=100 --broken-md=reports/mdx-broken-links-blazor.md --list-ambiguities --ambiguity-md=reports/api-link-ambiguity-report-blazor.md --fail-on-ambiguity",
+    "check-relative-links": "node scripts/check-relative-links.mjs",
+    "check-relative-links:ci": "npm run sync:generated-from-xplat --prefix docs/angular && npm run sync:generated-from-xplat:jp --prefix docs/angular && npm run generate:en --prefix docs/angular && npm run generate:jp --prefix docs/angular && npm run generate:react --prefix docs/xplat && npm run generate:webcomponents --prefix docs/xplat && npm run generate:blazor --prefix docs/xplat && npm run generate:react:jp --prefix docs/xplat && npm run generate:webcomponents:jp --prefix docs/xplat && npm run generate:blazor:jp --prefix docs/xplat && node scripts/check-relative-links-ci.mjs",
+    "check-relative-links:report": "npm run generate:en --prefix docs/angular && npm run generate:jp --prefix docs/angular && npm run generate:react --prefix docs/xplat && npm run generate:webcomponents --prefix docs/xplat && npm run generate:blazor --prefix docs/xplat && npm run generate:react:jp --prefix docs/xplat && npm run generate:webcomponents:jp --prefix docs/xplat && npm run generate:blazor:jp --prefix docs/xplat && node scripts/check-relative-links-ci.mjs --md=reports/relative-links-report.md",
+    "check-html-links": "node scripts/check-html-links.mjs",
+    "check-html-links:report": "node scripts/check-html-links.mjs --md=reports/html-links-report.md"
   },
   "dependencies": {
     "astro-seo-schema": "^6.0.0",
diff --git a/reports/html-links-report.md b/reports/html-links-report.md
new file mode 100644
index 0000000000..5c84048090
--- /dev/null
+++ b/reports/html-links-report.md
@@ -0,0 +1,12 @@
+# HTML Link Crawl Report
+
+_Generated: 2026-07-02 06:16:35 UTC_
+
+## Summary
+
+| | |
+|---|---|
+| HTML files scanned | 2732 |
+| Internal links checked | 857713 |
+| ✅ OK | 857713 |
+| ❌ Broken (unique targets) | **0** |
diff --git a/reports/relative-links-report-angular.md b/reports/relative-links-report-angular.md
new file mode 100644
index 0000000000..f6686c67e3
--- /dev/null
+++ b/reports/relative-links-report-angular.md
@@ -0,0 +1,12 @@
+# Relative Link Check Report
+
+_Generated: 2026-06-25 08:24:24 UTC_
+
+## Summary
+
+| | |
+|---|---|
+| Files scanned | 824 |
+| Relative links | 5309 |
+| ✅ OK | 5309 |
+| ❌ **Broken** | **0** |
diff --git a/reports/relative-links-report-xplat.md b/reports/relative-links-report-xplat.md
new file mode 100644
index 0000000000..90802fe872
--- /dev/null
+++ b/reports/relative-links-report-xplat.md
@@ -0,0 +1,12 @@
+# Relative Link Check Report
+
+_Generated: 2026-06-25 08:43:52 UTC_
+
+## Summary
+
+| | |
+|---|---|
+| Files scanned | 2349 |
+| Relative links | 9738 |
+| ✅ OK | 9738 |
+| ❌ **Broken** | **0** |
diff --git a/reports/relative-links-report.md b/reports/relative-links-report.md
new file mode 100644
index 0000000000..04adb083b1
--- /dev/null
+++ b/reports/relative-links-report.md
@@ -0,0 +1,12 @@
+# Relative Link Check Report
+
+_Generated: 2026-07-13 14:19:46 UTC_
+
+## Summary
+
+| | |
+|---|---|
+| Files scanned | 2384 |
+| Relative links | 15094 |
+| ✅ OK | 15094 |
+| ❌ **Broken** | **0** |
diff --git a/scripts/check-html-links.mjs b/scripts/check-html-links.mjs
new file mode 100644
index 0000000000..056aeefd3f
--- /dev/null
+++ b/scripts/check-html-links.mjs
@@ -0,0 +1,224 @@
+#!/usr/bin/env node
+/**
+ * HTML link crawler for built dist/ output.
+ *
+ * Scans all .html files under dist/, extracts internal href links that
+ * point to product doc pages, and checks whether the target page exists
+ * as an .html file in the same dist tree.
+ *
+ * Usage:
+ *   node scripts/check-html-links.mjs
+ *   node scripts/check-html-links.mjs --dist=dist/angular
+ *   node scripts/check-html-links.mjs --md=reports/html-links-report.md
+ *   node scripts/check-html-links.mjs --summary
+ */
+import { existsSync, readdirSync, readFileSync, writeFileSync } from 'fs';
+import { join, resolve } from 'path';
+
+// CLI arg ─────────────────────────────────────────────────────────────────
+const args = Object.fromEntries(
+    process.argv.slice(2)
+        .filter(a => a.startsWith('--'))
+        .map(a => { const [k, v] = a.slice(2).split('='); return [k, v ?? true]; })
+);
+
+const DIST_ROOT  = resolve(args.dist ?? 'dist');
+const MD_OUTPUT  = args.md     ? String(args.md)  : null;
+const SUMMARY    = args.summary === true;
+const DIVIDER    = '═'.repeat(72);
+
+// URL prefix → dist subfolders map
+// Each platform uses one URL prefix for both EN and JP builds.
+// We check the linked slug against all dist folders for that prefix.
+const PREFIX_MAP = [
+    { prefix: '/products/ignite-ui-angular/angular/components',               dirs: ['dist/angular', 'dist/angular-jp'] },
+    { prefix: '/products/ignite-ui-react/react/components',                   dirs: ['dist/react',   'dist/react-jp']   },
+    { prefix: '/products/ignite-ui-web-components/web-components/components', dirs: ['dist/wc',      'dist/wc-jp']      },
+    { prefix: '/products/ignite-ui-blazor/blazor/components',                 dirs: ['dist/blazor',  'dist/blazor-jp']  },
+];
+
+// Build a Set of all html pages in each dist subfolder (relative slug → true)
+function buildPageIndex(distDir) {
+    const index = new Set();
+    if (!existsSync(distDir)) return index;
+    function walk(dir) {
+        for (const entry of readdirSync(dir, { withFileTypes: true })) {
+            const full = join(dir, entry.name);
+            if (entry.isDirectory()) { walk(full); continue; }
+            if (entry.name.endsWith('.html')) {
+                // Store path relative to distDir, without extension, with leading /
+                // Normalize to lowercase so lookups are case-insensitive (avoids
+                // false positives on Windows where readdirSync returns the on-disk
+                // case which may differ from the case used in HTML hrefs).
+                const rel = full.slice(distDir.length).replace(/\\/g, '/').replace(/\.html$/, '').toLowerCase();
+                index.add(rel);
+            }
+        }
+    }
+    walk(distDir);
+    return index;
+}
+
+// Pre build page indexes for all dist subfolders
+const pageIndexes = new Map();
+for (const { dirs } of PREFIX_MAP) {
+    for (const dir of dirs) {
+        if (!pageIndexes.has(dir)) {
+            pageIndexes.set(dir, buildPageIndex(dir));
+        }
+    }
+}
+
+// HTML walking
+function walkHtml(dir, results = []) {
+    if (!existsSync(dir)) return results;
+    for (const entry of readdirSync(dir, { withFileTypes: true })) {
+        const full = join(dir, entry.name);
+        if (entry.isDirectory()) { walkHtml(full, results); continue; }
+        if (entry.name.endsWith('.html')) results.push(full);
+    }
+    return results;
+}
+
+// Extract internal doc hrefs from HTML content
+const HREF_RE = /href="([^"]+)"/g;
+
+function extractInternalLinks(html) {
+    const links = new Set();
+    let m;
+    while ((m = HREF_RE.exec(html)) !== null) {
+        const href = m[1].split('#')[0].trim(); // strip anchors
+        if (!href) continue;
+        if (!href.startsWith('/products/')) continue;     // only doc pages
+        if (href.includes('://')) continue;               // skip absolute URLs
+        // Skip assets: _astro/, favicon, images, css, js, fonts, etc.
+        if (/_astro\//.test(href)) continue;
+        if (/\.(ico|png|jpg|jpeg|gif|svg|webp|css|js|woff2?|ttf|eot|map)$/i.test(href)) continue;
+        // Skip API reference class pages (served from external API docs, not generated in this build)
+        if (/\/classes\/[^/]+\.html$/.test(href)) continue;
+        links.add(href);
+    }
+    return links;
+}
+
+function resolveLink(href) {
+    for (const { prefix, dirs } of PREFIX_MAP) {
+        if (href.startsWith(prefix)) {
+            // Normalize to lowercase to match the lowercased page index.
+            // Also strip a trailing .html extension from legacy links.
+            let slug = href.slice(prefix.length) || '/index';
+            slug = slug.replace(/\.html$/i, '').toLowerCase();
+
+            // Build a list of candidate slugs
+            const slugNoIndex         = slug.replace(/\/index$/, '');
+            const slugNoTrailingSlash = slug.replace(/\/$/, '');
+            const slugBoth            = slugNoTrailingSlash.replace(/\/index$/, '');
+            const candidates = [...new Set([slug, slugNoIndex, slugNoTrailingSlash, slugBoth, slug + '/index'])];
+
+            // Link is valid if it exists in ANY of the dirs for this prefix (en or jp)
+            for (const dir of dirs) {
+                const index = pageIndexes.get(dir);
+                if (index && candidates.some(c => index.has(c))) {
+                    return { found: true, dirs };
+                }
+            }
+            return { found: false, dirs, slug };
+        }
+    }
+    return null; // doesn't match any known prefix
+}
+
+// Main scan
+console.log(`\n${DIVIDER}`);
+console.log('  HTML LINK CRAWLER');
+console.log(DIVIDER);
+console.log(`  Dist root: ${DIST_ROOT}\n`);
+
+const allHtmlFiles = walkHtml(DIST_ROOT);
+const brokenLinks  = []; // { file, href, dir }
+let totalLinks     = 0;
+let skippedLinks   = 0;
+
+for (const file of allHtmlFiles) {
+    const html = readFileSync(file, 'utf8');
+    const links = extractInternalLinks(html);
+
+    for (const href of links) {
+        totalLinks++;
+        const result = resolveLink(href);
+        if (result === null) { skippedLinks++; continue; } // unknown prefix
+        if (!result.found) {
+            brokenLinks.push({ file: file.replace(/\\/g, '/'), href, dirs: result.dirs });
+        }
+    }
+}
+
+// Group all occurrences by broken href: Map<href, { dirs, referrers: Set<file> }>
+const brokenByHref = new Map();
+for (const { file, href, dirs } of brokenLinks) {
+    if (!brokenByHref.has(href)) brokenByHref.set(href, { dirs, referrers: new Set() });
+    brokenByHref.get(href).referrers.add(file);
+}
+const uniqueBroken = [...brokenByHref.entries()]; // [ [href, { dirs, referrers }], ... ]
+
+// Output
+if (SUMMARY) {
+    const status = brokenLinks.length === 0 ? '✅' : '❌';
+    console.log(`  ${status}  HTML files: ${allHtmlFiles.length}  |  Links checked: ${totalLinks}  |  Broken (unique): ${uniqueBroken.length}`);
+} else {
+    if (uniqueBroken.length === 0) {
+        console.log('  ✅  No broken internal links found.\n');
+    } else {
+        for (const [href, { referrers }] of uniqueBroken) {
+            console.log(`  ✗  ${href}`);
+            for (const ref of referrers) {
+                console.log(`       referenced from: ${ref}`);
+            }
+            console.log('');
+        }
+    }
+
+    console.log(`\n${DIVIDER}`);
+    console.log(`  HTML files scanned  : ${allHtmlFiles.length}`);
+    console.log(`  Internal links      : ${totalLinks}`);
+    console.log(`  Skipped (no prefix) : ${skippedLinks}`);
+    console.log(`  ✅ OK               : ${totalLinks - skippedLinks - brokenLinks.length}`);
+    console.log(`  ❌ Broken           : ${brokenLinks.length}  (${uniqueBroken.length} unique)`);
+    console.log(DIVIDER + '\n');
+}
+
+// Markdown report
+if (MD_OUTPUT) {
+    const ts = new Date().toISOString().replace('T', ' ').slice(0, 19) + ' UTC';
+    const lines = [
+        '# HTML Link Crawl Report', '',
+        `_Generated: ${ts}_`, '',
+        '## Summary', '',
+        '| | |', '|---|---|',
+        `| HTML files scanned | ${allHtmlFiles.length} |`,
+        `| Internal links checked | ${totalLinks - skippedLinks} |`,
+        `| ✅ OK | ${totalLinks - skippedLinks - brokenLinks.length} |`,
+        `| ❌ Broken (unique targets) | **${uniqueBroken.length}** |`, '',
+    ];
+
+    if (uniqueBroken.length > 0) {
+        lines.push('## Broken Links', '');
+        for (const [href, { dirs, referrers }] of uniqueBroken) {
+            lines.push(`### \`${href}\``);
+            lines.push('');
+            lines.push(`_Missing in: ${dirs.join(', ')}_`);
+            lines.push('');
+            lines.push('Referenced from:');
+            lines.push('');
+            for (const ref of referrers) {
+                lines.push(`- \`${ref}\``);
+            }
+            lines.push('');
+        }
+    }
+
+    writeFileSync(MD_OUTPUT, lines.join('\n'));
+    console.log(`  Markdown report written to: ${MD_OUTPUT}\n`);
+}
+
+process.exit(brokenLinks.length > 0 ? 1 : 0);
diff --git a/scripts/check-mdx-quality.mjs b/scripts/check-mdx-quality.mjs
index 25c2f92ac2..f71556fb13 100644
--- a/scripts/check-mdx-quality.mjs
+++ b/scripts/check-mdx-quality.mjs
@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 /**
- * Validates .mdx files for common issues that can occur during docfx-to-MDX migration.
- * Run this after any merge/import from igniteui-docfx to catch regressions.
+ * Validates .mdx files for common quality issues.
+ * Run this after importing or bulk-editing content to catch regressions.
  *
  * Checks:
  *   1. Raw {environment:angularApiUrl} links (should be <ApiLink> components)
- *   2. Raw .md links (should be extensionless relative paths)
+ *   2. Raw .md links (should use .mdx extension)
  *   3. <code-view> elements (should be <Sample> components)
  *   4. HTML comments outside code fences (should be MDX style) 
  *   5. Unclosed <br> tags (should be <br /> in MDX)
@@ -19,7 +19,7 @@
  *   node scripts/check-mdx-quality.mjs                     (check all modified .mdx vs master)
  *   node scripts/check-mdx-quality.mjs --base=main         (compare against different branch)
  *   node scripts/check-mdx-quality.mjs --dir=docs/angular  (check specific directory)
- *   node scripts/check-mdx-quality.mjs --fix               (auto-fix .md links)
+ *   node scripts/check-mdx-quality.mjs --fix               (auto-convert .md links to .mdx)
  *
  * Exit code: 0 = clean, 1 = issues found
  */
@@ -108,13 +108,13 @@ for (const file of files) {
       }
     }
 
-    // Check 2: Raw .md links (should be extensionless)
+    // Check 2: Raw .md links (should use .mdx extension)
     const mdLinks = line.match(/\[[^\]]+\]\([^)]*\.md[)#]/g);
     if (mdLinks) {
       for (const m of mdLinks) {
         // Skip external links (http/https)
         if (m.includes('http://') || m.includes('https://')) continue;
-        fileIssues.push({ line: lineNum, type: 'md-link', msg: `Raw .md link (should be extensionless): ${m.substring(0, 80)}` });
+        fileIssues.push({ line: lineNum, type: 'md-link', msg: `Raw .md link (should be .mdx): ${m.substring(0, 80)}` });
       }
     }
 
@@ -207,17 +207,17 @@ for (const [type, count] of Object.entries(typeCounts).sort((a, b) => b[1] - a[1
 // Auto-fix mode
 if (FIX) {
   console.log(`\n${'─'.repeat(60)}`);
-  console.log('Auto-fixing .md links...\n');
+  console.log('Auto-converting .md links to .mdx...\n');
   let fixed = 0;
   for (const { file, issues: fileIssues } of issues) {
     const mdLinkIssues = fileIssues.filter(i => i.type === 'md-link');
     if (mdLinkIssues.length === 0) continue;
 
     let content = readFileSync(file, 'utf8');
-    // Replace .md) with ) and .md#  with #
+    // Replace .md) with .mdx) and .md# with .mdx#
     content = content.replace(/(\[[^\]]+\]\([^)]*?)\.md([)#])/g, (match, before, after) => {
       if (before.includes('http://') || before.includes('https://')) return match;
-      return `${before}${after}`;
+      return `${before}.mdx${after}`;
     });
     writeFileSync(file, content);
     fixed++;
diff --git a/scripts/check-relative-links-ci.mjs b/scripts/check-relative-links-ci.mjs
new file mode 100644
index 0000000000..0d0a7d581e
--- /dev/null
+++ b/scripts/check-relative-links-ci.mjs
@@ -0,0 +1,90 @@
+#!/usr/bin/env node
+/**
+ * CI runner for check-relative-links.mjs
+ * Runs both --platform=xplat and --platform=angular unconditionally,
+ * collects results, prints summary, then exits 1 if either had broken links.
+ * Supports --md=<path> to write a combined markdown report.
+ */
+import { spawnSync } from 'child_process';
+import { readFileSync, existsSync, writeFileSync, unlinkSync } from 'fs';
+
+const DIVIDER = '═'.repeat(72);
+
+const mdArg = process.argv.find(a => a.startsWith('--md='));
+const mdPath = mdArg ? mdArg.slice(5) : null;
+
+function run(args) {
+    const result = spawnSync('node', ['scripts/check-relative-links.mjs', ...args], {
+        encoding: 'utf8',
+        shell: false,
+    });
+    return { output: (result.stdout ?? '') + (result.stderr ?? ''), code: result.status ?? 1 };
+}
+
+// Full detail pass (always run both)
+const xplat   = run(['--platform=xplat']);
+const angular = run(['--platform=angular']);
+
+// Print all output together
+process.stdout.write(xplat.output);
+process.stdout.write(angular.output);
+
+// Summary pass
+const xplatSummary   = run(['--platform=xplat',   '--summary']);
+const angularSummary = run(['--platform=angular', '--summary']);
+
+console.log('');
+console.log(DIVIDER);
+console.log('  SUMMARY');
+console.log(DIVIDER);
+process.stdout.write(xplatSummary.output);
+process.stdout.write(angularSummary.output);
+console.log('');
+
+// Combined markdown report: collect broken links from both platforms and write once
+if (mdPath) {
+    const tmpXplat   = `${mdPath}.xplat.tmp`;
+    const tmpAngular = `${mdPath}.angular.tmp`;
+    run(['--platform=xplat',   `--md=${tmpXplat}`]);
+    run(['--platform=angular', `--md=${tmpAngular}`]);
+
+    // Parse table rows from each report (lines starting with "| `docs/")
+    const rowRe = /^\| `[^`]+` \| \d+ \| `[^`]+` \| [^\n]+$/gm;
+    const xplatMd   = existsSync(tmpXplat)   ? readFileSync(tmpXplat,   'utf8') : '';
+    const angularMd = existsSync(tmpAngular) ? readFileSync(tmpAngular, 'utf8') : '';
+    const allRows   = [...(xplatMd.match(rowRe) ?? []), ...(angularMd.match(rowRe) ?? [])];
+
+    // Count totals from summary lines
+    const scanned = (xplatMd.match(/\| Files scanned \| (\d+)/) ?? [])[1] ?? '?';
+    const linksX  = parseInt((xplatMd.match(/\| Relative links \| (\d+)/) ?? [])[1] ?? '0');
+    const linksA  = parseInt((angularMd.match(/\| Relative links \| (\d+)/) ?? [])[1] ?? '0');
+    const totalLinks = linksX + linksA;
+
+    const ts = new Date().toISOString().replace('T', ' ').slice(0, 19) + ' UTC';
+    const lines = [
+        '# Relative Link Check Report', '',
+        `_Generated: ${ts}_`, '',
+        '## Summary', '',
+        '| | |', '|---|---|',
+        `| Files scanned | ${scanned} |`,
+        `| Relative links | ${totalLinks} |`,
+        `| ✅ OK | ${totalLinks - allRows.length} |`,
+        `| ❌ **Broken** | **${allRows.length}** |`, '',
+    ];
+
+    if (allRows.length > 0) {
+        lines.push('## Broken Links', '');
+        lines.push('| File | Line | href | Issue |');
+        lines.push('|---|---:|---|---|');
+        lines.push(...allRows, '');
+    }
+
+    writeFileSync(mdPath, lines.join('\n'));
+    console.log(`\n  Markdown report written to: ${mdPath}\n`);
+
+    if (existsSync(tmpXplat))   unlinkSync(tmpXplat);
+    if (existsSync(tmpAngular)) unlinkSync(tmpAngular);
+}
+
+process.exit(xplat.code + angular.code > 0 ? 1 : 0);
+
diff --git a/scripts/check-relative-links.mjs b/scripts/check-relative-links.mjs
new file mode 100644
index 0000000000..a2ca373826
--- /dev/null
+++ b/scripts/check-relative-links.mjs
@@ -0,0 +1,512 @@
+#!/usr/bin/env node
+/**
+ * Validates all relative Markdown links in MDX source files to ensure
+ * the target pages exist on disk. Catches broken cross-topic links such
+ * as typos in directory or file names (e.g. ./interativity/chat). https://github.com/IgniteUI/igniteui-documentation/pull/327
+ *
+ * Scans .mdx files and finds [text](./path) or [text](../path) links,
+ * resolves them relative to the source file's directory, then checks
+ * whether the target exists (trying .mdx, .md, and bare extensions).
+ * JSX-style href attributes with relative paths are also checked.
+ *
+ * When --platform=angular the script scans docs/angular/src/content.
+ * When --platform=react|wc|blazor  it scans docs/xplat/src/content.
+ * Omitting --platform scans both trees in one pass.
+ *
+ * Usage:
+ *   node scripts/check-relative-links.mjs
+ *   node scripts/check-relative-links.mjs --platform=angular
+ *   node scripts/check-relative-links.mjs --platform=react
+ *   node scripts/check-relative-links.mjs --platform=wc
+ *   node scripts/check-relative-links.mjs --platform=blazor
+ *   node scripts/check-relative-links.mjs --src=docs/xplat/src/content
+ *   node scripts/check-relative-links.mjs --md=reports/relative-links-report.md
+ *
+ * Exit code: 0 = all OK, 1 = broken links found.
+ */
+
+import { existsSync, readFileSync, readdirSync, writeFileSync } from 'node:fs';
+import { dirname, join, relative, resolve } from 'node:path'; // join used in walkMdx
+
+// CLI args
+const args = Object.fromEntries(
+    process.argv.slice(2)
+        .filter(a => a.startsWith('--'))
+        .map(a => {
+            const [k, ...rest] = a.slice(2).split('=');
+            return [k, rest.length ? rest.join('=') : true];
+        })
+);
+
+const PLATFORM  = args.platform ? String(args.platform) : null;
+const MD_OUTPUT = args.md       ? String(args.md)       : null;
+const SUMMARY   = args.summary  === true;
+
+const XPLAT_PLATFORMS = new Set(['react', 'wc', 'blazor']);
+
+function getSrcDirs() {
+    if (args.src) return [String(args.src)];
+    if (PLATFORM === 'angular') return ['docs/angular/src/content'];
+    if (PLATFORM === 'xplat' || (PLATFORM && XPLAT_PLATFORMS.has(PLATFORM))) {
+        // Scan source for _shared/ template links, plus the React/WC/Blazor
+        // generated output (after generate.mjs has rewritten _shared/ paths).
+        // Angular is intentionally excluded: generated/Angular/ is an
+        // intermediate artifact that gets synced into docs/angular/src/content/
+        // and validated there by --platform=angular.
+        // Run the generate scripts before this check so generated/ is up to date.
+        const dirs = ['docs/xplat/src/content'];
+        for (const p of ['React', 'WebComponents', 'Blazor']) {
+            const d = `docs/xplat/generated/${p}`;
+            if (existsSync(d)) dirs.push(d);
+        }
+        return dirs;
+    }
+    if (PLATFORM) {
+        console.error(`Unknown platform "${PLATFORM}". Use: angular, xplat, react, wc, blazor`);
+        process.exit(1);
+    }
+    return ['docs/angular/src/content', 'docs/xplat/src/content'];
+}
+
+// File walking
+
+/**
+ * Directories that are excluded from scanning by default.
+ *
+
+ *   grids_templates/ — angular source templates for generate-grids.mjs; links
+ *   resolve from the generated output, not the template source.
+ *
+ * _shared/ — xplat source templates expanded by xplat/scripts/generate.mjs
+ *   into grid/, tree-grid/ etc. under docs/xplat/generated/; links are
+ *   validated via the generated output, not the template source.
+ *
+ * kr/ — Korean locale content is not actively maintained to the same level
+ *   as en/jp and is excluded from automated link validation.
+ */
+const EXCLUDED_DIR_NAMES = new Set(['grids_templates', '_shared', 'kr']);
+
+function walkMdx(dir) {
+    const results = [];
+    let entries;
+    try {
+        entries = readdirSync(dir, { withFileTypes: true });
+    } catch {
+        if (dir.endsWith('.mdx')) results.push(dir);
+        return results;
+    }
+    for (const entry of entries) {
+        if (entry.isDirectory()) {
+            if (EXCLUDED_DIR_NAMES.has(entry.name)) continue;
+            results.push(...walkMdx(join(dir, entry.name)));
+        } else if (entry.isFile() && (entry.name.endsWith('.mdx') || entry.name.endsWith('.md'))) {
+            results.push(join(dir, entry.name));
+        }
+    }
+    return results;
+}
+
+// Link extraction
+
+/**
+ * Returns content with MDX/JSX and HTML comments blanked out (preserving
+ * positions so line numbers stay correct).
+ */
+function stripComments(content) {
+    content = content.replace(/\{\/\*[\s\S]*?\*\/\}/g, m => ' '.repeat(m.length));
+    content = content.replace(/<!--[\s\S]*?-->/g, m => ' '.repeat(m.length));
+    return content;
+}
+
+/**
+ * Blanks out <PlatformBlock for="...">...</PlatformBlock> sections that do not
+ * apply to any of the given platforms, preserving byte positions so that line
+ * numbers remain accurate. Handles nested PlatformBlock elements.
+ *
+ * When `platforms` is null (no platform filter), nothing is blanked.
+ */
+function blankInapplicablePlatformBlocks(content, platforms) {
+    if (!platforms || platforms.size === 0) return content;
+
+    const PB_OPEN_RE = /<PlatformBlock\s+for="([^"]+)"\s*>/g;
+    const ANY_TAG_RE = /<PlatformBlock\s+for="[^"]+"\s*>|<\/PlatformBlock>/g;
+    const chars = content.split('');
+
+    PB_OPEN_RE.lastIndex = 0;
+    let openMatch;
+    while ((openMatch = PB_OPEN_RE.exec(content)) !== null) {
+        const blockPlatforms = openMatch[1].split(',').map(p => p.trim());
+        const applicable = blockPlatforms.some(p => platforms.has(p));
+        if (applicable) continue; // keep this block as-is
+
+        // Find the matching </PlatformBlock>, tracking nesting depth.
+        const bodyStart = openMatch.index + openMatch[0].length;
+        ANY_TAG_RE.lastIndex = bodyStart;
+        let depth = 1;
+        let closeMatch = null;
+        while (depth > 0) {
+            closeMatch = ANY_TAG_RE.exec(content);
+            if (!closeMatch) break;
+            if (closeMatch[0].startsWith('</')) depth--;
+            else depth++;
+        }
+        if (!closeMatch) continue;
+
+        const blankStart = openMatch.index;
+        const blankEnd = closeMatch.index + closeMatch[0].length;
+        for (let i = blankStart; i < blankEnd; i++) {
+            if (chars[i] !== '\n') chars[i] = ' ';
+        }
+        PB_OPEN_RE.lastIndex = blankEnd;
+    }
+
+    return chars.join('');
+}
+
+/**
+ * Maps a source file path to the set of applicable platforms for PlatformBlock
+ * filtering. Files in docs/xplat/src/content are shared across all xplat
+ * platforms, we filter out Angular only blocks; files in docs/angular/src
+ * keep Angular blocks and skip xplat-only ones.
+ */
+function platformSetForFile(filePath) {
+    const normalized = filePath.replace(/\\/g, '/');
+    if (normalized.includes('docs/angular/src/')) {
+        return new Set(['Angular']);
+    }
+    if (normalized.includes('docs/xplat/src/')) {
+        return new Set(['React', 'WebComponents', 'Blazor']);
+    }
+    return null; // no filtering
+}
+
+/** Markdown link: [text](url) — captures the URL portion. */
+const MD_LINK_RE = /\[(?:[^\]\\]|\\.)*\]\(([^)\s]+)(?:\s+"[^"]*")?\)/g;
+
+/**
+ * JSX href attribute with relative path:  href="./..." or href='../'
+ * Captures the attribute value.
+ */
+const JSX_HREF_RE = /href=["'](\.[^"'\s>]+)["']/g;
+
+/** Strip hash fragment (#anchor) from a URL path. */
+function stripHash(url) {
+    const i = url.indexOf('#');
+    return i >= 0 ? url.slice(0, i) : url;
+}
+
+/** File extensions that are clearly non-documentation assets — skip these. */
+const ASSET_EXTENSIONS = new Set([
+    '.css', '.js', '.ts', '.mjs', '.cjs',
+    '.png', '.jpg', '.jpeg', '.gif', '.svg', '.webp', '.ico',
+    '.json', '.xml', '.yaml', '.yml',
+    '.zip', '.tar', '.gz', '.pdf',
+    '.woff', '.woff2', '.ttf', '.eot',
+    '.html', '.htm',
+]);
+
+/**
+ * True when a URL is an absolute doc-internal link, e.g. /treegrid/tree-grid.
+ * Rejects external URLs, anchors-only, protocol-relative, and asset extensions.
+ */
+function isAbsoluteDocLink(url) {
+    if (!url.startsWith('/') || url.startsWith('//')) return false;
+    if (url.startsWith('/#')) return false; // anchor-only
+    const path = stripHash(url).slice(1); // strip leading '/'
+    if (!path) return false;
+    const dot = path.lastIndexOf('.');
+    const slash = path.lastIndexOf('/');
+    if (dot > slash) {
+        const ext = path.slice(dot).toLowerCase();
+        if (ASSET_EXTENSIONS.has(ext)) return false;
+    }
+    return true;
+}
+
+/**
+ * Given a file path, returns the language-specific content root
+ * e.g. 'docs/angular/src/content/en/' or null if not determinable.
+ */
+function getLangRoot(filePath) {
+    const normalized = filePath.replace(/\\/g, '/');
+    const m = normalized.match(/^(.*\/content\/(?:en|jp|kr))\//i);
+    return m ? m[1] + '/' : null;
+}
+
+/**
+ * Resolves an absolute doc link like /treegrid/tree-grid against the
+ * language content root. Tries components/{path}.mdx then {path}.mdx.
+ * Returns the resolved path string or null if not found.
+ */
+function resolveAbsoluteLink(langRoot, url) {
+    const path = stripHash(url).slice(1); // strip leading '/'
+    if (!path) return 'hash-only';
+    // Astro lowercases all URL slugs at build time. Always resolve using the
+    // lowercased path so that camelCase links like /pivotGrid/... are flagged
+    // as broken (the built URL is /pivotgrid/...).
+    const pathLower = path.toLowerCase();
+    const candidates = [
+        resolve(langRoot, 'components', pathLower),
+        resolve(langRoot, pathLower),
+    ];
+    for (const base of candidates) {
+        if (existsSync(base)) return base;
+        if (existsSync(base + '.mdx')) return base + '.mdx';
+        if (existsSync(base + '.md')) return base + '.md';
+    }
+    return null;
+}
+
+/**
+ * True when a URL is a relative file path to a doc page.
+ * Accepts:  ./page.mdx, ../dir/page.mdx, page.mdx, dir/page.mdx (bare with .mdx extension)
+ * Rejects:  http(s), mailto, anchor-only (#), absolute paths (/), asset extensions.
+ */
+function isRelativeFilePath(url) {
+    if (url.startsWith('//') || url.startsWith('/') || url.startsWith('#')) return false;
+    if (url.includes('://') || url.startsWith('mailto:')) return false;
+
+    const isExplicitRelative = url.startsWith('./') || url.startsWith('../');
+    // Also accept bare paths that explicitly carry a .md or .mdx extension
+    // e.g. (page.mdx) or (subdir/page.mdx) — resolves as same-directory relative.
+    // Excludes template variables like {GithubLink}/... which aren't real relative paths.
+    const isBareDocLink = !isExplicitRelative && !url.startsWith('{') && /\.mdx?(?:#|$)/i.test(url);
+
+    if (!isExplicitRelative && !isBareDocLink) return false;
+
+    const path = stripHash(url);
+    const dot = path.lastIndexOf('.');
+    const slash = path.lastIndexOf('/');
+    if (dot > slash) {
+        const ext = path.slice(dot).toLowerCase();
+        if (ASSET_EXTENSIONS.has(ext)) return false;
+    }
+    return true;
+}
+
+
+/**
+ * Extracts every relative and absolute doc link from the MDX content of the given file.
+ * Returns: Array<{ href: string, line: number, kind: 'relative'|'absolute' }>
+ */
+function extractRelativeLinks(content, filePath) {
+    let stripped = stripComments(content);
+    stripped = blankInapplicablePlatformBlocks(stripped, platformSetForFile(filePath));
+    const links = [];
+
+    // Build line-start offset table for line/col mapping.
+    const lineOffsets = [0];
+    for (let i = 0; i < stripped.length; i++) {
+        if (stripped[i] === '\n') lineOffsets.push(i + 1);
+    }
+    function offsetToLine(offset) {
+        let lo = 0, hi = lineOffsets.length - 1;
+        while (lo < hi) {
+            const mid = (lo + hi + 1) >> 1;
+            if (lineOffsets[mid] <= offset) lo = mid; else hi = mid - 1;
+        }
+        return lo + 1;
+    }
+
+    // Markdown links
+    MD_LINK_RE.lastIndex = 0;
+    let m;
+    while ((m = MD_LINK_RE.exec(stripped)) !== null) {
+        const href = m[1];
+        if (isRelativeFilePath(href)) {
+            links.push({ href, line: offsetToLine(m.index), kind: 'relative' });
+        } else if (isAbsoluteDocLink(href)) {
+            links.push({ href, line: offsetToLine(m.index), kind: 'absolute' });
+        }
+    }
+
+    // JSX href attributes
+    JSX_HREF_RE.lastIndex = 0;
+    while ((m = JSX_HREF_RE.exec(stripped)) !== null) {
+        const href = m[1];
+        if (isRelativeFilePath(href)) {
+            links.push({ href, line: offsetToLine(m.index), kind: 'relative' });
+        } else if (isAbsoluteDocLink(href)) {
+            links.push({ href, line: offsetToLine(m.index), kind: 'absolute' });
+        }
+    }
+
+    return links;
+}
+
+// File resolution
+
+/**
+ * Returns { resolved, missingExt } for `href` relative to `fileDir`.
+ * resolved = null means the target does not exist on disk.
+ * missingExt = true means the path has no extension but resolves via .mdx —
+ *   the link should be written as ./page.mdx, not ./page.
+ */
+function resolveLink(fileDir, href) {
+    const path = stripHash(href);
+    if (!path) return { resolved: 'hash-only', missingExt: false };
+
+    const abs = resolve(fileDir, path);
+
+    if (existsSync(abs)) return { resolved: abs, missingExt: false };
+
+    if (existsSync(abs + '.mdx')) {
+        const lastDot = path.lastIndexOf('.');
+        const lastSlash = path.lastIndexOf('/');
+        const hasExt = lastDot > lastSlash;
+        const isBare = !path.startsWith('./') && !path.startsWith('../');
+        const missingExt = !hasExt || isBare;
+        return { resolved: abs + '.mdx', missingExt, bare: isBare };
+    }
+
+    return { resolved: null, missingExt: false };
+}
+
+// Main scan
+
+const cwd = process.cwd();
+
+/** @type {string[]} */
+let filesToScan;
+let scanDescription;
+
+const srcDirs = getSrcDirs();
+filesToScan = srcDirs.flatMap(d => walkMdx(resolve(d)));
+scanDescription = `source dirs: ${srcDirs.join(', ')}`;
+
+console.log(`\nScanning for relative links`);
+console.log(`Scope: ${scanDescription}`);
+if (PLATFORM) console.log(`Platform: ${PLATFORM}`);
+console.log('');
+
+/** @type {Array<{file: string, line: number, href: string}>} */
+const brokenLinks = [];
+let totalFiles = 0;
+let totalLinks = 0;
+
+for (const file of filesToScan) {
+    totalFiles++;
+    const content = readFileSync(file, 'utf-8');
+    const links = extractRelativeLinks(content, file);
+    totalLinks += links.length;
+    const fileDir = dirname(file);
+    const relFile = relative(cwd, file).replace(/\\/g, '/');
+
+    const langRoot = getLangRoot(file);
+
+    for (const { href, line, kind } of links) {
+        if (kind === 'absolute') {
+            if (langRoot) {
+                const resolved = resolveAbsoluteLink(langRoot, href);
+                if (resolved === null) {
+                    brokenLinks.push({ file: relFile, line, href, reason: 'not-found' });
+                }
+            }
+            continue;
+        }
+        const { resolved, missingExt, bare } = resolveLink(fileDir, href);
+        if (resolved === null) {
+            brokenLinks.push({ file: relFile, line, href, reason: 'not-found' });
+        } else if (bare) {
+            brokenLinks.push({ file: relFile, line, href, reason: 'bare-path' });
+        } else if (missingExt) {
+            brokenLinks.push({ file: relFile, line, href, reason: 'missing-mdx' });
+        }
+    }
+
+    // Second pass: catch bare links (no ./ or ../) that resolve to .mdx files.
+    // Only flag when the file actually exists, avoids false positives.
+    const BARE_LINK_RE = /\]\((?!https?:\/\/|#|\/|\.\.?\/|mailto:|{)([a-zA-Z][a-zA-Z0-9/_-]*)(#[^)]*)?\)/g;
+    for (const m of content.matchAll(BARE_LINK_RE)) {
+        const href = m[1];
+        const hash = m[2] ?? '';
+        const abs = resolve(fileDir, href);
+        if (existsSync(abs + '.mdx')) {
+            const line = (content.slice(0, m.index).match(/\n/g) || []).length + 1;
+            brokenLinks.push({ file: relFile, line, href: href + hash, reason: 'bare-path' });
+        }
+    }
+}
+
+// Reporting
+
+const HR  = '═'.repeat(72);
+const HR2 = '─'.repeat(72);
+
+// --summary mode: print one compact status line and exit (used by CI for the final combined summary)
+if (SUMMARY) {
+    const label  = PLATFORM ?? 'all';
+    const status = brokenLinks.length === 0 ? '✅' : '❌';
+    console.log(`  ${status}  ${label.padEnd(10)}  Broken links: ${brokenLinks.length}  (${totalFiles} files, ${totalLinks} links)`);
+    process.exit(brokenLinks.length > 0 ? 1 : 0);
+}
+
+// --summary mode: print one compact status line and exit (used by CI for the final combined summary)
+if (SUMMARY) {
+    const label  = PLATFORM ?? 'all';
+    const status = brokenLinks.length === 0 ? '✅' : '❌';
+    console.log(`  ${status}  ${label.padEnd(10)}  Broken links: ${brokenLinks.length}  (${totalFiles} files, ${totalLinks} links)`);
+    process.exit(brokenLinks.length > 0 ? 1 : 0);
+}
+
+console.log(`  MDX/MD files scanned : ${totalFiles}`);
+console.log(`  Relative links found : ${totalLinks}`);
+console.log(`  Broken links         : ${brokenLinks.length}\n`);
+
+console.log(HR);
+console.log('  RELATIVE LINK CHECK REPORT (MDX source)');
+console.log(HR);
+
+if (brokenLinks.length === 0) {
+    console.log('\n  All relative links resolve to existing files.\n');
+} else {
+    for (const item of brokenLinks) {
+        const tag = item.reason === 'bare-path'    ? '[use ./page.mdx instead]'
+                  : item.reason === 'missing-mdx'  ? '[add .mdx extension]'
+                  : '[not found]';
+        console.log(`\n  ✗  ${item.file}:${item.line}  ${tag}`);
+        console.log(`       href: ${item.href}`);
+    }
+    console.log('');
+}
+
+console.log(HR);
+
+// Markdown report
+
+if (MD_OUTPUT) {
+    const ts = new Date().toISOString().replace('T', ' ').slice(0, 19) + ' UTC';
+    const lines = [];
+    lines.push('# Relative Link Check Report');
+    lines.push('');
+    lines.push(`_Generated: ${ts}_`);
+    lines.push('');
+    lines.push('## Summary');
+    lines.push('');
+    lines.push('| | |');
+    lines.push('|---|---|');
+    lines.push(`| Files scanned | ${totalFiles} |`);
+    lines.push(`| Relative links | ${totalLinks} |`);
+    lines.push(`| ✅ OK | ${totalLinks - brokenLinks.length} |`);
+    lines.push(`| ❌ **Broken** | **${brokenLinks.length}** |`);
+    lines.push('');
+
+    if (brokenLinks.length > 0) {
+        lines.push('## Broken Links');
+        lines.push('');
+        lines.push('| File | Line | href | Issue |');
+        lines.push('|---|---:|---|---|');
+        for (const item of brokenLinks) {
+            const issue = item.reason === 'bare-path'   ? 'use ./page.mdx instead'
+                        : item.reason === 'missing-mdx' ? 'add .mdx extension'
+                        : 'not found';
+            lines.push(`| \`${item.file}\` | ${item.line} | \`${item.href}\` | ${issue} |`);
+        }
+        lines.push('');
+    }
+
+    writeFileSync(MD_OUTPUT, lines.join('\n'));
+    console.log(`\n  Markdown report written to: ${MD_OUTPUT}\n`);
+}
+
+process.exit(brokenLinks.length > 0 ? 1 : 0);
diff --git a/scripts/merge-vnext-updates.mjs b/scripts/merge-vnext-updates.mjs
deleted file mode 100644
index 982d6f84b1..0000000000
--- a/scripts/merge-vnext-updates.mjs
+++ /dev/null
@@ -1,260 +0,0 @@
-#!/usr/bin/env node
-/**
- * Replay individual igniteui-docfx/vnext commits into this repo,
- * preserving per-commit git history.
- *
- * Usage:
- *   node scripts/merge-vnext-updates.mjs [ancestor] [remote/branch]
- *
- * Defaults:
- *   ancestor = LAST_SYNC (update after each successful run)
- *   remote   = igniteui-docfx/vnext
- *
- * Strategy: For each non-merge commit in ANCESTOR..THEIRS (oldest first):
- *   1. Find which content files it touches
- *   2. 3-way body-only merge each file (using that commit's parent as ancestor)
- *   3. Auto-resolve ApiLink conflicts: keep ours when theirs has raw {environment:...} links
- *   4. If conflict cannot be auto-resolved: restore original file, skip it, log it
- *   5. git commit only the clean files with the original author/date/message
- *   6. Verify HEAD advanced after commit — warn if not (e.g. IDE "Undo Last Commit" interference)
- *
- * No MDX transforms (.md link stripping, callout → DocsAside conversion) are applied
- * here. Those are local repo requirements that must land in their own commit so they
- * are not falsely attributed to the upstream author. After this script finishes, run:
- *
- *   node scripts/check-mdx-quality.mjs --fix
- *   node scripts/convert-callouts.mjs
- *   git add -A -- docs/angular/src/content/
- *   git commit -m "fix(sync): apply MDX transforms to new vnext content"
- *
- * After a successful run with no remaining conflicts, update LAST_SYNC below.
- *
- * grids_templates/* files are expanded to all 4 grid subdirectories.
- * Images and toc.yml are always skipped.
- *
- * Note: uses ~1 instead of ^ for parent refs — ^ is special in cmd.exe on Windows.
- */
-
-import { execSync, spawnSync } from 'node:child_process';
-import { readFileSync, writeFileSync, mkdtempSync, rmSync, existsSync } from 'node:fs';
-import { join } from 'node:path';
-import { tmpdir } from 'node:os';
-
-// ──────────────────────────────────────────────────────────────────────────────
-// UPDATE THIS to the tip commit after each successful sync
-const LAST_SYNC = '557f56e672';
-// ──────────────────────────────────────────────────────────────────────────────
-
-const ANCESTOR = process.argv[2] || LAST_SYNC;
-const THEIRS   = process.argv[3] || 'igniteui-docfx/vnext';
-const CONTENT_DIR = 'docs/angular/src/content';
-const GRID_DIRS   = ['grid', 'treegrid', 'hierarchicalgrid', 'pivotGrid'];
-
-// ── Auto-resolve conflicts ────────────────────────────────────────────────────
-// Keep "ours" when theirs still has a raw {environment:...} API link and ours
-// already has an <ApiLink> component — this is not a transform, just preferring
-// our existing MDX-compatible form over the upstream docfx form.
-
-const RAW_API_RE = /\{environment:(dvApiBaseUrl|angularApiUrl)[^}]*\}/;
-
-function autoResolveConflicts(content) {
-  return content.replace(
-    /<<<<<<< [^\n]+\n([\s\S]*?)=======\n([\s\S]*?)>>>>>>> [^\n]+\n/g,
-    (match, ours, theirs) => {
-      if (RAW_API_RE.test(theirs) && !RAW_API_RE.test(ours)) {
-        return ours;
-      }
-      return match;
-    }
-  );
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────────
-
-function splitFrontmatter(content) {
-  const lines = content.split(/\r?\n/);
-  let fmCount = 0, splitIdx = -1;
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i].trim() === '---' && ++fmCount === 2) { splitIdx = i; break; }
-  }
-  if (splitIdx === -1) return { head: '', body: content };
-  return {
-    head: lines.slice(0, splitIdx + 1).join('\n') + '\n',
-    body: lines.slice(splitIdx + 1).join('\n'),
-  };
-}
-
-function getLocalPaths(docfxPath) {
-  const paths = [];
-  if (docfxPath.includes('grids_templates/')) {
-    for (const gridDir of GRID_DIRS) {
-      const local = `${CONTENT_DIR}/${docfxPath.replace('grids_templates/', `${gridDir}/`).replace(/\.md$/, '.mdx')}`;
-      if (existsSync(local)) paths.push(local);
-    }
-  } else {
-    const local = `${CONTENT_DIR}/${docfxPath.replace(/\.md$/, '.mdx')}`;
-    if (existsSync(local)) paths.push(local);
-  }
-  return paths;
-}
-
-function gitContent(ref, path) {
-  try { return execSync(`git show "${ref}:${path}"`, { encoding: 'utf8' }); }
-  catch { return null; }
-}
-
-function isGitIgnored(path) {
-  const result = spawnSync('git', ['check-ignore', '-q', path]);
-  return result.status === 0;
-}
-
-// ── Main ──────────────────────────────────────────────────────────────────────
-
-console.log(`Ancestor: ${ANCESTOR}`);
-console.log(`Theirs:   ${THEIRS}\n`);
-
-const commitList = execSync(
-  `git log --no-merges --reverse --format="%H" ${ANCESTOR}..${THEIRS} -- en/ jp/`,
-  { encoding: 'utf8' }
-).trim().split('\n').filter(Boolean);
-
-console.log(`Found ${commitList.length} commits to replay.\n`);
-
-const tmpDir = mkdtempSync(join(tmpdir(), 'merge-vnext-'));
-let totalCommits = 0, totalFiles = 0, skippedCommits = 0;
-const allConflictFiles = [];
-
-try {
-  for (const sha of commitList) {
-    const authorName  = execSync(`git log -1 --format="%aN" ${sha}`, { encoding: 'utf8' }).trim();
-    const authorEmail = execSync(`git log -1 --format="%aE" ${sha}`, { encoding: 'utf8' }).trim();
-    const authorDate  = execSync(`git log -1 --format="%aI" ${sha}`, { encoding: 'utf8' }).trim();
-    const commitDate  = execSync(`git log -1 --format="%cI" ${sha}`, { encoding: 'utf8' }).trim();
-    const message     = execSync(`git log -1 --format="%B" ${sha}`, { encoding: 'utf8' }).trim();
-
-    const changedRaw = execSync(
-      `git diff --name-only ${sha}~1..${sha} -- en/ jp/`,
-      { encoding: 'utf8' }
-    ).trim().split('\n').filter(f => f && !f.includes('/images/') && !f.endsWith('toc.yml'));
-
-    if (changedRaw.length === 0) { skippedCommits++; continue; }
-
-    const shortSha = sha.slice(0, 10);
-    console.log(`\n[${shortSha}] ${message.split('\n')[0].slice(0, 72)}`);
-
-    const cleanPaths = [], conflictedPaths = [];
-
-    for (const docfxFile of changedRaw) {
-      const localPaths = getLocalPaths(docfxFile);
-      if (localPaths.length === 0) continue;
-
-      const ancestorContent = gitContent(`${sha}~1`, docfxFile);
-      const theirsContent   = gitContent(sha, docfxFile);
-      if (!ancestorContent || !theirsContent) continue;
-
-      const ancestorBody = splitFrontmatter(ancestorContent).body;
-      const theirsBody   = splitFrontmatter(theirsContent).body;
-      if (ancestorBody === theirsBody) continue;
-
-      for (const localPath of localPaths) {
-        if (isGitIgnored(localPath)) {
-          process.stdout.write(`  ⊘ ${localPath} (gitignored — skipped)\n`);
-          continue;
-        }
-        const oursContent = readFileSync(localPath, 'utf8');
-        const { head: oursHead, body: oursBody } = splitFrontmatter(oursContent);
-
-        const ancestorFile = join(tmpDir, 'ancestor.md');
-        const theirsFile   = join(tmpDir, 'theirs.md');
-        const oursFile     = join(tmpDir, 'ours.mdx');
-
-        writeFileSync(ancestorFile, ancestorBody);
-        writeFileSync(theirsFile, theirsBody);
-        writeFileSync(oursFile, oursBody);
-
-        const result = spawnSync('git', [
-          'merge-file',
-          '-L', `ours (${localPath})`,
-          '-L', `ancestor (${sha}~1:${docfxFile})`,
-          '-L', `theirs (${sha}:${docfxFile})`,
-          oursFile, ancestorFile, theirsFile,
-        ], { encoding: 'utf8' });
-
-        let mergedBody = readFileSync(oursFile, 'utf8');
-        let hasConflict = result.status > 0;
-
-        if (hasConflict) {
-          mergedBody = autoResolveConflicts(mergedBody);
-          hasConflict = mergedBody.includes('<<<<<<<');
-        }
-
-        if (hasConflict) {
-          process.stdout.write(`  ✗ ${localPath} (conflict — skipped, needs manual fix)\n`);
-          conflictedPaths.push(localPath);
-          allConflictFiles.push({ sha: shortSha, path: localPath });
-        } else if (mergedBody !== oursBody) {
-          writeFileSync(localPath, oursHead + mergedBody);
-          cleanPaths.push(localPath);
-          process.stdout.write(`  ${result.status === 0 ? '✓' : '~'} ${localPath}\n`);
-        }
-      }
-    }
-
-    if (cleanPaths.length === 0) {
-      process.stdout.write(`  (no clean changes — skipping commit)\n`);
-      skippedCommits++;
-      continue;
-    }
-
-    for (const p of cleanPaths) {
-      execSync(`git add -- "${p}"`, { encoding: 'utf8' });
-    }
-
-    const env = {
-      ...process.env,
-      GIT_AUTHOR_NAME:    authorName,
-      GIT_AUTHOR_EMAIL:   authorEmail,
-      GIT_AUTHOR_DATE:    authorDate,
-      GIT_COMMITTER_DATE: commitDate,
-    };
-
-    const msgFile = join(tmpDir, 'COMMIT_MSG');
-    const trailer = conflictedPaths.length > 0
-      ? `\n\nNote: ${conflictedPaths.length} file(s) had unresolvable conflicts and were skipped.`
-      : '';
-    writeFileSync(msgFile, `${message}\n\n(cherry-picked from igniteui-docfx@${sha})${trailer}`);
-
-    const headBefore = execSync('git rev-parse HEAD', { encoding: 'utf8' }).trim();
-    spawnSync('git', ['commit', '-F', msgFile], { env, stdio: 'inherit' });
-    const headAfter = execSync('git rev-parse HEAD', { encoding: 'utf8' }).trim();
-
-    if (headBefore === headAfter) {
-      process.stdout.write(`  ! WARNING: HEAD did not advance — check for IDE interference (e.g. "Undo Last Commit").\n`);
-    } else {
-      totalCommits++;
-      totalFiles += cleanPaths.length;
-      process.stdout.write(`  → committed as ${headAfter.slice(0, 10)} (${cleanPaths.length} file(s))\n`);
-    }
-  }
-} finally {
-  rmSync(tmpDir, { recursive: true, force: true });
-}
-
-console.log(`\n${'='.repeat(60)}`);
-console.log(`Done.`);
-console.log(`  Commits created:  ${totalCommits}`);
-console.log(`  Files updated:    ${totalFiles}`);
-console.log(`  Skipped commits:  ${skippedCommits}`);
-console.log(`  Unresolved conflicts: ${allConflictFiles.length}`);
-
-if (allConflictFiles.length > 0) {
-  console.log(`\nFiles that need manual resolution (not committed):`);
-  for (const { sha, path } of allConflictFiles) {
-    console.log(`  [${sha}] ${path}`);
-  }
-}
-
-if (allConflictFiles.length === 0 && totalCommits > 0) {
-  const tip = execSync(`git rev-parse ${THEIRS}`, { encoding: 'utf8' }).trim().slice(0, 10);
-  console.log(`\nAll clean. Update LAST_SYNC in this script to: ${tip}`);
-}
diff --git a/scripts/migrate-vnext-new-files.mjs b/scripts/migrate-vnext-new-files.mjs
deleted file mode 100644
index bc481f4dbf..0000000000
--- a/scripts/migrate-vnext-new-files.mjs
+++ /dev/null
@@ -1,114 +0,0 @@
-#!/usr/bin/env node
-// Apply DocFX → MDX migration transforms IN-PLACE on the 9 newly-imported pages.
-// Reads the existing .mdx files (just renamed from .md) and rewrites them.
-//
-// This is split from the import step so that `git log --follow` shows:
-//   1. content migration commit
-//   2. .md → .mdx rename commit
-//   3. ...the original docfx commit history (via format-patch + git am)
-//
-// Run: node scripts/migrate-vnext-new-files.mjs
-
-import { readFileSync, writeFileSync, existsSync } from 'node:fs';
-import { join } from 'node:path';
-
-const REPO_ROOT = process.cwd();
-
-const FILES = [
-    'docs/angular/src/content/en/components/ai/ai-assisted-development-overview.mdx',
-    'docs/angular/src/content/en/components/ai/cli-mcp.mdx',
-    'docs/angular/src/content/en/components/ai/maker-framework.mdx',
-    'docs/angular/src/content/en/components/general/how-to/general-how-to-mcp-e2e.mdx',
-    'docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx',
-    'docs/angular/src/content/jp/components/ai/cli-mcp.mdx',
-    'docs/angular/src/content/jp/components/ai/maker-framework.mdx',
-    'docs/angular/src/content/jp/components/general-whats-new-dv.mdx',
-    'docs/angular/src/content/jp/components/style-guide.mdx',
-];
-
-/** Apply DocFX → MDX migration rules. */
-function migrate(content, { isJp }) {
-    let out = content;
-    const importsNeeded = new Set();
-
-    // 1. Frontmatter cleanup
-    out = out.replace(/^---\n([\s\S]*?)\n---/, (match, fm) => {
-        let body = fm
-            .replace(/^_description:/m, 'description:')
-            .replace(/^_keywords:/m, 'keywords:')
-            .replace(/^_license:/m, 'license:')
-            .replace(/^_canonicalLink:/m, 'canonicalLink:');
-        if (!isJp) body = body.replace(/^_language:\s*\w+\s*\n?/m, '');
-        body = body
-            .replace(/^namespace:.*\n?/m, '')
-            .replace(/^last_updated:.*\n?/m, '');
-        return `---\n${body}\n---`;
-    });
-
-    // 2. Drop the leading <!-- schema: ... --> comment after frontmatter
-    out = out.replace(/^(---\n[\s\S]*?\n---\n+)<!--\s*schema:[^>]*-->\s*\n+/, '$1');
-
-    // 3. >[!NOTE] / >[!WARNING] / >[!TIP] / >[!CAUTION] / >[!IMPORTANT] callouts
-    out = out.replace(
-        /^>\s*\[!(NOTE|TIP|WARNING|CAUTION|DANGER|IMPORTANT)\]\s*\n((?:^>.*\n)+)/gm,
-        (m, kind, body) => {
-            const typeMap = {
-                NOTE: 'note',
-                TIP: 'tip',
-                WARNING: 'warning',
-                CAUTION: 'warning',
-                DANGER: 'danger',
-                IMPORTANT: 'note',
-            };
-            const type = typeMap[kind] ?? 'note';
-            const inner = body.replace(/^>\s?/gm, '').replace(/\n+$/, '');
-            importsNeeded.add('DocsAside');
-            return `<DocsAside type="${type}">\n\n${inner}\n\n</DocsAside>\n\n`;
-        },
-    );
-
-    // 4. Strip {environment:...} prefix from canonicalLink values
-    out = out.replace(
-        /^canonicalLink:\s*"\{environment:[^}]+\}(\/[^"]*)"/m,
-        (_m, p) => `canonicalLink: "${p}"`,
-    );
-
-    // 5. Add component imports right after frontmatter
-    if (importsNeeded.size > 0) {
-        const map = {
-            DocsAside: `import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';`,
-        };
-        const imports = [...importsNeeded].map((n) => map[n]).filter(Boolean).join('\n');
-        out = out.replace(/^(---\n[\s\S]*?\n---)\n+/, `$1\n\n${imports}\n\n`);
-    }
-
-    return out;
-}
-
-console.log('Applying DocFX -> MDX migration to imported files ...\n');
-for (const rel of FILES) {
-    const abs = join(REPO_ROOT, rel);
-    if (!existsSync(abs)) {
-        console.error(`  SKIP (missing) ${rel}`);
-        continue;
-    }
-    const isJp = rel.includes('/jp/');
-    const beforeRaw = readFileSync(abs, 'utf8');
-    // Normalise CRLF -> LF for regex matching, then preserve original EOL on write.
-    const usedCrlf = beforeRaw.includes('\r\n');
-    const before = usedCrlf ? beforeRaw.replace(/\r\n/g, '\n') : beforeRaw;
-    const migrated = migrate(before, { isJp });
-    const after = usedCrlf ? migrated.replace(/\n/g, '\r\n') : migrated;
-    if (after !== beforeRaw) {
-        writeFileSync(abs, after, 'utf8');
-        console.log(`  ~ ${rel}`);
-    } else {
-        console.log(`  = ${rel} (no change)`);
-    }
-}
-
-console.log('\nDone. Manual review still recommended for:');
-console.log('  - <img> tags  -> astro:assets <Image>');
-console.log('  - {environment:...} URL tokens in body  -> <ApiLink> or hard-coded URL');
-console.log('  - inline <p class="highlight"> blocks with multi-paragraph content');
-console.log('  - toc.json entries (add new pages where appropriate)');
diff --git a/scripts/reimport-body.mjs b/scripts/reimport-body.mjs
deleted file mode 100644
index 8f90577017..0000000000
--- a/scripts/reimport-body.mjs
+++ /dev/null
@@ -1,500 +0,0 @@
-#!/usr/bin/env node
-/**
- * Re-merge upstream body content for files where "keep ours" conflict resolution
- * discarded substantive text changes during the initial 3-way merge.
- *
- * Strategy: For each affected file:
- *   1. 3-way merge body (ancestor vs ours vs theirs) using git merge-file
- *   2. For conflicts, prefer "theirs" (keep upstream text changes)
- *   3. Apply MDX transforms to the resolved body:
- *      - Convert >[!NOTE/TIP/...] → <DocsAside>
- *      - Remove <!-- schema: --> comments
- *      - Convert other HTML comments to MDX comments (outside code fences)
- *      - Convert <code-view> → <Sample>
- *      - Convert <img class="responsive-img"> → <Image>
- *
- * Usage:
- *   node scripts/reimport-body.mjs              (process all known rewritten files)
- *   node scripts/reimport-body.mjs --all        (same as above)
- *   node scripts/reimport-body.mjs file1.md ... (process specific docfx paths)
- *
- * After running, build to verify: npm run angular:build-staging:en
- */
-
-import { execSync, spawnSync } from 'node:child_process';
-import { readFileSync, writeFileSync, existsSync, mkdtempSync, rmSync } from 'node:fs';
-import { basename, join } from 'node:path';
-import { tmpdir } from 'node:os';
-
-const ANCESTOR = process.argv.find(a => a.startsWith('--ancestor='))?.split('=')[1] || 'f8c877bc9e';
-const THEIRS = process.argv.find(a => a.startsWith('--theirs='))?.split('=')[1] || 'igniteui-docfx/vnext';
-const CONTENT_DIR = 'docs/angular/src/content';
-const GRID_DIRS = ['grid', 'treegrid', 'hierarchicalgrid', 'pivotGrid'];
-
-const DOCS_ASIDE_IMPORT = "import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';";
-const SAMPLE_IMPORT = "import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';";
-const IMAGE_IMPORT = "import { Image } from 'astro:assets';";
-
-// Files that had substantial text rewrites in the upstream (not just syntax differences)
-const KNOWN_REWRITTEN = [
-  'en/components/ai/skills.md',
-  'en/components/ai/theming-mcp.md',
-  'en/components/date-range-picker.md',
-  'en/components/general/getting-started.md',
-  'en/components/general/open-source-vs-premium.md',
-  'en/components/general/cli/getting-started-with-cli.md',
-  'en/components/general/cli/getting-started-with-angular-schematics.md',
-  'en/components/general/cli/component-templates.md',
-  'en/components/general/cli/step-by-step-guide-using-angular-schematics.md',
-  'en/components/general/cli/step-by-step-guide-using-cli.md',
-  'en/components/general/cli-overview.md',
-  'en/components/general/localization.md',
-  'en/components/general/how-to/how-to-use-standalone-components.md',
-  'en/components/general/how-to/how-to-perform-crud.md',
-  'en/components/general/data-analysis.md',
-  'en/components/icon-service.md',
-  'en/components/interactivity/accessibility-compliance.md',
-  'en/components/grids_templates/state-persistence.md',
-  'en/components/grids_templates/keyboard-navigation.md',
-  'en/components/grids_templates/export-excel.md',
-  'en/components/grids_templates/summaries.md',
-  'en/components/grids_templates/column-types.md',
-  'en/components/grids_templates/editing.md',
-  'en/components/grids_templates/search.md',
-  'en/components/tooltip.md',
-  'en/components/mask.md',
-  'en/components/paginator.md',
-  'en/components/badge.md',
-  'en/components/grid/grid.md',
-  'en/components/themes/sass/roundness.md',
-  'en/components/themes/sass/global-themes.md',
-  'en/components/themes/index.md',
-  'en/components/date-time-editor.md',
-  'en/components/charts/types/data-pie-chart.md',
-  'en/components/general-breaking-changes-dv.md',
-  'jp/components/ai/skills.md',
-  'jp/components/ai/theming-mcp.md',
-  'jp/components/interactivity/accessibility-compliance.md',
-  'jp/components/general/how-to/how-to-use-standalone-components.md',
-  'jp/components/general-changelog-dv.md',
-  'jp/components/menus/toolbar.md',
-];
-
-function splitFrontmatter(content) {
-  const lines = content.split(/\r?\n/);
-  let fmCount = 0;
-  let splitIdx = -1;
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i].trim() === '---') {
-      fmCount++;
-      if (fmCount === 2) { splitIdx = i; break; }
-    }
-  }
-  if (splitIdx === -1) return { head: '', body: content };
-  const head = lines.slice(0, splitIdx + 1).join('\n') + '\n';
-  const body = lines.slice(splitIdx + 1).join('\n');
-  return { head, body };
-}
-
-function getGitContent(ref, path) {
-  try {
-    return execSync(`git show ${ref}:${path}`, { encoding: 'utf8' });
-  } catch { return null; }
-}
-
-function getLocalPaths(docfxPath) {
-  const paths = [];
-  if (docfxPath.includes('grids_templates/')) {
-    for (const dir of GRID_DIRS) {
-      const expanded = docfxPath.replace('grids_templates/', `${dir}/`);
-      const p = `${CONTENT_DIR}/${expanded.replace(/\.md$/, '.mdx')}`;
-      if (existsSync(p)) paths.push(p);
-    }
-  } else {
-    const p = `${CONTENT_DIR}/${docfxPath.replace(/\.md$/, '.mdx')}`;
-    if (existsSync(p)) paths.push(p);
-  }
-  return paths;
-}
-
-/**
- * Resolve conflicts in merged text by keeping "theirs" in conflicts.
- */
-function resolveConflictsKeepTheirs(text) {
-  const lines = text.split('\n');
-  const result = [];
-  let inConflict = false;
-  let section = null;
-
-  for (const line of lines) {
-    if (line.startsWith('<<<<<<< ')) {
-      inConflict = true;
-      section = 'ours';
-      continue;
-    }
-    if (line === '=======' && inConflict) {
-      section = 'theirs';
-      continue;
-    }
-    if (line.startsWith('>>>>>>> ') && inConflict) {
-      inConflict = false;
-      section = null;
-      continue;
-    }
-    if (inConflict) {
-      if (section === 'theirs') {
-        result.push(line);
-      }
-    } else {
-      result.push(line);
-    }
-  }
-  return result.join('\n');
-}
-
-function toVarName(imgPath) {
-  const name = basename(imgPath).replace(/\.[^.]+$/, '');
-  return name.replace(/[-_]([a-z0-9])/g, (_, c) => c.toUpperCase());
-}
-
-/**
- * Convert <code-view> elements to <Sample> components.
- */
-function convertCodeViews(body) {
-  let needsSample = false;
-
-  // Match various code-view patterns
-  const codeViewRegex = /<code-view\s+[^>]*?(?:iframe-src="[^"]*?"[^>]*?)>\s*(?:<\/code-view>)?/gs;
-
-  body = body.replace(codeViewRegex, (match) => {
-    needsSample = true;
-
-    const heightMatch = match.match(/style="height:\s*(\d+)px"/);
-    const iframeSrcMatch = match.match(/iframe-src="\{environment:[^}]+\}([^"]*?)\/?\s*"/);
-    const altMatch = match.match(/alt="([^"]*)"/);
-
-    const height = heightMatch ? heightMatch[1] : '400';
-    let src = iframeSrcMatch ? iframeSrcMatch[1] : '';
-    const alt = altMatch ? altMatch[1] : '';
-
-    src = src.replace(/\/$/, '');
-
-    let attrs = `src="${src}" height={${height}}`;
-    if (alt) attrs += ` alt="${alt}"`;
-
-    return `<Sample ${attrs} />`;
-  });
-
-  return { body, needsSample };
-}
-
-/**
- * Apply MDX transforms to a body string.
- */
-function transformBody(body) {
-  let needsDocsAside = false;
-  let needsSample = false;
-  const imageImports = [];
-
-  // Remove <!-- schema: ... --> single-line comments
-  body = body.replace(/^<!-- schema:.*-->\s*\n?/gm, '');
-
-  // Convert HTML comments to MDX comments (only outside code fences)
-  body = convertHtmlComments(body);
-
-  // Convert callouts line-by-line, skipping content inside code fences
-  {
-    const inputLines = body.split('\n');
-    const outputLines = [];
-    let inFence = false;
-    for (let i = 0; i < inputLines.length; i++) {
-      const line = inputLines[i];
-      if (line.match(/^```/)) { inFence = !inFence; outputLines.push(line); continue; }
-      if (inFence) { outputLines.push(line); continue; }
-      const m = line.match(/^[ \t]*>\s*\[!(NOTE|TIP|WARNING|IMPORTANT|CAUTION)\]\s*\r?$/);
-      if (m) {
-        needsDocsAside = true;
-        const type = m[1];
-        const bodyLines = [];
-        while (i + 1 < inputLines.length && inputLines[i + 1].match(/^[ \t]*>/)) {
-          i++;
-          bodyLines.push(inputLines[i].replace(/^[ \t]*>\s?/, '').replace(/\r$/, ''));
-        }
-        const typeLC = type.toLowerCase() === 'important' ? 'note' : type.toLowerCase();
-        outputLines.push(`<DocsAside type="${typeLC}">`, ...bodyLines, `</DocsAside>`);
-        continue;
-      }
-      outputLines.push(line);
-    }
-    body = outputLines.join('\n');
-  }
-
-  // Convert <code-view> to <Sample>
-  const codeViewResult = convertCodeViews(body);
-  body = codeViewResult.body;
-  needsSample = codeViewResult.needsSample;
-
-  // Convert <img class="responsive-img" src="..." alt="..."> to <Image>
-  const imgRegex = /<img\s+class="responsive-img"\s+src="(\.[^"]+)"\s+alt="([^"]*)"\s*\/?>/g;
-  for (const m of [...body.matchAll(imgRegex)]) {
-    const [fullMatch, src, alt] = m;
-    const varName = toVarName(src);
-    if (!imageImports.find(i => i.varName === varName)) {
-      imageImports.push({ varName, src });
-    }
-    body = body.replace(fullMatch, `<Image src={${varName}} alt="${alt}" class="responsive-img" />`);
-  }
-
-  const imgRegex2 = /<img\s+class="responsive-img"\s+alt="([^"]*)"\s+src="(\.[^"]+)"\s*\/?>/g;
-  for (const m of [...body.matchAll(imgRegex2)]) {
-    const [fullMatch, alt, src] = m;
-    const varName = toVarName(src);
-    if (!imageImports.find(i => i.varName === varName)) {
-      imageImports.push({ varName, src });
-    }
-    body = body.replace(fullMatch, `<Image src={${varName}} alt="${alt}" class="responsive-img" />`);
-  }
-
-  return { body, needsDocsAside, needsSample, imageImports };
-}
-
-/**
- * Convert HTML comments to MDX comments, but only outside code fences.
- */
-function convertHtmlComments(content) {
-  const lines = content.split('\n');
-  const result = [];
-  let inFence = false;
-  let inComment = false;
-  let commentBuffer = [];
-
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i];
-
-    if (line.match(/^```/)) {
-      if (inComment) {
-        // Flush comment before code fence
-        result.push('{/*' + commentBuffer.join('\n') + '*/}');
-        commentBuffer = [];
-        inComment = false;
-      }
-      inFence = !inFence;
-      result.push(line);
-      continue;
-    }
-
-    if (inFence) {
-      result.push(line);
-      continue;
-    }
-
-    // Outside code fence - handle HTML comments
-    if (!inComment) {
-      const startIdx = line.indexOf('<!--');
-      if (startIdx !== -1) {
-        const endIdx = line.indexOf('-->', startIdx + 4);
-        if (endIdx !== -1) {
-          // Single-line comment
-          const before = line.substring(0, startIdx);
-          const comment = line.substring(startIdx + 4, endIdx);
-          const after = line.substring(endIdx + 3);
-          result.push(before + '{/*' + comment + '*/}' + after);
-        } else {
-          // Multi-line comment starts
-          inComment = true;
-          const before = line.substring(0, startIdx);
-          if (before.trim()) result.push(before);
-          commentBuffer.push(line.substring(startIdx + 4));
-        }
-      } else {
-        result.push(line);
-      }
-    } else {
-      // Inside multi-line comment
-      const endIdx = line.indexOf('-->');
-      if (endIdx !== -1) {
-        commentBuffer.push(line.substring(0, endIdx));
-        result.push('{/*' + commentBuffer.join('\n') + '*/}');
-        const after = line.substring(endIdx + 3);
-        if (after.trim()) result.push(after);
-        commentBuffer = [];
-        inComment = false;
-      } else {
-        commentBuffer.push(line);
-      }
-    }
-  }
-
-  // Flush any remaining comment
-  if (inComment && commentBuffer.length > 0) {
-    result.push('{/*' + commentBuffer.join('\n') + '*/}');
-  }
-
-  return result.join('\n');
-}
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Main
-// ─────────────────────────────────────────────────────────────────────────────
-
-const args = process.argv.slice(2).filter(a => !a.startsWith('--'));
-let filesToProcess;
-if (args.length === 0) {
-  filesToProcess = KNOWN_REWRITTEN;
-} else {
-  filesToProcess = args;
-}
-
-console.log(`Re-merging body content for ${filesToProcess.length} files (ancestor=${ANCESTOR}, theirs=${THEIRS})...\n`);
-
-let updated = 0;
-let skipped = 0;
-let cleanMerge = 0;
-let resolvedConflicts = 0;
-
-const tmpDir = mkdtempSync(join(tmpdir(), 'reimport-'));
-
-try {
-  for (const docfxFile of filesToProcess) {
-    const ancestorContent = getGitContent(ANCESTOR, docfxFile);
-    const theirsContent = getGitContent(THEIRS, docfxFile);
-
-    if (!theirsContent) {
-      console.log(`  SKIP ${docfxFile} (not found in ${THEIRS})`);
-      skipped++;
-      continue;
-    }
-    if (!ancestorContent) {
-      console.log(`  SKIP ${docfxFile} (not found in ancestor)`);
-      skipped++;
-      continue;
-    }
-
-    const localPaths = getLocalPaths(docfxFile);
-    if (localPaths.length === 0) {
-      console.log(`  SKIP ${docfxFile} (no local .mdx found)`);
-      skipped++;
-      continue;
-    }
-
-    const ancestorBody = splitFrontmatter(ancestorContent).body;
-    const theirsBody = splitFrontmatter(theirsContent).body;
-
-    if (ancestorBody === theirsBody) {
-      skipped++;
-      continue;
-    }
-
-    for (const localPath of localPaths) {
-      const oursContent = readFileSync(localPath, 'utf8');
-      const { head: oursHead, body: oursBody } = splitFrontmatter(oursContent);
-
-      // 3-way merge the bodies
-      const ancestorFile = join(tmpDir, 'ancestor.md');
-      const theirsFile = join(tmpDir, 'theirs.md');
-      const oursFile = join(tmpDir, 'ours.mdx');
-
-      writeFileSync(ancestorFile, ancestorBody);
-      writeFileSync(theirsFile, theirsBody);
-      writeFileSync(oursFile, oursBody);
-
-      const result = spawnSync('git', [
-        'merge-file',
-        '-L', 'ours',
-        '-L', 'ancestor',
-        '-L', 'theirs',
-        oursFile, ancestorFile, theirsFile
-      ], { encoding: 'utf8' });
-
-      let mergedBody;
-      if (result.status === 0) {
-        // Clean merge
-        mergedBody = readFileSync(oursFile, 'utf8');
-        cleanMerge++;
-      } else if (result.status > 0) {
-        // Conflicts - resolve by keeping theirs
-        const conflictedBody = readFileSync(oursFile, 'utf8');
-        mergedBody = resolveConflictsKeepTheirs(conflictedBody);
-        resolvedConflicts++;
-      } else {
-        console.log(`  ! ${localPath} (merge-file error)`);
-        continue;
-      }
-
-      // Apply MDX transforms to the merged body
-      const { body: transformedBody, needsDocsAside, needsSample, imageImports } = transformBody(mergedBody);
-
-      // Strip MDX import lines from merged body (they'll be in the header section)
-      // Only strip imports that are actual MDX component/asset imports, not code examples
-      const bodyLines = transformedBody.split('\n');
-      const bodyImports = [];
-      const bodyContent = [];
-      let pastImports = false;
-      for (const line of bodyLines) {
-        if (!pastImports && line.match(/^import .+from ['"](?:igniteui-astro|astro:|\.\.?\/)/)) {
-          bodyImports.push(line);
-        } else if (!pastImports && line.trim() === '') {
-          // Skip leading blank lines
-          continue;
-        } else {
-          pastImports = true;
-          bodyContent.push(line);
-        }
-      }
-      const cleanBody = bodyContent.join('\n');
-
-      // Collect existing imports from our file (only top-level MDX imports, not those in code blocks)
-      const oursBodyLines = oursBody.split('\n');
-      const existingTopImports = [];
-      for (const line of oursBodyLines) {
-        if (line.match(/^import /)) {
-          existingTopImports.push(line);
-        } else if (line.trim() === '') {
-          continue;
-        } else {
-          break;
-        }
-      }
-      const existingImportLines = [...new Set([...existingTopImports, ...bodyImports])];
-
-      // Determine which imports are needed
-      const importsNeeded = new Set(existingImportLines);
-
-      if (needsDocsAside && !existingImportLines.some(i => i.includes('DocsAside'))) {
-        importsNeeded.add(DOCS_ASIDE_IMPORT);
-      }
-      if (needsSample && !existingImportLines.some(i => i.includes('Sample'))) {
-        importsNeeded.add(SAMPLE_IMPORT);
-      }
-      if (imageImports.length > 0 && !existingImportLines.some(i => i.includes("'astro:assets'"))) {
-        importsNeeded.add(IMAGE_IMPORT);
-      }
-      for (const { varName, src } of imageImports) {
-        if (!existingImportLines.some(i => i.includes(varName))) {
-          importsNeeded.add(`import ${varName} from '${src}';`);
-        }
-      }
-
-      // Rebuild file
-      const uniqueImports = [...importsNeeded];
-      let finalContent;
-      if (uniqueImports.length > 0) {
-        finalContent = oursHead + '\n' + uniqueImports.join('\n') + '\n\n' + cleanBody;
-      } else {
-        finalContent = oursHead + '\n' + cleanBody;
-      }
-
-      writeFileSync(localPath, finalContent);
-      updated++;
-      process.stdout.write(`  ✓ ${localPath}\n`);
-    }
-  }
-} finally {
-  rmSync(tmpDir, { recursive: true, force: true });
-}
-
-console.log(`\nDone.`);
-console.log(`  Updated: ${updated}`);
-console.log(`  Clean merges: ${cleanMerge}`);
-console.log(`  Conflict resolutions (keep theirs): ${resolvedConflicts}`);
-console.log(`  Skipped: ${skipped}`);
diff --git a/src/content.config.ts b/src/content.config.ts
index b7b72b449e..1fc7dcdd96 100644
--- a/src/content.config.ts
+++ b/src/content.config.ts
@@ -10,9 +10,9 @@ export const collections = {
   docs: createDocsCollection(process.env.DOCS_SOURCE_PATH, {
     exclude: [
       'grids_templates/**',
-      'style-guide.md',
+      'style-guide.mdx',
       'themes/sass/presets/**',
-      'themes.md',
+      'themes.mdx',
     ],
     extendSchema: z.object({
       tableOfContents: z
diff --git a/src/plugins/remark-md-links.ts b/src/plugins/remark-md-links.ts
index 378900eb50..1320a7f783 100644
--- a/src/plugins/remark-md-links.ts
+++ b/src/plugins/remark-md-links.ts
@@ -1,24 +1,28 @@
 /**
- * Remark plugin: rewrite relative .md links to Astro-compatible URLs.
+ * Remark plugin: rewrite relative .mdx links to Astro-compatible URLs.
  *
- * Transforms `[label](./some-page.md)` or `[label](../folder/page.md#section)`
+ * Transforms `[label](./some-page.mdx)` or `[label](../folder/page.mdx#section)`
  * into root-relative URLs like `/products/.../some-page` (with DOCS_BASE prepended).
  *
+ * Convention: source files use `.mdx` extension in relative links (enables editor
+ * Go-to-Definition). This plugin strips the extension and makes the URL absolute
+ * so the rendered HTML uses clean extension-less paths.
+ *
  * Also prepends DOCS_BASE to bare root-relative internal links (e.g. `/grids/grid/...`)
  * that are already absolute but missing the site base path.
- * 
- * Respects trailing slash preference via DOCS_TRAILING_SLASH env var, which can be 'always', 'never', or 'ignore'.
- * By default both Angular and Xplat astro docs use trailing slash 'never'.
  *
- * Non-relative links (starting with http://, https://, /, #, or mailto:) and non-.md links are left unchanged.
+ * Respects trailing slash preference via DOCS_TRAILING_SLASH env var ('always', 'never', 'ignore').
+ * Both Angular and Xplat astro docs default to trailing slash 'never'.
+ *
+ * Non-relative links (http/https, /, #, mailto:) and links without .mdx are left unchanged.
  */
 
 import { visit } from 'unist-util-visit';
 import path from 'node:path';
 
 /**
- * Resolve a relative .md link to an absolute Astro URL.
- * Non-relative, non-.md, and external links are returned unchanged.
+ * Resolve a relative .mdx link to an absolute Astro URL.
+ * Non-relative, non-.mdx, and external links are returned unchanged.
  */
 function rewriteMdLink(url: string, filePath: string, docsDir: string): string {
   if (!url) return url;
@@ -30,15 +34,17 @@ function rewriteMdLink(url: string, filePath: string, docsDir: string): string {
   const hashIdx = url.indexOf('#');
   const qIdx = url.indexOf('?');
   const splitAt = hashIdx !== -1 ? hashIdx : qIdx !== -1 ? qIdx : -1;
-  let mdPath = splitAt !== -1 ? url.slice(0, splitAt) : url;
+  const mdPath = splitAt !== -1 ? url.slice(0, splitAt) : url;
   const suffix = splitAt !== -1 ? url.slice(splitAt) : '';
 
-  if (!mdPath.endsWith('.md')) return url;
+  if (!mdPath.endsWith('.mdx')) return url;
 
   const fileDir = path.dirname(filePath);
   const resolved = path.resolve(fileDir, mdPath);
   const rel = path.relative(docsDir, resolved).replace(/\\/g, '/');
-  const slug = rel.endsWith('.md') ? rel.slice(0, -3) : rel;
+  let slug = rel.slice(0, -4); // strip .mdx
+  // index.mdx files generate the parent folder URL (e.g. themes/index.mdx → themes)
+  if (slug.endsWith('/index')) slug = slug.slice(0, -6);
 
   const docsBase = (process.env.DOCS_BASE ?? '').replace(/\/$/, '');
   const trailingSlash = process.env.DOCS_TRAILING_SLASH ?? 'ignore';
@@ -46,7 +52,7 @@ function rewriteMdLink(url: string, filePath: string, docsDir: string): string {
   return docsBase + '/' + slug.toLowerCase() + trail + suffix;
 }
 
-/** Remark plugin that rewrites relative .md links, prepends DOCS_BASE, and fixes relative image paths. */
+/** Remark plugin that rewrites relative .mdx links, prepends DOCS_BASE, and fixes relative image paths. */
 export function remarkMdLinks() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return (tree: any, file: any) => {
diff --git a/src/sidebar.ts b/src/sidebar.ts
index 61a8dc8d63..23e042bab6 100644
--- a/src/sidebar.ts
+++ b/src/sidebar.ts
@@ -46,9 +46,8 @@ interface TocItem extends Partial<Record<SidebarBadgeVariant, boolean>> {
 function docExists(docsDir: string, href: string, exclude: RegExp[]): boolean {
     if (!href) return false;
     if (exclude?.some((p) => p.test(href))) return false;
-    // Check the href as-is, then also with .md ↔ .mdx swapped so that toc.json
-    // entries like "charts/chart-features.md" resolve even when the file on disk
-    // is "charts/chart-features.mdx" (and vice-versa).
+    // Check the href as-is, then also with .md ↔ .mdx swapped as a safety net
+    // (toc.json uses .mdx, but this guards against any stale .md hrefs).
     if (fs.existsSync(path.join(docsDir, href))) return true;
     const alt = href.endsWith('.mdx')
         ? href.slice(0, -4) + '.md'

From e2f4a41340dca3a5492f77e21440478dc3e35fd5 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 14 Jul 2026 11:06:22 +0000
Subject: [PATCH 21/30] jp-sync: update cross-topic link format in JP docs to
 match EN

Sync 81 Japanese documentation files with the link format updates
from commit 2dec5a0 (feat(): add relative link validation and update
cross-topic references).

The English docs were updated to use:
- Absolute root-relative paths (e.g. /general/getting-started) for
  cross-component links
- Relative paths with ./ prefix (e.g. ./icon.mdx) for same-directory links

This commit applies the equivalent transformations to the JP counterparts,
replacing old relative-path-with-.mdx-extension links with the updated
format used in EN.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 .../src/content/jp/components/accordion.mdx   |  4 +-
 .../content/jp/components/action-strip.mdx    |  2 +-
 .../ai/ai-assisted-development-overview.mdx   | 10 +--
 .../jp/components/ai/maker-framework.mdx      |  2 +-
 .../angular-reactive-form-validation.mdx      | 10 +--
 .../content/jp/components/autocomplete.mdx    | 10 +--
 .../src/content/jp/components/avatar.mdx      |  6 +-
 .../src/content/jp/components/badge.mdx       |  4 +-
 .../src/content/jp/components/banner.mdx      |  6 +-
 .../content/jp/components/button-group.mdx    |  4 +-
 .../src/content/jp/components/button.mdx      | 10 +--
 .../src/content/jp/components/calendar.mdx    |  4 +-
 .../src/content/jp/components/card.mdx        |  4 +-
 .../src/content/jp/components/carousel.mdx    |  8 +-
 .../src/content/jp/components/chat.mdx        |  2 +-
 .../src/content/jp/components/checkbox.mdx    |  4 +-
 .../src/content/jp/components/chip.mdx        |  6 +-
 .../jp/components/circular-progress.mdx       |  2 +-
 .../content/jp/components/combo-features.mdx  | 16 ++--
 .../content/jp/components/combo-remote.mdx    | 14 ++--
 .../content/jp/components/combo-templates.mdx | 12 +--
 .../src/content/jp/components/combo.mdx       | 36 ++++-----
 .../src/content/jp/components/date-picker.mdx | 32 ++++----
 .../jp/components/date-range-picker.mdx       | 28 +++----
 .../jp/components/date-time-editor.mdx        | 16 ++--
 .../src/content/jp/components/dialog.mdx      | 12 +--
 .../src/content/jp/components/divider.mdx     |  2 +-
 .../src/content/jp/components/drag-drop.mdx   |  2 +-
 .../drop-down-hierarchical-selection.mdx      |  8 +-
 .../jp/components/drop-down-virtual.mdx       |  2 +-
 .../src/content/jp/components/drop-down.mdx   |  2 +-
 .../content/jp/components/expansion-panel.mdx | 12 +--
 .../content/jp/components/exporter-csv.mdx    |  6 +-
 .../content/jp/components/exporter-excel.mdx  |  6 +-
 .../content/jp/components/exporter-pdf.mdx    |  2 +-
 .../src/content/jp/components/for-of.mdx      |  4 +-
 .../jp/components/general/cli-overview.mdx    |  2 +-
 .../components/general/cli/auth-template.mdx  |  2 +-
 ...etting-started-with-angular-schematics.mdx | 10 +--
 .../general/cli/getting-started-with-cli.mdx  | 14 ++--
 ...by-step-guide-using-angular-schematics.mdx |  4 +-
 .../cli/step-by-step-guide-using-cli.mdx      |  4 +-
 .../jp/components/general/getting-started.mdx | 14 ++--
 .../content/jp/components/grids-and-lists.mdx | 74 +++++++++----------
 .../src/content/jp/components/icon-button.mdx |  6 +-
 .../src/content/jp/components/icon.mdx        |  6 +-
 .../src/content/jp/components/input-group.mdx | 12 +--
 .../src/content/jp/components/label-input.mdx |  6 +-
 .../content/jp/components/linear-progress.mdx |  2 +-
 .../src/content/jp/components/list.mdx        | 14 ++--
 .../src/content/jp/components/mask.mdx        |  4 +-
 .../content/jp/components/month-picker.mdx    |  4 +-
 .../src/content/jp/components/navbar.mdx      |  8 +-
 .../src/content/jp/components/navdrawer.mdx   | 14 ++--
 .../jp/components/overlay-position.mdx        |  6 +-
 .../content/jp/components/overlay-scroll.mdx  |  6 +-
 .../content/jp/components/overlay-styling.mdx | 18 ++---
 .../src/content/jp/components/overlay.mdx     |  8 +-
 .../src/content/jp/components/paginator.mdx   | 12 +--
 .../content/jp/components/query-builder.mdx   |  6 +-
 .../content/jp/components/radio-button.mdx    |  6 +-
 .../src/content/jp/components/ripple.mdx      |  2 +-
 .../src/content/jp/components/select.mdx      |  8 +-
 .../content/jp/components/simple-combo.mdx    | 20 ++---
 .../src/content/jp/components/snackbar.mdx    |  6 +-
 .../src/content/jp/components/splitter.mdx    |  4 +-
 .../src/content/jp/components/stepper.mdx     |  8 +-
 .../src/content/jp/components/switch.mdx      |  4 +-
 .../src/content/jp/components/tabbar.mdx      |  6 +-
 .../src/content/jp/components/tabs.mdx        |  6 +-
 .../content/jp/components/texthighlight.mdx   |  6 +-
 .../components/themes/sass/global-themes.mdx  | 12 +--
 .../content/jp/components/tile-manager.mdx    |  2 +-
 .../src/content/jp/components/time-picker.mdx | 26 +++----
 .../src/content/jp/components/toast.mdx       |  6 +-
 .../src/content/jp/components/toggle.mdx      |  2 +-
 .../src/content/jp/components/tooltip.mdx     | 14 ++--
 .../jp/components/transaction-classes.mdx     | 28 +++----
 .../jp/components/transaction-how-to-use.mdx  |  4 +-
 .../src/content/jp/components/transaction.mdx | 18 ++---
 .../src/content/jp/components/tree.mdx        |  6 +-
 81 files changed, 380 insertions(+), 380 deletions(-)

diff --git a/docs/angular/src/content/jp/components/accordion.mdx b/docs/angular/src/content/jp/components/accordion.mdx
index ccbec7ba29..55ccd50022 100644
--- a/docs/angular/src/content/jp/components/accordion.mdx
+++ b/docs/angular/src/content/jp/components/accordion.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Accordion コンポーネントを初期化するには、
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxAccordionModule` をインポートします。
 
@@ -268,7 +268,7 @@ Ignite UI for Angular Accordion のキーボード ナビゲーションは、
 
 ## スタイル設定
 
-<ApiLink type="Accordion" label="Accordion" /> は、基になる<ApiLink type="ExpansionPanel" label="パネル" />のコンテナーとしてのみ機能します。スタイルは、[`IgxExpansionPanel トピックのスタイル設定セクション`](expansion-panel.mdx#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。
+<ApiLink type="Accordion" label="Accordion" /> は、基になる<ApiLink type="ExpansionPanel" label="パネル" />のコンテナーとしてのみ機能します。スタイルは、[`IgxExpansionPanel トピックのスタイル設定セクション`](/expansion-panel#スタイル設定)で説明されているように、パネルのテーマから直接適用できます。
 
 設計上、`igx-accordion` 内に配置される場合、展開されたパネルにマージンが設定されます。変更するために、igx-expansion-panel テーマ内で公開されるプロパティがあります。
 テーマ エンジンによって公開される関数を利用するには、スタイル ファイルに `index` ファイルをインポートする必要があります。
diff --git a/docs/angular/src/content/jp/components/action-strip.mdx b/docs/angular/src/content/jp/components/action-strip.mdx
index 2178d38569..e7c1a5dbbc 100644
--- a/docs/angular/src/content/jp/components/action-strip.mdx
+++ b/docs/angular/src/content/jp/components/action-strip.mdx
@@ -33,7 +33,7 @@ Ignite UI for Angular Action Strip コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxActionStripModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx b/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
index 5f7a3eb874..7d8eef7c28 100644
--- a/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
+++ b/docs/angular/src/content/jp/components/ai/ai-assisted-development-overview.mdx
@@ -34,7 +34,7 @@ CLI MCP サーバーと Theming MCP サーバーはどちらも `npx` を通じ
 
 Ignite UI は、Angular、React、Web Components、Blazor 向けの専用スキル パッケージを提供しています。スキル パッケージは開発者が管理するものであり、チームの規約に合わせて `SKILL.md` を編集したり、プロジェクト固有のパターンの追加や内部デザイン システムを参照するなどして、コードベースとともにパッケージをバージョン管理できます。
 
-完全なセットアップ手順と IDE の設定については、[エージェント スキル](skills.mdx)を参照してください。
+完全なセットアップ手順と IDE の設定については、[エージェント スキル](./skills.mdx)を参照してください。
 
 ## CLI MCP サーバー
 
@@ -62,7 +62,7 @@ npx -y igniteui-theming igniteui-theming-mcp
 
 Theming MCP サーバーは Angular、React、Web Components、Blazor をサポートしています。Ignite UI のリリースごとに更新されるため、エージェントは常に最新のトークン サーフェスに対して動作します。
 
-構成の詳細については、[Theming MCP](theming-mcp.mdx)を参照してください。
+構成の詳細については、[Theming MCP](./theming-mcp.mdx)を参照してください。
 
 ## サポートされている AI クライアント
 
@@ -87,7 +87,7 @@ Ignite UI AI ツールチェーンのセットアップには 3 つのステッ
 
 フレームワークの Ignite UI スキル パッケージをプロジェクトのエージェント検出パスにコピーします。スキル パッケージは `node_modules/igniteui-{framework}/skills/` のライブラリに付属しています。IDE との連携設定はクライアントに応じてその構成ファイルに保存してください。
 
-完全なセットアップについては、[エージェント スキル](skills.mdx)を参照してください。
+完全なセットアップについては、[エージェント スキル](./skills.mdx)を参照してください。
 
 ### ステップ 2 - CLI MCP サーバーを接続する
 
@@ -119,7 +119,7 @@ AI クライアントの構成ファイルに `igniteui-cli` MCP サーバー 
 }
 ```
 
-VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](cli-mcp.mdx)を参照してください。
+VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他の MCP 互換クライアントを含む完全なセットアップ ガイドについては、[CLI MCP](./cli-mcp.mdx)を参照してください。
 
 ### ステップ 3 - Theming MCP サーバーを接続する (オプション)
 
@@ -136,7 +136,7 @@ VS Code、GitHub、Cursor、Claude Desktop、Claude Code、JetBrains、その他
 }
 ```
 
-構成の詳細とテーマ ワークフローについては、[Theming MCP](theming-mcp.mdx)を参照してください。
+構成の詳細とテーマ ワークフローについては、[Theming MCP](./theming-mcp.mdx)を参照してください。
 
 ## その他のリソース
 
diff --git a/docs/angular/src/content/jp/components/ai/maker-framework.mdx b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
index 19959246f3..a1ff6a50f1 100644
--- a/docs/angular/src/content/jp/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
@@ -16,7 +16,7 @@ llms:
 
 MAKER Framework (`@igniteui/maker-mcp`) は、Infragistics が提供するマルチエージェント AI オーケストレーション MCP サーバーです。複数の AI エージェントにわたるコンセンサス ベースの投票アルゴリズムを使用して、複雑なタスクを検証済みで実行可能なステップ プランに分解します。MAKER は、Maximal Agentic decomposition (最大エージェント分解)、first-to-ahead-by-K Error correction (K ステップ先読みエラー修正)、Red-flagging (レッド フラギング) の頭文字を取ったものです。このフレームワークは、Cognizant AI Lab による研究論文 _Solving a million-step LLM task with zero errors_ に基づいています。`@igniteui` GitHub Packages レジストリから `npx` 経由で MCP サーバーとして実行され、STDIO トランスポートを通じて任意の MCP 互換 AI クライアントに接続します。接続すると、AI アシスタントは 3 つのツール (`plan`、`execute`、`plan_and_execute`) を呼び出して、自動エラー検出と修正を伴う長期タスクを実行できます。
 
-MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメント クエリには [CLI MCP サーバー](cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Web Components を特定のターゲットとせず、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
+MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメント クエリには [CLI MCP サーバー](./cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Web Components を特定のターゲットとせず、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
 
 ## MAKER の仕組み
 
diff --git a/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx b/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
index fc646371ba..9354b8c759 100644
--- a/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
+++ b/docs/angular/src/content/jp/components/angular-reactive-form-validation.mdx
@@ -185,11 +185,11 @@ export class MyComponent implements OnInit {
 
 関連トピック:
 
-- [Combo](combo.mdx)
-- [Select](select.mdx)
-- [Input Group](input-group.mdx)
-- [Date Picker](date-picker.mdx)
-- [Time Picker](time-picker.mdx)
+- [Combo](/combo)
+- [Select](/select)
+- [Input Group](/input-group)
+- [Date Picker](/date-picker)
+- [Time Picker](/time-picker)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/autocomplete.mdx b/docs/angular/src/content/jp/components/autocomplete.mdx
index a24f47526f..24fe843a00 100644
--- a/docs/angular/src/content/jp/components/autocomplete.mdx
+++ b/docs/angular/src/content/jp/components/autocomplete.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular の [Angular コンポーネント](https://jp.infragistic
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 はじめに、**app.module** で **IgxAutocompleteModule** と **IgxDropDownModule** をインポートします。<ApiLink type="AutocompleteDirective" label="igxAutocomplete" /> が <ApiLink type="InputDirective" label="igxInput" /> に適用される場合、**igxInputGroupModule** も必要です。
 
@@ -271,7 +271,7 @@ The `drop-down` component, used as provider for suggestions, will expose the fol
 
 `igxAutocomplete` のスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> と <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" /> を使用します。
 
-これら 2 つのコンポーネントのスタイル設定については、[`igxInputGroup`](input-group.mdx#スタイル設定) および [`igxDropdown`](drop-down.mdx#スタイル設定) のスタイル設定セクションを参照してください。
+これら 2 つのコンポーネントのスタイル設定については、[`igxInputGroup`](/input-group#スタイル設定) および [`igxDropdown`](/drop-down#スタイル設定) のスタイル設定セクションを参照してください。
 
 ## API リファレンス
 
@@ -290,9 +290,9 @@ The `drop-down` component, used as provider for suggestions, will expose the fol
 
 <hr/>
 
-- [IgxDropDown](drop-down.mdx)
-- [IgxInputGroup](input-group.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
+- [IgxDropDown](/drop-down#styling)
+- [IgxInputGroup](/input-group#styling)
+- [テンプレート駆動フォームの統合](/input-group#styling)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx
index b64b0526d8..dd2ca84643 100644
--- a/docs/angular/src/content/jp/components/avatar.mdx
+++ b/docs/angular/src/content/jp/components/avatar.mdx
@@ -33,7 +33,7 @@ Ignite UI for Angular Avatar コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxAvatarModule` をインポートします。
 
@@ -206,7 +206,7 @@ $custom-avatar-theme: avatar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `avatar` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -274,7 +274,7 @@ igx-avatar {
 }
 ```
 
-詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
+詳細については、[サイズ](/display-density)の記事をご覧ください。
 
 <hr/>
 
diff --git a/docs/angular/src/content/jp/components/badge.mdx b/docs/angular/src/content/jp/components/badge.mdx
index 7e7bcfe3d2..c3cbcb9792 100644
--- a/docs/angular/src/content/jp/components/badge.mdx
+++ b/docs/angular/src/content/jp/components/badge.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Badge コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBadgeModule` をインポートします。
 
@@ -393,7 +393,7 @@ $custom-badge-theme: badge-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `badge` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/banner.mdx b/docs/angular/src/content/jp/components/banner.mdx
index 391dcc6c43..65b7cf7288 100644
--- a/docs/angular/src/content/jp/components/banner.mdx
+++ b/docs/angular/src/content/jp/components/banner.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Banner コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBannerModule` をインポートします。
 
@@ -119,7 +119,7 @@ Banner コンポーネントを表示するには、ボタン クリックで <A
 
 ### アイコンの追加
 
-[`igx-icon`](icon.mdx) は、バナーのコンテンツに渡すことでバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。
+[`igx-icon`](./icon.mdx) は、バナーのコンテンツに渡すことでバナーに表示できます。Icon は常にバナー メッセージの最初に配置されます。
 
 <DocsAside type="info" title="情報">
 複数の `igx-icon` 要素がバナーの直接の子孫として挿入される場合、バナーはそれらすべてを最初に配置しようとします。`igx-icon` は 1 つのみ、直接渡すことに注意してください。
@@ -280,7 +280,7 @@ $custom-banner-theme: banner-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後にバナーのカスタム テーマを渡します。
diff --git a/docs/angular/src/content/jp/components/button-group.mdx b/docs/angular/src/content/jp/components/button-group.mdx
index 45e86ffc3c..b9b4d7b88d 100644
--- a/docs/angular/src/content/jp/components/button-group.mdx
+++ b/docs/angular/src/content/jp/components/button-group.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Button Group コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxButtonGroupModule` をインポートします。
 
@@ -311,7 +311,7 @@ $custom-button-group: button-group-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `button-group` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/button.mdx b/docs/angular/src/content/jp/components/button.mdx
index be0d42f963..a3a5cfe00d 100644
--- a/docs/angular/src/content/jp/components/button.mdx
+++ b/docs/angular/src/content/jp/components/button.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Button ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxButtonModule` をインポートします。
 
@@ -114,7 +114,7 @@ Contained ボタンを作成するには、`igxButton` プロパティの値を
 
 ### Icon ボタン
 
-バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](icon-button.mdx)を参照してください。
+バージョン `17.1.0` 以降、IgniteUI for Angular は、アイコンを完全に機能するボタンに変えることを目的とした新しい `igxIconButton` ディレクティブを公開します。_Icon Button_ の詳細については[こちら](/icon-button)を参照してください。
 
 ```html
 <button igxIconButton="flat">
@@ -662,12 +662,12 @@ contained タイプのボタンのスタイル設定に使用できるパラメ
 <Sample src="/data-entries/buttons-style" height={260} alt="" />
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Bootstrap Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
+サンプルでは、[Bootstrap Light](/themes/sass/schemas#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `button` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -760,7 +760,7 @@ button {
 }
 ```
 
-詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
+詳細については、[サイズ](/display-density)の記事をご覧ください。
 
 <hr/>
 
diff --git a/docs/angular/src/content/jp/components/calendar.mdx b/docs/angular/src/content/jp/components/calendar.mdx
index 0c90f7f257..fa7c05a1f3 100644
--- a/docs/angular/src/content/jp/components/calendar.mdx
+++ b/docs/angular/src/content/jp/components/calendar.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Calendar コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
@@ -682,7 +682,7 @@ $custom-calendar-theme: calendar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `calendar` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/card.mdx b/docs/angular/src/content/jp/components/card.mdx
index a89e3f5e49..a7ff1f8080 100644
--- a/docs/angular/src/content/jp/components/card.mdx
+++ b/docs/angular/src/content/jp/components/card.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Card コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCardModule` をインポートします。
 
@@ -380,7 +380,7 @@ $colorful-card: card-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `card` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/carousel.mdx b/docs/angular/src/content/jp/components/carousel.mdx
index 14cfd0d629..4cc079ab43 100644
--- a/docs/angular/src/content/jp/components/carousel.mdx
+++ b/docs/angular/src/content/jp/components/carousel.mdx
@@ -39,7 +39,7 @@ Ignite UI for Angular Carousel コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCarouselModule` をインポートします。
 
@@ -297,7 +297,7 @@ Angular カスタム カルーセル インジケーターを追加するには
 
 デフォルトでカルーセルはあらゆるタッチ対応デバイスに使用できます。これはオプションであり、<ApiLink type="Carousel" member="gesturesSupport" label="gesturesSupport" /> プロパティを `false` に設定して変更できます。
 
-Carousel [アニメーション](carousel.mdx#angular-carousel-のアニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
+Carousel [アニメーション](/carousel#angular-carousel-のアニメーション)はタッチ デバイスで完全にサポートされているため、プラットホームに合わせてプログレッシブ Web アプリケーション ([PWA](https://developer.mozilla.org/ja/docs/Web/Progressive_web_apps)) を構築するための完璧なツールです。
 
 ### キーボード ナビゲーション
 
@@ -336,7 +336,7 @@ Carousel [アニメーション](carousel.mdx#angular-carousel-のアニメー
 
 カルーセル テンプレートは以下のようになります。
 
-カルーセル構成の準備ができました。次に、[リスト](list.mdx) コンポーネントを追加して、両方のコンポーネントを同期します。
+カルーセル構成の準備ができました。次に、[リスト](/list) コンポーネントを追加して、両方のコンポーネントを同期します。
 
 ```html
 ...
@@ -609,7 +609,7 @@ The last step is to include the component's theme.
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `carousel` をスタイル設定できます。最初に必ず [Tailwind](themes/misc/tailwind-classes.mdx) を設定してください。
+カスタム Tailwind ユーティリティ クラスを使用して `carousel` をスタイル設定できます。最初に必ず [Tailwind](/themes/misc/tailwind-classes) を設定してください。
 
 グローバル スタイルシートに tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/chat.mdx b/docs/angular/src/content/jp/components/chat.mdx
index 158f8b27b4..49c10daabf 100644
--- a/docs/angular/src/content/jp/components/chat.mdx
+++ b/docs/angular/src/content/jp/components/chat.mdx
@@ -30,7 +30,7 @@ npm install igniteui-angular igniteui-webcomponents
 
 <ApiLink type="Chat" /> は Angular のバインディング (イベント、テンプレート、DI、変更検出、パイプ) を提供し、視覚的なチャット UI は Web Components によってレンダリングされます。両方をインストールすることで、Angular でネイティブに動作するチャットを実現しつつ、Web Components の完全な UI を活用できます。
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックををご覧ください。
 
 インストールが完了したら、プロジェクトにコンポーネントをインポートできます。
 
diff --git a/docs/angular/src/content/jp/components/checkbox.mdx b/docs/angular/src/content/jp/components/checkbox.mdx
index ad89ceed92..a1cc970826 100644
--- a/docs/angular/src/content/jp/components/checkbox.mdx
+++ b/docs/angular/src/content/jp/components/checkbox.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Checkbox コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxCheckboxModule` をインポートします。
 
@@ -281,7 +281,7 @@ $custom-checkbox-theme: checkbox-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `checkbox` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/chip.mdx b/docs/angular/src/content/jp/components/chip.mdx
index 75355bbbd9..a7c7859d5f 100644
--- a/docs/angular/src/content/jp/components/chip.mdx
+++ b/docs/angular/src/content/jp/components/chip.mdx
@@ -41,7 +41,7 @@ Ignite UI for Angular Chip コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに **IgxChipsModule** をインポートします。
 
@@ -562,7 +562,7 @@ $custom-chip-theme: chip-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して chip  をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して chip  をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -633,7 +633,7 @@ igx-chip {
 }
 ```
 
-詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
+詳細については、[サイズ](/display-density)の記事をご覧ください。
 
 ## API
 
diff --git a/docs/angular/src/content/jp/components/circular-progress.mdx b/docs/angular/src/content/jp/components/circular-progress.mdx
index d3d5bbc8b1..c09ddfd34b 100644
--- a/docs/angular/src/content/jp/components/circular-progress.mdx
+++ b/docs/angular/src/content/jp/components/circular-progress.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Circular Progress コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxProgressBarModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/combo-features.mdx b/docs/angular/src/content/jp/components/combo-features.mdx
index b7ed212baf..bace3d78b7 100644
--- a/docs/angular/src/content/jp/components/combo-features.mdx
+++ b/docs/angular/src/content/jp/components/combo-features.mdx
@@ -112,7 +112,7 @@ export class ComboDemo implements OnInit {
 `displayKey` プロパティが省略された場合、`valueKey` エンティティが項目テキストとして使用されます。
 </DocsAside>
 
-コンボボックス コンポーネントをリモート データにバインドする方法の詳細は、[コンボボックス リモート バインディング](combo-remote.mdx)を参照してください。
+コンボボックス コンポーネントをリモート データにバインドする方法の詳細は、[コンボボックス リモート バインディング](/combo-remote)を参照してください。
 
 ### カスタム オーバーレイ設定
 
@@ -137,7 +137,7 @@ export class CustomOverlayCombo {
 <igx-combo [data]="items" [overlaySettings]="customSettings"></igx-combo>
 ```
 
-すべてが適切に設定されると、[GlobalPositionStrategy](overlay-position.mdx#グローバル) を使用してコンボボックスのリストが中央に表示されます。
+すべてが適切に設定されると、[GlobalPositionStrategy](/overlay-position#グローバル) を使用してコンボボックスのリストが中央に表示されます。
 
 <Sample src="/lists/combo-overlay" height={440} alt="" />
 
@@ -232,12 +232,12 @@ export class ComboDemo {
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.mdx)
-- [コンボボックス リモート バインディング](combo-remote.mdx)
-- [コンボボックス テンプレート](combo-templates.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
-- [単一選コンボボックス](simple-combo.mdx)
+- [コンボボックス コンポーネント](/combo)
+- [コンボボックス リモート バインディング](/combo-remote)
+- [コンボボックス テンプレート](/combo-templates)
+- [テンプレート駆動フォームの統合](/input-group)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
+- [単一選コンボボックス](/simple-combo)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo-remote.mdx b/docs/angular/src/content/jp/components/combo-remote.mdx
index 0f23c43f98..9450d5b8f8 100644
--- a/docs/angular/src/content/jp/components/combo-remote.mdx
+++ b/docs/angular/src/content/jp/components/combo-remote.mdx
@@ -224,7 +224,7 @@ export class ComboRemoteComponent implements OnInit {
 
 ### 選択の処理
 
-より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、`valueKey` を定義する必要があります。[コンボボックス トピック](combo.mdx#データ値と表示プロパティ)で述べたように、`valueKey` が指定されていない場合、コンボボックスは選択を `equality (===)` で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。
+より複雑なデータ型 (オブジェクトなど) を扱うチャンクでロードされたリモート データにバインドされたコンボボックスを使用する場合、`valueKey` を定義する必要があります。[コンボボックス トピック](/combo#データ値と表示プロパティ)で述べたように、`valueKey` が指定されていない場合、コンボボックスは選択を `equality (===)` で処理しようとします。選択済みとしてマークされるオブジェクトは、継続的にロードされるオブジェクトと同じではないため、選択は失敗します。
 
 <DocsAside type="info" title="情報">
 コンボボックスをリモートデータにバインドするときは、各項目に固有のプロパティを表す `valueKey` を指定してください。
@@ -243,12 +243,12 @@ export class ComboRemoteComponent implements OnInit {
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.mdx)
-- [コンボボックス機能](combo-features.mdx)
-- [コンボボックス テンプレート](combo-templates.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
-- [単一選択コンボボックス](simple-combo.mdx)
+- [コンボボックス コンポーネント](/combo#data-value-and-display-properties)
+- [コンボボックス機能](/combo-features)
+- [コンボボックス テンプレート](/combo-templates)
+- [テンプレート駆動フォームの統合](/input-group)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
+- [単一選択コンボボックス](/simple-combo)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo-templates.mdx b/docs/angular/src/content/jp/components/combo-templates.mdx
index 18bc1d85e2..6cb70c245b 100644
--- a/docs/angular/src/content/jp/components/combo-templates.mdx
+++ b/docs/angular/src/content/jp/components/combo-templates.mdx
@@ -172,12 +172,12 @@ export class AppModule {}
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo.mdx)
-- [コンボボックス機能](combo-features.mdx)
-- [コンボボックス リモート バインディング](combo-remote.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
-- [単一選択コンボボックス](simple-combo.mdx)
+- [コンボボックス コンポーネント](/combo)
+- [コンボボックス機能](/combo-features)
+- [コンボボックス リモート バインディング](/combo-remote)
+- [テンプレート駆動フォームの統合](/input-group)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
+- [単一選択コンボボックス](/simple-combo)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/combo.mdx b/docs/angular/src/content/jp/components/combo.mdx
index 07e3231221..ff69547b1f 100644
--- a/docs/angular/src/content/jp/components/combo.mdx
+++ b/docs/angular/src/content/jp/components/combo.mdx
@@ -27,13 +27,13 @@ Angular ComboBox コンポーネントは、編集可能な機能を提供する
 ## Angular ComboBox 機能
 
 コンボボックス コントロールは以下の機能を公開します。
-- データ バインディング- ローカル データおよび[リモート データ](combo-remote.mdx)
-- [値バインディング](combo-features.mdx#データ-バインディング)
-- [フィルタリング](combo-features.mdx#フィルタリング)
-- [グループ化](combo-features.mdx#グループ化)
-- [カスタム値](combo-features.mdx#カスタム値)
-- [テンプレート](combo-templates.mdx)
-- [テンプレート駆動フォーム](input-group.mdx)および[リアクティブ フォーム](angular-reactive-form-validation.mdx)との統合
+- データ バインディング- ローカル データおよび[リモート データ](/combo-remote)
+- [値バインディング](/combo-features#データ-バインディング)
+- [フィルタリング](/combo-features#フィルタリング)
+- [グループ化](/combo-features#グループ化)
+- [カスタム値](/combo-features#カスタム値)
+- [テンプレート](/combo-templates)
+- [テンプレート駆動フォーム](/input-group)および[リアクティブ フォーム](/angular-reactive-form-validation)との統合
 
 - Data Binding - local data and [remote data](/combo-remote)
 - [Value Binding](/combo-features#data-binding)
@@ -51,7 +51,7 @@ Ignite UI for Angular ComboBox コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxComboModule` をインポートします。
 
@@ -270,7 +270,7 @@ public singleSelection(event: IComboSelectionChangingEventArgs) {
 }
 ```
 
-> 注: igxCombo を変更する代わりに、[igxSimpleCombo](simple-combo.mdx) を使用することをお勧めします (上記を参照)。
+> 注: igxCombo を変更する代わりに、[igxSimpleCombo](/simple-combo) を使用することをお勧めします (上記を参照)。
 
 <hr/>
 
@@ -384,7 +384,7 @@ $custom-checkbox-theme: checkbox-theme(
 ```
 
 <DocsAside type="info" title="情報">
-<ApiLink type="Combo" /> は、[`IgxOverlay`](overlay.mdx) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.mdx)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
+<ApiLink type="Combo" /> は、[`IgxOverlay`](/overlay) サービスを使用して、コンボボックス項目のリスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](/overlay-styling)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
 </DocsAside>
 
 ### デモ
@@ -395,7 +395,7 @@ $custom-checkbox-theme: checkbox-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `combo` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -438,7 +438,7 @@ class="!light-combo
 - コンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。
 
 <DocsAside type="info" title="情報">
-コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](for-of.mdx#既知の制限)セクションを参照してください。
+コンボボックスは内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` の制限がコンボボックスで有効です。詳細については、[`igxForOf 既知の制限`](/for-of#既知の制限)セクションを参照してください。
 </DocsAside>
 
 ## API リファレンス
@@ -465,12 +465,12 @@ class="!light-combo
 
 <hr/>
 
-- [コンボボックス機能](combo-features.mdx)
-- [コンボボックス リモート バインディング](combo-remote.mdx)
-- [コンボボックス テンプレート](combo-templates.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
-- [単一選択コンボボックス](simple-combo.mdx)
+- [コンボボックス機能](/combo-features#data-binding)
+- [コンボボックス リモート バインディング](/combo-remote)
+- [コンボボックス テンプレート](/combo-templates)
+- [テンプレート駆動フォームの統合](/input-group)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
+- [単一選択コンボボックス](/simple-combo)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/date-picker.mdx b/docs/angular/src/content/jp/components/date-picker.mdx
index d66700a6b5..face645478 100644
--- a/docs/angular/src/content/jp/components/date-picker.mdx
+++ b/docs/angular/src/content/jp/components/date-picker.mdx
@@ -35,7 +35,7 @@ Ignite UI for Angular Date Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDatePickerModule` をインポートします。
 
@@ -112,7 +112,7 @@ public date = new Date(2000, 0, 1);
 <igx-date-picker [value]="'2000-01-01'"></igx-date-picker>
 ```
 
-これについての詳細は、[DateTime Editor の ISO セクション](date-time-editor.mdx#iso)にあります。
+これについての詳細は、[DateTime Editor の ISO セクション](/date-time-editor#iso)にあります。
 
 `ngModel` を介して双方向バインディングが可能です:
 
@@ -152,7 +152,7 @@ export class SampleFormComponent {
 
 ### コンポーネントの投影
 
-<ApiLink type="DatePicker" /> は、<ApiLink type="InputDirective" /> を除く <ApiLink type="InputGroup" /> がサポートする子コンポーネントの投影を許可します。それは、[`igxLabel`](label-input.mdx)、[`igx-hint / IgxHint`](input-group.mdx#hint)、[`igx-prefix / igxPrefix`](input-group.mdx#prefix-および-suffix)、[`igx-suffix / igxSuffix`](input-group.mdx#prefix-および-suffix) です。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
+<ApiLink type="DatePicker" /> は、<ApiLink type="InputDirective" /> を除く <ApiLink type="InputGroup" /> がサポートする子コンポーネントの投影を許可します。それは、[`igxLabel`](/label-input)、[`igx-hint / IgxHint`](/input-group#hint)、[`igx-prefix / igxPrefix`](/input-group#prefix-および-suffix)、[`igx-suffix / igxSuffix`](/input-group#prefix-および-suffix) です。詳細については、[Label および Input](/label-input) トピックを参照してください。
 
 ```html
 <igx-date-picker #datePicker>
@@ -187,7 +187,7 @@ export class SampleFormComponent {
 ピッカーのアクション ボタンは、次の 2 つの方法で変更できます:
 - ボタンのテキストは、<ApiLink type="DatePicker" member="todayButtonLabel" label="todayButtonLabel" /> と <ApiLink type="DatePicker" member="cancelButtonLabel" label="cancelButtonLabel" /> 入力プロパティを使用して変更できます:
 
-- ボタン全体は、<ApiLink type="PickerActionsDirective" /> ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの [`calendar`](calendar.mdx) とそのすべてのメンバーにアクセスできます。
+- ボタン全体は、<ApiLink type="PickerActionsDirective" /> ディレクティブを使用してテンプレート化できます。これを使用すると、日付ピッカーの [`calendar`](/calendar) とそのすべてのメンバーにアクセスできます。
 
 ```html
 <igx-date-picker [todayButtonLabel]="'今日'" [cancelButtonLabel]="'キャンセル'"></igx-date-picker>
@@ -216,7 +216,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 | <kbd>Enter</kbd> | カレンダーのポップアップを閉じ、フォーカスされた日付を選択して、フォーカスを入力フィールドに移動します。 |
 | <kbd>Alt</kbd> + <kbd>&uarr;</kbd> | カレンダーのポップアップを閉じて、入力フィールドにフォーカを合わせます。 |
 
-<ApiLink type="DatePicker" /> は [`IgxDateTimeEditorDirective`](date-time-editor.mdx) を使用するため、キーボード ナビゲーションを継承します。
+<ApiLink type="DatePicker" /> は [`IgxDateTimeEditorDirective`](/date-time-editor#iso) を使用するため、キーボード ナビゲーションを継承します。
 
 ## コード例
 
@@ -241,7 +241,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 一方、<ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> は Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用し、フォーカスされていないときにピッカーの入力を書式設定するために使用されます。<ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> が指定されていない場合、ピッカーは <ApiLink type="DatePicker" member="inputFormat" label="inputFormat" /> を <ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> として使用します。
 あるいは、<ApiLink type="DatePicker" member="inputFormat" label="inputFormat" /> プロパティが設定されていない場合、入力形式は <ApiLink type="DatePicker" member="displayFormat" label="displayFormat" /> から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。
 
-これらの詳細については、[`IgxDateTimeEditor`](date-time-editor.mdx#例) の例のセクションを参照してください。
+これらの詳細については、[`IgxDateTimeEditor`](/date-time-editor#例) の例のセクションを参照してください。
 
 <Sample src="/scheduling/datepicker-sample-3" height={680} alt="" />
 
@@ -253,7 +253,7 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 
 ### 増加および減少
 
-<ApiLink type="DatePicker" /> は、<ApiLink type="DatePicker" member="increment" label="increment" /> メソッドと <ApiLink type="DatePicker" member="decrement" label="decrement" /> メソッドを公開します。どちらも [`IgxDateTimeEditorDirective`](date-time-editor.mdx#increment-decrement) から取得され、現在設定されている日付の特定の <ApiLink type="DatePart" kind="enum" /> を増加および減少するために使用できます。
+<ApiLink type="DatePicker" /> は、<ApiLink type="DatePicker" member="increment" label="increment" /> メソッドと <ApiLink type="DatePicker" member="decrement" label="decrement" /> メソッドを公開します。どちらも [`IgxDateTimeEditorDirective`](/date-time-editor#increment-decrement) から取得され、現在設定されている日付の特定の <ApiLink type="DatePart" kind="enum" /> を増加および減少するために使用できます。
 
 ```html
 <igx-date-picker #datePicker>
@@ -272,11 +272,11 @@ With it you gain access to the date picker's [`calendar`](/calendar) and all of
 
 <ApiLink type="DatePicker" /> は、コア [FormsModule](https://angular.io/api/forms/FormsModule)、[NgModel](https://angular.io/api/forms/NgModel)、および [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) ([`FormControl`](https://angular.io/api/forms/FormControl)、[`FormGroup`](https://angular.io/api/forms/FormGroup) など) からのすべてのディレクティブをサポートします。これには、[フォーム バリデータ](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの <ApiLink type="DatePicker" member="minValue" label="minValue" /> プロパティと <ApiLink type="DatePicker" member="maxValue" label="maxValue" /> プロパティはフォーム バリデータとして機能します。
 
-[リアクティブ フォームの統合](angular-reactive-form-validation.mdx)トピックにアクセスすると、<ApiLink type="DatePicker" /> をリアクティブ フォームで確認できます。
+[リアクティブ フォームの統合](/angular-reactive-form-validation)トピックにアクセスすると、<ApiLink type="DatePicker" /> をリアクティブ フォームで確認できます。
 
 #### 日付ピッカーとタイム ピッカーを併用する
 
-IgxDatePicker と [`IgxTimePicker`](time-picker.mdx) を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
+IgxDatePicker と [`IgxTimePicker`](/time-picker) を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
 
 テンプレート駆動フォームでこれを実現するには、`ngModel` を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。
 
@@ -292,11 +292,11 @@ IgxDatePicker と [`IgxTimePicker`](time-picker.mdx) を一緒に使用する場
 
 ### カレンダー固有の設定
 
-<ApiLink type="DatePicker" /> は [`IgxCalendarComponent`](calendar.mdx) を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる <ApiLink type="DatePicker" member="displayMonthsCount" label="displayMonthsCount" />、週の開始日を決定する <ApiLink type="DatePicker" member="weekStart" label="weekStart" />、年の各週の番号を表示する <ApiLink type="DatePicker" member="showWeekNumbers" label="showWeekNumbers" /> などが含まれます。
+<ApiLink type="DatePicker" /> は [`IgxCalendarComponent`](/calendar) を使用し、日付ピッカーが公開するプロパティを介してその設定の一部を変更できます。これらの一部には、ピッカーが展開されたときに複数のカレンダーを表示できる <ApiLink type="DatePicker" member="displayMonthsCount" label="displayMonthsCount" />、週の開始日を決定する <ApiLink type="DatePicker" member="weekStart" label="weekStart" />、年の各週の番号を表示する <ApiLink type="DatePicker" member="showWeekNumbers" label="showWeekNumbers" /> などが含まれます。
 
 ## インターナショナリゼーション
 
-<ApiLink type="DatePicker" /> のローカライズは、<ApiLink type="DatePicker" member="locale" label="locale" /> 入力で制御できます。さらに、<ApiLink type="Calendar" /> によって提供される `igxCalendarHeader` と `igxCalendarSubheader` テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、[**IgxCalendarComponent**](calendar.mdx) トピックを参照してください。
+<ApiLink type="DatePicker" /> のローカライズは、<ApiLink type="DatePicker" member="locale" label="locale" /> 入力で制御できます。さらに、<ApiLink type="Calendar" /> によって提供される `igxCalendarHeader` と `igxCalendarSubheader` テンプレートを使用して、ヘッダーとサブヘッダーの外観を指定できます。このテンプレートを使用する方法の詳細については、[**IgxCalendarComponent**](/calendar) トピックを参照してください。
 
 以下は日本ロケール定義を持つ Angular Date Picker です。
 
@@ -340,7 +340,7 @@ $custom-datepicker-theme: calendar-theme(
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -377,10 +377,10 @@ $custom-datepicker-theme: calendar-theme(
 
 ## その他のリソース
 
-- [Time Picker](time-picker.mdx)
-- [Date Time Editor](date-time-editor.mdx)
-- [Date Range Picker](date-range-picker.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [Time Picker](/time-picker)
+- [Date Time Editor](/date-time-editor#iso)
+- [Date Range Picker](/date-range-picker)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/date-range-picker.mdx b/docs/angular/src/content/jp/components/date-range-picker.mdx
index abeec87b73..7320c5d9d7 100644
--- a/docs/angular/src/content/jp/components/date-range-picker.mdx
+++ b/docs/angular/src/content/jp/components/date-range-picker.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular <ApiLink type="DateRangePicker" /> を使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックををご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDateRangePickerModule` をインポートします。
 
@@ -123,8 +123,8 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 このコンポーネントはマテリアル アイコンを使用します。`index.html` に次のリンクを追加してください: `<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">`
 </DocsAside>
 
-- <ApiLink type="DateRangeStart" /> と <ApiLink type="DateRangeEnd" /> は、既存の [`IgxInputGroupComponent`](input-group.mdx) を拡張します。このような構成を操作するには、<ApiLink type="InputDirective" /> に定義する必要があります。さらに、[`IgxInputGroupComponent`](input-group.mdx) で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。
-- 両方のインプットで日付編集を有効にするには、[`igxDateTimeEditor`](date-time-editor.mdx) ディレクティブでデコレートする必要があります。
+- <ApiLink type="DateRangeStart" /> と <ApiLink type="DateRangeEnd" /> は、既存の [`IgxInputGroupComponent`](/input-group#hints) を拡張します。このような構成を操作するには、<ApiLink type="InputDirective" /> に定義する必要があります。さらに、[`IgxInputGroupComponent`](/input-group#hints) で利用可能なすべての他のコンポーネントおよびディレクティブも使用できます。
+- 両方のインプットで日付編集を有効にするには、[`igxDateTimeEditor`](/date-time-editor) ディレクティブでデコレートする必要があります。
 
 <Sample src="/scheduling/daterangepicker-start-end" height={600} alt="" />
 
@@ -171,7 +171,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 | <kbd>Alt + 下矢印</kbd> | カレンダーのドロップダウンを開きます |
 | <kbd>Alt + 上矢印</kbd> | カレンダーのドロップダウンを閉じます |
 
-[カレンダーのキーボード ナビゲーションセクション](calendar.mdx#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。
+[カレンダーのキーボード ナビゲーションセクション](/calendar#キーボード-ナビゲーション)には、カレンダーで使用できるすべてのキーボードの組み合わせが含まれています。
 
 <hr/>
 
@@ -179,7 +179,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 
 ### コンポーネントの投影
 
-デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します (<ApiLink type="InputGroup" />と同じです): [`igxLabel`](label-input.mdx)、[`igx-hint / igxHint`](input-group.mdx#hints)、[`igx-prefix / igxPrefix`](input-group.mdx#prefix--suffix)、[`igx-suffix / igxSuffix`](input-group.mdx#prefix--suffix) (<ApiLink type="InputDirective" /> を除く)。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
+デフォルトの Date Range Picker UX の機能向上のため、コンポーネントは子コンポーネントの投影を許可します (<ApiLink type="InputGroup" />と同じです): [`igxLabel`](/label-input)、[`igx-hint / igxHint`](/input-group#hints)、[`igx-prefix / igxPrefix`](/input-group#prefix--suffix)、[`igx-suffix / igxSuffix`](/input-group#prefix--suffix) (<ApiLink type="InputDirective" /> を除く)。詳細については、[Label および Input](/label-input) トピックを参照してください。
 
 ```html
 <igx-date-range-picker #dateRangePicker [(ngModel)]="range">
@@ -212,7 +212,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 
 #### アイコンの切り替えとクリア
 
-デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、<ApiLink type="PickerToggle" /> および <ApiLink type="PickerClear" /> を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する [`igxPrefix`](input-group.mdx#prefix-および-suffix) または [`igxSuffix`](input-group.mdx#prefix-および-suffix) で設定できます。
+デフォルト設定では、シングル インプット (読み取り専用) の場合、プレフィックスにデフォルトのカレンダー アイコンが表示され、サフィックスにはクリア アイコンが表示されます。これらのアイコンは、<ApiLink type="PickerToggle" /> および <ApiLink type="PickerClear" /> を使用して変更または再定義できます。インプットの開始位置または終了位置を定義する [`igxPrefix`](/input-group#prefix-および-suffix) または [`igxSuffix`](/input-group#prefix-および-suffix) で設定できます。
 
 ```html
 <igx-date-range-picker>
@@ -415,7 +415,7 @@ export class DateRangeSampleComponent implements OnInit {
 }
 ```
 
-<ApiLink type="DateRangePicker" member="disabledDates" label="disabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [カレンダーの無効日](calendar.mdx#angular-calendar-で日付を無効にする方法)。
+<ApiLink type="DateRangePicker" member="disabledDates" label="disabledDates" /> プロパティが提供するすべての可能性に関する詳細情報は、以下で確認できます: [カレンダーの無効日](/calendar#angular-calendar-で日付を無効にする方法)。
 
 同様に、カレンダーに 1 日または複数の日付を特別な日付として設定したい場合も可能です。この場合は <ApiLink type="DateRangePicker" member="specialDates" label="specialDates" /> プロパティを使用します。[特別な日付](./calendar.mdx#特別な日付)
 
@@ -437,7 +437,7 @@ export class DateRangeSampleComponent implements OnInit {
 
 ### カレンダー固有の設定
 
-さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、[**IgxCalendarComponent**](calendar.mdx) のトピックをご覧ください。
+さまざまなプロパティを使用して、ポップアップ カレンダーをさらにカスタマイズできます。これらのプロパティがカレンダーにどのような影響を与えるかについては、[**IgxCalendarComponent**](/calendar#keyboard-navigation) のトピックをご覧ください。
 
 |名前|タイプ|説明|
 |--|--|--|
@@ -538,7 +538,7 @@ $custom-calendar-theme: calendar-theme(
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -553,7 +553,7 @@ $custom-calendar-theme: calendar-theme(
 
 ### スタイルのスコーピング
 
-スタイルのスコーピングについては、詳細は[オーバーレイのスコープ コンポーネント スタイル](overlay-styling.mdx#スコープ-コンポーネント-スタイル)および[入力グループのスタイル スコーピング](input-group.mdx#スタイル設定)の両方のスタイル設定セクションを参照してください。
+スタイルのスコーピングについては、詳細は[オーバーレイのスコープ コンポーネント スタイル](/overlay-styling#スコープ-コンポーネント-スタイル)および[入力グループのスタイル スコーピング](/input-group#スタイル設定)の両方のスタイル設定セクションを参照してください。
 
 <Sample src="/scheduling/styled-daterangepicker" height={600} alt="" />
 
@@ -587,10 +587,10 @@ $custom-calendar-theme: calendar-theme(
 ## その他のリソース
 
 関連トピック:
-- [Date Time Editor](date-time-editor.mdx)
-- [Label および Input](label-input.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
-- [Date Picker](date-picker.mdx)
+- [Date Time Editor](/date-time-editor)
+- [Label および Input](/label-input)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
+- [Date Picker](/date-picker)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/date-time-editor.mdx b/docs/angular/src/content/jp/components/date-time-editor.mdx
index ca6fef8d3a..387878d941 100644
--- a/docs/angular/src/content/jp/components/date-time-editor.mdx
+++ b/docs/angular/src/content/jp/components/date-time-editor.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Date Time Editor ディレクティブを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDateTimeEditorModule` をインポートします。
 
@@ -80,7 +80,7 @@ Ignite UI for Angular Date Time Editor モジュールまたはディレクテ
 
 ## Ignite UI for Angular Date Time Editor ディレクティブの使用
 
-input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](input-group.mdx) にラップします。これにより、<ApiLink type="InputDirective" label="igxInput" />、[`igxLabel`](label-input.mdx)、[`igx-prefix`](input-group.mdx#prefix-および-suffix)、[`igx-suffix`](input-group.mdx#prefix-および-suffix)、[`igx-hint`](input-group.mdx#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。
+input 要素を日付/時刻エディターとして使用するには、igxDateTimeEditor ディレクティブと有効なdateオブジェクトを値として設定します。エディターの外観を完全にするには、入力要素を [igx-input-group](/input-group) にラップします。これにより、<ApiLink type="InputDirective" label="igxInput" />、[`igxLabel`](/label-input)、[`igx-prefix`](/input-group#prefix-および-suffix)、[`igx-suffix`](/input-group#prefix-および-suffix)、[`igx-hint`](/input-group#hint) ディレクティブを利用できるだけでなく、フォーム入力を扱うときの一般的なシナリオに対処できます。
 
 ### バインディング
 
@@ -145,7 +145,7 @@ Date Time Editor ディレクティブには直感的なキーボード ナビ
 Angular の [`DatePipe`](https://angular.io/api/common/DatePipe) を使用しており、`shortDate` や `longDate` などの事前定義された形式オプションをサポートできます。また、`DatePipe` でサポートされている文字を使用して構築されたフォーマット文字列を受け入れることもできます。例えば、`EE/MM/yyyy` です。`shortDate`、`longDate` などの形式は、<ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> としてのみ使用できることに注意してください。また、<ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> が指定されていない場合、エディターは <ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> を <ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> として使用します。
 あるいは、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> プロパティが設定されていない場合、入力形式は <ApiLink type="DateTimeEditorDirective" member="displayFormat" label="displayFormat" /> から数値の日付と時刻の部分のみを含む形式として解析できる場合に推測されます。
 
-特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](mask.mdx)の両方が設定されます。さらに、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
+特定の入力形式を設定するには、文字列として IgxDateTimeEditor ディレクティブに渡します。これにより、予期されるユーザー入力形式とエディターの[マスク](/mask)の両方が設定されます。さらに、<ApiLink type="DateTimeEditorDirective" member="inputFormat" label="inputFormat" /> はロケール ベースであるため、何も指定されていない場合、ピッカーはデフォルトでブラウザーで使用されるものになります。
 
 ```html
 <igx-input-group>
@@ -228,7 +228,7 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 
 ### テキスト選択
 
-<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.mdx#フォーカスとテキストの選択) で <ApiLink type="TextSelectionDirective" /> の詳細情報を参照してください。
+<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](/label-input#フォーカスとテキストの選択) で <ApiLink type="TextSelectionDirective" /> の詳細情報を参照してください。
 
 ```html
 <igx-input-group>
@@ -242,7 +242,7 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 
 ## スタイル設定
 
-詳細については、[`Input Group スタイル ガイド`](input-group.mdx#スタイル設定)を参照してください。
+詳細については、[`Input Group スタイル ガイド`](/input-group#スタイル設定)を参照してください。
 
 ## API リファレンス
 
@@ -257,9 +257,9 @@ Date Time Editor ディレクティブは、コア FormsModule [`NgModel`](https
 ## その他のリソース
 
 関連トピック:
-- [Mask](mask.mdx)
-- [Label および Input](label-input.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [Mask](/mask)
+- [Label および Input](/label-input)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/dialog.mdx b/docs/angular/src/content/jp/components/dialog.mdx
index b8abc0d6a8..aee2c5d934 100644
--- a/docs/angular/src/content/jp/components/dialog.mdx
+++ b/docs/angular/src/content/jp/components/dialog.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Dialog Window コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDialogModule` をインポートします。
 
@@ -136,7 +136,7 @@ Ignite UI for Angular Dialog Window モジュールまたはディレクティ
 ### カスタム ダイアログ
 
 カスタム ダイアログを作成するには、サインイン コンポーネントのテンプレートに以下のコードを追加します。ダイアログのタイトル領域は `igxDialogTitle` ディレクティブまたは `igx-dialog-title` セレクターを使ってカスタマイズできます。アクション領域は `igxDialogActions` ディレクティブまたは `igx-dialog-actions` セレクターを使ってカスタマイズできます。
-[**igxLabel**](input-group.mdx) および [**igxInput**](input-group.mdx) ディレクティブで装飾された label と input を含む 2 つの入力グループを追加します。
+[**igxLabel**](/input-group) および [**igxInput**](/input-group) ディレクティブで装飾された label と input を含む 2 つの入力グループを追加します。
 
 ```html
 <!--sign-in.component.html-->
@@ -288,7 +288,7 @@ $my-dialog-theme: dialog-theme(
 ```
 
 <DocsAside type="info" title="情報">
-ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
 ```scss
@@ -298,7 +298,7 @@ $custom-button: contained-button-theme(
 );
 ```
 
-ダイアログウィンドウは [`IgxOverlayService`](overlay.mdx) を使用するため、カスタム テーマがスタイルを設定するダイアログ ウィンドウに届くように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+ダイアログウィンドウは [`IgxOverlayService`](/overlay) を使用するため、カスタム テーマがスタイルを設定するダイアログ ウィンドウに届くように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 ```html
 <div igxOverlayOutlet>
@@ -309,7 +309,7 @@ $custom-button: contained-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-[`IgxOverlayService`](overlay.mdx) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.mdx)をご覧ください。
+[`IgxOverlayService`](/overlay) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](/overlay-styling)をご覧ください。
 </DocsAside>
 
 ### テーマを含む
@@ -325,7 +325,7 @@ $custom-button: contained-button-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/components/divider.mdx b/docs/angular/src/content/jp/components/divider.mdx
index f397f2e58f..a300be2573 100644
--- a/docs/angular/src/content/jp/components/divider.mdx
+++ b/docs/angular/src/content/jp/components/divider.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular Divider コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDividerModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/drag-drop.mdx b/docs/angular/src/content/jp/components/drag-drop.mdx
index 2c82d698cf..b644097103 100644
--- a/docs/angular/src/content/jp/components/drag-drop.mdx
+++ b/docs/angular/src/content/jp/components/drag-drop.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Drag & Drop ディレクティブを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDragDropModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
index 27b1181650..195299ac34 100644
--- a/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
+++ b/docs/angular/src/content/jp/components/drop-down-hierarchical-selection.mdx
@@ -57,10 +57,10 @@ DOM からチップを削除し、ツリー/グリッドから項目を選択解
 
 <hr/>
 
-- [Drop Down の概要](drop-down.mdx)
-- [Chip の概要](chip.mdx)
-- [Tree の概要](tree.mdx)
-- [Tree Grid の概要](treegrid/tree-grid.mdx)
+- [Drop Down の概要](/drop-down)
+- [Chip の概要](/chip)
+- [Tree の概要](/tree)
+- [Tree Grid の概要](/treegrid/tree-grid)
 
 <hr/>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/drop-down-virtual.mdx b/docs/angular/src/content/jp/components/drop-down-virtual.mdx
index 314312216e..e7904b73c2 100644
--- a/docs/angular/src/content/jp/components/drop-down-virtual.mdx
+++ b/docs/angular/src/content/jp/components/drop-down-virtual.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # 仮想ドロップダウン
 
-Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目リストを表示するために、[`IgxForOf`](for-of.mdx) ディレクティブの使用方法を完全に統合できます。
+Ignite UI for Angular Drop Down コンポーネントは、選択可能な項目リストを表示するために、[`IgxForOf`](/for-of) ディレクティブの使用方法を完全に統合できます。
 
 ## Angular 仮想ドロップダウンの例
 
diff --git a/docs/angular/src/content/jp/components/drop-down.mdx b/docs/angular/src/content/jp/components/drop-down.mdx
index cb11ef9ebf..9d415eba2e 100644
--- a/docs/angular/src/content/jp/components/drop-down.mdx
+++ b/docs/angular/src/content/jp/components/drop-down.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Drop Down コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxDropDownModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/expansion-panel.mdx b/docs/angular/src/content/jp/components/expansion-panel.mdx
index 0cab2197ed..de140a0395 100644
--- a/docs/angular/src/content/jp/components/expansion-panel.mdx
+++ b/docs/angular/src/content/jp/components/expansion-panel.mdx
@@ -36,7 +36,7 @@ Ignite UI for Angular Expansion Panel コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxExpansionPanelModule` をインポートします。
 
@@ -195,7 +195,7 @@ export class ExpansionPanelComponent {
 
 Angular Expansion Panel は、パネルの縮小時に「更に表示」を描画し、完全に展開した後に「簡易表示」を描画します。
 
-`IgxExpansionPanel` コントロールを使用すると、あらゆる種類のコンテンツを `igx-expansion-panel-body` 内に追加できます。[`IgxGrid`](grid/grid.mdx)、[`IgxCombo`](combo.mdx)、チャート、その他の展開パネルもレンダリングできます。
+`IgxExpansionPanel` コントロールを使用すると、あらゆる種類のコンテンツを `igx-expansion-panel-body` 内に追加できます。[`IgxGrid`](/grid/grid)、[`IgxCombo`](/combo)、チャート、その他の展開パネルもレンダリングできます。
 
 展開パネルの本体にいくつかの基本的なマークアップを追加します。
 
@@ -290,7 +290,7 @@ $custom-panel-theme: expansion-panel-theme(
 ```
 
 <DocsAside type="info" title="情報">
-[`テーマ`](themes/sass/component-themes.mdx) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、<ApiLink kind="sass" module="themes" type="function-expansion-panel-theme" label="API ヘルプ" code={true} />を参照してください。
+[`テーマ`](/themes/sass/component-themes) エンジンを介したスタイル設定に使用可能なすべてのパラメーターを確認するには、<ApiLink kind="sass" module="themes" type="function-expansion-panel-theme" label="API ヘルプ" code={true} />を参照してください。
 </DocsAside>
 
 ### コンポーネント テーマの適用
@@ -304,7 +304,7 @@ $custom-panel-theme: expansion-panel-theme(
 }
 ```
 
-Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](themes/sass/component-themes.mdx)。
+Ignite UI テーマ エンジンの使用方法の詳細については、[`こちらをクリックしてください`](/themes/sass/component-themes)。
 
 ### デモ
 
@@ -312,7 +312,7 @@ Ignite UI テーマ エンジンの使用方法の詳細については、[`こ
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して expansion panel をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -416,7 +416,7 @@ export class ExpansionPanelComponent {
 
 ## 複数パネルの場合
 
-[igxAccordion トピック](accordion.mdx)を参照してください。
+[igxAccordion トピック](/accordion)を参照してください。
 
 ## API リファレンス
 
diff --git a/docs/angular/src/content/jp/components/exporter-csv.mdx b/docs/angular/src/content/jp/components/exporter-csv.mdx
index 6583362129..293b30e101 100644
--- a/docs/angular/src/content/jp/components/exporter-csv.mdx
+++ b/docs/angular/src/content/jp/components/exporter-csv.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または [**IgxGrid**](grid/grid.mdx) からデータをエクスポートします。
+Ignite UI CSV Exporter サービスは、文字分割値 (CSV) 形式で生データ (配列) または [**IgxGrid**](/grid/grid) からデータをエクスポートします。
 エクスポート機能は <ApiLink type="CsvExporterService" /> クラスにカプセル化されます。
 </div>
 <igc-divider></igc-divider>
@@ -84,7 +84,7 @@ public exportButtonHandler() {
 
 ## IgxGrid のデータのエクスポート
 
-CSV Exporter サービスも [**IgxGrid**](grid/grid.mdx) からのデータを CSV 形式でエクスポートできます。<ApiLink type="CsvExporterService" /> の <ApiLink type="CsvExporterService" member="export" label="export" /> メソッドを起動し、[**IgxGrid**](grid/grid.mdx) を最初の引数として渡します。
+CSV Exporter サービスも [**IgxGrid**](/grid/grid) からのデータを CSV 形式でエクスポートできます。<ApiLink type="CsvExporterService" /> の <ApiLink type="CsvExporterService" member="export" label="export" /> メソッドを起動し、[**IgxGrid**](/grid/grid) を最初の引数として渡します。
 
 以下は例です。
 
@@ -158,7 +158,7 @@ this.csvExportService.columnExporting.subscribe((args: IColumnExportingEventArgs
 this.csvExportService.export(this.igxGrid1, new IgxCsvExporterOptions('ExportedDataFile'));
 ```
 
-[**IgxGrid**](grid/grid.mdx) からのデータのエクスポートで、エクスポート処理は行フィルタリングおよび列の非表示などの機能に応じてグリッドで表示されるデータのみをエクスポートします。<ApiLink type="CsvExporterOptions" /> オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。このプロパティは以下の表で説明します。
+[**IgxGrid**](/grid/grid) からのデータのエクスポートで、エクスポート処理は行フィルタリングおよび列の非表示などの機能に応じてグリッドで表示されるデータのみをエクスポートします。<ApiLink type="CsvExporterOptions" /> オブジェクトのプロパティを設定し、エクスポーター サービスを構成してフィルターした行または非表示の列を含むことができます。このプロパティは以下の表で説明します。
 
 ## API リファレンス
 
diff --git a/docs/angular/src/content/jp/components/exporter-excel.mdx b/docs/angular/src/content/jp/components/exporter-excel.mdx
index 5b7f08f1d3..1a3185bbb5 100644
--- a/docs/angular/src/content/jp/components/exporter-excel.mdx
+++ b/docs/angular/src/content/jp/components/exporter-excel.mdx
@@ -16,7 +16,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または [**IgxGrid**](grid/grid.mdx)、[**IgxTreeGrid**](treegrid/tree-grid.mdx) および [**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.mdx) コンポーネントのデータをエクスポートできます。エクスポート機能は、<ApiLink type="ExcelExporterService" /> クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。
+Ignite UI for Angular Excel Exporter サービスは、Microsoft® Excel® 形式で生データ (配列) または [**IgxGrid**](/grid/grid)、[**IgxTreeGrid**](/treegrid/tree-grid) および [**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid) コンポーネントのデータをエクスポートできます。エクスポート機能は、<ApiLink type="ExcelExporterService" /> クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式では、フィルタリングやソートなどの機能が使用できます。
 </div>
 <igc-divider></igc-divider>
 
@@ -108,8 +108,8 @@ this.excelExportService.export(this.igxGrid1, new IgxExcelExporterOptions('Expor
 - <ApiLink type="ExcelExporterOptions" />
 
 Grid Excel エクスポーター:
-- [`IgxGrid Excel エクスポーター`](grid/export-excel.mdx)
-- [`IgxTreeGrid Excel エクスポーター`](treegrid/export-excel.mdx)
+- [`IgxGrid Excel エクスポーター`](/grid/export-excel)
+- [`IgxTreeGrid Excel エクスポーター`](/treegrid/export-excel)
 
 その他の使用されたコンポーネント:
 - <ApiLink type="Grid" />
diff --git a/docs/angular/src/content/jp/components/exporter-pdf.mdx b/docs/angular/src/content/jp/components/exporter-pdf.mdx
index fd7c2bd3bf..cc62ad7f62 100644
--- a/docs/angular/src/content/jp/components/exporter-pdf.mdx
+++ b/docs/angular/src/content/jp/components/exporter-pdf.mdx
@@ -15,7 +15,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 <div class="highlight">
 
-Ignite UI for Angular PDF Exporter サービスは、生データ配列や [**IgxGrid**](grid/grid.mdx)、[**IgxTreeGrid**](treegrid/tree-grid.mdx)、[**IgxHierarchicalGrid**](hierarchicalgrid/hierarchical-grid.mdx)、[**IgxPivotGrid**](pivotgrid/pivot-grid.mdx) などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は <ApiLink type="PdfExporterService" /> クラスにカプセル化されており、複数ページのドキュメント サポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータ エクスポートを可能にします。
+Ignite UI for Angular PDF Exporter サービスは、生データ配列や [**IgxGrid**](/grid/grid)、[**IgxTreeGrid**](/treegrid/tree-grid)、[**IgxHierarchicalGrid**](/hierarchicalgrid/hierarchical-grid)、[**IgxPivotGrid**](/pivotgrid/pivot-grid) などの高度な Grid コンポーネントを含むさまざまなソースからデータを PDF 形式でエクスポートする強力な機能を提供します。エクスポート機能は <ApiLink type="PdfExporterService" /> クラスにカプセル化されており、複数ページのドキュメント サポート、自動ページ区切り、カスタマイズ可能な書式設定オプションなどの包括的な機能を含む、PDF 形式へのシームレスなデータ エクスポートを可能にします。
 </div>
 <igc-divider></igc-divider>
 
diff --git a/docs/angular/src/content/jp/components/for-of.mdx b/docs/angular/src/content/jp/components/for-of.mdx
index de032a9688..ce89377896 100644
--- a/docs/angular/src/content/jp/components/for-of.mdx
+++ b/docs/angular/src/content/jp/components/for-of.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular <ApiLink type="ForOfDirective" member="igxForOf" label="ig
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxForOfModule` をインポートします。
 
@@ -166,7 +166,7 @@ Ignite UI for Angular ForOf モジュールまたはディレクティブをイ
 
 `igxFor` ディレクティブは、`igxGrid` 内のデータを垂直方向と水平方向の両方向に仮想化するために使用されます。
 
-より詳細な情報とデモについては、[グリッド仮想化](grid/virtualization.mdx)トピックに従ってください。
+より詳細な情報とデモについては、[グリッド仮想化](/grid/virtualization)トピックに従ってください。
 
 ### リモート サービスにバインドされる igxFor
 
diff --git a/docs/angular/src/content/jp/components/general/cli-overview.mdx b/docs/angular/src/content/jp/components/general/cli-overview.mdx
index c33718114e..375be73cb3 100644
--- a/docs/angular/src/content/jp/components/general/cli-overview.mdx
+++ b/docs/angular/src/content/jp/components/general/cli-overview.mdx
@@ -13,6 +13,6 @@ CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト
 
 [Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドライン ツールです。使用方法の詳細と例については、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.mdx)トピックを参照してください。
 
-[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli) で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。[Ignite UI for Angular をインストールする](getting-started.mdx#ignite-ui-for-angular-のインストール)と、schematics コレクションがプロジェクトに追加されます。使用方法の詳細と例については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.mdx)トピックを参照してください。
+[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli) で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。[Ignite UI for Angular をインストールする](./getting-started.mdx#ignite-ui-for-angular-のインストール)と、schematics コレクションがプロジェクトに追加されます。使用方法の詳細と例については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.mdx)トピックを参照してください。
 
 ツールの両方のバージョンは、さまざまなプロジェクト、コンポーネント、およびシナリオビュー (テンプレート) を許可し、[Ignite UI CLI を使用したガイド付きステップ バイ ステップモード](./cli/step-by-step-guide-using-cli.mdx)および [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) を提供します。
diff --git a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
index 1edaaa17e3..c44b76e1c0 100644
--- a/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/auth-template.mdx
@@ -41,7 +41,7 @@ Angular Schematics または Ignite UI CLI を使用して Angular プロジェ
 
 <Image src={igxSideAuthQuestion} alt="Auth question" class="responsive-img" />
 
-ウィザードの手順の完全なガイドは、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx)をご覧ください。
+ウィザードの手順の完全なガイドは、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-angular-schematics.mdx)をご覧ください。
 
 ### 直接コマンド (上級者向け)
 
diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
index 990afc82e0..15fe26ad33 100644
--- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-angular-schematics.mdx
@@ -49,7 +49,7 @@ Schematics コレクションにはプロジェクト作成のために 2 つの
 ng new --collection="@igniteui/angular-schematics"
 ```
 
-ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx)を参照してください。
+ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-angular-schematics.mdx)を参照してください。
 
 ### 直接プロジェクトを作成する
 
@@ -77,8 +77,8 @@ ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-
 
 | テンプレートの ID        | テンプレートの説明 |
 | :----------------- | --- |
-| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
-| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
+| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](./auth-template.mdx)をご覧ください。 |
+| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](./auth-template.mdx)をご覧ください。 |
 
 プロジェクトを作成する際に以下の**引数**を指定できます。
 
@@ -154,13 +154,13 @@ ng new newAngularProject --collection="@igniteui/angular-schematics" --type=igx-
 
 ## コンポーネント テンプレートの追加
 
-[利用可能な Ignite UI Angular テンプレート](component-templates.mdx)を追加するには、Ignite UI for Angular コレクションと `component` schematic を使用して `ng generate` を実行し、テンプレート ID と新しいコンポーネントの名前を指定します:
+[利用可能な Ignite UI Angular テンプレート](./component-templates.mdx)を追加するには、Ignite UI for Angular コレクションと `component` schematic を使用して `ng generate` を実行し、テンプレート ID と新しいコンポーネントの名前を指定します:
 
 ```cmd
 ng g @igniteui/angular-schematics:component grid newGrid
 ```
 
-テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-angular-schematics.mdx#ビューの追加)を参照してください。
+テンプレートの追加は、Angular Schematics、Ignite UI CLI で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-angular-schematics.mdx#ビューの追加)を参照してください。
 
 テンプレートを追加する際に以下の**引数**を指定できます。
 
diff --git a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
index 8b5efc0363..7526d62d00 100644
--- a/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/getting-started-with-cli.mdx
@@ -67,7 +67,7 @@ ig new
     <p style="text-align:center;">最初の Ignite UI CLI アプリを作成</p>
 </div>
 
-ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx)を参照してください。
+ウィザード オプションのステップ バイ ステップ ガイドについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-cli.mdx)を参照してください。
 
 ### 直接プロジェクトを作成する
 
@@ -111,8 +111,8 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 
 | テンプレートの ID        | テンプレートの説明 |
 | :----------------- | --- |
-| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
-| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](auth-template.mdx)をご覧ください。 |
+| side-nav-auth      | 認証モジュールで拡張されたサイド ナビゲーション プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](./auth-template.mdx)をご覧ください。 |
+| side-nav-mini-auth | 認証モジュールで拡張されたサイド ナビゲーション ミニ プロジェクト。詳細は [Angular 認証プロジェクト テンプレート](./auth-template.mdx)をご覧ください。 |
 
 プロジェクトを作成する際に以下の**引数**を指定できます。
 
@@ -198,7 +198,7 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 
 ## コンポーネント テンプレートの追加
 
-[利用可能な Ignite UI Angular テンプレート](component-templates.mdx)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。
+[利用可能な Ignite UI Angular テンプレート](./component-templates.mdx)を追加するには、新しいコンポーネントのテンプレート ID と名前を指定します。
 
 `ig add [template] [name]` コマンドを使用します。
 
@@ -206,9 +206,9 @@ Ignite UI CLI v13.1.0 以降、`igx-ts` プロジェクト タイプはデフォ
 ig add grid newGrid
 ```
 
-すべての[利用可能なテンプレート](component-templates.mdx)のリストを取得するには、プロジェクトディレクトリで [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) コマンドを実行することもできます。
+すべての[利用可能なテンプレート](./component-templates.mdx)のリストを取得するには、プロジェクトディレクトリで [`ig list`](https://github.com/IgniteUI/igniteui-cli/wiki/list) コマンドを実行することもできます。
 
-テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](step-by-step-guide-using-cli.mdx#add-view)を参照してください。
+テンプレートの追加は、Ignite UI CLI、Angular Schematics で作成されたプロジェクト、または `ng add` で Ignite UI for Angular が追加された Angular CLI プロジェクトでサポートされます。ガイド付きコンポーネント ウィザードについては、[Ignite UI CLI を使用したステップ バイ ステップ ガイド](./step-by-step-guide-using-cli.mdx#add-view)を参照してください。
 
 テンプレートを追加する際に以下の**引数**を指定できます。
 
@@ -273,7 +273,7 @@ ig ai-config --assistants generic vscode --agents claude copilot
 1. **コーディング アシスタントの選択** - MCP サーバー設定の対象を 1 つ以上選択 (Generic、VS Code、Cursor、Gemini、Junie)、またはスキップするには None。
 2. **AI エージェントの選択** - スキル ファイルと手順ファイルのエージェントを 1 つ以上選択 (Generic、Claude、Copilot、Cursor、Codex、Windsurf、Gemini、Junie)、またはスキップするには None。
 
-インタラクティブ モードのデフォルトは、アシスタントは **Generic**、エージェントは **Generic + Claude** です。ウィザードのプロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定](step-by-step-guide-using-cli.mdx#ai-コーディング-アシスタントの設定)を参照してください。
+インタラクティブ モードのデフォルトは、アシスタントは **Generic**、エージェントは **Generic + Claude** です。ウィザードのプロンプトの詳細については、[Ignite UI CLI を使用したステップ バイ ステップ ガイド - AI コーディング アシスタントの設定](./step-by-step-guide-using-cli.mdx#ai-コーディング-アシスタントの設定)を参照してください。
 
 AI クライアントを手動で設定する場合、または VS Code 以外のクライアントを使用する場合は、以下のコマンドで MCP サーバーを直接起動してください。
 
diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
index c6cdf40fc6..dae3bb9622 100644
--- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-angular-schematics.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド
 
-利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI Angular Schematics](getting-started-with-angular-schematics.mdx) で以前作成したプロジェクトを更新できます。
+利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI Angular Schematics](./getting-started-with-angular-schematics.mdx) で以前作成したプロジェクトを更新できます。
 
 Schematics コレクションを使用してガイドをアクティブにするには、以下のコマンドを実行します。
 
@@ -75,7 +75,7 @@ ng new --collection="@igniteui/angular-schematics"
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step prompt: choose project template" class="responsive-img" />
 
-**side-nav** または **side-nav-mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**empty** を選択した場合、認証のプロンプトはスキップされます。
+**side-nav** または **side-nav-mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](./auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**empty** を選択した場合、認証のプロンプトはスキップされます。
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step prompt: auth question" class="responsive-img" />
 
diff --git a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
index 1bc039f2c5..35666e21c4 100644
--- a/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
+++ b/docs/angular/src/content/jp/components/general/cli/step-by-step-guide-using-cli.mdx
@@ -25,7 +25,7 @@ import igStepByStepAiConfigAgents from '../../../images/general/ig-step-by-step-
 
 # Ignite UI CLI を使用したステップ バイ ステップ ガイド
 
-利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI CLI](getting-started-with-cli.mdx) で以前作成したプロジェクトを更新できます。
+利用可能なオプションでガイドを取得する場合、ステップバイステップ モードを初期化して新しいアプリケーションの作成およびセットアップ、同様に [Ignite UI CLI](./getting-started-with-cli.mdx) で以前作成したプロジェクトを更新できます。
 
 Ignite UI CLI を使用してガイドを開始するには、`ig` コマンドを実行します。
 
@@ -66,7 +66,7 @@ ig new
 
 <Image src={igStepByStepNewProjectTemplate} alt="Step by step new project template selection" class="responsive-img" />
 
-**Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**Empty Project** を選択した場合、認証のプロンプトはスキップされます。
+**Side Navigation** または **Side Navigation Mini** を選択した場合、ウィザードはプロジェクトに[認証モジュール](./auth-template.mdx)を追加するかどうかを確認するプロンプトを表示します。「はい」と回答すると、対応する認証バリアント (`side-nav-auth` または `side-nav-mini-auth`) が生成されます。**Empty Project** を選択した場合、認証のプロンプトはスキップされます。
 
 <Image src={igStepByStepNewProjectQuestion} alt="Step by step auth question prompt" class="responsive-img" />
 
diff --git a/docs/angular/src/content/jp/components/general/getting-started.mdx b/docs/angular/src/content/jp/components/general/getting-started.mdx
index 440da311c7..7ddfc029a8 100644
--- a/docs/angular/src/content/jp/components/general/getting-started.mdx
+++ b/docs/angular/src/content/jp/components/general/getting-started.mdx
@@ -86,7 +86,7 @@ ng add igniteui-dockmanager
 
 ### トライアル版からライセンス版へのアップグレード
 
-**ライセンス版の Ignite UI for Angular パッケージ**の使用を開始する場合、[Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイド](ignite-ui-licensing.mdx#angular-schematics-または-ignite-ui-cli-を使用したパッケージのアップグレード)に従うことをお勧めします。
+**ライセンス版の Ignite UI for Angular パッケージ**の使用を開始する場合、[Schematics および Ignite UI CLI を使用したパッケージのアップグレードガイド](./ignite-ui-licensing.mdx#angular-schematics-または-ignite-ui-cli-を使用したパッケージのアップグレード)に従うことをお勧めします。
 
 以下は、**ライセンス版の Ignite UI for Angular** の使用を開始するために実行する必要がある手順の概要です。プロジェクトのセットアップに応じて、プロジェクトで以下の schematic を実行します。
 
@@ -101,18 +101,18 @@ ig upgrade-packages
 ```
 
 Schematic はプロジェクトのパッケージの依存関係を切り替え、ソース参照を更新します。
-[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
+[まだセットアップされていない場合、NPM レジストリへのログインが要求されます](./ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
 
 #### 新しいセットアップで npm レジストリにログイン
 
 上記の方法は、Ignite UI for Angular トライアル版パッケージが既にインストールされているシナリオのみを対象としています。プロジェクトの新しいセットアップを実行する場合、または Ignite UI for Angular を使用する場合は、以下のガイダンスに従ってください。
 
-次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です:
+次の方法で[プライベート npm フィード環境の正しいセットアップを実行する](./ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)ことが重要です:
 
 - プライベート レジストリの有効なセットアップを確認します。
 - トライアル版以外のユーザー アカウントとパスワードを指定して npm を使用してプライベート フィードにログインします。
 
-プロセス全体の詳細は[こちらにあります](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
+プロセス全体の詳細は[こちらにあります](./ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。
 
 ### Angular Schematics & Ignite UI CLI のクイック スタート
 
@@ -128,7 +128,7 @@ npm i -g @igniteui/angular-schematics
 npm install -g igniteui-cli
 ```
 
-[Ignite UI CLI を使用したガイド付きエクスペリエンス](cli/step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics](cli/step-by-step-guide-using-angular-schematics.mdx) は、構成したアプリケーションをブートストラップする最も簡単な方法です。
+[Ignite UI CLI を使用したガイド付きエクスペリエンス](cli/step-by-step-guide-using-cli.mdx)または [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) は、構成したアプリケーションをブートストラップする最も簡単な方法です。
 
 Ignite UI for Angular Schematics を使用してガイドをアクティブにするには、次のコマンドを実行します。
 
@@ -143,7 +143,7 @@ ig
 ```
 
 <DocsAside type="info" title="情報">
-[まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.mdx#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。
+[まだセットアップされていない場合、手順の実行中のある時点で NPM レジストリへのログインが要求されます](./ignite-ui-licensing.mdx#プライベート-npm-フィードを使用するための環境設定方法)。[商用ライセンス](./open-source-vs-premium.mdx#全コンポーネントの比較表)対象コンポーネントを使用する場合、トライアルからライセンス版へのアカウント設定が必要です。
 </DocsAside>
 
 <div style="display:inline-block;">
@@ -154,7 +154,7 @@ ig
     <p style="text-align:center;">はじめての Ignite UI CLI アプリ開発</p>
 </div>
 
-[Angular Schematics & Ignite UI CLI](cli-overview.mdx) についての詳細。
+[Angular Schematics & Ignite UI CLI](./cli-overview.mdx) についての詳細。
 
 ## Ignite UI for Angular の使用
 
diff --git a/docs/angular/src/content/jp/components/grids-and-lists.mdx b/docs/angular/src/content/jp/components/grids-and-lists.mdx
index 0c6ebbfcf1..c99f0ef508 100644
--- a/docs/angular/src/content/jp/components/grids-and-lists.mdx
+++ b/docs/angular/src/content/jp/components/grids-and-lists.mdx
@@ -105,19 +105,19 @@ Ignite UI for Angular のデータ グリッドは、大量のリアルタイム
 <hr/>
 <div id="features-list">
 
-- 数百万のレコードをロードできる[**仮想化された行と列**](grid/virtualization.mdx)
+- 数百万のレコードをロードできる[**仮想化された行と列**](/grid/virtualization)
 
-- [**セル**](grid/cell-editing.mdx)、[**行**](grid/row-editing.mdx)、および[**一括更新**](grid/batch-editing.mdx)オプションを使用した[**インライン編集**](grid/row-editing.mdx)
+- [**セル**](/grid/cell-editing)、[**行**](/grid/row-editing)、および[**一括更新**](/grid/batch-editing)オプションを使用した[**インライン編集**](/grid/row-editing)
 
-- [**Excel スタイル フィルタリング**](grid/excel-style-filtering.mdx)と [**Excel キーボード ナビゲーション**](grid/keyboard-navigation.mdx)機能
+- [**Excel スタイル フィルタリング**](/grid/excel-style-filtering)と [**Excel キーボード ナビゲーション**](/grid/keyboard-navigation)機能
 
-- インタラクティブな [**Outlook スタイルのようなグループ化**](grid/groupby.mdx)
+- インタラクティブな [**Outlook スタイルのようなグループ化**](/grid/groupby)
 
-- グリッド セルまたは列のデータに基づいた[**列集計**](grid/summaries.mdx)
+- グリッド セルまたは列のデータに基づいた[**列集計**](/grid/summaries)
 
-- [**Excel へのエクスポート**](grid/export-excel.mdx) ([**データ可視化**](excel-library-working-with-charts.mdx)を含む)
+- [**Excel へのエクスポート**](/grid/export-excel) ([**データ可視化**](/excel-library-working-with-charts)を含む)
 
-- 行の高さとサイズ変更を調整する[**サイズ**](grid/display-density.mdx)
+- 行の高さとサイズ変更を調整する[**サイズ**](/grid/display-density)
 
 - [**スパークライン列**](sparkline.mdx#デモ)や画像列などの列テンプレート
 </div>
@@ -143,17 +143,17 @@ Ignite UI for Angular のデータ グリッドは、大量のリアルタイム
 
 ### Angular グリッドのページング、ソート、フィルタリング & 検索
 
-ユーザーがデフォルトの[ページャー](grid/paging.mdx)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.mdx)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.mdx) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
+ユーザーがデフォルトの[ページャー](/grid/paging)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](/grid/search)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](/grid/excel-style-filtering) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
 
 ### インライン Angular グリッド編集
 
-ユーザーがデフォルトの[ページャー](grid/paging.mdx)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](grid/search.mdx)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](grid/excel-style-filtering.mdx) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
+ユーザーがデフォルトの[ページャー](/grid/paging)を使用してデータ セットをナビゲートできるようにするか、独自のテンプレートを作成して独自のページング エクスペリエンスを提供します。単一列および複数列のソート、グリッド上の全文[検索](/grid/search)、およびデータ型に基づく [Microsoft Excel スタイルのフィルタリング](/grid/excel-style-filtering) を含むいくつかの[高度なフィルタリング] オプションを完全にサポートします。
 
     <img class="b-lazy b-lazy-gifs b-loaded responsive-img" title="Animation of filtering capabilities within Angular Data Grid" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-inline-grid-editing-1100.jpg?v=201808021304" alt="Animation of filtering capabilities within Angular Data Grid"/>
 
 ### Angular グリッドでのキーボード ナビゲーションと行/セルの選択
 
-上、下、右、左、タブ、および Enter キーを使用して、Angular データ グリッドで Excel のような[キーボード ナビゲーション](grid/keyboard-navigation.mdx)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Angular グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、<a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">こちら</a>をご覧ください。
+上、下、右、左、タブ、および Enter キーを使用して、Angular データ グリッドで Excel のような[キーボード ナビゲーション](/grid/keyboard-navigation)を有効にして、アクセシビリティ コンプライアンスを確保し、使いやすさを向上させます。マウスまたはキーボードを使用して Angular グリッドで単一または複数の行選択を切り替えて完全な行を選択または選択解除するか、グリッド ツールバーの組み込みの [すべて選択] または [すべて選択解除] チェックボックスを使用して行選択を操作できます。この機能強化の詳細については、<a class="no-external-icon" href="https://www.infragistics.com/community/blogs/b/engineering/posts/grid-keyboard-navigation-accessibility-">こちら</a>をご覧ください。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-lazy-gifs b-loaded responsive-img" title="Animation of keyboard navigation functionality" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-keyboard-navigation-1100.gif?v=201808021304" alt="Animation of keyboard navigation functionality within Angular Data Grid"/></div>
 
@@ -168,13 +168,13 @@ Ignite UI for Angular の各 Angular コンポーネントは、最新のアク
 
 ### Angular Grid の列のグループ化、ピン固定、集計、移動
 
-組み込みの列[集計](grid/summaries.mdx)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](grid/column-pinning.mdx)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](grid/column-hiding.mdx)または[移動](grid/column-moving.mdx)できます。
+組み込みの列[集計](/grid/summaries)またはカスタム集計テンプレートをサポートし、マウス操作、タッチ、または API を介して列またはグループ列をグループ化します。インタラクティブな[列のピン固定](/grid/column-pinning)、移動、ドラッグ、ソート操作に列をインタラクティブに[非表示](/grid/column-hiding)または[移動](/grid/column-moving)できます。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-loaded responsive-img" title="Grid of data with column grouping, pinning and summary features enabled" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-cell-summaries-1100.jpg?v=201808021304" alt="Grid of data with column grouping, pinning and summary features enabled for Angular Data Grid component"/></div>
 
 ### Angular Grid の複数列ヘッダー
 
-[複数列ヘッダー](grid/multi-column-headers.mdx)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。
+[複数列ヘッダー](/grid/multi-column-headers)を有効にし、共通ヘッダーで列をグループ化できます。各列グループは、その他のグループや列と組み合わせることができ、ピン固定、グループ内でインタラクティブに列移動、グループのソートや非表示など多数の機能が使用できます。
 
 <div class="feature__image feature__image--right"><img class="b-lazy b-loaded responsive-img" title="Grid of data with Multi-Column Headers feature enabled" src="https://static.infragistics.com/marketing/ignite-ui-angular/grid/ignite-ui-angular-grid-multi-column-headers-1100.jpg?v=201808021304" alt="Grid of data with Multi-Column Headers feature enabled on the Angular Data Grid component"/></div>
 
@@ -199,14 +199,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
 <igc-divider></igc-divider>
 <FeatureList>
 
-- [インライン編集](grid/editing.mdx)
-- [行と列のフィルタリング](grid/filtering.mdx)
-- [グリッドのソート](grid/sorting.mdx)
-- [列のグループ化](grid/groupby.mdx)
-- [列の集計](grid/summaries.mdx)
-- [ピン固定列](grid/column-pinning.mdx)
-- [サイズ変更可能な列](grid/column-resizing.mdx)
-- [列の非表示](grid/column-hiding.mdx)
+- [インライン編集](/grid/editing)
+- [行と列のフィルタリング](/grid/filtering)
+- [グリッドのソート](/grid/sorting)
+- [列のグループ化](/grid/groupby)
+- [列の集計](/grid/summaries)
+- [ピン固定列](/grid/column-pinning)
+- [サイズ変更可能な列](/grid/column-resizing)
+- [列の非表示](/grid/column-hiding)
 
 </FeatureList>
 
@@ -227,14 +227,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
 
 </div>
 <hr/>
-- [列移動](grid/column-moving.mdx)
-- [セルのコピーおよび貼り付け](grid/clipboard-interactions.mdx)
-- [セルのスタイル設定](grid/conditional-cell-styling.mdx)
-- [リアルタイム/ライブ データのテーマ](grid/live-data.mdx)
-- [カスタム ツールバー](grid/toolbar.mdx)
-- [グリッド ページング](grid/paging.mdx)
-- [行選択](grid/selection.mdx)
-- [セル選択](grid/cell-selection.mdx)
+- [列移動](/grid/column-moving)
+- [セルのコピーおよび貼り付け](/grid/clipboard-interactions)
+- [セルのスタイル設定](/grid/conditional-cell-styling)
+- [リアルタイム/ライブ データのテーマ](/grid/live-data)
+- [カスタム ツールバー](/grid/toolbar)
+- [グリッド ページング](/grid/paging)
+- [行選択](/grid/selection)
+- [セル選択](/grid/cell-selection)
 
 </div>
     <div class="support-section">
@@ -242,14 +242,14 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
         <h2>Ignite UI for Angular Support Options</h2>
     </div>
 
-- [グリッド レベルの検索](grid/search.mdx)
-- [Excel、CSV、TSV エクスポート](exporter-excel.mdx)
-- [複数列ヘッダー](grid/multi-column-headers.mdx)
-- [コンボ ボックス/ドロップダウン](combo.mdx)
-- [仮想化とパフォーマンス](grid/virtualization.mdx)
-- [リモート データのロードオンデマンド](grid/virtualization.mdx#リモート仮想化)
-- [セル テンプレート](grid/grid.mdx#cell-template)
-- [ARIA/a11y サポート](interactivity/accessibility-compliance.mdx)
+- [グリッド レベルの検索](/grid/search)
+- [Excel、CSV、TSV エクスポート](/exporter-excel)
+- [複数列ヘッダー](/grid/multi-column-headers)
+- [コンボ ボックス/ドロップダウン](/combo)
+- [仮想化とパフォーマンス](/grid/virtualization)
+- [リモート データのロードオンデマンド](/grid/virtualization#リモート仮想化)
+- [セル テンプレート](/grid/grid#cell-template)
+- [ARIA/a11y サポート](/interactivity/accessibility-compliance)
 </div>
 
 </div>
@@ -277,7 +277,7 @@ Full support for exporting data grids to XLSX, XLS, TSV or CSV. The Ignite UI fo
     </igc-expansion-panel>
     <igc-expansion-panel indicator-position="end">
         <span class="igd-expansion-title" slot="title">Angular と Infragistics Ignite UI for Angular Data Grid コントロールのインストール方法を教えてください。</span>
-        <p>Angular Data Grid の使用を開始するには、[作業の開始ガイド](general/getting-started.mdx)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、Angular 開発のベスト プラクティス ガイドです。</p>
+        <p>Angular Data Grid の使用を開始するには、[作業の開始ガイド](/general/getting-started)の手順を実行してください。<a class="no-external-icon" href="{environment:infragisticsBaseUrl}/resources/sample-applications">サンプル アプリケーション</a>のライブラリも用意しています。サンプル ライブラリは、Angular 開発のベスト プラクティス ガイドです。</p>
     </igc-expansion-panel>
 </FaqAccordion>
 
diff --git a/docs/angular/src/content/jp/components/icon-button.mdx b/docs/angular/src/content/jp/components/icon-button.mdx
index cc26c5fd73..9838089612 100644
--- a/docs/angular/src/content/jp/components/icon-button.mdx
+++ b/docs/angular/src/content/jp/components/icon-button.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Icon Button ディレクティブを初期化するには
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックををご覧ください。
 
 次の手順は、`IgxIconButtonDirective` をスタンドアロンの依存関係としてインポートすることです:
 
@@ -114,7 +114,7 @@ Contained アイコン ボタンを作成するには、`igxIconButton` プロ
 
 ### SVG アイコン
 
-マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず <ApiLink type="IconService" /> 依存関係を挿入し、次に <ApiLink type="IconService" member="addSvgIcon" label="addSvgIcon" /> メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](icon.mdx#svg-アイコン)を参照してください。
+マテリアル アイコンに加えて、 `igxIconButton` ディレクティブは、アイコンとしての SVG 画像の使用もサポートしています。これを行うには、まず <ApiLink type="IconService" /> 依存関係を挿入し、次に <ApiLink type="IconService" member="addSvgIcon" label="addSvgIcon" /> メソッドを使用して SVG ファイルをキャッシュにインポートする必要があります。詳細については、Icon トピックの [SVG セクション](/icon#svg-アイコン)を参照してください。
 
 ```typescript
 constructor(private _iconService: IgxIconService) { }
@@ -378,7 +378,7 @@ $custom-contained: contained-icon-button-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して icon button をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/icon.mdx b/docs/angular/src/content/jp/components/icon.mdx
index 3300621ec3..e8aea07f84 100644
--- a/docs/angular/src/content/jp/components/icon.mdx
+++ b/docs/angular/src/content/jp/components/icon.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Icon コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxIconModule` をインポートします。
 
@@ -308,11 +308,11 @@ igx-icon {
 }
 ```
 
-詳細については、[サイズ](display-density.mdx)の記事をご覧ください。
+詳細については、[サイズ](/display-density)の記事をご覧ください。
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `icon` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/input-group.mdx b/docs/angular/src/content/jp/components/input-group.mdx
index 4961624b84..4fd6d10d83 100644
--- a/docs/angular/src/content/jp/components/input-group.mdx
+++ b/docs/angular/src/content/jp/components/input-group.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Input Group コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxInputGroupModule` をインポートします。
 
@@ -95,7 +95,7 @@ Ignite UI for Angular Input Group モジュールまたはディレクティブ
 
 ### Label および Input
 
-<ApiLink type="LabelDirective" label="igxLabel" />、<ApiLink type="InputDirective" label="igxInput" /> ディレクティブとその検証、データ バインディング、API については、[このトピック](label-input.mdx)を参照してください。
+<ApiLink type="LabelDirective" label="igxLabel" />、<ApiLink type="InputDirective" label="igxInput" /> ディレクティブとその検証、データ バインディング、API については、[このトピック](/label-input)を参照してください。
 
 ### Prefix および Suffix
 
@@ -752,7 +752,7 @@ constructor(fb: FormBuilder) {
 以下のサンプルでは、カスタマイズした CSS 変数を使用した入力グループが、[`Carbon`](https://carbondesignsystem.com/components/text-input/usage/#live-demo) デザイン システムの入力グループに視覚的に似たデザインを実現している様子を確認できます。
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Indigo Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
+サンプルでは、[Indigo Light](/themes/sass/schemas#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 ```scss
@@ -798,7 +798,7 @@ For instance, setting a dark `$box-background` globally could cause the borders
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して input group をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -869,8 +869,8 @@ For instance, setting a dark `$box-background` globally could cause the borders
 
 関連トピック:
 
-- [Label および Input](label-input.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [Label および Input](/label-input)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/label-input.mdx b/docs/angular/src/content/jp/components/label-input.mdx
index d635a88d85..546a76b68d 100644
--- a/docs/angular/src/content/jp/components/label-input.mdx
+++ b/docs/angular/src/content/jp/components/label-input.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Label & Input ディレクティブを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxInputGroupModule` をインポートします。
 
@@ -167,7 +167,7 @@ public user = {
 
 ## Input Group
 
-Ignite UI for Angular Input Group コンポーネントは、開発者が使いやすく美しフォームを作成するのに役立ちます。詳細については、別のトピック[こちら](input-group.mdx) を参照してください。
+Ignite UI for Angular Input Group コンポーネントは、開発者が使いやすく美しフォームを作成するのに役立ちます。詳細については、別のトピック[こちら](/input-group) を参照してください。
 
 ## API リファレンス
 
@@ -183,7 +183,7 @@ Ignite UI for Angular Input Group コンポーネントは、開発者が使い
 
 関連トピック:
 
-- [Input Group](input-group.mdx)
+- [Input Group](/input-group)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/linear-progress.mdx b/docs/angular/src/content/jp/components/linear-progress.mdx
index 90443b9c6f..a39e8b84d7 100644
--- a/docs/angular/src/content/jp/components/linear-progress.mdx
+++ b/docs/angular/src/content/jp/components/linear-progress.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Linear Progress コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxProgressBarModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/list.mdx b/docs/angular/src/content/jp/components/list.mdx
index aa400be63e..2b291240f7 100644
--- a/docs/angular/src/content/jp/components/list.mdx
+++ b/docs/angular/src/content/jp/components/list.mdx
@@ -14,11 +14,11 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Angular List View (リスト ビュー) コンポーネントの概要
 
-Ignite UI for Angular List コンポーネントは項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)をサポートするテンプレートに設定できます。リスト コンポーネントは、組み込みのパンニング機能、空および読み込み状態のテンプレートも提供し、[`IgxForOf`](for-of.mdx) ディレクティブを使用した大きなリストの仮想化をサポートします。
+Ignite UI for Angular List コンポーネントは項目の行を表示し、ヘッダー項目を 1 つ以上、さらにリスト項目の検索およびフィルタリングをサポートします。各リスト項目はすべての有効な HTML または [Angular コンポーネント](https://jp.infragistics.com/products/ignite-ui-angular)をサポートするテンプレートに設定できます。リスト コンポーネントは、組み込みのパンニング機能、空および読み込み状態のテンプレートも提供し、[`IgxForOf`](/for-of) ディレクティブを使用した大きなリストの仮想化をサポートします。
 
 ## Angular List の例
 
-次の例は、_name_ プロパティと _phone number_ プロパティを持つ連絡先が入力されたリストを表しています。<ApiLink type="List" /> コンポーネントは、[`IgxAvatar`](avatar.mdx) と [`IgxIcon`](icon.mdx) を使用して、ユーザー エクスペリエンスを向上させ、**連絡先をお気に入りに追加**にアバター写真とさまざまなアイコンを設定する機能を公開します。さらに、リスト ビューは、フィルタリング パイプを使用して実現されたソート機能を公開します。
+次の例は、_name_ プロパティと _phone number_ プロパティを持つ連絡先が入力されたリストを表しています。<ApiLink type="List" /> コンポーネントは、[`IgxAvatar`](/avatar) と [`IgxIcon`](/icon) を使用して、ユーザー エクスペリエンスを向上させ、**連絡先をお気に入りに追加**にアバター写真とさまざまなアイコンを設定する機能を公開します。さらに、リスト ビューは、フィルタリング パイプを使用して実現されたソート機能を公開します。
 
 <Sample src="/lists/list-sample-4" height={513} alt="" />
 
@@ -32,7 +32,7 @@ Ignite UI for Angular List View コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxListModule` をインポートします。
 
@@ -205,7 +205,7 @@ public contacts = [{
 
 ### アバターおよびアイコンの追加
 
-その他のコンポーネントを <ApiLink type="List" /> と共に使用してエクスペリエンスの向上や機能拡張が可能です。名前や電話番号の値の左に画像のアバターを表示できます。また、連絡先をお気に入りに追加するための星アイコンを右側に追加できます。要素を追加するには、[**IgxAvatar**](avatar.mdx) および [**IgxIcon**](icon.mdx) モジュールを app.module.ts ファイルにインポートします。
+その他のコンポーネントを <ApiLink type="List" /> と共に使用してエクスペリエンスの向上や機能拡張が可能です。名前や電話番号の値の左に画像のアバターを表示できます。また、連絡先をお気に入りに追加するための星アイコンを右側に追加できます。要素を追加するには、[**IgxAvatar**](/avatar) および [**IgxIcon**](/icon) モジュールを app.module.ts ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -283,7 +283,7 @@ public contacts = [{
 - `igxListAction` は、スイッチ、ラジオ ボタン、チェックボックスなど、アクションまたはメタデータを持つリスト項目に使用します。この場合、アクションは `igx-icon` で表示されます。ディレクティブは、正しい位置と間隔のコンテナーでターゲット要素をラップします。
 - `igxListLine` は、`igxListThumbnail` と `igxListAction` の間にテキストが必要な場合に使用します。このディレクティブは、テキストの位置、間隔、配置が残りのディレクティブと外観がよくなるようにします。
 
-次に、連絡先オブジェクトの isFavorite プロパティを切り替えるために [**IgxIcon**](icon.mdx) コンポーネントでクリック イベントをリッスンします。
+次に、連絡先オブジェクトの isFavorite プロパティを切り替えるために [**IgxIcon**](/icon) コンポーネントでクリック イベントをリッスンします。
 
 ```typescript
 // contacts.component.ts
@@ -295,7 +295,7 @@ toggleFavorite(item: IgxListItem) {
 }
 ```
 
-また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](button-group.mdx) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。
+また、`--ig-size` カスタム CSS プロパティを使用して、ユーザーがリストのサイズを選択できるようにすることができます。これには、`IgxButtonGroupModule` をインポートし、[**IgxButtonGroup**](/button-group) を使用してすべてのサイズ値を表示します。このようにして、選択されるたびに、リストの**サイズ**が更新されます。
 
 ```typescript
 // app.module.ts
@@ -657,7 +657,7 @@ $my-list-theme: list-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して list をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/mask.mdx b/docs/angular/src/content/jp/components/mask.mdx
index a2b6e191d4..77bed40192 100644
--- a/docs/angular/src/content/jp/components/mask.mdx
+++ b/docs/angular/src/content/jp/components/mask.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Mask ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxMaskModule` と `IgxInputGroupModule` をインポートします。
 
@@ -209,7 +209,7 @@ private notify(snackbar, message, input) {
 
 ### テキスト選択
 
-<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](label-input.mdx#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
+<ApiLink type="TextSelectionDirective" /> を使用して、フォーカスがあるコンポーネントにすべての入力テキストを選択させることができます。[Label および Input](/label-input#フォーカスとテキストの選択) で `igxTextSelection` の詳細情報を参照してください。
 
 **app.module.ts** ファイルに `IgxTextSelectionModule` をインポートします:
 
diff --git a/docs/angular/src/content/jp/components/month-picker.mdx b/docs/angular/src/content/jp/components/month-picker.mdx
index 3592efbff5..b953196fa4 100644
--- a/docs/angular/src/content/jp/components/month-picker.mdx
+++ b/docs/angular/src/content/jp/components/month-picker.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Month Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 はじめに、**app.module.ts** ファイルに `IgxCalendarModule` をインポートします。
 
@@ -219,7 +219,7 @@ $my-calendar-theme: calendar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して、`month picker` のスタイルを設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/navbar.mdx b/docs/angular/src/content/jp/components/navbar.mdx
index e65e64150c..f51db23d50 100644
--- a/docs/angular/src/content/jp/components/navbar.mdx
+++ b/docs/angular/src/content/jp/components/navbar.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Navbar コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
  はじめに、**app.module.ts** ファイルに `IgxNavbarModule` をインポートします。
 
@@ -95,7 +95,7 @@ Ignite UI for Angular Navbar モジュールまたはディレクティブをイ
 
 ### アイコン ボタンの追加
 
-検索、お気に入りなどのオプションを追加するには、[**IgxIconButton**](icon-button.mdx) と [**IgxIcon**](icon.mdx) モジュールを **app.module.ts** ファイルにインポートします。
+検索、お気に入りなどのオプションを追加するには、[**IgxIconButton**](./icon-button.mdx) と [**IgxIcon**](./icon.mdx) モジュールを **app.module.ts** ファイルにインポートします。
 
 ```typescript
 // app.module.ts
@@ -304,7 +304,7 @@ $custom-navbar-theme: navbar-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後に、新しく作成されたテーマを `tokens` ミックスインに渡します。
@@ -323,7 +323,7 @@ $custom-navbar-theme: navbar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して navbar をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/navdrawer.mdx b/docs/angular/src/content/jp/components/navdrawer.mdx
index 0430c95712..0ff5198f8e 100644
--- a/docs/angular/src/content/jp/components/navdrawer.mdx
+++ b/docs/angular/src/content/jp/components/navdrawer.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Navigation Drawer コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 はじめに、**app.module.ts** ファイルに `IgxNavigationDrawerModule` をインポートします。
 
@@ -126,7 +126,7 @@ Drawer のコンテンツを `igxDrawer` ディレクティブでデコレート
 - `active` - 項目を選択済みとしてスタイル設定します。
 - `isHeader` - 項目をグループ ヘッダーとしてスタイル設定します。active に設定できません。
 
-[`igxRipple`](ripple.mdx) ディレクティブは使用感を向上します。
+[`igxRipple`](/ripple) ディレクティブは使用感を向上します。
 
 ```html
 <!-- app.component.html -->
@@ -188,7 +188,7 @@ Navigation drawer に要素を追加して選択するためには、typescript
 
 Drawer を開く/閉じる方法が複数あります。入力プロパティをアプリケーション状態にバインドするか、[`@ViewChild(IgxNavigationDrawerComponent)`](https://angular.io/api/core/ViewChild) 参照を使用してコンポーネントの API へコードでアクセス、あるいはこのような場合では `#drawer` [テンプレート参照変数](https://angular.io/guide/template-syntax#ref-vars)を使用できます。
 
-Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`igxToggleAction`](toggle.mdx#トグル自動操作) ディレクティブで id によって対象にされます。
+Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`igxToggleAction`](/toggle#トグル自動操作) ディレクティブで id によって対象にされます。
 
 ```html
 <main>
@@ -198,7 +198,7 @@ Navigation Drawer は <ApiLink type="NavigationService" /> とも統合し、[`i
 </main>
 ```
 
-**app.component.html** の `<main>` を以下のコードと置き換えます。トグルをスタイル設定するために [`igxIconButton`](icon-button.mdx) および [Icon コンポーネント](icon.mdx)を追加します。
+**app.component.html** の `<main>` を以下のコードと置き換えます。トグルをスタイル設定するために [`igxIconButton`](/icon-button) および [Icon コンポーネント](/icon)を追加します。
 
 ```ts
 /* app.component.ts */
@@ -389,7 +389,7 @@ import { RouterModule } from '@angular/router';
 
 ## 階層ナビゲーション
 
-`IgxNavigationDrawerComponent` を使用してマルチレベル階層ナビゲーションを作成するには、`igxDrawer` テンプレートの [IgxTreeComponent](tree.mdx) を使用できます。ツリーはアプリケーションの `Routes` オブジェクトから直接作成できます。以下はその方法です。
+`IgxNavigationDrawerComponent` を使用してマルチレベル階層ナビゲーションを作成するには、`igxDrawer` テンプレートの [IgxTreeComponent](/tree) を使用できます。ツリーはアプリケーションの `Routes` オブジェクトから直接作成できます。以下はその方法です。
 
 ```html
 <igx-nav-drawer [isOpen]="true" [enableGestures]="true" width="280px">
@@ -435,7 +435,7 @@ export const menusRoutes: Routes = [
 ];
 ```
 
-ルートの `children` プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、[ツリー ノード テンプレート](tree.mdx#テンプレート化)で 2 番目の下のレベルを定義するだけです。
+ルートの `children` プロパティから抽出された子ルーティングもあります。このサンプルは 2 つの階層レベルを示していますが、ルーティングに複数の階層がある場合は、[ツリー ノード テンプレート](/tree#テンプレート化)で 2 番目の下のレベルを定義するだけです。
 
 <DocsAside type="info" title="情報">
 空のルート リダイレクト、エラー ルート、ページが見つからないなどの一部のルートは、可視化に直接適さない場合があることに注意してください。ツリーをルーティング オブジェクトにバインドする前に、コンポーネント ロジックでオブジェクトからそれらのルートを削除できます。
@@ -479,7 +479,7 @@ $custom-theme: navdrawer-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
diff --git a/docs/angular/src/content/jp/components/overlay-position.mdx b/docs/angular/src/content/jp/components/overlay-position.mdx
index 54c134b041..63e6f500ee 100644
--- a/docs/angular/src/content/jp/components/overlay-position.mdx
+++ b/docs/angular/src/content/jp/components/overlay-position.mdx
@@ -211,8 +211,8 @@ overlay.setOffset(this._overlayId, deltaX, deltaY, OffsetMode.Set);
 
 ## その他のリソース
 
-- [オーバーレイ メイン トピック](overlay.mdx)
-- [スクロール ストラテジ](overlay-scroll.mdx)
-- [スタイル設定](overlay-styling.mdx)
+- [オーバーレイ メイン トピック](/overlay)
+- [スクロール ストラテジ](/overlay-scroll)
+- [スタイル設定](/overlay-styling)
 - <ApiLink type="OverlayService" />
 - <ApiLink kind="sass" module="themes" type="function-overlay-theme" label="IgxOverlay スタイル" />
diff --git a/docs/angular/src/content/jp/components/overlay-scroll.mdx b/docs/angular/src/content/jp/components/overlay-scroll.mdx
index baad66a77a..53abb54883 100644
--- a/docs/angular/src/content/jp/components/overlay-scroll.mdx
+++ b/docs/angular/src/content/jp/components/overlay-scroll.mdx
@@ -110,8 +110,8 @@ import { NoOpScrollStrategy } from "./scroll/NoOpScrollStrategy";
 
 ## その他のリソース
 
-- [オーバーレイ メイン トピック](overlay.mdx)
-- [配置ストラテジ](overlay-position.mdx)
-- [スタイル設定](overlay-styling.mdx)
+- [オーバーレイ メイン トピック](/overlay)
+- [配置ストラテジ](/overlay-position)
+- [スタイル設定](/overlay-styling)
 - <ApiLink type="OverlayService" />
 - <ApiLink kind="sass" module="themes" type="function-overlay-theme" label="IgxOverlay スタイル" />
diff --git a/docs/angular/src/content/jp/components/overlay-styling.mdx b/docs/angular/src/content/jp/components/overlay-styling.mdx
index fedb2b1a15..dca29992e5 100644
--- a/docs/angular/src/content/jp/components/overlay-styling.mdx
+++ b/docs/angular/src/content/jp/components/overlay-styling.mdx
@@ -17,13 +17,13 @@ import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
 
 <div class="highlight">
 
-[`IgxOverlayService`](overlay.mdx) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](drop-down.mdx)、[コンボ](combo.mdx)、[日付ピッカー](date-picker.mdx)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
+[`IgxOverlayService`](/overlay) は、ページ コンテンツの上にコンテンツを表示するために使用されます。Ignite UI for Angular コンポーネントの多くは、[ドロップダウン](/drop-down)、[コンボ](/combo)、[日付ピッカー](/date-picker)などのオーバーレイを使用しているため、オーバーレイがコンテンツを表示する方法を理解することが重要です。
 他の要素上にコンテンツを表示するために、サービスはコンテンツを特別なアウトレット コンテナーに移します (デフォルトではドキュメントの本体の最後にアタッチされています)。この動作は、[特定のコンテナーにスコープされた](#スコープ-コンポーネント-スタイル) スタイルに影響を与える可能性があります。
 </div>
 
 ## オーバーレイ コンポーネントのスタイル設定
 
-ほとんどの場合、[グローバル](themes/sass/global-themes.mdx) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル <ApiLink kind="sass" module="themes" type="mixin-tokens" label="tokens" code={true} /> ミックスインで[スタイル設定された](drop-down.mdx#スタイル設定)ドロップダウンを見てみましょう。
+ほとんどの場合、[グローバル](/themes/sass/global-themes) テーマのスタイルはオーバーレイ アウトレットの影響を受けません。例として、グローバル <ApiLink kind="sass" module="themes" type="mixin-tokens" label="tokens" code={true} /> ミックスインで[スタイル設定された](/drop-down#スタイル設定)ドロップダウンを見てみましょう。
 
 ```html
 <!-- overlay-styling.component.html -->
@@ -55,7 +55,7 @@ $my-drop-down-theme: drop-down-theme(
 
 オーバーレイに表示される要素のスタイルをスコーピングする際に DOM のオーバーレイ `アウトレット`の位置を指定する必要があります。スコープが設定された CSS ルールには、要素の特定の階層構造が必要です - オーバーレイ コンテンツが、適用するスタイルの正しいコンテキストで表示されることを確認してください。
 
-たとえば、`igx-combo` を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目の[スタイル設定](combo.mdx#スタイル設定)は `igx-drop-down` テーマを使用します。
+たとえば、`igx-combo` を取り上げます。コンボは独自のビュー内でコンテンツを定義するため、項目の[スタイル設定](/combo#スタイル設定)は `igx-drop-down` テーマを使用します。
 
 ```scss
 // overlay-styling.component.scss
@@ -66,7 +66,7 @@ $my-drop-down-theme: drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -122,7 +122,7 @@ $my-overlay-theme: overlay-theme(
 これで、**すべて**のモーダル オーバーレイの背景が紫色になります。
 
 <DocsAside type="info" title="情報">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、スタイルを適用するには `::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -136,7 +136,7 @@ $my-overlay-theme: overlay-theme(
 
 ### スコープ オーバーレイ スタイル
 
-特定のコンポーネントの下に**のみ**特定の背景をオーバーレイに表示したい場合は、テーマを[スコープできます](#スコープ-コンポーネント-スタイル)。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの[制限](overlay.mdx#前提事項と制限)があります。
+特定のコンポーネントの下に**のみ**特定の背景をオーバーレイに表示したい場合は、テーマを[スコープできます](#スコープ-コンポーネント-スタイル)。モーダル オーバーレイをスコープする場合、オーバーレイ アウトレットを移動する必要がありますが、これにはいくつかの[制限](/overlay#前提事項と制限)があります。
 オーバーフロークリッピング、z-index、およびビューポートの問題のリスクを最小限に抑えるために、より高いレベルのコンポーネントでのみモーダルオーバーレイのアウトレットを使用することをお勧めします。
 
 ```scss
@@ -155,6 +155,6 @@ $my-overlay-theme: overlay-theme(
 ## その他のリソース
 
 - [IgniteUI for Angular - テーマ ライブラリ](themes/index.mdx)
-- [オーバーレイ メイン トピック](overlay.mdx)
-- [配置ストラテジ](overlay-position.mdx)
-- [スクロール ストラテジ](overlay-scroll.mdx)
+- [オーバーレイ メイン トピック](/overlay)
+- [配置ストラテジ](/overlay-position)
+- [スクロール ストラテジ](/overlay-scroll)
diff --git a/docs/angular/src/content/jp/components/overlay.mdx b/docs/angular/src/content/jp/components/overlay.mdx
index d455e943ba..26cf75cc52 100644
--- a/docs/angular/src/content/jp/components/overlay.mdx
+++ b/docs/angular/src/content/jp/components/overlay.mdx
@@ -145,7 +145,7 @@ Finally calling <ApiLink type="OverlayService" member="detach" label="detach(id)
 
 ## コンポーネントのアタッチ
 
-閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](card.mdx#angular-card-の例) コンポーネントをオーバーレイ サービスの <ApiLink type="OverlayService" member="attach" label="attach()" /> メソッドに渡し、IDを生成します。次に、提供された ID で <ApiLink type="OverlayService" member="show" label="show()" /> メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
+閉じた後、ビューを DOM にある元の位置にアタッチします。以下のデモでは、[IgxCard](/card#angular-card-の例) コンポーネントをオーバーレイ サービスの <ApiLink type="OverlayService" member="attach" label="attach()" /> メソッドに渡し、IDを生成します。次に、提供された ID で <ApiLink type="OverlayService" member="show" label="show()" /> メソッドを呼び出し、カードをモーダル コンテナーで DOM にアタッチします。
 
 <Sample src="/interactions/overlay-sample-main-1" height={400} alt="" />
 
@@ -354,6 +354,6 @@ export class ExampleComponent {
 
 ## その他のリソース
 
-- [配置方法](overlay-position.mdx)
-- [スクロール方法](overlay-scroll.mdx)
-- [スタイル設定](overlay-styling.mdx)
+- [配置方法](/overlay-position)
+- [スクロール方法](/overlay-scroll)
+- [スタイル設定](/overlay-styling)
diff --git a/docs/angular/src/content/jp/components/paginator.mdx b/docs/angular/src/content/jp/components/paginator.mdx
index 301b5f7f24..7c8d98a854 100644
--- a/docs/angular/src/content/jp/components/paginator.mdx
+++ b/docs/angular/src/content/jp/components/paginator.mdx
@@ -37,7 +37,7 @@ Ignite UI for Angular Paginator コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxPaginatorModule` をインポートします。
 
@@ -203,11 +203,11 @@ public ngOnInit(): void {
 
 <hr/>
 
-- [グリッド](grid/grid.mdx)
-- [仮想化とパフォーマンス](grid/virtualization.mdx)
-- [フィルタリング](grid/filtering.mdx)
-- [ソート](grid/sorting.mdx)
-- [集計](grid/summaries.mdx)
+- [グリッド](/grid/grid)
+- [仮想化とパフォーマンス](/grid/virtualization)
+- [フィルタリング](/grid/filtering)
+- [ソート](/grid/sorting)
+- [集計](/grid/summaries)
 
 
 <hr/>
diff --git a/docs/angular/src/content/jp/components/query-builder.mdx b/docs/angular/src/content/jp/components/query-builder.mdx
index 184986b211..468496ce76 100644
--- a/docs/angular/src/content/jp/components/query-builder.mdx
+++ b/docs/angular/src/content/jp/components/query-builder.mdx
@@ -41,7 +41,7 @@ Ignite UI for Angular Query Builder コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxQueryBuilderModule` をインポートします。
 
@@ -157,7 +157,7 @@ ngAfterViewInit(): void {
 
 ## 式のドラッグ
 
-条件チップは、マウスの[**ドラッグ アンド ドロップ**](drag-drop.mdx)または[**キーボードによる並べ替え**](#キーボード操作)アプローチを使用して簡単に再配置できます。これらを使用すると、ユーザーはクエリ ロジックを動的に調整できます。
+条件チップは、マウスの[**ドラッグ アンド ドロップ**](./drag-drop.mdx)または[**キーボードによる並べ替え**](#キーボード操作)アプローチを使用して簡単に再配置できます。これらを使用すると、ユーザーはクエリ ロジックを動的に調整できます。
 - チップをドラッグしても、その状態や内容は変更されず、位置のみが変更されます。
 - チップはグループやサブグループにドラッグすることもできます。たとえば、式のグループ化/グループ解除は、式のドラッグ機能によって実行されます。
 既存の条件をグループ化するには、まず「追加」グループ ボタンを使用して新しいグループを追加する必要があります。次に、ドラッグすることで、必要な式をそのグループに移動できます。グループを解除するには、すべての条件を現在のグループの外にドラッグします。最後の条件を移動したら、グループは削除されます。
@@ -379,7 +379,7 @@ $custom-icon-button: outlined-icon-button-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して、query builder のスタイルを設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/radio-button.mdx b/docs/angular/src/content/jp/components/radio-button.mdx
index 51fc602b8e..c0b359995c 100644
--- a/docs/angular/src/content/jp/components/radio-button.mdx
+++ b/docs/angular/src/content/jp/components/radio-button.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Radio Button コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxRadioModule` をインポートします。
 
@@ -194,14 +194,14 @@ $custom-radio-theme: radio-theme(
 <Sample src="/data-entries/radio-styling-sample" height={300} alt="" />
 
 <DocsAside type="info" title="情報">
-サンプルでは、[Fluent Light](themes/sass/schemas.mdx#predefined-schemas) スキーマを使用します。
+サンプルでは、[Fluent Light](/themes/sass/schemas#predefined-schemas) スキーマを使用します。
 </DocsAside>
 
 <hr/>
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して `radio button` をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/ripple.mdx b/docs/angular/src/content/jp/components/ripple.mdx
index bd0689cade..3f94583a49 100644
--- a/docs/angular/src/content/jp/components/ripple.mdx
+++ b/docs/angular/src/content/jp/components/ripple.mdx
@@ -35,7 +35,7 @@ Ignite UI for Angular Ripple ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxRippleModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/select.mdx b/docs/angular/src/content/jp/components/select.mdx
index 5f35d8a0a7..d783587d47 100644
--- a/docs/angular/src/content/jp/components/select.mdx
+++ b/docs/angular/src/content/jp/components/select.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Select コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSelectModule` をインポートします。
 
@@ -127,7 +127,7 @@ public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango'];
 
 ### 入力プロパティ
 
-Select コンポーネントは、[入力グループ](input-group.mdx)に適用可能な次のディレクティブをサポートしています。
+Select コンポーネントは、[入力グループ](/input-group)に適用可能な次のディレクティブをサポートしています。
 
 - `igxLabel` - Angular Select 入力とのリンクは `aria-labelledby` を介して自動的に処理されるため、`for` プロパティを設定する必要はありません。
 - `igx-prefix`/`igxPrefix`
@@ -385,7 +385,7 @@ export class MyClass implements OnInit {
 各コンポーネントには独自のテーマ関数があります。
 
 Select コンポーネントのスタイルを設定するには、それに含まれるコンポーネントのスタイルを設定します。この場合、<ApiLink kind="sass" module="themes" type="function-input-group-theme" label="input-group-theme" /> と <ApiLink kind="sass" module="themes" type="function-drop-down-theme" label="drop-down-theme" /> を使用する必要があります。
-[`Input Group`](input-group.mdx#スタイル設定) と [`Drop Down`](drop-down.mdx#スタイル設定) のスタイル設定セクションを参照して、これら 2 つのコンポーネントのスタイル設定方法をより深く理解してください。
+[`Input Group`](/input-group#スタイル設定) と [`Drop Down`](/drop-down#スタイル設定) のスタイル設定セクションを参照して、これら 2 つのコンポーネントのスタイル設定方法をより深く理解してください。
 
 また、Select コンポーネントのボタンのスタイル設定にのみ使用される <ApiLink kind="sass" module="themes" type="function-select-theme" label="select-theme" code={true} /> 関数もあります。 <br />
 Select コンポーネントのボタンのスタイル設定を始めるには、すべてのテーマ関数とコンポーネント ミックスインが存在する `index` ファイルをインポートする必要があります。
@@ -417,7 +417,7 @@ $custom-select-theme: select-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して select をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/simple-combo.mdx b/docs/angular/src/content/jp/components/simple-combo.mdx
index a737f69c21..e0971cfb60 100644
--- a/docs/angular/src/content/jp/components/simple-combo.mdx
+++ b/docs/angular/src/content/jp/components/simple-combo.mdx
@@ -14,7 +14,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 # Angular Single Select ComboBox (単一選択のコンボボックス) コンポーネントの概要
 
-Angular Single Select ComboBox コンポーネントは、単一の選択を可能にする [ComboBox コンポーネント](combo.mdx)の変更です。これを「シンプルなコンボ」と呼びます。元の ComboBox コンポーネントの単一選択モードに対する需要が高かったため、ユーザーが事前定義された項目リストからオプションを選択し、カスタム値を入力できるようにする編集可能な検索入力を提供する拡張コンポーネントを作成しました。
+Angular Single Select ComboBox コンポーネントは、単一の選択を可能にする [ComboBox コンポーネント](/combo)の変更です。これを「シンプルなコンボ」と呼びます。元の ComboBox コンポーネントの単一選択モードに対する需要が高かったため、ユーザーが事前定義された項目リストからオプションを選択し、カスタム値を入力できるようにする編集可能な検索入力を提供する拡張コンポーネントを作成しました。
 
 ## Angular Simple ComboBox の例
 
@@ -45,7 +45,7 @@ Ignite UI for Angular Simple ComboBox コンポーネントを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSimpleComboModule` をインポートします。
 
@@ -320,7 +320,7 @@ Ignite UI for Angular Simple ComboBox コンポーネントは、コンボボッ
 
 ### デモ
 
-以下のサンプルは、<ApiLink type="SimpleCombo" member="dataPreLoad" label="dataPreLoad" /> プロパティを使用してリモート データの新しいチャンクをロードし、[ComboBox リモート バインディング](combo-remote.mdx)で説明されている手順に従うリモート バインディングを示しています。
+以下のサンプルは、<ApiLink type="SimpleCombo" member="dataPreLoad" label="dataPreLoad" /> プロパティを使用してリモート データの新しいチャンクをロードし、[ComboBox リモート バインディング](/combo-remote)で説明されている手順に従うリモート バインディングを示しています。
 
 <Sample src="/lists/simple-combo-remote" height={400} alt="Angular Simple Combo リモート バインディングの例" />
 
@@ -375,7 +375,7 @@ $custom-drop-down-theme: drop-down-theme(
 ```
 
 <DocsAside type="info" title="情報">
-<ApiLink type="SimpleCombo" /> コンポーネントは、[`IgxOverlay`](overlay.mdx) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](overlay-styling.mdx)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
+<ApiLink type="SimpleCombo" /> コンポーネントは、[`IgxOverlay`](/overlay) サービスを使用して、Simple ComboBox 項目リスト コンテナーを保持および表示します。スタイルを適切にスコープするには、<ApiLink kind="interface" type="OverlaySettings" member="outlet" /> を使用してください。詳細については、[`IgxOverlay スタイル ガイド`](/overlay-styling)を確認してください。また、コンポーネントのスタイルを設定するときに `::ng-deep` を使用する必要があります。
 </DocsAside>
 
 ### サンプル
@@ -392,7 +392,7 @@ $custom-drop-down-theme: drop-down-theme(
 - シンプルなコンボボックスがリモート サービスにバインドされ、定義済みの選択がある場合、要求されたデータが読み込まれるまでその入力は空白のままになります。
 
 <DocsAside type="info" title="情報">
-Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](for-of.mdx#既知の制限) の既知の問題のセクションを参照してください。
+Simple ComboBox は内部で `igxForOf` ディレクティブを使用するため、すべての `igxForOf` 制限は Simple ComboBox に対して有効です。詳細については、[igxForOf 既知の制限](/for-of#既知の制限) の既知の問題のセクションを参照してください。
 </DocsAside>
 
 ## API リファレンス
@@ -417,11 +417,11 @@ Simple ComboBox は内部で `igxForOf` ディレクティブを使用するた
 
 <hr/>
 
-- [コンボボックス コンポーネント](combo-features.mdx)
-- [コンボボックス リモート バインディング](combo-remote.mdx)
-- [コンボボックス テンプレート](combo-templates.mdx)
-- [テンプレート駆動フォームの統合](input-group.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [コンボボックス コンポーネント](/combo-features)
+- [コンボボックス リモート バインディング](/combo-remote)
+- [コンボボックス テンプレート](/combo-templates)
+- [テンプレート駆動フォームの統合](/input-group)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/snackbar.mdx b/docs/angular/src/content/jp/components/snackbar.mdx
index daffa5a024..891eab15e6 100644
--- a/docs/angular/src/content/jp/components/snackbar.mdx
+++ b/docs/angular/src/content/jp/components/snackbar.mdx
@@ -34,7 +34,7 @@ Ignite UI for Angular Snackbar コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSnackbarModule` をインポートします。
 
@@ -329,7 +329,7 @@ $dark-snackbar: snackbar-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後にコンポーネントのテーマをアプリケーションに**含めます**。
@@ -348,7 +348,7 @@ $dark-snackbar: snackbar-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して snackbar をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/splitter.mdx b/docs/angular/src/content/jp/components/splitter.mdx
index 9b4a13a6c9..c784daf452 100644
--- a/docs/angular/src/content/jp/components/splitter.mdx
+++ b/docs/angular/src/content/jp/components/splitter.mdx
@@ -29,7 +29,7 @@ Ignite UI for Angular Splitter コンポーネントを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSplitterModule` をインポートします。
 
@@ -278,7 +278,7 @@ $splitter-theme: splitter-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して splitter をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/stepper.mdx b/docs/angular/src/content/jp/components/stepper.mdx
index 5ba58e6e20..aa1c90be09 100644
--- a/docs/angular/src/content/jp/components/stepper.mdx
+++ b/docs/angular/src/content/jp/components/stepper.mdx
@@ -40,7 +40,7 @@ Ignite UI for Angular Stepper コンポーネントを初期化するには、Ig
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module** ファイルに `IgxStepperModule` をインポートします。
 
@@ -179,7 +179,7 @@ For each step the user has the ability to configure indicator, title, subtitle a
 </igx-stepper>
 ```
 
-以下のサンプルは、実行時にステッパーの<ApiLink type="Stepper" member="orientation" label="向き" />と[タイトルの位置](stepper.mdx#ステップのカスタマイズ)を変更する方法を示しています。
+以下のサンプルは、実行時にステッパーの<ApiLink type="Stepper" member="orientation" label="向き" />と[タイトルの位置](/stepper#ステップのカスタマイズ)を変更する方法を示しています。
 
 <Sample src="/layouts/stepper-label-position-and-orientation-sample" height={528} alt="Angular Stepper 向きの例" />
 
@@ -265,7 +265,7 @@ Ignite UI for Angular Stepper では、タイトル、インジケーターな
 
 ステップのインジケーターのみを表示する場合は、<ApiLink type="Stepper" member="stepType" label="stepType" /> オプションを `indicator` に設定します。
 
-ステップ インジケーターはすべてのコンテンツをサポートしますが、サイズが常に **24 ピクセル**になるという制限があります。この点に注意して、ステップ インジケーターとして [IgxIconComponent](icon.mdx) または [IgxAvatarComponent](avatar.mdx) を使用することをお勧めします。
+ステップ インジケーターはすべてのコンテンツをサポートしますが、サイズが常に **24 ピクセル**になるという制限があります。この点に注意して、ステップ インジケーターとして [IgxIconComponent](/icon) または [IgxAvatarComponent](/avatar) を使用することをお勧めします。
 
 **Title (タイトル)**
 
@@ -432,7 +432,7 @@ $stepper-theme: stepper-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して stepper をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/switch.mdx b/docs/angular/src/content/jp/components/switch.mdx
index a9d68b8b02..be1341c74c 100644
--- a/docs/angular/src/content/jp/components/switch.mdx
+++ b/docs/angular/src/content/jp/components/switch.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Switch コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxSwitchModule` をインポートします。
 
@@ -337,7 +337,7 @@ In the sample below, you can see how using the switch component with customized
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して switch をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/tabbar.mdx b/docs/angular/src/content/jp/components/tabbar.mdx
index ab8bbc2827..46b5ba3ad1 100644
--- a/docs/angular/src/content/jp/components/tabbar.mdx
+++ b/docs/angular/src/content/jp/components/tabbar.mdx
@@ -42,7 +42,7 @@ Ignite UI for Angular Bottom Navigation コンポーネントを使用した作
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxBottomNavModule` をインポートします。
 
@@ -461,7 +461,7 @@ $dark-bottom-nav: bottom-nav-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 <ApiLink kind="sass" module="themes" type="function-bottom-nav-theme" label="bottom-nav-theme" code={true} /> は、tabs コンポーネントのスタイル設定で多くのパラメーターが利用できます。
@@ -484,7 +484,7 @@ $dark-bottom-nav: bottom-nav-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して bottom navigation をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/tabs.mdx b/docs/angular/src/content/jp/components/tabs.mdx
index 6a8ce38b2b..49f634b3fc 100644
--- a/docs/angular/src/content/jp/components/tabs.mdx
+++ b/docs/angular/src/content/jp/components/tabs.mdx
@@ -40,7 +40,7 @@ Ignite UI for Angular Tabs コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTabsModule` をインポートします。
 
@@ -525,7 +525,7 @@ $dark-tabs: tabs-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 次に、<ApiLink kind="sass" module="themes" type="function-tabs-theme" label="tabs-theme" code={true} /> を拡張する新しいテーマを作成し、タブグループのスタイルを設定できるさまざまなプロパティを受け取ります。
@@ -548,7 +548,7 @@ $dark-tabs: tabs-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tabs をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/texthighlight.mdx b/docs/angular/src/content/jp/components/texthighlight.mdx
index 3104b82dc2..c72b33a4be 100644
--- a/docs/angular/src/content/jp/components/texthighlight.mdx
+++ b/docs/angular/src/content/jp/components/texthighlight.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Text Highlight ディレクティブを使用した作業
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTextHighlightModule` をインポートします。
 
@@ -82,7 +82,7 @@ Ignite UI for Angular Text Highlight モジュールまたはディレクティ
 
 ## Angular Text Highlight ディレクティブの使用
 
-次にテキストの様々な部分を強調表示するためにハイライトできる検索ボックスを作成します。Ignite UI for Angular の [InputGroup](input-group.mdx) コンポーネントは、一致のクリア、次の一致、前の一致へ移動するためのボタン、検索で大文字と小文字を区別を指定するボタンを追加します。また一致がいくつ見つかったかを示すラベルがあります。
+次にテキストの様々な部分を強調表示するためにハイライトできる検索ボックスを作成します。Ignite UI for Angular の [InputGroup](./input-group.mdx) コンポーネントは、一致のクリア、次の一致、前の一致へ移動するためのボタン、検索で大文字と小文字を区別を指定するボタンを追加します。また一致がいくつ見つかったかを示すラベルがあります。
 
 ```html
 <div class="search-container">
@@ -453,7 +453,7 @@ TextHighlight ディレクティブの API に関する詳細な情報は、以
 
 ## その他のリソース
 
-- [Grid 検索](grid/search.mdx)
+- [Grid 検索](./grid/search.mdx)
 
 <hr/>
 コミュニティに参加して新しいアイデアをご提案ください。
diff --git a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
index 5006b03016..29c2103b37 100644
--- a/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/global-themes.mdx
@@ -153,12 +153,12 @@ Ignite UI for Angular には、事前定義されたテーマのセットから
 | ----------------------------------------------------------------- | ---------------------------------- | -------------------------------------------------------------------------------------- |
 | [**Material Light**](presets/material.mdx#default-theme)           |  `$light-material-schema`          | $light-material-palette                                                                |
 | [**Material Dark**](presets/material.mdx#material-dark-theme)      |  `$dark-material-schema`           | $dark-material-palette                                                                 |
-| [**Fluent Light**](presets/fluent.mdx)                             | `$light-fluent-schema`             | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
-| [**Fluent Dark**](presets/fluent.mdx#fluent-dark-theme)            |  `$dark-fluent-schema`             | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
-| [**Bootstrap Light**](presets/bootstrap.mdx)                       | `$light-bootstrap-schema`          | $light-bootstrap-palette                                                               |
-| [**Bootstrap Dark**](presets/bootstrap.mdx#bootstrap-dark-theme)   |  `$dark-bootstrap-schema`         | $dark-bootstrap-palette                                                                |
-| [**Indigo Light**](presets/indigo.mdx)                             | `$light-indigo-schema`             | $light-indigo-palette                                                                  |
-| [**Indigo Dark**](presets/indigo.mdx#indigo-dark-theme)            |   `$dark-indigo-schema`           | $dark-indigo-palette                                                                   |
+| [**Fluent Light**](./presets/fluent.mdx)                             | `$light-fluent-schema`             | $light-fluent-palette <br /> $light-fluent-excel-palette <br /> $light-fluent-word-palette |
+| [**Fluent Dark**](./presets/fluent.mdx#fluent-dark-theme)            |  `$dark-fluent-schema`             | $dark-fluent-palette <br /> $dark-fluent-excel-palette <br /> $dark-fluent-word-palette    |
+| [**Bootstrap Light**](./presets/bootstrap.mdx)                       | `$light-bootstrap-schema`          | $light-bootstrap-palette                                                               |
+| [**Bootstrap Dark**](./presets/bootstrap.mdx#bootstrap-dark-theme)   |  `$dark-bootstrap-schema`         | $dark-bootstrap-palette                                                                |
+| [**Indigo Light**](./presets/indigo.mdx)                             | `$light-indigo-schema`             | $light-indigo-palette                                                                  |
+| [**Indigo Dark**](./presets/indigo.mdx#indigo-dark-theme)            |   `$dark-indigo-schema`           | $dark-indigo-palette                                                                   |
 
 
 ## その他のリソース
diff --git a/docs/angular/src/content/jp/components/tile-manager.mdx b/docs/angular/src/content/jp/components/tile-manager.mdx
index 3ab2ecd877..a7cf1de4ce 100644
--- a/docs/angular/src/content/jp/components/tile-manager.mdx
+++ b/docs/angular/src/content/jp/components/tile-manager.mdx
@@ -67,7 +67,7 @@ export class AppComponent {
 - `IgcTileComponent` - このコンポーネントは、タイル マネージャー内に表示される個々のタイルを表します。
 - `IgcTileManagerComponent` - これはすべてのタイル コンポーネントを含むメイン コンポーネントであり、タイル レイアウト全体のコンテナーとして機能します。
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックををご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックををご覧ください。
 
 ```html
 <igc-tile-manager>
diff --git a/docs/angular/src/content/jp/components/time-picker.mdx b/docs/angular/src/content/jp/components/time-picker.mdx
index b95ec70167..c0954cf9b9 100644
--- a/docs/angular/src/content/jp/components/time-picker.mdx
+++ b/docs/angular/src/content/jp/components/time-picker.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Time Picker コンポーネントを使用した作業を
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTimePickerModule` をインポートします。
 
@@ -145,9 +145,9 @@ export class SampleFormComponent {
 
 ### コンポーネントの投影
 
-Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは <ApiLink type="InputGroup" /> と同じです: <ApiLink type="InputDirective" /> を除いて、[`igxLabel`](label-input.mdx)、[`IgxHint`](input-group.mdx#hint)、[`igxPrefix`](input-group.mdx#prefix-および-suffix)、[`igxSuffix`](input-group.mdx#prefix-および-suffix)。詳細については、[Label および Input](label-input.mdx) トピックを参照してください。
+Time Picker コンポーネントを使用すると、子コンポーネントを投影できます。これは <ApiLink type="InputGroup" /> と同じです: <ApiLink type="InputDirective" /> を除いて、[`igxLabel`](/label-input)、[`IgxHint`](/input-group#hint)、[`igxPrefix`](/input-group#prefix-および-suffix)、[`igxSuffix`](/input-group#prefix-および-suffix)。詳細については、[Label および Input](/label-input) トピックを参照してください。
 
-デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。<ApiLink type="PickerToggle" /> コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](input-group.mdx#prefix-および-suffix) または [`igxSuffix`](input-group.mdx#prefix-および-suffix) で設定できます。
+デフォルト設定では、ドロップダウン/ダイアログ トグル アイコンがプレフィックスとして表示されます。<ApiLink type="PickerToggle" /> コンポーネントを使用して変更または再定義できます。入力の開始位置または終了位置を定義する [`igxPrefix`](/input-group#prefix-および-suffix) または [`igxSuffix`](/input-group#prefix-および-suffix) で設定できます。
 
 次の例では、カスタム ラベルとヒントを追加し、サフィックスとして表示されるようにデフォルトのトグル アイコンの位置を変更しました。
 
@@ -293,13 +293,13 @@ Time Picker コンポーネントは、さまざまな表示形式と入力形
 
 Time Picker は、パブリックの <ApiLink type="TimePicker" member="increment" label="increment" /> メソッドと <ApiLink type="TimePicker" member="decrement" label="decrement" /> メソッドを公開します。それらは 2 つのオプションのパラメターを受け入れます: 変更される `DatePart` とそれが変更される `delta` です。指定しない場合、`DatePart` はデフォルトで `Hours` になり、`delta` はデフォルトで <ApiLink type="TimePicker" member="itemsdelta" label="itemsDelta" /> になります。
 
-[Date Time Editor ディレクティブ](date-time-editor.mdx#増加および減少)で、両方の方法の使用法を示すサンプルを見つけることができます。
+[Date Time Editor ディレクティブ](/date-time-editor#増加および減少)で、両方の方法の使用法を示すサンプルを見つけることができます。
 
 ### フォームと検証
 
 Time Picker コンポーネントは、コア FormsModule [NgModel](https://angular.io/api/forms/NgModel) および [ReactiveFormsModule](https://angular.io/api/forms/ReactiveFormsModule) (FormControl, FormGroup など) からのすべてのディレクティブをサポートします。これには、[フォーム バリデータ](https://angular.io/api/forms/Validators)機能も含まれます。さらに、コンポーネントの[最小値と最大値](#最小値と最大値)はフォーム バリデータとしても機能します。
 
-[リアクティブ フォームの統合](angular-reactive-form-validation.mdx)サンプルは、ReactiveForms で igxTimePicker を使用する方法を示しています。
+[リアクティブ フォームの統合](/angular-reactive-form-validation)サンプルは、ReactiveForms で igxTimePicker を使用する方法を示しています。
 
 #### 最小値と最大値
 
@@ -369,7 +369,7 @@ public onValidationFailed() {
 
 #### 日付ピッカーとタイム ピッカーを併用する
 
-[`IgxDatePicker`](date-picker.mdx) と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
+[`IgxDatePicker`](/date-picker) と IgxTimePicker を一緒に使用する場合、それらを 1 つの同じ Date オブジェクト値にバインドする必要がある場合があります。
 
 テンプレート駆動フォームでこれを実現するには、`ngModel` を使用して両方のコンポーネントを同じ Date オブジェクトにバインドします。
 
@@ -407,10 +407,10 @@ $my-time-picker-theme: time-picker-theme(
 ```
 
 <DocsAside type="info" title="情報">
-Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+Time Picker ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ダイアログ ウィンドウのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
-Time Picker ウィンドウは [`IgxOverlayService`](overlay.mdx) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+Time Picker ウィンドウは [`IgxOverlayService`](/overlay) を使用するため、カスタム テーマがスタイルを設定する Time Picker ウィンドウに適用されるように、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 Time Picker内の項目は、コンポーネント `ホスト`の子孫**ではありません**。現在、`ドキュメント`本体の最後にあるデフォルトのオーバーレイ アウトレットに表示されています。これを変更するには、`overlaySettings` の <ApiLink kind="interface" type="OverlaySettings" member="outlet" /> プロパティを使用します。`outlet` は、オーバーレイ コンテナーをレンダリングする場所を制御します。
 
@@ -431,7 +431,7 @@ export class TimepickerStylingComponent {
 Time Picker の項目がコンポーネントのホスト**内**に適切にレンダリングされます。つまり、カスタム テーマが有効になります。
 
 <DocsAside type="info" title="情報">
-[`IgxOverlayService`](overlay.mdx) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](overlay-styling.mdx)をご覧ください。
+[`IgxOverlayService`](/overlay) を使用して表示される要素にテーマを提供するためのさまざまなオプションの詳細については、[オーバーレイ スタイリングのトピック](/overlay-styling)をご覧ください。
 </DocsAside>
 
 ```scss
@@ -441,7 +441,7 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
 ```
 
 <DocsAside type="warning" title="警告">
-コンポーネントが [`Emulated`](themes/sass/component-themes.mdx#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
+コンポーネントが [`Emulated`](/themes/sass/component-themes#表示のカプセル化) ViewEncapsulation を使用している場合、`::ng-deep` を使用してこのカプセル化を解除する必要があります。
 </DocsAside>
 
 ```scss
@@ -479,9 +479,9 @@ Time Picker の項目がコンポーネントのホスト**内**に適切にレ
 
 ## その他のリソース
 
-- [Date Time Editor](date-time-editor.mdx)
-- [Label および Input](label-input.mdx)
-- [リアクティブ フォームの統合](angular-reactive-form-validation.mdx)
+- [Date Time Editor](/date-time-editor#increment-decrement)
+- [Label および Input](/label-input)
+- [リアクティブ フォームの統合](/angular-reactive-form-validation)
 
 コミュニティに参加して新しいアイデアをご提案ください。
 
diff --git a/docs/angular/src/content/jp/components/toast.mdx b/docs/angular/src/content/jp/components/toast.mdx
index 0340fc02e6..f534bb250b 100644
--- a/docs/angular/src/content/jp/components/toast.mdx
+++ b/docs/angular/src/content/jp/components/toast.mdx
@@ -32,7 +32,7 @@ Ignite UI for Angular Toast コンポーネントを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](./general/getting-started.mdx)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxToastModule` をインポートします。
 
@@ -227,7 +227,7 @@ $custom-toast-theme: toast-theme(
 ```
 
 <DocsAside type="info" title="情報">
-上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](themes/sass/palettes.mdx)のトピックをご覧ください。
+上記のようにカラーの値をハードコーディングする代わりに、<ApiLink kind="sass" module="palettes" type="function-palette" label="palette" code={true} /> および <ApiLink kind="sass" module="palettes" type="function-color" label="color" code={true} /> 関数を使用してカラーに関してより高い柔軟性を実現することができます。使い方の詳細については[`パレット`](./themes/sass/palettes.mdx)のトピックをご覧ください。
 </DocsAside>
 
 最後に Toast のカスタム テーマを設定します。
@@ -244,7 +244,7 @@ $custom-toast-theme: toast-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して toast をスタイル設定できます。まず [Tailwind を設定して](./themes/misc/tailwind-classes.mdx)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/toggle.mdx b/docs/angular/src/content/jp/components/toggle.mdx
index a537af72ff..6a7ed1449d 100644
--- a/docs/angular/src/content/jp/components/toggle.mdx
+++ b/docs/angular/src/content/jp/components/toggle.mdx
@@ -30,7 +30,7 @@ Ignite UI for Angular Toggle ディレクティブを使用した作業を開始
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxToggleModule` をインポートします。
 
diff --git a/docs/angular/src/content/jp/components/tooltip.mdx b/docs/angular/src/content/jp/components/tooltip.mdx
index 7e66619d67..a06725c76f 100644
--- a/docs/angular/src/content/jp/components/tooltip.mdx
+++ b/docs/angular/src/content/jp/components/tooltip.mdx
@@ -31,7 +31,7 @@ Ignite UI for Angular Tooltip ディレクティブを使用した作業を開
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、**app.module.ts** ファイルに `IgxTooltipModule` をインポートします。
 
@@ -85,7 +85,7 @@ Ignite UI for Angular Tooltip モジュールまたはディレクティブを
 
 ## Angular Tooltip の使用
 
-上記のようにシンプルなテキスト ツールチップを作成します。`IgxAvatarModule` をインポートして要素として [`IgxAvatar`](avatar.mdx) を使用します。
+上記のようにシンプルなテキスト ツールチップを作成します。`IgxAvatarModule` をインポートして要素として [`IgxAvatar`](/avatar) を使用します。
 
 ```typescript
 // app.module.ts
@@ -159,7 +159,7 @@ avatar をターゲットにして、<ApiLink type="TooltipTargetDirective" labe
 
 ツールチップのコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。
 
-<ApiLink type="TooltipDirective" label="igxTooltip" /> を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](avatar.mdx)、マップの場所アイコンに [`IgxIcon`](icon.mdx) を使用します。この目的のためには、各モジュールを取得する必要があります。
+<ApiLink type="TooltipDirective" label="igxTooltip" /> を活用し、マップの特定の場所について詳細な情報を提供します。単純な div を使用してマップを表示し、ツールチップのロゴに [`IgxAvatar`](/avatar)、マップの場所アイコンに [`IgxIcon`](/icon) を使用します。この目的のためには、各モジュールを取得する必要があります。
 
 ```typescript
 // app.module.ts
@@ -303,7 +303,7 @@ export class AppModule {}
 
 ### オーバーレイ構成
 
-<ApiLink type="TooltipDirective" label="igxTooltip" /> と <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> の両ディレクティブは、内部的に [`IgxOverlayService`](overlay.mdx) を使用してツールチップ要素を開閉します。
+<ApiLink type="TooltipDirective" label="igxTooltip" /> と <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> の両ディレクティブは、内部的に [`IgxOverlayService`](/overlay) を使用してツールチップ要素を開閉します。
 
 <ApiLink type="TooltipTargetDirective" label="igxTooltipTarget" /> ディレクティブは <ApiLink type="TooltipTargetDirective" member="positionsettings" label="positionSettings" /> プロパティを公開しており、ツールチップのアニメーション、UI 上での配置などをカスタマイズできます。未設定の場合はデフォルトの配置設定が適用されます。
 
@@ -466,10 +466,10 @@ $dark-tooltip: tooltip-theme(
 ```
 
 <DocsAside type="info" title="情報">
-ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](button.mdx)、[`IgxSwitch`](switch.mdx) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
+ダイアログ ウィンドウのコンテンツの一部として使用される追加コンポーネント ([`IgxButton`](/button)、[`IgxSwitch`](/switch) など) をスタイルするには、それぞれのコンポーネントに固有の追加テーマを作成し、ツールチップのスコープ内のみに配置する必要があります (残りのアプリケーションの影響を受けません)。
 </DocsAside>
 
-ツールチップは [`IgxOverlayService`](overlay.mdx) を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
+ツールチップは [`IgxOverlayService`](/overlay) を使用するため、スタイル設定するツールチップにカスタム テーマが適用されるよう、ダイアログ ウィンドウが表示されたときに DOM に配置される特定のアウトレットを提供します。
 
 ```html
 <igx-avatar
@@ -500,7 +500,7 @@ $dark-tooltip: tooltip-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tooltip をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
diff --git a/docs/angular/src/content/jp/components/transaction-classes.mdx b/docs/angular/src/content/jp/components/transaction-classes.mdx
index 753aac37ff..7574b3342c 100644
--- a/docs/angular/src/content/jp/components/transaction-classes.mdx
+++ b/docs/angular/src/content/jp/components/transaction-classes.mdx
@@ -17,7 +17,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 トランザクションの <ApiLink kind="interface" type="Transaction" member="id" /> はデータレコードごとに一意である必要があり、このトランザクションが影響するレコードを定義します。<ApiLink kind="enum" type="TransactionType" member="Type" /> は、実行する操作に応じて、`ADD`、`DELETE`、`UPDATE` の 3 つのトランザクションタイプのいずれかになります。<ApiLink kind="interface" type="Transaction" member="newValue" /> には、`ADD` トランザクションを追加する場合の新しいレコードの値が含まれます。既存のレコードを更新する場合、<ApiLink kind="interface" type="Transaction" member="newValue" /> には変更のみが含まれます。同じ ID の `UPDATE` タイプのトランザクションが複数あるレコードを削除する場合、<ApiLink kind="interface" type="Transaction" member="newValue" /> には削除されたレコードの値が含まれます。
 
-各タイプのトランザクションを追加する方法の例は、[トランザクションサービスの使用方法](transaction-how-to-use.mdx)のトピックで見ることができます。
+各タイプのトランザクションを追加する方法の例は、[トランザクションサービスの使用方法](/transaction-how-to-use)のトピックで見ることができます。
 
 操作 (トランザクション) を実行するたびに、トランザクション ログと取り消しスタックに追加されます。トランザクション ログ内のすべての変更は、レコードごとに蓄積されます。その時点から、サービスは集計された <ApiLink type="State" kind="interface" /> を維持します。<ApiLink type="State" kind="interface" /> は一意のレコードで構成され、すべてのレコードは上記のサポートされているトランザクション タイプのいずれかです。
 
@@ -33,15 +33,15 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下のトピックには、行編集を有効にするために <ApiLink type="BaseTransactionService" label="igxBaseTransactionService" /> を使用する方法の詳細な例が含まれます。
 
-- [Grid 行編集](grid/row-editing.mdx)
-- [Tree Grid 行編集](treegrid/row-editing.mdx)
-- [Hierarchical Grid 行編集](hierarchicalgrid/row-editing.mdx)
+- [Grid 行編集](/grid/row-editing)
+- [Tree Grid 行編集](/treegrid/row-editing)
+- [Hierarchical Grid 行編集](/hierarchicalgrid/row-editing)
 
 ## igxTransactionService および igxHierarchicalTransactionService に関する一般情報
 
 <ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionFactory" /> は、<ApiLink kind="interface" type="TransactionService" label="Transaction Service" />インターフェイスを実装する注入可能なミドルウェアです。コンポーネントはこれらを使用して、基になるデータに影響を与えることなく変更を蓄積できます。プロバイダーは、_access_、_manipulate_ (元に戻すとやり直し)、およびデータへの 1 つまたはすべての変更を_破棄またはコミット_するための API を公開します。
 
-より具体的な例では、<ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionService" kind="interface" /> は、[`IgxGrid`](grid/grid.mdx) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは <ApiLink kind="interface" type="TransactionService" member="startPending" /> を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
+より具体的な例では、<ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionService" kind="interface" /> は、[`IgxGrid`](/grid/grid) のセル編集と行編集の両方で機能します。セルが編集モードを終了すると、セル編集のトランザクションが追加されます。行の編集が開始されると、グリッドは <ApiLink kind="interface" type="TransactionService" member="startPending" /> を呼び出してトランザクション サービスを保留状態に設定します。編集された各セルは、保留中のトランザクション ログに追加されますが、メイン トランザクション ログには追加されません。行が編集モードを終了すると、すべての変更がメイン トランザクション ログと undo ログに単一のトランザクションとして追加されます。
 
 いずれのケース (セル編集と行編集) も、グリッド編集の状態は、更新、追加、削除されたすべての行とその最後の状態で構成されます。これらは、後で一度に、または ID ごとに検査、操作、および送信できます。編集モードに応じて、個々のセルまたは行の変更が収集され、データ行/レコードごとに蓄積されます。
 
@@ -55,7 +55,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下のトピックで、一括編集を使用した igxGrid の実装方法の詳細な例を見つけることができます。
 
-- [Grid 一括編集](grid/batch-editing.mdx)
+- [Grid 一括編集](/grid/batch-editing)
 
 ## igxHierarchicalTransactionService の使用
 
@@ -75,12 +75,12 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 以下は、<ApiLink type="TreeGrid" label="igxTreeGrid" /> と <ApiLink type="HierarchicalGrid" label="igxHierarchicalGrid" /> で一括編集を実装する方法の詳細な例を含むトピックです。
 
-- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
+- [Tree Grid 一括編集](/treegrid/batch-editing)
+- [Hierarchical Grid 一括編集](/hierarchicalgrid/batch-editing)
 
 ## トランザクション ファクトリ
 
-Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](grid/batch-editing.mdx) と [`Hierarchical Grid`](hierarchicalgrid/batch-editing.mdx) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](treegrid/batch-editing.mdx) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
+Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](/grid/batch-editing) と [`Hierarchical Grid`](/hierarchicalgrid/batch-editing) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](/treegrid/batch-editing) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
 
 ## トランザクション ファクトリの使用
 
@@ -161,8 +161,8 @@ export class GridViewComponent {
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス](transaction.mdx)
-- [トランザクション サービスの使用方法](transaction-how-to-use.mdx)
-- [Grid 一括編集](grid/batch-editing.mdx)
-- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
+- [トランザクション サービス](/transaction)
+- [トランザクション サービスの使用方法](/transaction-how-to-use)
+- [Grid 一括編集](/grid/batch-editing)
+- [Tree Grid 一括編集](/treegrid/batch-editing)
+- [Hierarchical Grid 一括編集](/hierarchicalgrid/batch-editing)
diff --git a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
index 1c8bd43d1e..d9cb0d5f27 100644
--- a/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
+++ b/docs/angular/src/content/jp/components/transaction-how-to-use.mdx
@@ -315,5 +315,5 @@ public onClear(): void {
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス](transaction.mdx)
-- [トランザクション サービス クラス階層](transaction-classes.mdx)
+- [トランザクション サービス](/transaction)
+- [トランザクション サービス クラス階層](/transaction-classes)
diff --git a/docs/angular/src/content/jp/components/transaction.mdx b/docs/angular/src/content/jp/components/transaction.mdx
index f0c9e43c85..2f044f3dbb 100644
--- a/docs/angular/src/content/jp/components/transaction.mdx
+++ b/docs/angular/src/content/jp/components/transaction.mdx
@@ -27,9 +27,9 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス" /> 上に 3 つのクラスを構築したことにより、ユーザーは、行ったすべての変更、または特定のレコードに加えられた変更のみを一度にコミットできます。これらのクラスは、<ApiLink type="BaseTransactionService" label="igxBaseTransactionService" />、<ApiLink type="TransactionService" />、<ApiLink type="HierarchicalTransactionService" kind="interface" /> です。
 
 <ApiLink type="TransactionService" /> と <ApiLink type="HierarchicalTransactionService" kind="interface" /> は、<ApiLink type="Grid" label="igxGrid" />、<ApiLink type="HierarchicalGrid" label="igxHierarchicalGrid" />、および <ApiLink type="TreeGrid" label="igxTreeGrid" /> コンポーネントと完全に統合されています。以下のトピックは、トランザクションを有効にしてこれらのコンポーネントを使用する詳細な例を示します。
-- [igxGrid 一括編集とトランザクション](grid/batch-editing.mdx)
-- [igxHierarchicalGrid 一括編集とトランザクション](hierarchicalgrid/batch-editing.mdx)
-- [igxTreeGrid 一括編集とトランザクション](treegrid/batch-editing.mdx)
+- [igxGrid 一括編集とトランザクション](/grid/batch-editing)
+- [igxHierarchicalGrid 一括編集とトランザクション](/hierarchicalgrid/batch-editing)
+- [igxTreeGrid 一括編集とトランザクション](/treegrid/batch-editing)
 
 <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス" />が提供する利点に関する詳細については、[Building a transaction service for managing large scale editing experiences](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) ブログ (英語) をご覧ください。
 
@@ -40,10 +40,10 @@ A more detailed overview of the opportunities that the <ApiLink kind="interface"
 <hr/>
 
 - <ApiLink kind="interface" type="TransactionService" label="トランザクション サービス API" />
-- [トランザクション サービス クラス階層](transaction-classes.mdx)
-- [トランザクション サービスの使用方法](transaction-how-to-use.mdx)
-- [igxGrid を使用して CRUD 操作の構築](general/how-to/how-to-perform-crud.mdx)
-- [Grid 一括編集](grid/batch-editing.mdx)
-- [Tree Grid 一括編集](treegrid/batch-editing.mdx)
-- [Hierarchical Grid 一括編集](hierarchicalgrid/batch-editing.mdx)
+- [トランザクション サービス クラス階層](/transaction-classes)
+- [トランザクション サービスの使用方法](/transaction-how-to-use)
+- [igxGrid を使用して CRUD 操作の構築](/general/how-to/how-to-perform-crud)
+- [Grid 一括編集](/grid/batch-editing)
+- [Tree Grid 一括編集](/treegrid/batch-editing)
+- [Hierarchical Grid 一括編集](/hierarchicalgrid/batch-editing)
 - [「Building a transaction service for managing large scale editing experiences」 ブログ](https://blog.angular.io/building-a-transaction-service-for-managing-large-scale-editing-experiences-ded666eafd5e) (英語)
diff --git a/docs/angular/src/content/jp/components/tree.mdx b/docs/angular/src/content/jp/components/tree.mdx
index 9bd99dadc1..85cab6484a 100644
--- a/docs/angular/src/content/jp/components/tree.mdx
+++ b/docs/angular/src/content/jp/components/tree.mdx
@@ -38,7 +38,7 @@ Ignite UI for Angular Tree コンポーネントの使用を開始するには
 ng add igniteui-angular
 ```
 
-Ignite UI for Angular については、「[はじめに](general/getting-started.mdx)」トピックをご覧ください。
+Ignite UI for Angular については、「[はじめに](/general/getting-started)」トピックをご覧ください。
 
 次に、app.module ファイルに `IgxTreeModule` をインポートします。
 
@@ -425,7 +425,7 @@ $custom-tree-theme: tree-theme(
 
 ### Tailwind によるスタイル設定
 
-カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](themes/misc/tailwind-classes.mdx)ください。
+カスタム Tailwind ユーティリティ クラスを使用して tree をスタイル設定できます。まず [Tailwind を設定して](/themes/misc/tailwind-classes)ください。
 
 グローバル スタイルシートに Tailwind をインポートした上で、以下のように必要なテーマ ユーティリティを適用します:
 
@@ -472,7 +472,7 @@ $custom-tree-theme: tree-theme(
 
 |制限|説明|
 |--- |--- |
-| 再帰的なテンプレート ノード | `igx-tree` は、テンプレートを介した igx-tree-nodes の再帰的な作成をサポートしていません。[詳細](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification#assumptions-and-limitations)をご覧ください。すべてのノードを手動で宣言する必要があります。つまり、非常に深い階層を視覚化する場合は、テンプレート ファイルのサイズに影響します。ツリーは、主にレイアウト/ナビゲーション コンポーネントとして使用することを目的としています。多数のレベルの深度と同種のデータを含む階層データ ソースを視覚化する必要がある場合は、[**IgxTreeGrid**](treegrid/tree-grid.mdx) を使用できます。|
+| 再帰的なテンプレート ノード | `igx-tree` は、テンプレートを介した igx-tree-nodes の再帰的な作成をサポートしていません。[詳細](https://github.com/IgniteUI/igniteui-angular/wiki/Tree-Specification#assumptions-and-limitations)をご覧ください。すべてのノードを手動で宣言する必要があります。つまり、非常に深い階層を視覚化する場合は、テンプレート ファイルのサイズに影響します。ツリーは、主にレイアウト/ナビゲーション コンポーネントとして使用することを目的としています。多数のレベルの深度と同種のデータを含む階層データ ソースを視覚化する必要がある場合は、[**IgxTreeGrid**](/treegrid/tree-grid) を使用できます。|
 |古い ViewEngine (Ivy 以前) での IgxTreeNodes の使用|`enableIvy:false` が tsconfig.json に設定されている場合、Angular の View Engine (Ivy以前) にツリーが使用されないという問題があります。|
 |FireFox のタブ ナビゲーション|ツリーにスクロールバーがある場合、キーボード ナビゲーションを介してツリーにタブで移動すると、最初に igx-tree-node 要素にフォーカスされます。これは FireFox のデフォルトの動作ですが、ツリーに明示的な `tabIndex = -1` を設定することで解決できます。
 

From cb296846d9cc8266ce3570233c46398ebfd29116 Mon Sep 17 00:00:00 2001
From: Dobromir Tsvetkov <46093564+dobromirts@users.noreply.github.com>
Date: Tue, 14 Jul 2026 14:33:37 +0300
Subject: [PATCH 22/30] chore(docs): remove legacy divider--half spacers (#430)

---
 .../themes/sass/component-themes.mdx          |  2 --
 .../src/content/jp/components/ai/skills.mdx   |  3 ---
 .../content/jp/components/ai/theming-mcp.mdx  |  2 --
 .../themes/sass/component-themes.mdx          |  2 --
 .../charts/features/chart-axis-gridlines.mdx  |  6 -----
 .../charts/features/chart-axis-layouts.mdx    |  7 -----
 .../charts/features/chart-axis-options.mdx    | 15 -----------
 .../features/chart-data-annotations.mdx       | 10 -------
 .../charts/features/chart-markers.mdx         |  8 +++++-
 .../charts/features/chart-titles.mdx          |  2 --
 .../en/components/charts/types/area-chart.mdx | 26 -------------------
 .../en/components/charts/types/bar-chart.mdx  |  2 --
 .../components/charts/types/column-chart.mdx  | 19 --------------
 .../charts/types/composite-chart.mdx          |  2 --
 .../components/charts/types/gantt-chart.mdx   |  2 --
 .../en/components/charts/types/line-chart.mdx | 18 -------------
 .../components/charts/types/pyramid-chart.mdx |  2 --
 .../components/charts/types/radial-chart.mdx  | 12 ---------
 .../components/charts/types/scatter-chart.mdx | 12 ---------
 .../components/charts/types/spline-chart.mdx  | 12 ---------
 .../geo-map-type-scatter-bubble-series.mdx    |  2 --
 .../geo-map-type-scatter-contour-series.mdx   |  2 --
 .../content/en/components/grids/data-grid.mdx |  2 --
 .../src/content/en/components/grids/list.mdx  |  4 ---
 .../src/content/en/components/grids/tree.mdx  |  4 ---
 .../en/components/inputs/color-editor.mdx     |  4 ---
 .../en/components/inputs/combo/overview.mdx   |  2 --
 .../en/components/inputs/file-input.mdx       |  4 +--
 .../en/components/inputs/highlight.mdx        |  2 +-
 .../content/en/components/inputs/radio.mdx    |  4 ---
 .../content/en/components/inputs/switch.mdx   |  4 ---
 .../content/en/components/inputs/tooltip.mdx  |  2 --
 .../content/en/components/layouts/card.mdx    |  4 +--
 .../layouts/dock-manager-customization.mdx    |  2 --
 .../layouts/dock-manager-embedding-frames.mdx |  2 --
 .../layouts/dock-manager-updating-panes.mdx   |  2 --
 .../en/components/layouts/dock-manager.mdx    | 15 -----------
 .../content/en/components/layouts/stepper.mdx |  8 ------
 .../en/components/notifications/snackbar.mdx  |  4 ---
 .../en/components/scheduling/calendar.mdx     |  2 --
 .../en/components/spreadsheet-activation.mdx  |  2 --
 .../components/spreadsheet-chart-adapter.mdx  |  2 --
 .../en/components/spreadsheet-clipboard.mdx   |  4 ---
 .../en/components/spreadsheet-commands.mdx    |  4 ---
 .../spreadsheet-conditional-formatting.mdx    |  2 --
 .../en/components/spreadsheet-configuring.mdx |  2 --
 .../en/components/spreadsheet-hyperlinks.mdx  |  2 --
 .../en/components/spreadsheet-overview.mdx    |  4 ---
 .../jp/components/charts/types/bar-chart.mdx  |  2 --
 .../components/charts/types/column-chart.mdx  | 19 --------------
 .../jp/components/inputs/highlight.mdx        |  2 +-
 src/html-to-md.ts                             |  9 ++-----
 src/plugins/remark-html-transforms.ts         |  6 ++---
 53 files changed, 15 insertions(+), 284 deletions(-)

diff --git a/docs/angular/src/content/en/components/themes/sass/component-themes.mdx b/docs/angular/src/content/en/components/themes/sass/component-themes.mdx
index 797e81178b..7be732493b 100644
--- a/docs/angular/src/content/en/components/themes/sass/component-themes.mdx
+++ b/docs/angular/src/content/en/components/themes/sass/component-themes.mdx
@@ -216,8 +216,6 @@ The above instance could also be achieved without using any Sass. All we need to
 }
 ```
 
-<div class="divider-half"></div>
-
 ## API Overview
 
 <hr/>
diff --git a/docs/angular/src/content/jp/components/ai/skills.mdx b/docs/angular/src/content/jp/components/ai/skills.mdx
index 7888075ba0..7c3fc9dbed 100644
--- a/docs/angular/src/content/jp/components/ai/skills.mdx
+++ b/docs/angular/src/content/jp/components/ai/skills.mdx
@@ -287,8 +287,6 @@ Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.mdx
 
 ## その他のリソース
 
-<div class="divider--half"></div>
-
 
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/getting-started">Ignite UI for Angular で作業を開始</a>
 - <a href="https://jp.infragistics.com/products/ignite-ui-angular/angular/components/general/cli-overview">Angular Schematics & Ignite UI CLI</a>
@@ -297,7 +295,6 @@ Theming MCP の詳細については、[Ignite UI Theming MCP](./theming-mcp.mdx
 - [Ignite UI CLI MCP](./cli-mcp.mdx)
 - [Ignite UI Theming MCP](./theming-mcp.mdx)
 
-<div class="divider--half"></div>
 コミュニティに参加して新しいアイデアをご提案ください。
 
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
index f4ddabf26d..674661c15f 100644
--- a/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
+++ b/docs/angular/src/content/jp/components/ai/theming-mcp.mdx
@@ -370,8 +370,6 @@ ng add igniteui-angular
 - [Ignite UI for Angular スキル](./skills.mdx)
 - [Ignite UI CLI MCP](./cli-mcp.mdx)
 
-<div class="divider--half"></div>
-
 コミュニティは常に活気があり、新しいアイデアを歓迎しています。
 
 - [Ignite UI for Angular **フォーラム** (英語)](https://www.infragistics.com/community/forums/f/ignite-ui-for-angular)
diff --git a/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx b/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
index c6f867ae4d..0fbedf9a9b 100644
--- a/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
+++ b/docs/angular/src/content/jp/components/themes/sass/component-themes.mdx
@@ -215,8 +215,6 @@ CSS 変数を使用する間は、`::ng-deep` 擬似セレクターは必要あ
 }
 ```
 
-<div class="divider-half"></div>
-
 ## API の概要
 
 <hr/>
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
index 777cde3828..0cbb4eaa9a 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-gridlines.mdx
@@ -35,8 +35,6 @@ This example shows how configure the axis gridline to display major and minor gr
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Axis Gridlines Properties
 
 Setting the axis interval property specifies how often major gridlines and axis labels are rendered on an axis. Similarly, the axis minor interval property specifies how frequent minor gridlines are rendered on an axis.
@@ -76,8 +74,6 @@ The following example demonstrates a <ApiLink type="DataChart" /> with the above
 <Sample src="/charts/data-chart/dash-array-axes" height={450} alt="{Platform} Axis Dash Array Example" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Axis Tickmarks Example
 
 Axis tick marks are enabled by setting the <ApiLink type="CategoryChart" member="xAxisTickLength" label="XAxisTickLength" /> and <ApiLink type="CategoryChart" member="yAxisTickLength" label="YAxisTickLength" /> properties to a value greater than 0. These properties specifies the length of the line segments forming the tick marks.
@@ -91,8 +87,6 @@ The following example demonstrates how to customize the tickmarks by setting the
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Axis Tickmarks Properties
 
 You can customize how the axis tickmarks are displayed in our {Platform} chats by setting the following properties:
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
index 7aef38aa1f..68f83fd105 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-layouts.mdx
@@ -54,8 +54,6 @@ The following example depicts a stock price and trade volume chart with a [Stock
 
 
 
-<div class="divider--half"></div>
-
 ### Axis Crossing Example
 
 In addition to placing axes outside plot area, the {Platform} <ApiLink type="DataChart" /> also provides options to position axes inside of plot area and make them cross at specific values. For example, you can create trigonometric chart by setting <ApiLink type="Axis" member="crossingAxis" label="CrossingAxis" /> and <ApiLink type="Axis" member="crossingValue" label="CrossingValue" /> properties on both x-axis and y-axis to render axis lines and axis labels such that they are crossing at (0, 0) origin point.
@@ -67,9 +65,6 @@ The following example shows a Sin and Cos wave represented by a [Scatter Spline
 
 
 
-<div class="divider--half"></div>
-
-
 <PlatformBlock for="Blazor">
 
 
@@ -82,8 +77,6 @@ The following example demonstrates how to style the data chart using the <ApiLin
 
 
 
-<div class="divider--half"></div>
-
 </PlatformBlock>
 
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
index afc560708c..77483ca2f8 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-axis-options.mdx
@@ -23,8 +23,6 @@ The axis titles feature of the {Platform} charts, allows you to add contextual i
 <Sample src="/charts/category-chart/axis-titles" height={450} alt="{Platform} Axis Titles Example" />
 
 
-<div class="divider--half"></div>
-
 
 ## Axis Labels Example
 
@@ -35,8 +33,6 @@ The {Platform} Charts allows you full control over configuring, formatting, and
 
 
 
-<div class="divider--half"></div>
-
 ## Axis Labels Management & Formatting
 
 The axes of the chart have the ability to perform an enhanced calculation regarding the amount of space available to the labels of the owning axis. This enhanced calculation allows the axis to optimize the amount of space given to it in order to display more labels for the given axis.
@@ -54,8 +50,6 @@ The following example formats the yAxis with a <ApiLink pkg="geo-core" type="Num
 <Sample src="/charts/category-chart/format-specifiers" height={450} alt="{Platform} Format Specifiers for Axis Labels" />
 
 
-<div class="divider--half"></div>
-
 ## Axis Range Example
 
 In the {Platform} charts, you can define a range minimum and range maximum value of a numeric or time axis. The range minimum is the lowest value of the axis and the range maximum is the highest value of the axis. These are set by setting the <ApiLink type="CategoryChart" member="yAxisMinimumValue" label="YAxisMinimumValue" /> and <ApiLink type="CategoryChart" member="yAxisMaximumValue" label="YAxisMaximumValue" /> options.
@@ -67,9 +61,6 @@ By default, charts will calculate the minimum and maximum values for the numeric
 
 
 
-<div class="divider--half"></div>
-
-
 ## Axis Modes & Scale
 
 In the <ApiLink type="FinancialChart" /> and <ApiLink type="CategoryChart" /> controls, you can choose if your data is plotted on logarithmic scale along the y-axis when the <ApiLink type="CategoryChart" member="yAxisIsLogarithmic" label="YAxisIsLogarithmic" /> property is set to true or on linear scale when this property is set to false (default value). With the <ApiLink type="CategoryChart" member="yAxisLogarithmBase" label="YAxisLogarithmBase" /> property, you can change base of logarithmic scale from default value of 10 to other integer value.
@@ -83,8 +74,6 @@ In addition to <ApiLink type="FinancialChart" member="yAxisMode" label="YAxisMod
 
 
 
-<div class="divider--half"></div>
-
 ## Axis Gap Example
 
 The <ApiLink type="CategoryChart" member="xAxisGap" label="XAxisGap" /> property of the {Platform} charts, determines the amount of space between columns or bars of plotted series. This property accepts a numeric value between 0.0 and 1.0. The value represents a relative width of the gap out of the available number of pixels between the series. Setting this property to 0 would mean there is no gap rendered between the series, and setting it 1 would render the maximum available gap.
@@ -100,8 +89,6 @@ The following example shows the average maximum temperature in Celsius in New Yo
 
 
 
-<div class="divider--half"></div>
-
 ## Axis Overlap Example
 
 The <ApiLink type="CategoryChart" member="xAxisOverlap" label="XAxisOverlap" /> property of the {Platform} charts, allows setting the overlap of the rendered columns or bars of plotted series. This property accepts a numeric value between -1.0 and 1.0. The value represents a relative overlap out of the available number of pixels dedicated to each series. Setting this property to a negative value (down to -1.0) results in the categories being pushed away from each other, producing a gap between themselves. Conversely, setting this property to a positive value (up to 1.0) results in the categories overlapping each other. A value of 1 directs the chart to render the categories on top of each other.
@@ -113,8 +100,6 @@ The following example shows a comparison of the highest grossing worldwide film
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart features in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
index d95ecd6acd..e60b91d639 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-data-annotations.mdx
@@ -39,8 +39,6 @@ For example, you can use DataAnnotationSliceLayer to annotate stock prices with
 <Sample src="/charts/data-chart/data-annotation-slice-layer" height={500} alt="{Platform} Data Annotation Slice Layer Example" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Data Annotation Strip Layer Example
 
 In {Platform}, the <ApiLink type="DataAnnotationStripLayer" /> renders multiple vertical or horizontal strips between 2 values on an axis in the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate duration of events (e.g. stock market crash) on x-axis or important range of values on y-axis. Setting the TargetAxis property to y-axis will render data annotation layer as horizontal strips or setting TargetAxis property to x-axis will render data annotation layer as vertical strips. Similarly to all series, the <ApiLink type="DataAnnotationStripLayer" /> also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 1 numeric data column mapped to the AnnotationValueMemberPath property.
@@ -50,8 +48,6 @@ For example, you can use <ApiLink type="DataAnnotationStripLayer" /> to annotate
 <Sample src="/charts/data-chart/data-annotation-strip-layer" height={500} alt="{Platform} Data Annotation Strip Layer Example" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Data Annotation Line Layer Example
 
 In {Platform}, <ApiLink type="DataAnnotationLineLayer" /> renders multiple lines between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate stock chart with growth and decline in stock prices. Similarly to all series, the DataAnnotationLineLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" />  properties.
@@ -61,8 +57,6 @@ For example, you can use DataAnnotationLineLayer to annotate growth and decline
 <Sample src="/charts/data-chart/data-annotation-line-layer" height={500} alt="{Platform} Data Annotation Line Layer Example" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Data Annotation Rect Layer Example
 
 In {Platform}, the <ApiLink type="DataAnnotationRectLayer" /> renders multiple rectangles defined by starting and ending points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate region of plot area such as bearish patterns in stock prices. Similarly to all series, the DataAnnotationRectLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the rectangles. The starting points should be mapped using using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties.
@@ -72,8 +66,6 @@ For example, you can use DataAnnotationRectLayer to annotate bearish patterns an
 <Sample src="/charts/data-chart/data-annotation-rect-layer" height={500} alt="{Platform} Data Annotation Rect Layer Example" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Data Annotation Band Layer Example
 
 In {Platform}, the <ApiLink type="DataAnnotationBandLayer" /> renders multiple skewed rectangles (free-form parallelogram) between 2 points in plot area of the <ApiLink type="DataChart" /> component. This data annotation layer can be used to annotate range of growth and decline in stock prices. Similarly to all series, the DataAnnotationBandLayer also supports data binding via the <ApiLink type="DataSource" /> property that can be set to a collection of data items which should have at least 4 numeric data columns representing x/y coordinates of starting point and ending point of the lines. The starting points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="startValueXMemberPath" label="StartValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="startValueYMemberPath" label="StartValueYMemberPath" /> properties and the ending points should be mapped using <ApiLink type="DataAnnotationLineLayer" member="endValueXMemberPath" label="EndValueXMemberPath" /> and <ApiLink type="DataAnnotationLineLayer" member="endValueYMemberPath" label="EndValueYMemberPath" /> properties. In addition, you can specify thickness/size of the skewed rectangle by binding numeric data column to the AnnotationBreadthMemberPath property.
@@ -83,8 +75,6 @@ For example, you can use DataAnnotationBandLayer to annotate range of growth in
 <Sample src="/charts/data-chart/data-annotation-band-layer" height={600} alt="{Platform} Data Annotation Band Layer Example" />
 
 
-<div class="divider--half"></div>
-
 ## API References
 
 The following is a list of API members mentioned in the above sections:
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
index 12952bb326..b3b7ebb47f 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-markers.mdx
@@ -112,7 +112,13 @@ The following sample demonstrates `MarkerSize` on scatter series with an interac
 For `BubbleSeries`, the `MarkerSize` property does not override the bubble radius, which is controlled by the radius data column and the `RadiusScale`. Bubble sizes remain entirely driven by the data and scale configuration.
 </DocsAside>
 
-<div class="divider--half"></div>
+## {Platform} Chart Checkmark Marker Type
+
+The {ProductName} charts include a `Checkmark` option in the `MarkerType` enum. This marker renders a V-shaped checkmark icon inside a circle on data points in your chart.
+
+You can apply the `Checkmark` marker type to an individual series by setting its `MarkerType` property to `MarkerType.Checkmark`. To use the checkmark shape for all series in the chart simultaneously, set the chart's `MarkerAutomaticBehavior` property to `MarkerAutomaticBehavior.Checkmark`.
+
+The `SeriesViewer.CheckmarkMarkerTemplate` property defines the marker template used for series with a checkmark marker type, and can be used to customize its appearance across the chart.
 
 ## {Platform} Chart Marker Templates
 
diff --git a/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx b/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
index 7a5ae61c20..eae466cd4a 100644
--- a/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
+++ b/docs/xplat/src/content/en/components/charts/features/chart-titles.mdx
@@ -21,8 +21,6 @@ The title and subtitle feature of the chart control allows you to add informatio
 <Sample src="/charts/category-chart/line-chart-with-titles" height={600} alt="{Platform} Chart Synchronization Example" />
 
 
-<div class="divider--half"></div>
-
 ## API References
 
 When adding a title or subtitle to the chart control, the content of the chart automatically resizes allowing for the title and subtitle information.
diff --git a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
index e4d682eaec..9e8af44dee 100644
--- a/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/area-chart.mdx
@@ -24,8 +24,6 @@ You can create {Platform} Category Area Chart in the <ApiLink type="CategoryChar
 
 
 
-<div class="divider--half"></div>
-
 ## Area Chart Recommendations
 
 ### Area Chart Use Cases
@@ -67,8 +65,6 @@ There are several common use cases for choosing an Area Chart:
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Area Chart with Multiple Series
 
 Similarly to how you can show multiple [Line Chart](line-chart.mdx) and [Spline Chart](spline-chart.mdx), you may also combine multiple Area Charts in the same control. This is accomplished by binding multiple data source to <ApiLink type="CategoryChart" member="dataSource" label="DataSource" /> property of the <ApiLink type="CategoryChart" /> control.
@@ -76,8 +72,6 @@ Similarly to how you can show multiple [Line Chart](line-chart.mdx) and [Spline
 <Sample src="/charts/category-chart/area-chart-multiple-sources" height={600} alt="{Platform} Area Chart with Multiple Sources" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Area Chart Styling
 
 Area charts often have semi-transparent fill for their areas, thicker lines and slightly larger markers than usual. Below is an example showing how you can style the Area Chart from earlier accordingly.
@@ -87,8 +81,6 @@ Area charts often have semi-transparent fill for their areas, thicker lines and
 
 
 
-<div class="divider--half"></div>
-
 ## Advanced Types of Area Charts
 
 The following sections explain more advanced types of {Platform} Area Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
@@ -102,8 +94,6 @@ The {Platform} Step Area Chart belongs to a group of category charts and it is r
 
 
 
-<div class="divider--half"></div>
-
 
 The following sections explain more advanced types of {Platform} Area Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
 
@@ -116,8 +106,6 @@ The {Platform} Range Area Chart allows you show the area as a range between two
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked Area Chart
 
 The {Platform} Stacked Area Chars is rendered using a collection of points connected by line segments, with the area below the line filled in and stacked on top of each other. Stacked Area Charts follow all the same requirements as Area Charts, with the only difference being that visually, the shaded areas are stacked on top of each other. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="StackedAreaSeries" />, as shown in the example below.
@@ -127,8 +115,6 @@ The {Platform} Stacked Area Chars is rendered using a collection of points conne
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked 100% Area Chart
 
 The {Platform} Stacked 100% Area Chart allows you represent your data as part of a whole being changed over time e.g. a country's energy consumption related to the sources from which it is produced. In such cases representing all stacked elements equally may be a better idea. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="Stacked100AreaSeries" />, as shown in the example below.
@@ -138,8 +124,6 @@ The {Platform} Stacked 100% Area Chart allows you represent your data as part of
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked Spline Area Chart
 
 The {Platform} Stacked Spline Area Chart is rendered using a collection of points connected by curved spline segments, with the area below the curved spline fill in and stacked on top of each other. Stacked Spline Area Chart follows all of the same requirements as area charts, with the only difference being that the visually shaded areas are stacked on top of each other. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="StackedSplineAreaSeries" />, as shown in the example below.
@@ -149,8 +133,6 @@ The {Platform} Stacked Spline Area Chart is rendered using a collection of point
 
 
 
-<div class="divider--half"></div>
-
 
 ## {Platform} Stacked 100% Spline Area Chart
 
@@ -161,8 +143,6 @@ The {Platform} Stacked 100% Spline Area Chart is identical to the Stacked Spline
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Area Chart
 
 The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-chart.mdx) and has a shape of a filled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Area Chart, but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialAreaSeries" />, as shown in the example below.
@@ -172,8 +152,6 @@ The {Platform} Radial Area Chart belongs to a group of [Radial Chart](radial-cha
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Polar Area Chart
 
 The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.mdx) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a straight line and then filling the area represented by the connected points. The Polar Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarAreaSeries" />, as shown in the example below.
@@ -183,8 +161,6 @@ The {Platform} Polar Area Chart belongs to a group of [Polar Chart](polar-chart.
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Polar Spline Area Chart
 
 The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar-chart.mdx) and have a shape of a filled polygon, where vertices or corners are located at the polar (angle/radius) coordinates of data points and are connected by a curved spline and then filling the area represented by the connected points. The Polar Spline Area Chart uses the same concepts of data plotting as the Scatter Marker Chart, but instead wraps the points around a circle and fills in the area that is drawn, rather than stretching the points and area filled along a horizontal line. You can create this type of chart in <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="PolarSplineAreaSeries" />, as shown in the example below.
@@ -194,8 +170,6 @@ The {Platform} Polar Spline Area Chart belongs to a group of [Polar Chart](polar
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart types in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
index d59aa923fc..43539a22e7 100644
--- a/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/bar-chart.mdx
@@ -111,8 +111,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Range Bar Chart
 
 The {Platform} Range Bar Chart belongs to a group of range charts and is rendered using horizontal rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the left like the traditional [Category Bar Chart](bar-chart.mdx#{PlatformLower}-bar-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items.
diff --git a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
index eef4a839f0..3923b882f0 100644
--- a/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/column-chart.mdx
@@ -24,8 +24,6 @@ You can create {Platform} Column Chart in the <ApiLink type="CategoryChart" /> c
 
 
 
-<div class="divider--half"></div>
-
 ## Column Charts Recommendations
 
 ### Column Charts Use Cases
@@ -63,8 +61,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Column Chart with Multiple Series
 
 The Column Chart is able to render multiple columns per category for comparison purposes. You can create this type of chart in the <ApiLink type="CategoryChart" /> control by binding your data and setting the <ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> property to **Column** value, as shown in the example below:
@@ -74,9 +70,6 @@ The Column Chart is able to render multiple columns per category for comparison
 
 
 
-<div class="divider--half"></div>
-
-
 ## {Platform} Column Chart Styling
 
 The {Platform} Column Chart has many options for styling and modification of the visual appearance.
@@ -88,8 +81,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## Advanced Types of Column Charts
 
 The following sections explain more advanced types of {Platform} Column Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
@@ -106,8 +97,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked Column Chart
 
 The Stacked Column Chart is similar to the [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example) in all aspects, except the series are represented on top of one another rather than to the side. The Stacked Column Chart is used to show comparing results between series. Each stacked fragment in the collection represents one visual element in each stack. Each stack can contain both positive and negative values. All positive values are grouped on the positive side of the Y-Axis, and all negative values are grouped on the negative side of the Y-Axis. The Stacked Column Chart uses the same concepts of data plotting as the [Stacked Bar Chart](stacked-chart.mdx#{PlatformLower}-stacked-bar-chart) but data points are stacked along vertical line (Y-Axis) rather than along horizontal line (X-Axis).
@@ -119,8 +108,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked 100% Column Chart
 
 The Stacked 100% Column Chart is identical to the [Stacked Column Chart](stacked-chart.mdx#{PlatformLower}-stacked-column-chart) in all aspects except in their treatment of the values on Y-Axis. Instead of presenting a direct representation of the data, the Stacked 100 Column Chart presents the data in terms of percent of the sum of all values in a data point.
@@ -132,8 +119,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Range Column Chart
 
 The {Platform} Range Column Chart belongs to a group of range charts and is rendered using vertical rectangles that can appear in the middle of the plot area of the chart, rather than stretching from the bottom like the traditional [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example). This type of series emphasizes the amount of change between low values and high values in the same data point over a period of time or compares multiple items. Range values are represented on the Y-Axis and categories are displayed on the X-Axis.
@@ -147,8 +132,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Column Chart
 
 The Radial Column Chart belongs to a group of [Radial Chart](radial-chart.mdx), and is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Category Column Chart](column-chart.mdx#{PlatformLower}-column-chart-example), but wraps data points around a circle rather than stretching them horizontally.
@@ -160,8 +143,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart types in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
index 1732dce46f..ac6f8d7dae 100644
--- a/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/composite-chart.mdx
@@ -24,8 +24,6 @@ The following example demonstrates how to create Composite Chart using <ApiLink
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 - [Bar Chart](bar-chart.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
index 14410c11f2..7fb27c8a04 100644
--- a/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/gantt-chart.mdx
@@ -25,8 +25,6 @@ The following example demonstrates how to create Gantt Chart using <ApiLink type
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 - [Bar Chart](bar-chart.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
index 1c5cd3154e..21d2138f7b 100644
--- a/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/line-chart.mdx
@@ -24,8 +24,6 @@ You can create the {Platform} Line Chart in the <ApiLink type="CategoryChart" />
 
 
 
-<div class="divider--half"></div>
-
 ## Line Chart Recommendations
 
 ### Are {Platform} Line Charts right for your project?
@@ -82,8 +80,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Line Chart with Multiple Series
 
 Since the {Platform} Line Chart allows you to combine multiple series and compare or see how they change over time, let's see how easy it is to achieve this. All we need to do is bind to a data source containing the data for China and the USA, and the line chart will automatically update to fit the additional data.
@@ -95,8 +91,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Line Chart with Live Data
 
 The {Platform} Line chart is capable of handling high volumes of data, ranging into millions of data points, and updating them every few milliseconds as demonstrated in the following demo.
@@ -110,8 +104,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Styling Line Chart
 
 Once our chart is set up, we may want to make some further styling customizations such as change the line colors, change the legend font family, and/or increase the size of the axis labels to make it easier to read.
@@ -129,8 +121,6 @@ The following example demonstrates usage of the <ApiLink type="LineSeries" membe
 
 
 
-<div class="divider--half"></div>
-
 ## Advanced Types of Line Charts
 
 The following sections explain more advanced types of {Platform} Line Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
@@ -144,8 +134,6 @@ The Stacked Line Chart is often used to show the change of value over time such
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked 100% Line Chart
 
 The Stacked 100% Line Chart is identical to the Stacked Line Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Line Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
@@ -157,8 +145,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Line Chart
 
 The Radial Line Chart belongs to a group of radial charts and has a shape of an unfilled polygon that is bound by a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the Line Chart, but wraps the data points around a circular axis rather than stretching them horizontally.
@@ -170,8 +156,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Polar Line Chart
 
 The Polar Line Chart belongs to a group of polar charts and is rendered using a collection of straight lines connecting data points in polar (angle/radius) coordinate system. Polar Line Charts use the same concepts of data plotting as the [Scatter Line Chart](scatter-chart.mdx) with the difference that the visualization wraps data points around a circle rather than stretching them horizontally.
@@ -183,8 +167,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart types in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
index 42b0d99e1b..7048741d32 100644
--- a/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/pyramid-chart.mdx
@@ -24,8 +24,6 @@ The following example demonstrates how to create Pyramid Chart using <ApiLink ty
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 - [Bar Chart](bar-chart.mdx)
diff --git a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
index 4614fc7695..f0eb1d33e2 100644
--- a/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/radial-chart.mdx
@@ -24,8 +24,6 @@ The {Platform} Radial Area Chart has a shape of a filled polygon that is bound b
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Column Chart
 
 The Radial Column Chart is visualized by using a collection of rectangles that extend from the center of the chart toward the locations of data points. This utilizes the same concepts of data plotting as the [Column Chart](column-chart.mdx), but wraps data points around a circle rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialColumnSeries" />, as shown in the example below:
@@ -35,8 +33,6 @@ The Radial Column Chart is visualized by using a collection of rectangles that e
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Line Chart
 
 The {Platform} Radial Line Chart has renders as a collection of straight lines connecting data points. This chart type uses the same concept of data plotting as the [Line Chart](line-chart.mdx), but wraps the data points around a circular axis rather than stretching them horizontally. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to <ApiLink type="RadialLineSeries" />, as shown in the example below:
@@ -46,8 +42,6 @@ The {Platform} Radial Line Chart has renders as a collection of straight lines c
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Pie Chart
 
 The Radial Pie Chart uses pie slices that extend from the center of chart towards locations of data points. This chart type takes concepts of categorizing multiple series of data points and wraps them around a circular axis rather than stretching data points along a horizontal line. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="RadialPieSeries" />, as shown in the example below:
@@ -57,8 +51,6 @@ The Radial Pie Chart uses pie slices that extend from the center of chart toward
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Chart Styling
 
 Once our radial chart is created, we may want to make some further styling customizations such as a change of the line colors, marker types, or outline colors of those markers. This example demonstrates how to customize styling in <ApiLink type="DataChart" /> control.
@@ -66,14 +58,10 @@ Once our radial chart is created, we may want to make some further styling custo
 <Sample src="/charts/data-chart/radial-area-chart-styling" height={600} alt="{Platform} Radial Area Chart Styling" />
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Radial Chart Settings
 
 In addition, the labels can be configured to appear near or wide from the chart. This can be configured with the <ApiLink type="CategoryAngleAxis" member="labelMode" label="LabelMode" /> property for the <ApiLink type="CategoryAngleAxis" />.
 
-<div class="divider--half"></div>
-
 
 ## Additional Resources
 
diff --git a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
index c4b34a2a8d..9c529c6f66 100644
--- a/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/scatter-chart.mdx
@@ -24,8 +24,6 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Scatter Line Chart
 
 {Platform} Scatter Line Chart renders as a collection of markers connected by a straight lines, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterLineSeries" />, as shown in the example below:
@@ -35,8 +33,6 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Scatter Spline Chart
 
 {Platform} Scatter Spline Chart renders as a collection of markers connected by a curved spline, each having a pair of numeric X/Y values that determines its location in the Cartesian coordinate system. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterSplineSeries" />, as shown in the example below:
@@ -46,8 +42,6 @@ The {ProductName} Scatter Chart belongs to a group of charts that show the relat
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Scatter High Density Chart
 
 Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data ranging from thousands to millions of data points with very little loading time. Due to this chart type being designed for such a large amount of points, it is visualized as tiny dots as opposed to full sized markers, and displays areas with the most data using a higher color density representing a cluster of data points. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="HighDensityScatterSeries" />, as shown in the example below:
@@ -57,8 +51,6 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Scatter Area Chart
 
 {Platform} Scatter Area Chart draws a colored surface based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterAreaSeries" />, as shown in the example below:
@@ -68,8 +60,6 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Scatter Contour Chart
 
 {Platform} Scatter Contour Chart draws colored contour lines based on a triangulation of X and Y data with a numeric data value assigned to each point. This chart is useful for rendering heat maps, magnetic field strength or Wi-Fi strength in an office. You can create this type of chart in the <ApiLink type="DataChart" /> control by binding your data to a <ApiLink type="ScatterContourSeries" />, as shown in the example below:
@@ -79,8 +69,6 @@ Use the {Platform} Scatter High Density (HD) Chart to bind and show scatter data
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart types in these topics:
diff --git a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
index 7a017bf75f..ff22358113 100644
--- a/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
+++ b/docs/xplat/src/content/en/components/charts/types/spline-chart.mdx
@@ -23,8 +23,6 @@ The following example shows how to create {Platform} Spline Chart in the <ApiLin
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Spline Chart with Single Series
 
 The Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period for Europe, as shown in the example below.
@@ -36,8 +34,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Spline Chart with Multiple Series
 
 Since the Spline Chart allows you to combine multiple series and compare or see how they change over time. All we need to do is bind to a data source containing the data for China and the USA, and the chart will automatically update to fit the additional data.
@@ -49,8 +45,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Spline Chart Styling
 
 If you need a Spline Chart with more features such as composite other series, you can configure the markers, marker brushes, marker outlines, series brushes and series outlines as demonstrated below.
@@ -62,8 +56,6 @@ You can create this type of chart in the <ApiLink type="CategoryChart" /> contro
 
 
 
-<div class="divider--half"></div>
-
 ## Advanced Types of Spline Charts
 
 The following sections explain more advanced types of {Platform} Spline Charts that can be created using the <ApiLink type="DataChart" /> control instead of <ApiLink type="CategoryChart" /> control with simplified API.
@@ -79,8 +71,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} Stacked 100% Spline Chart
 
 The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.
@@ -92,8 +82,6 @@ You can create this type of chart in the <ApiLink type="DataChart" /> control by
 
 
 
-<div class="divider--half"></div>
-
 ## Additional Resources
 
 You can find more information about related chart types in these topics:
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
index 35b9f9b7e2..8a10a88091 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-bubble-series.mdx
@@ -23,8 +23,6 @@ In {Platform} map component, you can use the <ApiLink type="GeographicProportion
 
 
 
-<div class="divider--half"></div>
-
 The demo above shows the <ApiLink type="GeographicProportionalSymbolSeries" /> series and how to specify data binding options of the series. Automatic marker selection is configured along with marker collision avoidance logic, and marker outline and fill colors are specified too.
 
 ## Configuration Summary
diff --git a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
index e6222ff385..f67dcc84db 100644
--- a/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
+++ b/docs/xplat/src/content/en/components/geo-map-type-scatter-contour-series.mdx
@@ -23,8 +23,6 @@ In {Platform} map component, you can use the <ApiLink type="GeographicContourLin
 
 
 
-<div class="divider--half"></div>
-
 The <ApiLink type="GeographicContourLineSeries" /> works a lot like the <ApiLink type="GeographicScatterAreaSeries" /> except that it represents data as contour lines, colored using a fill scale and the geographic scatter area series, represents data as a surface interpolated using a color scale.
 
 ## Data Requirements
diff --git a/docs/xplat/src/content/en/components/grids/data-grid.mdx b/docs/xplat/src/content/en/components/grids/data-grid.mdx
index 11b171e201..ea77f7b1b9 100644
--- a/docs/xplat/src/content/en/components/grids/data-grid.mdx
+++ b/docs/xplat/src/content/en/components/grids/data-grid.mdx
@@ -72,8 +72,6 @@ In this {ProductName} Grid example, you can see how users can do both basic and
 
 
 
-<div class="divider--half"></div>
-
 ## Getting Started with {Platform} Data Grid
 
 ### Dependencies
diff --git a/docs/xplat/src/content/en/components/grids/list.mdx b/docs/xplat/src/content/en/components/grids/list.mdx
index eea407e7d2..df4afb2148 100644
--- a/docs/xplat/src/content/en/components/grids/list.mdx
+++ b/docs/xplat/src/content/en/components/grids/list.mdx
@@ -22,8 +22,6 @@ The following example represents a list populated with contacts with a name and
 
 <Sample src="/grids/list/overview" height={300} alt="{Platform} List Example" />
 
-<div class="divider--half"></div>
-
 ## Usage
 
 At its core the list web component allows you to easily display a vertical list of items.
@@ -557,8 +555,6 @@ igc-list-item::part(subtitle) {
 
 In this article we covered a lot of ground with the <ApiLink pkg="core" type="List" /> component. First, we created a simple list with text items. Then, we created a list of contact items and added functionality to them by using some additional {ProductName} components, like the <ApiLink pkg="core" type="Avatar" /> and <ApiLink pkg="core" type="Button" />. Finally, we changed the component's appearance through the exposed CSS parts.
 
-<div class="divider--half"></div>
-
 ## API References
 
 <ApiLink pkg="core" type="Avatar" /><br />
diff --git a/docs/xplat/src/content/en/components/grids/tree.mdx b/docs/xplat/src/content/en/components/grids/tree.mdx
index 0b3478b6b1..6dfb919a1a 100644
--- a/docs/xplat/src/content/en/components/grids/tree.mdx
+++ b/docs/xplat/src/content/en/components/grids/tree.mdx
@@ -31,8 +31,6 @@ In this basic {ProductName} Tree example, you can see how to define a tree and i
 
 
 
-<div class="divider--half"></div>
-
 ## How to Use {ProductName} Tree With Ignite UI
 
 
@@ -444,8 +442,6 @@ igc-tree-item {
 <Sample src="/grids/tree/styling" height={400} alt="Tree Styling Example" />
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/inputs/color-editor.mdx b/docs/xplat/src/content/en/components/inputs/color-editor.mdx
index 0eaced0662..6afed7f291 100644
--- a/docs/xplat/src/content/en/components/inputs/color-editor.mdx
+++ b/docs/xplat/src/content/en/components/inputs/color-editor.mdx
@@ -22,8 +22,6 @@ The {ProductName} Color Editor is a lightweight color picker component. The Colo
 <Sample src="/inputs/color-editor/overview" height={340} alt="{Platform} Color Editor Example" />
 
 
-<div class="divider--half"></div>
-
 ## Dependencies
 
 <PlatformBlock for="Angular, WebComponents, React">
@@ -209,8 +207,6 @@ public onValueChanged(calendar: IgrColorEditor, e: IgrColorEditorPanelSelectedVa
 </PlatformBlock>
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
index e68301cc87..ce06bc4334 100644
--- a/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
+++ b/docs/xplat/src/content/en/components/inputs/combo/overview.mdx
@@ -24,8 +24,6 @@ The {ProductName} ComboBox component provides a list of options from which users
 <Sample src="/inputs/combo/overview" height={400} alt="{Platform} Combo Example" />
 
 
-<div class="divider--half"></div>
-
 ## Getting Started with {Platform} ComboBox
 
 
diff --git a/docs/xplat/src/content/en/components/inputs/file-input.mdx b/docs/xplat/src/content/en/components/inputs/file-input.mdx
index 9c4bf2b940..70100acfab 100644
--- a/docs/xplat/src/content/en/components/inputs/file-input.mdx
+++ b/docs/xplat/src/content/en/components/inputs/file-input.mdx
@@ -17,8 +17,6 @@ The {ProductName} File Input component provides an interactive way for users to
 
 ## {Platform} File Input Example
 
-<div class="divider--half"></div>
-
 <Sample src="/inputs/file-input/overview" height={120} alt="{Platform} File Input Overview Example" />
 
 ## Usage
@@ -167,7 +165,7 @@ igc-file-input::part(label) {
 
 <Sample src="/inputs/file-input/styling" height={120} alt="{Platform} File Input Styling" />
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/inputs/highlight.mdx b/docs/xplat/src/content/en/components/inputs/highlight.mdx
index 5401382e97..88adc5fd0d 100644
--- a/docs/xplat/src/content/en/components/inputs/highlight.mdx
+++ b/docs/xplat/src/content/en/components/inputs/highlight.mdx
@@ -16,7 +16,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 {ProductName} Highlight is used to highlight parts of the page content to make it more noticeable for the user. It's a lightweight component that can be used in combination with other components to create a more interactive and engaging user experience.
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## Usage
 
diff --git a/docs/xplat/src/content/en/components/inputs/radio.mdx b/docs/xplat/src/content/en/components/inputs/radio.mdx
index 0414fe588f..54b40b246f 100644
--- a/docs/xplat/src/content/en/components/inputs/radio.mdx
+++ b/docs/xplat/src/content/en/components/inputs/radio.mdx
@@ -24,8 +24,6 @@ The {ProductName} Radio component allows the user to select a single option from
 
 
 
-<div class="divider--half"></div>
-
 ### Usage
 
 
@@ -484,8 +482,6 @@ igc-radio::part(label) {
 <Sample src="/inputs/radio/styling" height={205} alt="{Platform} Radio Styling" />
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/inputs/switch.mdx b/docs/xplat/src/content/en/components/inputs/switch.mdx
index 337a0d900c..1e146ea14f 100644
--- a/docs/xplat/src/content/en/components/inputs/switch.mdx
+++ b/docs/xplat/src/content/en/components/inputs/switch.mdx
@@ -23,8 +23,6 @@ The {ProductName} Switch component is a binary choice selection component that b
 
 
 
-<div class="divider--half"></div>
-
 ## Usage
 
 At its core, the <ApiLink pkg="core" type="Switch" /> component allows for toggling between on/off states. The default styling is done according to the selection controls specification in the Material Design guidelines.
@@ -386,8 +384,6 @@ The <ApiLink pkg="core" type="Switch" /> component exposes several CSS parts to
 <Sample src="/inputs/switches/styling" height={100} alt="{Platform} Switch Styling" />
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/inputs/tooltip.mdx b/docs/xplat/src/content/en/components/inputs/tooltip.mdx
index 6b72d0fdb7..2965c8ab39 100644
--- a/docs/xplat/src/content/en/components/inputs/tooltip.mdx
+++ b/docs/xplat/src/content/en/components/inputs/tooltip.mdx
@@ -483,8 +483,6 @@ igc-tooltip::part(bottom) {
 <Sample src="/inputs/tooltip/styling" height={140} alt="{Platform} Tooltip Styling Example" />
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/layouts/card.mdx b/docs/xplat/src/content/en/components/layouts/card.mdx
index c92f645f1c..e3203de67b 100644
--- a/docs/xplat/src/content/en/components/layouts/card.mdx
+++ b/docs/xplat/src/content/en/components/layouts/card.mdx
@@ -21,8 +21,6 @@ The {ProductName} Card displays text, images, icons, and buttons in a visually r
 
 <Sample src="/layouts/card/overview" height={640} alt="{Platform} Card Example" />
 
-<div class="divider--half"></div>
-
 ## Usage
 
 Cards allow you to easily display content composed of different types of objects or similar objects whose size and supported actions can vary.
@@ -575,7 +573,7 @@ igc-icon-button::part(base) {
 ### Summary
 In this article we covered a lot of ground with the card component. We created a simple card and added some images to make it a bit more appealing. We used some additional {Platform} inside our card, like avatars, buttons and icons, to enrich the experience and add some functionality. And finally, we changed the card's appearance by changing the major colors of the building blocks.
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx
index 246a860c1c..40b653263a 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager-customization.mdx
@@ -17,8 +17,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 The Infragistics {Platform} Dock Manager component provides you with the properties needed to further customize the layout to suit your specific application requirements.
 Let's dive in and explore how {Platform} DockManager empowers you to create exceptional user interfaces and enhance the productivity of your applications!
 
-<div class="divider--half"></div>
-
 ## Proximity Dock
 
 In this mode the joystick indicators are hidden and docking can be accomplished by dragging a pane close to the border of another pane. While dragging a pane, when the mouse cursor reaches the area corresponding to the dock position, a dock preview is shown. On mouse up the dragged pane is docked in the previewed location. To enable proximity docking, simply set the `proximityDock` property to **true**.
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx
index 50b94ab1ca..3da87f5bdf 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager-embedding-frames.mdx
@@ -28,8 +28,6 @@ The Infragistics {Platform} Dock Manager component provides you with the layout
     </button>
 </div> */}
 
-<div class="divider--half"></div>
-
 {/*
 ## Usage
 
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx
index 0e58a5f973..83600b8e8e 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager-updating-panes.mdx
@@ -28,8 +28,6 @@ The Infragistics {Platform} Dock Manager component provides you with the layout
     </button>
 </div> */}
 
-<div class="divider--half"></div>
-
 {/*
 ## Usage
 
diff --git a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
index dd91b0c36b..405e5b7ef1 100644
--- a/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
+++ b/docs/xplat/src/content/en/components/layouts/dock-manager.mdx
@@ -33,9 +33,6 @@ This example shows most functionalities and docking options of the <ApiLink type
 
 
 
-<div class="divider--half"></div>
-
-
 <PlatformBlock for="Angular, React, WebComponents">
 
 
@@ -62,8 +59,6 @@ defineComponents(IgcDockManagerComponent);
 </PlatformBlock>
 </PlatformBlock>
 
-<div class="divider--half"></div>
-
 
 <PlatformBlock for="React, WebComponents">
 
@@ -675,8 +670,6 @@ Contents and panes can be added to the <ApiLink type="DockManager" member="layou
 <Sample src="/layouts/dock-manager/add-content-runtime" height={700} alt="{Platform} Dock Manager Add Content Runtime Example" />
 
 
-
-<div class="divider--half"></div>
 </PlatformBlock>
 
 ### Events
@@ -687,8 +680,6 @@ The Dock Manager component raises events when specific end-user interactions are
 </PlatformBlock>
 
 
-<div class="divider--half"></div>
-
 
 <PlatformBlock for="WebComponents, React, Angular">
 
@@ -704,8 +695,6 @@ this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));
 </PlatformBlock>
 
 
-<div class="divider--half"></div>
-
 
 <PlatformBlock for="WebComponents">
 
@@ -718,8 +707,6 @@ this.dockManager.addEventListener('paneClose', ev => console.log(ev.detail));
 </PlatformBlock>
 
 
-<div class="divider--half"></div>
-
 ## Customization
 
 The Dock Manager component provides the option to customize all buttons using slots and parts. To change any of the buttons you simply have to define your own element inside the Dock Manager and set the slot attribute to the corresponding identifier.
@@ -951,8 +938,6 @@ In the following example, we demonstrate the ability of customizing the Dock Man
 
 
 
-<div class="divider--half"></div>
-
 ### CSS Parts
 
 | Part name | Description |
diff --git a/docs/xplat/src/content/en/components/layouts/stepper.mdx b/docs/xplat/src/content/en/components/layouts/stepper.mdx
index 11e6a793cc..a7e784409d 100644
--- a/docs/xplat/src/content/en/components/layouts/stepper.mdx
+++ b/docs/xplat/src/content/en/components/layouts/stepper.mdx
@@ -27,8 +27,6 @@ The following {ProductName} Stepper Example below shows the component in action.
 
 <Sample src="/layouts/stepper/linear" height={430} alt="{Platform} Linear Stepper Example" />
 
-<div class="divider--half"></div>
-
 ## Getting Started with {Platform} Stepper
 
 <PlatformBlock for="WebComponents">
@@ -229,8 +227,6 @@ The sample below demonstrates how stepper orientation and titles position could
 
 <Sample src="/layouts/stepper/orientation" height={528} alt="{Platform} Stepper Orientation Example" />
 
-<div class="divider--half"></div>
-
 ### Step States
 
 {Platform} <ApiLink pkg="core" type="Stepper" /> supports five steps states and each of them apply different styles by default:
@@ -387,8 +383,6 @@ The <ApiLink pkg="core" type="Stepper" /> component also gives you the ability t
 
 <Sample src="/layouts/stepper/animations" height={600} alt="{Platform} Stepper Animations Example" />
 
-<div class="divider--half"></div>
-
 ## Keyboard Navigation
 
 The {ProductName} Stepper provides a rich variety of keyboard interactions to the end-user. This functionality is enabled by default and allows end-users to easily navigate through the steps.
@@ -457,8 +451,6 @@ igc-step::part(indicator) {
 
 </PlatformBlock>
 
-<div class="divider--half"></div>
-
 ## API References
 
 <ApiLink pkg="core" type="Stepper" /><br />
diff --git a/docs/xplat/src/content/en/components/notifications/snackbar.mdx b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
index db36cee1bd..3a0ceb3080 100644
--- a/docs/xplat/src/content/en/components/notifications/snackbar.mdx
+++ b/docs/xplat/src/content/en/components/notifications/snackbar.mdx
@@ -24,8 +24,6 @@ This sample demonstrates how to create <ApiLink pkg="core" type="Snackbar" /> co
 
 
 
-<div class="divider--half"></div>
-
 ### Usage
 
 
@@ -188,8 +186,6 @@ igc-snackbar::part(base) {
 <Sample src="/notifications/snackbar/styling" height={230} alt="{Platform} SnackBar Styling Example" />
 
 
-<div class="divider--half"></div>
-
 
 ## API References
 
diff --git a/docs/xplat/src/content/en/components/scheduling/calendar.mdx b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
index ffe00ab25b..c99c7d325b 100644
--- a/docs/xplat/src/content/en/components/scheduling/calendar.mdx
+++ b/docs/xplat/src/content/en/components/scheduling/calendar.mdx
@@ -23,8 +23,6 @@ The Ignite UI for {ProductName} Calendar provides an easy and intuitive way for
 
 The following {Platform} <ApiLink pkg="core" type="Calendar" /> component example shows a basic calendar with a single day selection mode. See how it works or inspect the code behind.
 
-<div class="divider--half"></div>
-
 <Sample src="/scheduling/calendar/overview" height={480} alt="{Platform} Calendar Example" />
 
 ## How To Create a Calendar in {Platform} with {ProductNameShort}
diff --git a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx
index 3ac4fab168..a381b592d4 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-activation.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-activation.mdx
@@ -23,8 +23,6 @@ The {Platform} Spreadsheet component exposes properties that allow you to determ
 
 
 
-<div class="divider--half"></div>
-
 ## Activation Overview
 
 The activation of the {Platform} <ApiLink type="Spreadsheet" /> control is split up between the cells, panes, and worksheets of the current <ApiLink type="Workbook" /> of the spreadsheet. The three "active" properties are described below:
diff --git a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
index 18cf9aa62f..b1a78b93c3 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-chart-adapter.mdx
@@ -21,8 +21,6 @@ The {Platform} Spreadsheet component allows displaying charts in your <ApiLink t
 <Sample src="/excel/spreadsheet/adapter-chart" height={500} alt="{Platform} Spreadsheet Chart Adapter Example" />
 
 
-<div class="divider--half"></div>
-
 ## Chart Adapter Overview
 
 Using
diff --git a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx
index 7c53ca6d4b..a8275357bf 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-clipboard.mdx
@@ -23,8 +23,6 @@ This topic explains how to perform clipboard operations on the {ProductName} spr
 
 
 
-<div class="divider--half"></div>
-
 ## Dependencies
 
 Before making use of the clipboard you will want to import the <ApiLink type="SpreadsheetAction" /> enumeration:
@@ -56,8 +54,6 @@ import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet';
 
 </PlatformBlock>
 
-<div class="divider--half"></div>
-
 
 ## Usage
 
diff --git a/docs/xplat/src/content/en/components/spreadsheet-commands.mdx b/docs/xplat/src/content/en/components/spreadsheet-commands.mdx
index ec4d307492..148b74d5bf 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-commands.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-commands.mdx
@@ -23,8 +23,6 @@ The {Platform} Spreadsheet component allows you to perform commands for activati
 
 
 
-<div class="divider--half"></div>
-
 ## Dependencies
 
 Before making use of the commands you will want to import the <ApiLink type="SpreadsheetAction" />
@@ -56,8 +54,6 @@ import { SpreadsheetAction } from 'igniteui-webcomponents-spreadsheet';
 
 </PlatformBlock>
 
-<div class="divider--half"></div>
-
 
 ## Usage
 
diff --git a/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx b/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx
index e5c0d683e5..16b7ee2afb 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-conditional-formatting.mdx
@@ -23,8 +23,6 @@ The {Platform} <ApiLink type="Spreadsheet" /> component allows you to conditiona
 
 
 
-<div class="divider--half"></div>
-
 ## Conditional Formatting Overview
 
 You can configure the conditional formatting of a particular worksheet by using the many `Add` methods exposed on the <ApiLink type="Worksheet" member="conditionalFormats" label="ConditionalFormats" /> collection of that worksheet. The first parameter of these `Add` methods is the string region of the worksheet that you would like to apply the conditional format to.
diff --git a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx
index 2933306007..bbc6844bda 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-configuring.mdx
@@ -23,8 +23,6 @@ The {Platform} Spreadsheet component allows the user to configure many different
 
 
 
-<div class="divider--half"></div>
-
 ## Configuring Cell Editing
 
 When a user edits a cell value and confirms the new input, the <ApiLink type="Spreadsheet" /> control has the ability to navigate to cells adjacent to the currently active cell on press of the <kbd>ENTER</kbd> key, depending on the configuration of the spreadsheet.
diff --git a/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx b/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx
index 2bdc0ebac6..16e67c99f1 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-hyperlinks.mdx
@@ -23,8 +23,6 @@ The {Platform} Spreadsheet component allows display of pre-existing hyperlinks i
 
 
 
-<div class="divider--half"></div>
-
 ## Hyperlinks Overview
 
 Hyperlinks are added to the <ApiLink type="Spreadsheet" /> control by accessing the `Hyperlinks` collection on the worksheet that you want to place the hyperlink on. This collection has an `Add` method that takes a <ApiLink type="WorksheetHyperlink" /> object, where you can define the cell address, the hyperlink URL to be navigated to, the display text, and a tooltip to optionally be displayed on hover.
diff --git a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
index f5889398be..043e6bc15d 100644
--- a/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
+++ b/docs/xplat/src/content/en/components/spreadsheet-overview.mdx
@@ -23,8 +23,6 @@ The {Platform} Spreadsheet  (Excel viewer) component is lightweight, feature-ric
 
 
 
-<div class="divider--half"></div>
-
 ## Functionality
 
 - Features
@@ -135,8 +133,6 @@ ModuleManager.register(
 
 </PlatformBlock>
 
-<div class="divider--half"></div>
-
 ## Usage
 
 Now that the {Platform} spreadsheet module is imported, next is the basic configuration of the spreadsheet.
diff --git a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
index ce1803a394..69e1d5e152 100644
--- a/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/bar-chart.mdx
@@ -124,8 +124,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} 範囲棒チャート
 
 {Platform} 範囲棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ棒チャート](bar-chart.mdx#{PlatformLower}-棒チャートの例)のように左から伸びるのではなく、チャートのプロット領域の中央に表示できる水平の長方形を使用して描画されます。このタイプのシリーズは、一定期間内の同一データ ポイントの低値と高値の変化量を強調したり、複数の項目を比較したりするために使用されます。
diff --git a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
index 589205d78e..4bbfa495e5 100644
--- a/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
+++ b/docs/xplat/src/content/jp/components/charts/types/column-chart.mdx
@@ -26,8 +26,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## 縦棒チャートの推奨事項
 
 ### 縦棒チャートのユース ケース
@@ -65,8 +63,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## 複数シリーズの {Platform} 縦棒チャート
 
 縦棒チャートは、比較のためにカテゴリごとに複数の列を描画できます。<ApiLink type="CategoryChart" /> コントロールでこのチャート タイプを作成するには、以下の例のように、データをバインドし、<ApiLink type="CategoryChart" member="chartType" label="CategoryChart.ChartType" /> プロパティを **Column** 値に設定します:
@@ -76,9 +72,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
-
 ## {Platform} 縦棒チャートのスタイル設定
 
 {Platform} 縦棒チャートには、外観のスタイル設定と変更のための多くのオプションがあります。
@@ -90,8 +83,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## 高度なタイプの縦棒チャート
 
 次のセクションでは、簡略化された API を使用した <ApiLink type="CategoryChart" /> コントロールの代わりに <ApiLink type="DataChart" /> コントロールを使用して作成できる、より高度なタイプの {Platform} 縦棒チャートについて説明します。
@@ -108,8 +99,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} 積層型縦棒チャート
 
 積層型縦棒チャートは、シリーズが横ではなく上に表示されることを除いて、すべての面で[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)に似ています。積層型縦棒チャートは、シリーズ間の結果の比較を示すために使用されます。コレクションのそれぞれの積層フラグメントは各積層の視覚的な要素を表します。各積層は正の値と負の値の両方を含みます。正の値はいずれも Y 軸の正の側にグループ化され、負の値は Y 軸の負の側にグループ化されます。積層型縦棒チャートは[積層型棒チャート](./stacked-chart.mdx#{PlatformLower}-積層型棒チャート)と同じデータプロットの概念を使用していますが、データ ポイントは横の線 (X 軸) に沿ってではなく、縦の線 (Y 軸) に沿って積層されます。
@@ -121,8 +110,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} 積層型 100% 縦棒チャート
 
 積層型 100% 縦棒チャートは、Y 軸上の値の取り扱いを除いたすべての面で[積層型縦棒チャート](./stacked-chart.mdx#{PlatformLower}-積層型縦棒チャート)と同じです。データを直接表現するのでなく、積層型 100 縦棒は、データ ポイント内のすべての値の合計の割合でデータを表します。
@@ -134,8 +121,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} 範囲縦棒チャート
 
 {ProductName} 範囲縦棒チャートは、範囲チャートのグループに属し、従来の[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)のように下から伸びるのではなく、チャートのプロット領域の中央に表示できる垂直の長方形を使用して描画されます。このタイプのシリーズは、同じデータ ポイントの低い値と高い値の間の変化量を強調します一定期間、または複数の項目を比較します。範囲値は Y 軸に表示され、カテゴリは X 軸に表示されます。
@@ -149,8 +134,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## {Platform} ラジアル縦棒チャート
 
 ラジアル縦棒チャートは、[ラジアル チャート](./radial-chart.mdx)のグループに属し、チャートの中心からデータ ポイントの位置に向かって伸びる長方形のコレクションを使用して描画されます。これは[カテゴリ縦棒チャート](./column-chart.mdx#{PlatformLower}-縦棒チャートの例)と同じデータ プロットの概念を使用していますが、データ ポイントを横の線に並べるのではなく、データ ポイントを円でラップします。
@@ -162,8 +145,6 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 
 
-<div class="divider--half"></div>
-
 ## その他のリソース
 
 関連するチャートタイプの詳細については、以下のトピックを参照してください。
diff --git a/docs/xplat/src/content/jp/components/inputs/highlight.mdx b/docs/xplat/src/content/jp/components/inputs/highlight.mdx
index 1334c443ac..6287e85922 100644
--- a/docs/xplat/src/content/jp/components/inputs/highlight.mdx
+++ b/docs/xplat/src/content/jp/components/inputs/highlight.mdx
@@ -17,7 +17,7 @@ import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro'
 
 {ProductName} Highlight は、ページ内コンテンツの一部を強調表示して、ユーザーの目につきやすくするためのコンポーネントです。軽量で扱いやすく、他のコンポーネントと組み合わせることで、よりインタラクティブで魅力的な UI を構築できます。
 
-<div class="divider"></div>
+<igc-divider></igc-divider>
 
 ## 使用方法
 
diff --git a/src/html-to-md.ts b/src/html-to-md.ts
index 866641d412..e0a0935b45 100644
--- a/src/html-to-md.ts
+++ b/src/html-to-md.ts
@@ -64,7 +64,8 @@ export function buildHtmlToMdConverter() {
     //   script/style       — runtime scripts and CSS
     //   igc-icon            — decorative web-component icons (chevrons, etc.)
     //   igc-icon-button     — heading anchor-link buttons added by rehype
-    td.remove(['script', 'style', 'igc-icon', 'igc-icon-button']);
+    //   igc-divider         — visual separators carry no meaning in plain text LLM output
+    td.remove(['script', 'style', 'igc-icon', 'igc-icon-button', 'igc-divider']);
 
     // ── Turndown rules ────────────────────────────────────────────────────
     // Custom rules transform site-specific HTML patterns into clean Markdown
@@ -105,12 +106,6 @@ export function buildHtmlToMdConverter() {
         replacement: (content: string) => content,
     });
 
-    // Decorative half-dividers -> drop
-    td.addRule('divider', {
-        filter: (node: Element) => node.nodeName === 'DIV' && (node.getAttribute('class') || '').includes('divider--half'),
-        replacement: () => '',
-    });
-
     return td;
 }
 
diff --git a/src/plugins/remark-html-transforms.ts b/src/plugins/remark-html-transforms.ts
index 701010ae78..beb3a5fe2f 100644
--- a/src/plugins/remark-html-transforms.ts
+++ b/src/plugins/remark-html-transforms.ts
@@ -2,13 +2,12 @@
  * Remark plugin: inline HTML transforms.
  *
  * Handles legacy HTML patterns in markdown content:
- *   - `<div class="divider--half"></div>` → `<hr/>`
+ *   - Rewrites relative `../images/` sources to root-relative paths
  *   - Normalizes code block language identifiers to lowercase
  */
 
 import { visit } from 'unist-util-visit';
 
-const DIVIDER_PATTERN = /<div\s+class="divider--half"\s*>\s*<\/div>/g;
 const IMG_SRC_PATTERN = /src="(\.\.\/)+images\//g;
 
 /** Remark plugin that transforms legacy HTML patterns in the AST. */
@@ -17,9 +16,8 @@ export function remarkHtmlTransforms() {
   return (tree: any) => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     visit(tree, (node: any) => {
-      // Inline HTML: divider → hr, relative img src → root-relative
+      // Inline HTML: relative img src → root-relative
       if (node.type === 'html' && node.value) {
-        node.value = (node.value as string).replace(DIVIDER_PATTERN, '<hr/>');
         node.value = (node.value as string).replace(IMG_SRC_PATTERN, 'src="/images/');
       }
 

From 19c3d31d3a162948a0f86bdbda358bb519f6f3c1 Mon Sep 17 00:00:00 2001
From: mkamiishi <mkamiishi@infragistics.com>
Date: Wed, 15 Jul 2026 10:14:22 +0900
Subject: [PATCH 23/30] Update MAKER Framework documentation for clarity

Clarified the non-dependency of the MAKER Framework on specific frameworks and updated the description of supported frameworks.
---
 docs/angular/src/content/jp/components/ai/maker-framework.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/src/content/jp/components/ai/maker-framework.mdx b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
index a1ff6a50f1..c4084bb075 100644
--- a/docs/angular/src/content/jp/components/ai/maker-framework.mdx
+++ b/docs/angular/src/content/jp/components/ai/maker-framework.mdx
@@ -16,7 +16,7 @@ llms:
 
 MAKER Framework (`@igniteui/maker-mcp`) は、Infragistics が提供するマルチエージェント AI オーケストレーション MCP サーバーです。複数の AI エージェントにわたるコンセンサス ベースの投票アルゴリズムを使用して、複雑なタスクを検証済みで実行可能なステップ プランに分解します。MAKER は、Maximal Agentic decomposition (最大エージェント分解)、first-to-ahead-by-K Error correction (K ステップ先読みエラー修正)、Red-flagging (レッド フラギング) の頭文字を取ったものです。このフレームワークは、Cognizant AI Lab による研究論文 _Solving a million-step LLM task with zero errors_ に基づいています。`@igniteui` GitHub Packages レジストリから `npx` 経由で MCP サーバーとして実行され、STDIO トランスポートを通じて任意の MCP 互換 AI クライアントに接続します。接続すると、AI アシスタントは 3 つのツール (`plan`、`execute`、`plan_and_execute`) を呼び出して、自動エラー検出と修正を伴う長期タスクを実行できます。
 
-MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメント クエリには [CLI MCP サーバー](./cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Web Components を特定のターゲットとせず、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
+MAKER Framework は Ignite UI コンポーネントのスキャフォールディング ツールではありません。Ignite UI プロジェクトの作成、コンポーネント生成、ドキュメントの検索には [CLI MCP サーバー](./cli-mcp.mdx) を使用してください。MAKER はフレームワーク非依存であり、Angular、React、Blazor、Web Components のいずれかに特化したものではなく、プロジェクトのソース ファイルを自律的に読み取ったり変更したりしません。少なくとも 1 つの AI プロバイダー API キー (OpenAI、Anthropic、または Google AI) と、`@igniteui` レジストリ用の `read:packages` スコープを持つ GitHub Personal Access Token が必要です。
 
 ## MAKER の仕組み
 

From 42de199a224e487731720c7e47a3449491f62114 Mon Sep 17 00:00:00 2001
From: mkamiishi <mkamiishi@infragistics.com>
Date: Wed, 15 Jul 2026 12:01:59 +0900
Subject: [PATCH 24/30] Update transaction-classes.mdx

---
 docs/angular/src/content/jp/components/transaction-classes.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/src/content/jp/components/transaction-classes.mdx b/docs/angular/src/content/jp/components/transaction-classes.mdx
index 7574b3342c..00258bee31 100644
--- a/docs/angular/src/content/jp/components/transaction-classes.mdx
+++ b/docs/angular/src/content/jp/components/transaction-classes.mdx
@@ -80,7 +80,7 @@ import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
 
 ## トランザクション ファクトリ
 
-Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](/grid/batch-editing) と [`Hierarchical Grid`](/hierarchicalgrid/batch-editing) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](/treegrid/batch-editing) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。展開できるため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
+Ignite UI for Angular グリッド内のトランザクションの具体的な実装では、グリッドの <ApiLink type="Grid" member="batchEditing" label="batchEditing" /> の値に応じて、適切なトランザクション サービスをインスタンス化するためにファクトリが使用されます。2 つの別々のトランザクション ファクトリがあります - <ApiLink type="FlatTransactionFactory" /> ([`Grid`](/grid/batch-editing) と [`Hierarchical Grid`](/hierarchicalgrid/batch-editing) に使用) と <ApiLink type="HierarchicalTransactionFactory" /> ([Tree Grid](/treegrid/batch-editing) に使用)。どちらのクラスも、適切な[タイプ](#igxtransactionservice-および-igxhierarchicaltransactionservice-に関する一般情報)の新しいインスタンスを返す 1 つのメソッド  `create` のみを公開します。渡されたパラメータ (`TRANSACTION_TYPE`) は内部で使用されます - `batchEditing` が **false** の場合は `None` が使用され、一括編集が有効な場合は `Base` が使用されます。将来的な拡張を可能にするため、(`true` - `false` フラグの代わりに) `enum` が使用されます。
 
 ## トランザクション ファクトリの使用
 

From 3a56e5b3e3a83ed61dd85dea2241d82b0e5729d8 Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Wed, 15 Jul 2026 18:21:58 +0300
Subject: [PATCH 25/30] fix(*): platform switcher correct url so that no
 client-side redirect is needed

---
 docs/angular/astro.config.ts |  2 +-
 docs/xplat/astro.config.ts   |  2 +-
 src/platform.ts              | 16 ++++++++--------
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/angular/astro.config.ts b/docs/angular/astro.config.ts
index efb6be567c..cfca8ef4e2 100644
--- a/docs/angular/astro.config.ts
+++ b/docs/angular/astro.config.ts
@@ -79,7 +79,7 @@ export default createDocsSite({
 		.map(({ label, key, base: b }) => ({
 			label,
 			value: key,
-			href: mode === 'production' ? `${PROD_HOST}${b}/` : `${STAGING_HOST}${b}/`,
+			href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`,
 		})),
 	selectedPackage: 'angular',
 	source: {
diff --git a/docs/xplat/astro.config.ts b/docs/xplat/astro.config.ts
index 838d60cc6a..baef5b7d82 100644
--- a/docs/xplat/astro.config.ts
+++ b/docs/xplat/astro.config.ts
@@ -354,7 +354,7 @@ export default createDocsSite({
         .map(({ label, key, base: b }) => ({
             label,
             value: key,
-            href: mode === 'production' ? `${PROD_HOST}${b}/` : `${STAGING_HOST}${b}/`,
+            href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`,
         })),
     selectedPackage: p.key,
     head: [
diff --git a/src/platform.ts b/src/platform.ts
index 7de95e56e1..53ab01fe18 100644
--- a/src/platform.ts
+++ b/src/platform.ts
@@ -182,25 +182,25 @@ export const IGDOCS_PLATFORMS: Record<string, PlatformMeta> = {
     // English
     Angular: {
         lang: 'en', label: 'Angular', key: 'angular', devPort: 4331,
-        base: '/products/ignite-ui-angular/angular/components',
+        base: '/products/ignite-ui-angular/angular/components/general/getting-started',
         title: 'Ignite UI for Angular',
         description: 'Component documentation for Ignite UI for Angular.',
     },
     React: {
         lang: 'en', label: 'React', key: 'react', devPort: 4332,
-        base: '/products/ignite-ui-react/react/components',
+        base: '/products/ignite-ui-react/react/components/general-getting-started',
         title: 'Ignite UI for React',
         description: 'Component documentation for Ignite UI for React.',
     },
     WebComponents: {
         lang: 'en', label: 'Web Components', key: 'web-components', devPort: 4333,
-        base: '/products/ignite-ui-web-components/web-components/components',
+        base: '/products/ignite-ui-web-components/web-components/components/general-getting-started',
         title: 'Ignite UI for Web Components',
         description: 'Component documentation for Ignite UI for Web Components.',
     },
     Blazor: {
         lang: 'en', label: 'Blazor', key: 'blazor', devPort: 4334,
-        base: '/products/ignite-ui-blazor/blazor/components',
+        base: '/products/ignite-ui-blazor/blazor/components/general-getting-started',
         title: 'Ignite UI for Blazor',
         description: 'Component documentation for Ignite UI for Blazor.',
     },
@@ -208,25 +208,25 @@ export const IGDOCS_PLATFORMS: Record<string, PlatformMeta> = {
     
     AngularJP: {
         lang: 'jp', label: 'Angular', key: 'angular', devPort: 4341,
-        base: '/products/ignite-ui-angular/angular/components',
+        base: '/products/ignite-ui-angular/angular/components/general/getting-started',
         title: 'Ignite UI for Angular',
         description: 'Component documentation for Ignite UI for Angular.',
     },
     ReactJP: {
         lang: 'jp', label: 'React', key: 'react', devPort: 4342,
-        base: '/products/ignite-ui-react/react/components',
+        base: '/products/ignite-ui-react/react/components/general-getting-started',
         title: 'Ignite UI for React',
         description: 'Component documentation for Ignite UI for React.',
     },
     WebComponentsJP: {
         lang: 'jp', label: 'Web Components', key: 'web-components', devPort: 4343,
-        base: '/products/ignite-ui-web-components/web-components/components',
+        base: '/products/ignite-ui-web-components/web-components/components/general-getting-started',
         title: 'Ignite UI for Web Components',
         description: 'Component documentation for Ignite UI for Web Components.',
     },
     BlazorJP: {
         lang: 'jp', label: 'Blazor', key: 'blazor', devPort: 4344,
-        base: '/products/ignite-ui-blazor/blazor/components',
+        base: '/products/ignite-ui-blazor/blazor/components/general/getting-started',
         title: 'Ignite UI for Blazor',
         description: 'Component documentation for Ignite UI for Blazor.',
     },

From bc37f99fc3670504f372ec7e93dedbd14f4dc47b Mon Sep 17 00:00:00 2001
From: mkamiishi <mkamiishi@infragistics.com>
Date: Fri, 17 Jul 2026 11:49:27 +0900
Subject: [PATCH 26/30] docs: update Japanese cli overview topic

---
 .../jp/components/general/cli-overview.mdx    | 48 +++++++++++++++----
 1 file changed, 40 insertions(+), 8 deletions(-)

diff --git a/docs/angular/src/content/jp/components/general/cli-overview.mdx b/docs/angular/src/content/jp/components/general/cli-overview.mdx
index 375be73cb3..5f4fbf1f63 100644
--- a/docs/angular/src/content/jp/components/general/cli-overview.mdx
+++ b/docs/angular/src/content/jp/components/general/cli-overview.mdx
@@ -1,18 +1,50 @@
 ---
-title: Angular Schematics | Angular CLI | Ignite UI for Angular | インフラジスティックス
-description: Angular Schematics & Ignite UI CLI は Ignite UI for Angular コンポーネントでプロジェクトを作成して変更できるためのヘルプを提供します。
-keywords: igniteui for angular, angular schematics, cli, infragistics, インフラジスティックス 
+title: Angular Schematics & Ignite UI CLI | Ignite UI for Angular | インフラジスティックス
+description: Ignite UI CLI と Ignite UI for Angular Schematics コレクションは、Ignite UI for Angular 用に事前設定された Angular プロジェクトとコンポーネント ビューをスキャフォールドします。AI アシスタント統合のための MCP サーバーも含まれます。
+keywords: ignite ui for angular, angular schematics, ignite ui cli, スキャフォールディング, infragistics, インフラジスティックス
 _language: ja
+last_updated: "2025-04-06"
 llms:
-  description: "CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。"
+  description: "Ignite UI CLI と Ignite UI for Angular Schematics コレクションは、Ignite UI for Angular 用に事前設定された Angular プロジェクトとコンポーネント ビューを生成するための、2 つの補完的なスキャフォールディング ツールです。"
 ---
 
 # Angular Schematics & Ignite UI CLI
 
-CLI ツールでは、Ignite UI for Angular の定義済みのプロジェクト テンプレートが含まれ、アプリ開発を効率的に行うことができます。プロジェクトにさらに追加できる Ignite UI for Angular コンポーネントを備えたビューの選択により、開発者の生産性が大幅に向上します。
+Ignite UI CLI と Ignite UI for Angular Schematics コレクションは、Ignite UI for Angular 用に事前設定された Angular プロジェクトとコンポーネント ビューを生成するための、2 つの補完的なスキャフォールディング ツールです。どちらもガイド付きのステップ バイ ステップ ウィザードと非インタラクティブなコマンド モードを提供します。両者は同じプロジェクト出力を生成し、ワークフローへの統合方法が異なるだけです。
 
-[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、さまざまなフレームワーク用のアプリケーションを作成およびスキャフォールディングするためのスタンドアロン コマンドライン ツールです。使用方法の詳細と例については、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.mdx)トピックを参照してください。
+このページで説明する Angular 向けツールチェーンでは、Blazor や Web Components のプロジェクト管理は解説の対象外としています。別のグローバル ツールを使用しない Angular 専用の Schematics ワークフローには、`@igniteui/angular-schematics` を Angular CLI と共に直接使用してください。Ignite UI for Angular を使用するのにどちらのツールも必須ではありません。ライブラリは[作業の開始ガイド](./getting-started.mdx)で説明されているとおり、手動でインストールして設定することもできます。
 
-[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は [Angular CLI](https://angular.io/guide/schematics#schematics-for-the-angular-cli) で使用するコレクションとして利用できます。Ignite UI CLI のようなコア機能を提供しますが、Schematics ワークフローと統合され、製品に特化しています。[Ignite UI for Angular をインストールする](./getting-started.mdx#ignite-ui-for-angular-のインストール)と、schematics コレクションがプロジェクトに追加されます。使用方法の詳細と例については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.mdx)トピックを参照してください。
+## Ignite UI CLI
 
-ツールの両方のバージョンは、さまざまなプロジェクト、コンポーネント、およびシナリオビュー (テンプレート) を許可し、[Ignite UI CLI を使用したガイド付きステップ バイ ステップモード](./cli/step-by-step-guide-using-cli.mdx)および [Ignite UI for Angular Schematics](./cli/step-by-step-guide-using-angular-schematics.mdx) を提供します。
+[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、Angular、React、jQuery にわたるアプリケーションの作成とスキャフォールディングを行うためのスタンドアロンのグローバル コマンドライン ツールです。`npm install -g igniteui-cli` でインストールし、`ig` コマンドで実行します。
+
+CLI は、ガイド付きウィザード (`ig` または `ig new`) と非インタラクティブなプロジェクト作成 (`ig new <name> --framework=angular --type=igx-ts`)、コンポーネントのスキャフォールディング (`ig add`)、開発サーバー (`ig start`)、そして AI アシスタント統合のための組み込み MCP サーバー (`ig mcp`) を提供します。
+
+セットアップ手順と使用可能なすべてのコマンドについては、[Ignite UI CLI を使用した作業の開始](./cli/getting-started-with-cli.mdx)を参照してください。
+
+## Ignite UI for Angular Schematics
+
+[Ignite UI for Angular Schematics](https://github.com/IgniteUI/igniteui-cli/tree/master/packages/ng-schematics) は、Angular CLI に統合される schematics コレクションです。`ng add igniteui-angular` を実行すると、このコレクションはプロジェクトに自動的に追加されます。プロジェクト作成には `ng new --collection="@igniteui/angular-schematics"`、コンポーネントのスキャフォールディングには `ng g @igniteui/angular-schematics:component` を実行します。
+
+Schematics コレクションは、ネイティブの Angular CLI ワークフロー内で、CLI と同じコア プロジェクト テンプレートおよびコンポーネント ビューを提供します。MCP サーバーは含まれていません。AI アシスタント統合には、Angular CLI プロジェクトと併せて Ignite UI CLI を使用してください。
+
+セットアップ手順については、[Ignite UI for Angular Schematics を使用した作業の開始](./cli/getting-started-with-angular-schematics.mdx)を参照してください。
+
+## ステップ バイ ステップ ガイド
+
+どちらのツールも、ガイド付きのインタラクティブ モードと直接的なコマンド モードをサポートします。
+
+- [Ignite UI CLI を使用したステップ バイ ステップ ガイド](./cli/step-by-step-guide-using-cli.mdx)
+- [Ignite UI for Angular Schematics を使用したステップ バイ ステップ ガイド](./cli/step-by-step-guide-using-angular-schematics.mdx)
+
+## AI アシスタント統合 (MCP)
+
+Ignite UI CLI には、AI コーディング アシスタント (GitHub Copilot、Claude、Cursor など) を最新の Ignite UI コンポーネント ドキュメントおよび API リファレンスに接続する組み込みの MCP (Model Context Protocol) サーバーが含まれています。設定後、AI アシスタントはコンポーネント API を照会したり、セットアップ ガイドを取得したり、エディターを離れることなく正確な Ignite UI for Angular コードを生成したりできます。
+
+MCP サーバーを起動するには:
+
+```cmd
+ig mcp
+```
+
+クライアント設定 (VS Code、Claude Desktop、Cursor など) および利用可能なツールの詳細については、[Ignite UI CLI MCP](../ai/cli-mcp.mdx) を参照してください。

From a51013daa33082b550abbba1f5c9166882d8864a Mon Sep 17 00:00:00 2001
From: Stamen Stoychev <SStoychev@infragistics.com>
Date: Fri, 17 Jul 2026 11:08:07 +0300
Subject: [PATCH 27/30] fix(*): reworking the fix to use additional root param
 in the platform selector

---
 docs/angular/astro.config.ts |  4 ++--
 docs/xplat/astro.config.ts   |  4 ++--
 src/platform.ts              | 25 +++++++++++++++++--------
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/docs/angular/astro.config.ts b/docs/angular/astro.config.ts
index cfca8ef4e2..fcaef41806 100644
--- a/docs/angular/astro.config.ts
+++ b/docs/angular/astro.config.ts
@@ -76,10 +76,10 @@ export default createDocsSite({
 		})),
 	packages: Object.values(IGDOCS_PLATFORMS)
 		.filter(p => p.lang === docsLang)
-		.map(({ label, key, base: b }) => ({
+		.map(({ label, key, base, root }) => ({
 			label,
 			value: key,
-			href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`,
+			href: mode === 'production' ? `${PROD_HOST}${base}${root}` : `${STAGING_HOST}${base}${root}`,
 		})),
 	selectedPackage: 'angular',
 	source: {
diff --git a/docs/xplat/astro.config.ts b/docs/xplat/astro.config.ts
index baef5b7d82..10ddb93898 100644
--- a/docs/xplat/astro.config.ts
+++ b/docs/xplat/astro.config.ts
@@ -351,10 +351,10 @@ export default createDocsSite({
         })),
     packages: Object.values(PLATFORMS)
         .filter(p => p.lang === lang)
-        .map(({ label, key, base: b }) => ({
+        .map(({ label, key, base, root }) => ({
             label,
             value: key,
-            href: mode === 'production' ? `${PROD_HOST}${b}` : `${STAGING_HOST}${b}`,
+            href: mode === 'production' ? `${PROD_HOST}${base}${root}` : `${STAGING_HOST}${base}${root}`,
         })),
     selectedPackage: p.key,
     head: [
diff --git a/src/platform.ts b/src/platform.ts
index 53ab01fe18..7eb1aafec9 100644
--- a/src/platform.ts
+++ b/src/platform.ts
@@ -48,6 +48,7 @@ export interface PlatformMeta {
     title: string; description: string;
     key: PlatformKey; devPort: number;
     base: string; label: string;
+    root: string;
     lang: NavLang;
 }
 
@@ -182,25 +183,29 @@ export const IGDOCS_PLATFORMS: Record<string, PlatformMeta> = {
     // English
     Angular: {
         lang: 'en', label: 'Angular', key: 'angular', devPort: 4331,
-        base: '/products/ignite-ui-angular/angular/components/general/getting-started',
+        base: '/products/ignite-ui-angular/angular/components',
+        root: '/general/getting-started',
         title: 'Ignite UI for Angular',
         description: 'Component documentation for Ignite UI for Angular.',
     },
     React: {
         lang: 'en', label: 'React', key: 'react', devPort: 4332,
-        base: '/products/ignite-ui-react/react/components/general-getting-started',
+        base: '/products/ignite-ui-react/react/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for React',
         description: 'Component documentation for Ignite UI for React.',
     },
     WebComponents: {
         lang: 'en', label: 'Web Components', key: 'web-components', devPort: 4333,
-        base: '/products/ignite-ui-web-components/web-components/components/general-getting-started',
+        base: '/products/ignite-ui-web-components/web-components/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for Web Components',
         description: 'Component documentation for Ignite UI for Web Components.',
     },
     Blazor: {
         lang: 'en', label: 'Blazor', key: 'blazor', devPort: 4334,
-        base: '/products/ignite-ui-blazor/blazor/components/general-getting-started',
+        base: '/products/ignite-ui-blazor/blazor/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for Blazor',
         description: 'Component documentation for Ignite UI for Blazor.',
     },
@@ -208,25 +213,29 @@ export const IGDOCS_PLATFORMS: Record<string, PlatformMeta> = {
     
     AngularJP: {
         lang: 'jp', label: 'Angular', key: 'angular', devPort: 4341,
-        base: '/products/ignite-ui-angular/angular/components/general/getting-started',
+        base: '/products/ignite-ui-angular/angular/components',
+        root: '/general/getting-started',
         title: 'Ignite UI for Angular',
         description: 'Component documentation for Ignite UI for Angular.',
     },
     ReactJP: {
         lang: 'jp', label: 'React', key: 'react', devPort: 4342,
-        base: '/products/ignite-ui-react/react/components/general-getting-started',
+        base: '/products/ignite-ui-react/react/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for React',
         description: 'Component documentation for Ignite UI for React.',
     },
     WebComponentsJP: {
         lang: 'jp', label: 'Web Components', key: 'web-components', devPort: 4343,
-        base: '/products/ignite-ui-web-components/web-components/components/general-getting-started',
+        base: '/products/ignite-ui-web-components/web-components/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for Web Components',
         description: 'Component documentation for Ignite UI for Web Components.',
     },
     BlazorJP: {
         lang: 'jp', label: 'Blazor', key: 'blazor', devPort: 4344,
-        base: '/products/ignite-ui-blazor/blazor/components/general/getting-started',
+        base: '/products/ignite-ui-blazor/blazor/components',
+        root: '/general-getting-started',
         title: 'Ignite UI for Blazor',
         description: 'Component documentation for Ignite UI for Blazor.',
     },

From 954932ac39ac4987452d97733bc81549c3e5343c Mon Sep 17 00:00:00 2001
From: mkamiishi <mkamiishi@infragistics.com>
Date: Fri, 17 Jul 2026 18:07:07 +0900
Subject: [PATCH 28/30] docs: refine Japanese cli overview topic

---
 docs/angular/src/content/jp/components/general/cli-overview.mdx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/angular/src/content/jp/components/general/cli-overview.mdx b/docs/angular/src/content/jp/components/general/cli-overview.mdx
index 5f4fbf1f63..1b76e9c67a 100644
--- a/docs/angular/src/content/jp/components/general/cli-overview.mdx
+++ b/docs/angular/src/content/jp/components/general/cli-overview.mdx
@@ -16,7 +16,7 @@ Ignite UI CLI と Ignite UI for Angular Schematics コレクションは、Ignit
 
 ## Ignite UI CLI
 
-[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、Angular、React、jQuery にわたるアプリケーションの作成とスキャフォールディングを行うためのスタンドアロンのグローバル コマンドライン ツールです。`npm install -g igniteui-cli` でインストールし、`ig` コマンドで実行します。
+[Ignite UI CLI](https://github.com/IgniteUI/igniteui-cli) は、Angular、React、jQuery に対応した、アプリケーションの作成とスキャフォールディングを行うためのスタンドアロンのグローバル コマンドライン ツールです。`npm install -g igniteui-cli` でインストールし、`ig` コマンドで実行します。
 
 CLI は、ガイド付きウィザード (`ig` または `ig new`) と非インタラクティブなプロジェクト作成 (`ig new <name> --framework=angular --type=igx-ts`)、コンポーネントのスキャフォールディング (`ig add`)、開発サーバー (`ig start`)、そして AI アシスタント統合のための組み込み MCP サーバー (`ig mcp`) を提供します。
 

From c1e4d3fc73eab165dcf9082b3726fe97ea77a440 Mon Sep 17 00:00:00 2001
From: Marin Popov <desig9stein@users.noreply.github.com>
Date: Fri, 17 Jul 2026 17:43:28 +0300
Subject: [PATCH 29/30] feat(docs): Add skill for documentation audit (#422)

* feat(docs): Add skill for documentation audit

* docs(ai): update Ignite UI doc topic skill and add adapters

* docs(ai): update doc topic skill structure

---------

Co-authored-by: Ivan Minchev <IMinchev@infragistics.com>
Co-authored-by: Ivan Minchev <61944284+IMinchev64@users.noreply.github.com>
---
 .ai/skills/igniteui-doc-topics/SKILL.md       | 142 +++++++
 .../references/audit-rubric.md                | 163 ++++++++
 .../references/diataxis-cheatsheet.md         |  72 ++++
 .../references/house-style.md                 | 361 ++++++++++++++++++
 .claude/skills/igniteui-doc-topics/SKILL.md   |  26 ++
 .codex/skills/igniteui-doc-topics/SKILL.md    |  26 ++
 6 files changed, 790 insertions(+)
 create mode 100644 .ai/skills/igniteui-doc-topics/SKILL.md
 create mode 100644 .ai/skills/igniteui-doc-topics/references/audit-rubric.md
 create mode 100644 .ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md
 create mode 100644 .ai/skills/igniteui-doc-topics/references/house-style.md
 create mode 100644 .claude/skills/igniteui-doc-topics/SKILL.md
 create mode 100644 .codex/skills/igniteui-doc-topics/SKILL.md

diff --git a/.ai/skills/igniteui-doc-topics/SKILL.md b/.ai/skills/igniteui-doc-topics/SKILL.md
new file mode 100644
index 0000000000..92b2996b6d
--- /dev/null
+++ b/.ai/skills/igniteui-doc-topics/SKILL.md
@@ -0,0 +1,142 @@
+---
+name: igniteui-doc-topics
+description: >-
+  Author or audit Ignite UI documentation topics — component pages, how-to guides, conceptual
+  overviews, and category indexes — for both the Angular doc set and the cross-platform (React /
+  Web Components / Blazor) doc set. Applies the Diátaxis framework mapped onto Ignite UI's house
+  templates: canonical section order, fixed heading names, frontmatter (including `llms.description`
+  and the `relatedComponents` trigger), `.mdx` sample embeds, and per-framework token/PlatformBlock
+  mechanics. Use this whenever someone asks to write, draft, create, review, audit, fix, or
+  standardize a documentation topic, tutorial, guide, reference page, or concept overview for Ignite
+  UI — even if they just say "write docs for the X component" or "review this topic" without naming
+  Diátaxis or the templates. Also use it when deciding what *kind* of documentation a page should be,
+  or when a topic mixes tutorial / how-to / reference / explanation content that should be separated.
+---
+
+# Ignite UI doc topics
+
+Write and audit Ignite UI documentation topics so every page has the same predictable shape — easy
+for developers to read and for AI assistants to answer from. The engine is **Diátaxis** (four
+documentation modes) applied through **Ignite UI's house templates**.
+
+## Two modes of operation
+
+- **Create** — draft a new topic (component, concept/guide, or category/index) to the standard.
+- **Audit** — review an existing topic against the standard and return an issues-and-fixes report.
+
+Detect which from the request ("write/draft/create" → Create; "review/audit/check/fix/standardize" →
+Audit). If a topic file or content is supplied, default to Audit unless they ask for a rewrite.
+
+## Reference files — load what the task needs
+
+- `references/diataxis-cheatsheet.md` — the four modes + the compass. Load when classifying a topic
+  or diagnosing mode-bleed.
+- `references/house-style.md` — sections, order, naming, frontmatter, sample/token mechanics, both
+  doc sets. Load for **every** create or audit.
+- `references/audit-rubric.md` — the checkable rules + report format. Load for **every** audit.
+
+Read `house-style.md` before writing or judging any topic — it carries the mechanical details
+(frontmatter fields, `<Sample>`/`<PlatformBlock>` syntax, Angular-vs-xplat differences) that aren't
+in this file.
+
+## Step 0 — Classify with the compass (always first)
+
+Before writing or auditing, decide what *kind* of documentation the page is, using the compass from
+the cheat-sheet:
+
+> **action or cognition?**  ×  **acquisition (study) or application (work)?**
+> → tutorial · how-to · reference · explanation
+
+- A **component page** is a *composite* (see below).
+- A **concept / guide overview** is **explanation**.
+- A **category / index overview** is **reference/navigation** (a map).
+- A standalone **"How to …" article** is a **how-to guide** — keep it single-mode.
+
+If a request is ambiguous ("document X"), state which topic type you're producing and why, in one
+line, before proceeding.
+
+## The composite-topic principle (the heart of this skill)
+
+Pure Diátaxis says keep the four modes in **separate** documents. Ignite UI **component topics
+deliberately don't** — one page carries a live demo, a how-to (Getting Started/Usage),
+decision guidance in Usage's final Do/Don't subsection, and reference tables
+(Properties/Methods/Events). That is fine **because each *section* owns exactly one mode.** The rule
+that makes it work:
+
+> **One section, one mode. No mode-bleed.** Each section stays in its assigned Diátaxis mode; when a
+> second mode wants in, move it to the section that owns it and cross-link.
+
+Section → mode map (full contents in `house-style.md`):
+
+| Section | Mode | Stays out of |
+|---|---|---|
+| Live Demo | demonstration (action) | prose/explanation |
+| Anatomy: visual + DOM tree / skeleton | orientation (reference) | opinion, install steps |
+| Getting Started, Usage | **how-to** | *why* explanations, exhaustive option lists |
+| Usage → Do/Don't | **explanation** | install steps, code, API detail |
+| Properties / Methods / Events | **reference** | instructions, opinion |
+| Styling (`### Sass Theming`, `### Tailwind`, …) | how-to (steps) + reference (tables) | conceptual essays |
+| Accessibility | reference (keyboard/ARIA/compliance tables) | tutorials, marketing, unverified conformance claims |
+| Troubleshooting | how-to (cause → fix) | background theory |
+| API References / Dependencies / Additional Resources | reference / navigation | new teaching |
+
+Concrete mode-bleed to catch: a *why* paragraph inside **Usage** (→ move to Do/Don't or a concept
+topic, link back); "how to build X" prose inside **Properties** (→ move to Usage; keep the table
+descriptive); an exhaustive option list written out in **Usage** prose (→ move to the table). The
+cheat-sheet's "two classic confusions" section explains the reasoning.
+
+## Create workflow
+
+1. **Classify** (Step 0). Name the topic type.
+2. **Pick the doc set & framework.** Angular set = its own file, plain prose. xplat set = one file
+   for React/WC/Blazor using `{Platform}`/`{ProductName}` tokens and `<PlatformBlock for="…">`. Load
+   the relevant details from `house-style.md`.
+3. **Follow the verification workflow** in `house-style.md` before writing technical content.
+   Existing snippets and old prose are clues, not authority.
+4. **Write frontmatter first** — `title`, `description` (answer-shaped, ≤~160 chars), `keywords`,
+   `license`, `llms.description`, `mentionedTypes` (xplat), and `relatedComponents` if the component
+   has close siblings (this lets **Usage**'s final **Do/Don't** subsection name the specific
+   sibling instead of speaking generically).
+5. **Lay out the canonical sections** in order for that topic type, required ones always present.
+   Feature-specific content goes as sub-headings under **Usage**, never as new top-level sections.
+6. **Fill each section in its mode.** Lead every section with one plain, specific sentence. Put
+   reference in tables. In **Usage**, start with a basic declaration and then add property-focused
+   sub-sections so every public input is shown with a minimal snippet; group only tightly coupled
+   properties that form one behavior. End **Usage** with `### Do/Don't`, using inline **When to use:**
+   and **When not to use:** labels rather than nested headings. Embed exactly one top `<Sample>`, then
+   Usage samples only for distinct tasks (soft max 5/page). Phrase Do/Don't and Troubleshooting as
+   the reader's real questions.
+7. **Self-check against the rubric** before presenting — especially mode-bleed (C-checks) and
+   metadata (D-checks). Fix, then deliver the `.mdx`.
+
+## Audit workflow
+
+1. **Classify** the topic and identify its doc set (Angular vs xplat) and type.
+2. **Follow the verification workflow** in `house-style.md` before judging technical content.
+   Old snippets/prose are never the source of truth by themselves.
+3. **Run every check** in `references/audit-rubric.md` — structure/order (A), naming (B), Diátaxis
+   mode integrity (C), metadata/AI-readiness and correctness (D), samples/links (E), formatting and
+   snippet currency (F). For mode integrity, run the compass on each section and flag drift.
+4. **Report** in the rubric's exact format: Verdict → Summary → Findings (each with Where / Issue /
+   Principle / Fix) → Quick wins. Order findings Error → Warning → Suggestion.
+5. Keep every **Fix** concrete and applyable (the corrected heading, the sentence to move, the table
+   to add). If the topic is already clean, say so and note what it does well — don't invent problems.
+
+## Grounding notes
+
+- The live `vnext` repo is **pre-standardization**: expect drifted headings (`## Angular Rating
+  Example`, `## Configuration`) and a missing `relatedComponents` field. Author to the **target**
+  standard; audit against it while recognizing current reality.
+- **Invent no verifiable identifier (zero-risk rule).** Never emit a guessed tag, class, package,
+  property, method, event, CSS part, or theming variable — a plausible-but-wrong name a reader copies is
+  worse than a visible gap. Use an identifier only when verified (typed API source, an existing topic,
+  or the user); otherwise write `‹VERIFY: …›`. For Properties/Methods/Events, emit the fixed column
+  headers plus a build-injection note and leave the rows to the generator. React/Blazor wrapper symbols
+  resolve to the `igc` core — prefer verified `igc` usage and mark unconfirmed wrapper names `‹VERIFY:…›`.
+  (Full detail in `house-style.md` → "Never fabricate API identifiers".)
+- Prefer paraphrase and the standard section names over copying any existing topic's prose verbatim.
+- **Write in one voice and verify every claim** (see house-style → *Voice & tone* and *Verify every
+  claim against the component*): instruct in the imperative/second person, and check every factual
+  statement — defaults, behavior, version support, DOM — against the MCP/API-doc source, the official
+  platform API docs, typed source when needed, or official framework docs before writing it or
+  recommending it as an edit. Don't "correct" prose into a plausible claim you haven't verified.
diff --git a/.ai/skills/igniteui-doc-topics/references/audit-rubric.md b/.ai/skills/igniteui-doc-topics/references/audit-rubric.md
new file mode 100644
index 0000000000..1d3d2dc93e
--- /dev/null
+++ b/.ai/skills/igniteui-doc-topics/references/audit-rubric.md
@@ -0,0 +1,163 @@
+# Audit rubric
+
+The checkable rules for **audit mode**, and the report format to produce. Every finding maps to a
+concrete rule below (structure, naming, Diátaxis mode, or metadata) and to a fix. Detail lives in
+`house-style.md`; the *why* behind mode findings lives in `diataxis-cheatsheet.md`.
+
+## Severity
+
+- **Error** — breaks the standard or misleads readers/AI. Must fix.
+- **Warning** — drift or a gap that degrades quality. Should fix.
+- **Suggestion** — polish; author's judgment.
+
+## Checks
+
+### A. Structure & order
+- A1 (Error) A required section is missing (Live Demo, Anatomy, Getting Started, Usage,
+  Properties, Accessibility, API References, Additional Resources on a component
+  topic).
+- A2 (Warning) Sections are present but out of the canonical order.
+- A3 (Warning) A conditional section sits in the wrong slot.
+- A4 (Error) A feature-specific top-level `##` exists that should be a sub-heading under **Usage**,
+  including a top-level `## Do/Don't`.
+- A5 (Error) **Live Demo** is missing near the top of the topic or appears after **Anatomy**.
+- A6 (Suggestion) >10 live samples on one page (soft cap) — consider splitting. Up to 10 is fine;
+  only flag when a page clearly sprawls past that.
+- A7 (Warning) **Usage** does not end with `### Do/Don't`, or **When to use:** / **When not to use:**
+  are written as nested headings instead of inline labels inside that subsection.
+- A8 (Warning) **Anatomy** is incomplete: missing its opening screenshot/GIF (or a `{/* TODO */}`
+  marker for a not-yet-available asset), or missing the verified DOM tree / skeleton.
+- A9 (Warning) **Accessibility** is missing one of its three required `###` sub-sections —
+  **Keyboard Interaction**, **Screen Readers / ARIA**, **Accessibility Compliance** — or has them out
+  of order.
+- A10 (Warning) **Usage**'s **Do/Don't** subsection contains install steps, code snippets, a property table, or other
+  reference/how-to content that belongs in Getting Started, another Usage subsection, Properties, or Accessibility instead of do/don't
+  guidance.
+
+### B. Naming
+- B1 (Warning) A heading uses a drifted name with a standard equivalent (see reconciliation table).
+  Report both: `"Configuration" → Properties`.
+- B2 (Warning) Non-standard one-off heading (e.g. `## Angular Rating Example`) → map to standard.
+- B3 (Suggestion) Singular/plural or casing mismatch (`API Reference` → `API References`).
+- B4 (Warning) H1 carries a framework prefix or an "Overview" suffix → standard H1 is
+  `‹Component› Component` (e.g. `# Angular Avatar Component Overview` → `# Avatar Component`).
+- B5 (Warning) A **Usage** sub-heading repeats the component name (`### Avatar Shape` → `### Shape`).
+
+### C. Diátaxis mode integrity (mode-bleed)
+Run the compass on each section; flag content that has drifted out of the section's assigned mode.
+- C1 (Warning) **Explanation inside Usage/Getting Started** outside the final **Do/Don't** subsection
+  ("The reason this works is…") — move to **Do/Don't** or a concept topic and link.
+- C2 (Warning) **Instruction inside a reference section** (Properties/Methods/Events telling the
+  reader *how to* build something) — move to Usage; keep the table descriptive.
+- C3 (Warning) **Reference dumped into Usage** (exhaustive option lists in prose) — move to the table.
+- C4 (Warning) **Usage**'s **Do/Don't** only says when to *use* the component, never when *not* to — the
+  When-Not-to-Use redirect is the high-value half.
+- C5 (Suggestion) Tutorial-style hand-holding in a how-to (or vice-versa) — match the audience.
+- C6 (Warning) **Styling content inside Usage** (CSS-var overrides, `color`/background
+  snippets) — move to the **Styling** section; Styling should also open with a `<Sample>` of the result.
+- C7 (Warning) **Usage doesn't cover every public input** with a property-focused sub-section and
+  minimal snippet, omits `### Basic Declaration`, or documents each option in isolation instead of
+  grouping tightly coupled properties and stating the behavioral relationship once (e.g. the
+  content-type priority).
+- C8 (Warning) **Usage**'s **Do/Don't** drifts into another mode — install/code steps (belongs in Getting
+  Started/Usage), an exhaustive option table (belongs in Properties), or conformance claims (belongs
+  in Accessibility) instead of do/don't guidance.
+
+### D. Metadata & AI-readiness
+- D1 (Warning) `relatedComponents` is set but **Usage**'s **Do/Don't** guidance doesn't name the
+  specific sibling(s) by name and link them — or vice-versa, it names a sibling that isn't listed in
+  `relatedComponents`.
+- D2 (Warning) Missing/weak `description` or `llms.description` (not answer-shaped, or >~160 chars).
+- D3 (Warning) Section opens with no plain lead sentence, or with empty boilerplate.
+- D4 (Warning) A section relies on "as mentioned above" / isn't self-contained.
+- D5 (Warning) Properties/Methods/Events appear hand-written rather than from the typed source.
+- D6 (Suggestion) Styling variables undocumented where the component is themeable.
+- D7 (Warning) xplat: hard-coded framework name where a `{Platform}`/`{ProductName}` token belongs, or
+  framework-specific content not wrapped in `<PlatformBlock>`.
+- D8 (Error) An API identifier (tag, class, package, property, method, event, CSS part, theming
+  variable) appears to be fabricated/unverifiable, or an unresolved `‹VERIFY:…›` placeholder was left
+  in. Public API values must trace to the Ignite UI/API docs MCP source, or to the official platform
+  API docs when MCP is unavailable.
+- D9 (Error) A **claim** contradicts or isn't verifiable against the component — a wrong default,
+  value range, precedence/fallback behavior, version-support statement, deprecation, or DOM
+  description. For public API facts, verify against the Ignite UI/API docs MCP source first; if MCP is
+  unavailable, use the official Infragistics API docs for the target platform (React
+  `https://www.infragistics.com/api/react/`, Web Components
+  `https://www.infragistics.com/api/webcomponents/`, Blazor
+  `https://www.infragistics.com/api/blazor`). Use typed source for implementation details not exposed
+  by API docs, and official framework docs for framework/version behavior; if unverifiable, don't
+  assert it. Existing topic snippets/prose are not sufficient proof.
+- D10 (Warning) **Voice/tone drift** — prose isn't imperative/second-person present tense, mixes
+  first-person-plural narration ("we create") with how-to, or carries filler ("simply", "just") or
+  marketing inside instructional prose.
+- D11 (Error) **Blanket or unverified accessibility-conformance claim** — "fully accessible" /
+  "WCAG compliant" prose, a conformance target (WCAG level, Section 508, EN 301 549) with no official
+  source, a conformance-table row not traceable to behavior verified on the page or in source, an
+  "N/A" filler row for an irrelevant criterion, or an invented testing/AT matrix or VPAT link.
+  Fix: criterion-level rows tied to observable behavior, or `‹VERIFY:…›`.
+
+### E. Samples & links
+- E1 (Warning) `<Sample>` missing an `alt`.
+- E2 (Suggestion) Near-duplicate samples that teach the same task.
+- E3 (Warning) Hand-written API URL instead of `<ApiLink>`.
+- E4 (Warning) `<hr>` or `<igc-divider>` placed directly before or after a `<Sample>`, code fence,
+  or table (dividers separate prose only).
+- E5 (Warning) A `<Sample>` sets both `fitContent` and `height` — they are mutually exclusive.
+  `fitContent` sizes the iframe to the component, so remove `height`.
+- E6 (Error) An `<ApiLink>` whose `type` has no generated reference page — typically an abstract/base
+  class (e.g. `ButtonBase`): the link renders (e.g. `IgrButtonBase`) but points nowhere. Verify the
+  `type` appears as an `<ApiLink>` target elsewhere in the doc set; link base-class members through
+  the concrete component (`type="Button" member="href"`) instead.
+
+### F. Formatting & altitude
+- F1 (Suggestion) A `ul`/`ol` with a single item that should be a paragraph.
+- F2 (Warning) A deprecated/legacy setup (e.g. NgModule) shown **above** the current recommended
+  approach (standalone) — reorder so current is first, legacy after and marked as such.
+- F3 (Suggestion) The **Styling** section doesn't open with a `<Sample>` of the styled result, or its
+  first subsection isn't `### Sass Theming`.
+- F4 (Suggestion) **Getting Started** repeats the generic install boilerplate (the `ng add` command
+  with the "install the library first / read getting started" prose that is identical on every page)
+  instead of compressing it to a **one-line prerequisite link** and leading with the component-specific
+  import.
+- F5 (Warning) An inline Properties/Styling-Variables table has rows not verified from source, or is
+  presented as generated when the repo has no generator (curated + `<ApiLink>` is the current rule).
+- F6 (Warning) A version-migration note lives inside a code-fence comment, or legacy/alternative setup
+  (e.g. NgModule) is scattered outside **Troubleshooting** → move it into Troubleshooting as
+  question → cause → fix; keep Getting Started and samples on the current path only.
+- F7 (Warning) An **inline** fenced code snippet uses a deprecated API or outdated framework idiom
+  (e.g. `standalone: true`, `*ngIf`/`*ngFor`, an old import path) → modernize it. Scope is authored
+  snippets only; **live `<Sample>` embeds are out of scope** (fix those in the sample project), and
+  legacy snippets deliberately kept in **Troubleshooting** are exempt.
+- F8 (Warning) The Styling section has **per-theme variable tables** (the legacy
+  `.theme-switcher-wrapper` / `.theme-table` tabbed markup) or a **default-value column** in the
+  Styling Variables table. Every theme extends the same base schema — the variable *set* is identical
+  across themes, only the default values differ — so per-theme tabs document a difference that doesn't
+  exist, and defaults are per-theme data for the generated API reference. Fix: collapse to **one
+  two-column table (variable · what it changes)**.
+
+## Report format
+
+Produce this exact shape:
+
+```
+# Audit: <topic path or name>  (<Angular | xplat> · <component | concept | category>)
+
+**Verdict:** <Conforms | Minor drift | Needs work | Off-standard>
+**Summary:** <2–3 sentences: biggest issues and the through-line.>
+
+## Findings
+### <Error|Warning|Suggestion> · <Check ID> · <short title>
+- **Where:** <section / line>
+- **Issue:** <what's wrong, plainly>
+- **Principle:** <the house rule or Diátaxis mode it violates>
+- **Fix:** <the concrete change — the corrected heading, the sentence to move, the table to add>
+
+<repeat, ordered Error → Warning → Suggestion>
+
+## Quick wins
+<bulleted list of the 3–5 highest-leverage, lowest-effort fixes>
+```
+
+Keep every **Fix** concrete and applyable — the corrected heading text, the exact sentence to move and
+where, the table columns to add. Group findings by severity, most severe first. If the topic is clean,
+say so plainly and note what it does well rather than inventing problems.
diff --git a/.ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md b/.ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md
new file mode 100644
index 0000000000..2ef9bceeac
--- /dev/null
+++ b/.ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md
@@ -0,0 +1,72 @@
+# Diátaxis cheat-sheet
+
+Condensed from https://diataxis.fr (tutorials, how-to, reference, explanation, compass).
+This is the *reasoning layer*. For how the four modes attach to Ignite UI sections, see
+`house-style.md`. Read this whenever you're unsure what kind of content a topic — or a single
+section — should be.
+
+## The compass (use this first, every time)
+
+Two questions decide the mode. Ask them of the *content in front of you* or the *user need*:
+
+| If the content…   | …and serves the user's… | …then it is… |
+| ----------------- | ----------------------- | ------------ |
+| informs **action**    | **acquisition** of skill (study) | a **tutorial** |
+| informs **action**    | **application** of skill (work)  | a **how-to guide** |
+| informs **cognition** | **application** of skill (work)  | **reference** |
+| informs **cognition** | **acquisition** of skill (study) | **explanation** |
+
+- *action* = doing, practical steps. *cognition* = thinking, propositional knowledge.
+- *acquisition* = study/learning. *application* = getting real work done.
+
+Apply the compass at any zoom level: a whole topic, a section, even a sentence. When a section
+"feels off," run the compass on it — usually it has drifted into a second mode.
+
+## The four modes at a glance
+
+| Mode | Serves | Question it answers | Cardinal rule | Voice |
+|------|--------|---------------------|---------------|-------|
+| **Tutorial** | learning by doing | "Teach me, hold my hand" | Ruthlessly minimise explanation; guarantee success | "In this tutorial *we* will…" |
+| **How-to guide** | a competent user's task | "Help me get X done" | Action only; no teaching, no digression | "To achieve X, do Y." |
+| **Reference** | look-up during work | "What exactly is X / its options?" | Describe and *only* describe; be austere | "The `value` property accepts a number 0–5." |
+| **Explanation** | understanding a topic | "Tell me about X / why?" | Discuss, connect, weigh alternatives; stay bounded | "X exists because… An alternative is…" |
+
+### Tutorial — learning-oriented
+A lesson. The learner learns *by doing*, under guidance, toward a meaningful, guaranteed-to-succeed
+result. Show where they'll end up; deliver visible results early and often; keep a narrative of the
+expected ("after a moment you'll see…"); ignore options and alternatives; minimise explanation (link
+out instead). Reliability is sacred — it must work for every reader, every time.
+
+### How-to guide — task/goal-oriented
+Directions that guide an already-competent user through a real-world problem. Defined by the *user's
+goal*, not by the machinery ("How to validate a reactive form," not "The validation API"). A sequence
+with flow. Omit the unnecessary; usability beats completeness. Title says exactly what it shows
+("How to…"). This is a recipe, not a cooking lesson.
+
+### Reference — information-oriented
+Neutral, authoritative technical description of the machinery — properties, methods, events, options.
+Structured to mirror the code. Austere: you *consult* it, you don't read it. No instruction, no
+opinion, no explanation — link out for those. Tables and examples are ideal. Best when
+auto-generated from the typed source so it never drifts.
+
+### Explanation — understanding-oriented
+Discursive treatment of a topic that permits reflection. Higher, wider view than the other three.
+Answers "Can you tell me about…?" and "Why…?". Make connections, give context and history, weigh
+alternatives and admit opinion. Name it with an implicit *"About …"* in front of the title. Keep it
+bounded — it tends to absorb instruction and reference that belong elsewhere.
+
+## The two classic confusions (where writers go wrong)
+
+1. **Tutorial vs how-to.** Same steps, different need. A tutorial *teaches* a beginner (success
+   guaranteed, no choices, minimal why). A how-to serves a competent user getting a *specific job*
+   done (adaptable, may fork, assumes background). Don't merge them.
+2. **Reference vs explanation.** Reference *describes* (cognition + work): austere, neutral, complete.
+   Explanation *illuminates* (cognition + study): discursive, contextual, opinionated. A properties
+   table is reference; "why the component works this way" is explanation. Keep them in separate
+   sections and link between them.
+
+## The golden rule
+
+Each unit of documentation should serve **one** need in **one** mode. When two modes want to live in
+the same section, split them and cross-link. In Ignite UI topics this happens at the *section* level —
+see the composite-topic principle in `SKILL.md`.
diff --git a/.ai/skills/igniteui-doc-topics/references/house-style.md b/.ai/skills/igniteui-doc-topics/references/house-style.md
new file mode 100644
index 0000000000..6dcdbdabf6
--- /dev/null
+++ b/.ai/skills/igniteui-doc-topics/references/house-style.md
@@ -0,0 +1,361 @@
+# Ignite UI house style
+
+The Ignite UI documentation conventions an authored or audited topic must follow. Pair this with
+`diataxis-cheatsheet.md` (the *why*) and the section→mode map in `SKILL.md`.
+
+> **Current vs target state.** The live `vnext` repo is *pre-standardization* — many topics use
+> drifted headings (e.g. `## Angular Rating Example`, `## Configuration`). This file describes the
+> **target** standard (revision-2 blueprint). When **authoring**, write to the target. When
+> **auditing**, measure against the target and report the gap.
+
+## Two doc sets
+
+| Doc set | Frameworks | Path (vnext) | Layout | One topic = |
+|---|---|---|---|---|
+| **Angular** | Angular only | `docs/angular/src/content/en/components/` | flat `*.mdx` | one framework |
+| **xplat** | React · Web Components · Blazor | `docs/xplat/src/content/en/components/<category>/` | categorized `*.mdx` | **one file, all three frameworks** |
+
+The **same section list, order, and names apply to both sets.** Differences are mechanical only (see
+Per-framework mechanics), never the shape of the page. **Dependencies** appears in both sets — it
+covers modules to import (Angular) or supporting components/themes required to render or function
+(xplat); currently seen as `## Theming Dependencies`.
+
+## File format & frontmatter
+
+Topics are **Astro `.mdx`**. Frontmatter is YAML. Observed + target fields:
+
+```yaml
+---
+title: "Angular Star Rating Component – Ignite UI for Angular - MIT license"   # SEO title
+description: "…"           # <=~160 chars, shaped as an answer ("X is a … that …")
+keywords: "…"              # comma-separated
+license: MIT
+mentionedTypes: ["Rating"] # xplat: API types referenced on the page
+llms:
+  description: "…"         # AI-facing one-liner; the exact text an assistant uses to summarize
+relatedComponents: [Toast, Banner]   # TARGET field — drives the Usage Do/Don't trigger (see below)
+---
+```
+
+- **`llms.description`** already exists in both sets and is high-value — write it as a crisp,
+  self-contained answer sentence. It is *not* optional filler.
+- **`relatedComponents`** is the revision-2 trigger and is **not yet in the repo**. When authoring to
+  target, set it. When auditing, treat a missing-but-warranted value as a finding, and a set value
+  with no **Usage** → **Do/Don't** guidance as a hard error.
+
+### MDX imports (declare what you use)
+
+```mdx
+import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
+import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import DocsAside from 'igniteui-astro-components/components/mdx/DocsAside.astro';
+import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';  # xplat only
+```
+
+## Per-framework mechanics
+
+- **Prefixes differ by framework/library — don't assume one for all:**
+  - **Angular** → native **`igniteui-angular`**, **`igx-`** tags / **`Igx…Component`** classes. The
+    Angular doc set documents this library.
+  - **Web Components** → **`igniteui-webcomponents`**, **`igc-`** tags / **`Igc…Component`** classes.
+  - **React** → **`igniteui-react`**, a **wrapper around the `igc`** web components.
+  - **Blazor** → **`igniteui-blazor`**, a **wrapper around the `igc`** web components.
+- **Net effect:** the **xplat doc set (React / WC / Blazor) is entirely `igc`-based** — WC is `igc`
+  directly; React and Blazor wrap it. The **Angular doc set is `igx`**.
+- **Exception — WC-first components in the Angular docs.** Some newer components are built as web
+  components and surfaced in the Angular docs via the `igc` element rather than a native `igx` one
+  (verified: the Angular **Rating** topic installs `igniteui-webcomponents`, registers
+  `IgcRatingComponent`, and renders `<igc-rating>`). So **don't assume `igx` for every Angular topic** —
+  verify the tag/class per component.
+- **Angular set:** plain prose, no platform tokens. Registers and renders whichever the component is
+  (`igx-…` native, or the `igc-…` WC for the exceptions above).
+- **xplat set:** the *same file* serves React / WC / Blazor via:
+  - **Tokens** the build resolves: `{Platform}`, `{ProductName}`, `{PackageWebComponents}`,
+    `{PackageReact}`, `{PackageBlazor}`, etc. Use them in title/description/keywords/headings and prose
+    — never hard-code "React" where a token belongs.
+  - **`<PlatformBlock for="WebComponents">…</PlatformBlock>`** to wrap framework-specific content
+    (install commands, imports, snippets). `for` values: `WebComponents`, `React`, `Blazor`.
+- **Live samples** embed the same way in both sets:
+  `<Sample src="/inputs/rating/basic" height={150} alt="{Platform} Rating Basic Example" />`
+- **API links** use `<ApiLink …>` rather than hand-written URLs so they resolve per framework.
+
+## Never fabricate API identifiers (zero-risk rule)
+
+The skill's job is structure and prose, **not** to invent the API surface. Do **not** emit a guessed
+tag, class, package name, property, method, event, CSS part, or theming variable. A plausible-but-wrong
+name that a reader copies is worse than an obvious gap.
+
+- Use an identifier **only** when it is verified — from the component's typed API source, an existing
+  topic, or the user. The naming patterns are known (Angular `igx-<name>` / `Igx<Name>Component`; WC and
+  its React/Blazor wrappers `igc-<name>` / `Igc<Name>Component`), but the pattern is not a licence to
+  guess — confirm the exact prefix *and* `<name>` per component (some Angular topics are `igc` — see the
+  exception above).
+- When you must reference an unverified identifier, write a visible placeholder instead of a guess:
+  `‹VERIFY: exact export name›`. For a table, emit the fixed column headers and a single injection note
+  — invent no rows.
+- This applies equally to React/Blazor wrapper symbols: they resolve to the `igc` core, so prefer the
+  verified `igc` usage and mark any wrapper-specific class you can't confirm with `‹VERIFY:…›`.
+- **`<ApiLink>` targets are identifiers too.** A `type` that exists in the source is not enough — it
+  must have a generated reference page, and the only reliable check is an existing `<ApiLink>` with that
+  `type` elsewhere in the doc set. Abstract/base classes in particular (e.g. `ButtonBase`) may appear in
+  `mentionedTypes` yet have no page — the rendered link (e.g. `IgrButtonBase`) points nowhere. Link base-class
+  members through the concrete component instead (`type="Button" member="href"`), and list only the concrete
+  component under **API References**.
+
+## Verification workflow
+
+Use this checklist when creating technical content or auditing an existing topic. Audit mode reports
+verification gaps; it does not edit the topic. Existing topic prose and snippets are evidence to check,
+not a source of truth.
+
+1. **Identify the target platform.** Angular/native `igx`, Web Components `igc`, React, or Blazor.
+2. **Verify public API facts through MCP first.** Use the Ignite UI/API docs MCP source for component
+   types, properties, methods, events, and API-link targets.
+3. **If MCP is unavailable, use the official platform API docs.**
+   - React: `https://www.infragistics.com/api/react/`
+   - Web Components: `https://www.infragistics.com/api/webcomponents/`
+   - Blazor: `https://www.infragistics.com/api/blazor`
+4. **Use typed source only for details the API docs do not expose.** Examples: rendered DOM, slots,
+   parts, key handlers, theme `.scss` `@param` comments, precedence rules, and deprecation markers.
+5. **Use official framework docs for framework behavior.** Examples: Angular standalone defaults,
+   control-flow syntax, React conventions, and Blazor conventions.
+6. **Mark unresolved facts visibly.** Use `‹VERIFY: exact fact/source needed›` or flag the issue in the
+   audit report; never replace uncertainty with a plausible claim.
+
+Authored fenced code snippets follow the same verification order. Live `<Sample>` embeds are separate:
+verify `src`, `alt`, and display props in the topic, but report sample-code problems as upstream sample
+project work.
+
+## Component topic — canonical section order
+
+Required = every component topic, always this order. Conditional = only when relevant, but always in
+this slot. **These names are the only allowed H2s.** Anything feature-specific becomes a sub-heading
+under **Usage**, never a new top-level section.
+
+| # | Section (`##`) | Required? | Diátaxis mode | Contents |
+|---|---|---|---|---|
+| 1 | *Title + one-line definition* (`#` + lead ¶) | required | orient / reference | H1 is **`‹Component› Component`** — **no** framework prefix, **no** "Overview" suffix (the framework lives in the SEO `title`). Follow with one plain sentence: what it is, what problem it solves. Mirror `llms.description`. |
+| 2 | *Live Demo* | required | demonstration (action) | `<Sample>` of the simplest useful state near the top of the page, before **Anatomy**. |
+| 3 | **Anatomy** | required for component topics | orientation (reference) | Opens with a screenshot/GIF of the component's parts or the behavior being shown, then the **DOM tree / skeleton** (rendered elements, parts, slots). If the visual asset doesn't exist yet, leave a `{/* TODO */}` marker rather than a broken image, but still include the section and verified skeleton. |
+| 4 | **Getting Started** | required | how-to | **Lead with the component-specific import/registration** — the page-unique, high-value part. Compress the generic library install to a **single prerequisite line linking the general getting-started topic** (an inline `ng add igniteui-angular` as a parenthetical is fine); **don't** repeat the multi-sentence install boilerplate that is identical on every component page. Show the **current** registration (standalone import) first; put legacy NgModule **after**, marked as legacy. |
+| 5 | **Usage** | required | how-to + explanation | Start with `### Basic Declaration`, showing the smallest valid component markup for each platform. Then add property-focused sub-sections that showcase every public input with a minimal snippet and, when a verified demo exists and adds visual value, a `<Sample>`. Give standalone properties their own sub-section (`Shape`, not `Avatar Shape`); group only tightly coupled properties that form one behavior (for example, content-source priority such as `src`, `alt`, `initials`, and default slot content). The final Usage subsection must be `### Do/Don't`; it uses inline **When to use:** and **When not to use:** labels, not nested headings. Styling content belongs in **Styling**, not here. |
+| 6 | **Properties** | required | reference | Table: name · type · default · description. (Replaces "Configuration".) |
+| 7 | **Methods** | conditional | reference | Table of callable actions. |
+| 8 | **Events** | conditional | reference | Table of emitted events. |
+| 9 | **Styling** | required when applicable | how-to + reference | **Open with a `<Sample>` of the styled result** + one intro line, then the **Styling Variables table** (**one table** — variable · what it changes; **no default-value column, no per-theme tabs**) and styleable-parts table. Subsections cover each approach — **first `### Sass Theming`** (the primary Sass theme workflow), then others (e.g. `### Tailwind`, `### Custom sizing`). All styling content lives here, not under Usage. |
+| 10 | **Accessibility** | required | reference | Three sub-sections, in order: **Keyboard Interaction** (key→action table), **Screen Readers / ARIA**, **Accessibility Compliance** (conformance evidence — see the sub-structure spec below). |
+| 11 | **Troubleshooting** | conditional (required when version-migration or legacy-setup notes exist) | how-to | Gotchas phrased as the reader's real question; answer as cause → fix. **Collect version-migration notes, deprecations, and legacy/alternative approaches here** — not buried in code-fence comments or scattered asides. |
+| 12 | **API References** | required | reference | `<ApiLink>` out to the full generated reference; don't duplicate it. |
+| 13 | **Dependencies** | conditional | reference | Themes, styles, or supporting components the component relies on to render or function — modules to import (Angular) or supporting components/themes (xplat). (Currently "Theming Dependencies".) |
+| 14 | **Additional Resources** | required | navigation | Forums, GitHub, related topics. |
+
+**When Not to Use trigger:** every component topic ends **Usage** with `### Do/Don't`. This subsection
+must include inline **When to use:** and **When not to use:** labels, not nested headings. When
+`relatedComponents` is non-empty, **When not to use:** must name the specific better-fit sibling(s)
+by name and link them; when it's empty (standalone primitives like Badge/Divider), **When not to
+use:** states the boundary without inventing a sibling.
+
+**Reference-table contract:** Properties / Methods / Events tables are **generated from the same typed
+API source** as the full reference — not hand-typed. Inline tables = the core knobs for fast scanning;
+**API References** links to the complete set. One source, so nothing drifts. **When authoring, do not
+hand-write or invent rows:** emit the fixed column headers (`name · type · default · description`) and a
+single build-injection note, and leave the row values to the generator. Inventing a plausible property
+or event name is exactly the failure this contract exists to prevent.
+
+**Usage coverage contract:** begin with `### Basic Declaration`, then use property-focused
+sub-sections to demonstrate every public input. Prefer one sub-section per standalone property; group
+properties only when they are inseparable in real use or define a shared precedence/behavior. Each
+sub-section should include a minimal, copyable snippet for every platform it affects. Add a
+`<Sample>` only when the demo path is verified and the visual result teaches something the snippet
+alone does not.
+
+**Live-sample contract:** exactly one top preview; add Usage samples only for distinct,
+user-facing tasks or property-focused behaviors (selection, editing, sorting, validation,
+templating, styling, shape, content, sizing). Soft max **10 samples/page**; up to 10 is fine, and
+only clear sprawl past that warrants splitting into focused topics.
+
+### `<Sample>` configuration — pick the props deliberately
+
+`<Sample>` renders a live demo (iframe + source-code tabs + live-edit buttons). **`src` is required and must
+point at a real demo path** — treat it like any other identifier under the zero-risk rule: never invent or
+guess a `src`, an `lob`/`dv`/`crm` base, or a path; use one only when it's verified from the sample project
+or an existing topic, else leave a `‹VERIFY: demo path›` marker. Never hand-edit the demo's code — that lives
+in the separate sample project.
+
+Choose the display config from **what the sample is showing**, not by habit:
+
+| Prop | Default | Use it when… |
+|---|---|---|
+| `src` | — (required) | Always. Relative demo path. |
+| `alt` | — | **Always** — the iframe title for accessibility. A missing `alt` is an audit finding (E1). Describe the demo, e.g. `alt="Angular Calendar range selection"`. |
+| `height` | `400` | The demo's natural height isn't ~400px. Match the content. **Mutually exclusive with `fitContent`** — set one or the other, never both. |
+| `fitContent` | off | The component is small or variable-height (badge, chip, avatar, icon, switch), **or a compact standalone sub-view** (e.g. a calendar days/months/years view), and a fixed frame would waste or clip space. The iframe grows to the component's own height, so **do not also set `height`** — drop it entirely. Ignores `resizable`. |
+| `iframeOnly` | off | The **result** is the point and the source isn't instructive — purely visual demos, or a Styling preview whose styling is applied upstream (not in copyable code). Drops the code tabs/footer. Keep the tabs when the code *is* the lesson (e.g. a Sass `calendar-theme` snippet). |
+| `fullscreenBtn` | off | Paired with `iframeOnly` for large/complex visual demos that benefit from full-screen. |
+| `resizable` | off | Responsiveness is the lesson (grids, layout, splitter, dock manager) — lets the reader drag the width. Ignored with `fitContent`. |
+| `position` | — | A small component would otherwise sit in the top-left; align it (`center`, etc.). |
+| `spacing` | — | The demo needs breathing room around the iframe (`sm`/`md`/`lg` = 8/16/32px). |
+| `noBorder` | off | The default border competes with the demo visually. Cosmetic — use sparingly. |
+| `lob` / `dv` / `crm` | default base | The demo lives in the LOB, Data-Viz, or CRM demos app rather than the default — **verify before setting**. |
+
+Defaults are right for most Usage samples: `<Sample src="…" height={…} alt="…" />`. Reach for the extra props
+only when the component type calls for it — the top preview and standard task demos keep the code tabs (no
+`iframeOnly`); the **Styling** section still opens with a styled-result `<Sample>`, using `iframeOnly` only
+when its styling isn't shown as copyable code.
+
+### Accessibility — required sub-structure
+
+`## Accessibility` always carries three `###` sub-sections, in this order. All three are **reference**
+mode: statements of fact in tables and short lists — no steps, no marketing.
+
+1. **`### Keyboard Interaction`** — one key → action table, verified against the component's key
+   handlers. Note how the component is reached (Tab) and any condition that removes it from the tab
+   order.
+2. **`### Screen Readers / ARIA`** — the roles, `aria-*` attributes, and announcements the component
+   provides (from source), plus what the reader must supply (e.g. `aria-label` when the visible
+   content doesn't describe the action).
+3. **`### Accessibility Compliance`** — the conformance evidence, in this shape:
+   - **Lead sentence** naming the conformance target (WCAG version + level; Section 508 / EN 301 549
+     where applicable). This is a product-level claim — state it only from an official Infragistics
+     statement; otherwise write `‹VERIFY: conformance target›`.
+   - **Conformance table** — two columns: **Criterion · How the component complies**. List only the
+     WCAG success criteria *relevant to this component*, each row grounded in behavior already
+     verified on this page (the keyboard table, the ARIA facts, the typed source). Link each
+     criterion to its WCAG Understanding page. Common criteria to pick from:
+     1.3.1 Info and Relationships (roles/structure) · 1.4.1 Use of Color (states not conveyed by
+     color alone) · 1.4.3 Contrast (Minimum) (default themes) · 1.4.11 Non-text Contrast ·
+     2.1.1 Keyboard + 2.1.2 No Keyboard Trap (full keyboard operability) · 2.4.3 Focus Order ·
+     2.4.7 Focus Visible (focus ring) · 2.5.7 Dragging Movements (every drag interaction needs a
+     keyboard/single-pointer alternative — splitter, slider, dock manager) · 2.5.8 Target Size
+     (Minimum) · 4.1.2 Name, Role, Value · 4.1.3 Status Messages (components that announce — toast,
+     snackbar, progress). Omit irrelevant criteria entirely — no "N/A" filler rows.
+   - **Your responsibilities** — a short list of what the app author must still do for the page to
+     conform: provide the accessible name, keep sufficient contrast when overriding themes, preserve
+     a logical focus order in the surrounding layout, keep minimum target sizes when custom-sizing.
+     Cross-link the Usage/Styling sections that show *how* — don't repeat the steps here. This split
+     (what the component guarantees vs what the reader owes) is the highest-value content of the
+     sub-section for both humans and AI assistants.
+   - **Known exceptions** *(only when real)* — criteria the component doesn't fully meet, each with
+     its workaround or tracking link. An honest, specific gap beats a silent one.
+   - **Validation & resources** *(optional, verified only)* — the screen reader / AT combinations the
+     component is tested with, and links to the product accessibility statement / VPAT and the
+     matching [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/patterns/) pattern.
+     Omit when unverified — never invent a testing matrix.
+
+   Compliance claims are the highest-risk statements on the page — they carry legal weight, and a
+   wrong one is copied into the reader's own conformance report. The zero-risk rule applies at full
+   strength: no blanket "fully accessible" / "WCAG compliant" sentence, ever; every table row traces
+   to observable, verified behavior; product-level claims come only from an official source.
+
+## Overview topics
+
+**5a. Concept / guide overview** (Diátaxis: *explanation*) — e.g. "Theming concepts":
+Title + intro → **Overview** → **Before You Start** → **Next Steps** → **Available Tools** →
+**Common Workflows** → **Troubleshooting** → **Additional Resources** → optional **FAQ**. Use an
+accordion for FAQ content when a compact question-and-answer block is useful.
+
+**5b. Category / index overview** (Diátaxis: *reference/navigation* — a map) — e.g. "Charts overview":
+Title + intro → **Key Features** → **Types** (identical micro-structure per entry: one-line def + link + small
+`<Sample>`) → **Next Steps** → **API References / Additional Resources**.
+
+Guardrails: cap each section at ~3 short paragraphs (else add sub-sections); isolate marketing copy in
+a single "Why {ProductName}" section — never thread it through instructional content.
+
+## Naming reconciliation (drift → standard)
+
+| Seen in the wild | Standard name |
+|---|---|
+| "Angular X Component Overview"; "X Component Overview"; "{Platform} X Component Overview" (H1) | **`X Component`** (H1 — drop framework + "Overview") |
+| Setup; "Getting Started with…"; "Getting Started with Ignite UI for Angular X" | **Getting Started** |
+| Code Snippet; Examples; "Using the … Component"; "{Platform} X Example"; "Angular X Example" | **Usage** |
+| "Avatar Shape"; "‹Component› ‹Feature›" (Usage sub-heading) | **`‹Feature›`** (drop the component name) |
+| Configuration | **Properties** |
+| "X vs Y"; "Choosing Between X and Y"; Behavior; Feature Integration | **Do/Don't** (as the final `###` under **Usage**) |
+| top-level `## When to Use` / `## When Not to Use`; `### When to Use` / `### When Not to Use`; **When to Use / When Not to Use nested under `## Anatomy`** | Inline **When to use:** / **When not to use:** labels inside the final **Usage** subsection, `### Do/Don't` |
+| Summary (as lead-in) | intro ¶ or **Overview** |
+| Keyboard Navigation | **Accessibility** |
+| WAI-ARIA Support; Compliance; Section 508; Accessibility Statement | **`### Accessibility Compliance`** (under **Accessibility**) |
+| Best Practices; Do's and Don'ts; Guidelines; Recommendations | **Do/Don't** (as the final `###` under **Usage**) |
+| Theming (H2) | **Styling** (H2); the Sass approach becomes `### Sass Theming` under it |
+| Known Limitations; Known Issues and Limitations; Limitations | **Troubleshooting** |
+| API; API Reference (singular) | **API References** |
+| Theming Dependencies | **Dependencies** |
+
+## Write-for-both-audiences rules (people + AI assistants)
+
+1. **One job per section** — self-contained; no "as mentioned above." A section must make sense landed-on cold.
+2. **Lead each section with one plain, specific sentence** before any table/code — skip empty boilerplate.
+3. **Use the standard section names everywhere** — "Accessibility" always means the same thing.
+4. **Phrase guidance/troubleshooting as real questions** — When-Not-to-Use is the highest-value content for answer accuracy; name the sibling explicitly.
+5. **Reference lives in tables**, generated from the typed source.
+6. **Strong `description` / `llms.description`** — <~160 chars, answer-shaped.
+7. **Document theming variables** — variable · what it changes, in **one table for all themes**. No default-value column: defaults are per-theme values that live in the generated API reference, not the topic.
+
+## Formatting & altitude
+
+- **No divider hugging a block.** Never place `<hr>` or `<igc-divider>` directly before or after a
+  `<Sample>`, code fence, or table — those blocks carry their own separation. Dividers separate
+  *prose* sections only; in practice a topic rarely needs them at all.
+- **Single item ⇒ paragraph.** A `ul`/`ol` with one item is a paragraph. Use a list only for two or
+  more parallel items.
+- **Current API first, legacy after.** Show the current/recommended approach first (e.g. the
+  standalone component import); place deprecated/legacy approaches (NgModule) *below* it, explicitly
+  marked as legacy — never above the current one.
+- **Don't repeat the generic install boilerplate.** The `ng add igniteui-angular` + "read the getting
+  started topic" prose is identical on every component page — collapse it to a **one-line prerequisite
+  link** and lead Getting Started with the component-specific import instead. This mirrors how the major
+  component libraries (Angular Material, MUI, Ant Design, PrimeNG) work: install lives in one central
+  page; each component page shows only its own import. Keep the prerequisite as a single linked line
+  (optionally with an inline `ng add` token) so a cold-landing reader or AI still has the pointer — just
+  not the repeated paragraph.
+- **Styling leads with the result.** The Styling section opens with a `<Sample>` of the styled
+  outcome, then the tables; its first subsection is `### Sass Theming` (the Sass theme workflow), then
+  the other approaches (`### Tailwind`, `### Custom sizing`, …).
+- **One styling table — never per-theme tabs, never default values.** In the `theming` repo every
+  theme schema `extend`s the same base schema and only overrides *values* (e.g. `$material-switch`,
+  `$fluent-switch`, `$indigo-switch` all extend `$light-switch`; `$bootstrap-switch` extends
+  `$fluent-switch`), so **every theme exposes the identical variable set** — only the defaults differ.
+  Per-theme tabbed tables (the legacy `.theme-switcher-wrapper` / `.theme-table` markup) therefore
+  document a difference that doesn't exist; replace them with **one two-column table:
+  variable · what it changes**. Don't add a defaults column either — defaults vary per theme and
+  belong to the generated API reference, and the durable content is the variable's name and effect.
+- **Audit & modernize inline code snippets — not the samples.** Fenced code blocks (` ```… ```
+  `) are authored in the topic, so verify and update them: no deprecated APIs or outdated framework
+  idioms (drop `standalone: true`; prefer Angular's built-in control flow `@if`/`@for` over
+  `*ngIf`/`*ngFor`; use verified imports, selectors, and tags). The live **`<Sample>`** embeds render
+  from the separate sample project — **never hand-edit their code**; fix those upstream. The only
+  intentionally "old" snippets are the legacy ones quarantined in **Troubleshooting**.
+- **Omit `standalone: true` (Angular).** Components are standalone by default since Angular v19
+  (igniteui-angular targets far newer), so it's redundant in examples — don't write it. Show
+  `standalone: false` only when illustrating the legacy NgModule path (in Troubleshooting).
+- **Version & legacy notes live in Troubleshooting.** Don't bury "prior to vX use…" migration notes
+  in code-fence comments, and don't scatter legacy/alternative setup (e.g. NgModule) across the page.
+  Collect them in **Troubleshooting**, each phrased as question → cause → fix. Getting Started and
+  code samples show only the current, recommended path.
+- **Curated (not generated) reference tables — for now.** No build-time generator injects inline
+  Properties/Styling-Variables tables yet (only the full API reference is generated, reached via
+  `<ApiLink>`). Until one exists, hand-author a **small core** table whose every row is **verified
+  from source** (typed component for props; the `@param` doc-comments in the component's
+  `_…-theme.scss` for styling vars) and link `<ApiLink>` for the complete set. The zero-risk rule
+  still applies: no unverified rows.
+
+## Voice & tone
+
+Write instructions the same way across every topic so readers (and assistants) get one predictable voice.
+
+- **Imperative, second person, present tense.** "Set the `shape` attribute…", "Import the component…" — not "we create…" or "the developer should…". Address the reader as *you* only when needed for clarity.
+- **One voice per topic.** Don't mix imperative how-to with first-person-plural narration ("we create") or tutorial hand-holding. Reference sections (Properties/Styling tables, Accessibility) stay descriptive.
+- **Specific over vague; cut filler.** Name the exact attribute, value, or behavior. Drop "simply", "just", "in order to", "as you can see", and empty lead-ins.
+- **No marketing in instructional prose.** Keep promotion out of how-to/reference; overview topics isolate it in a single "Why {ProductName}" slot.
+- **Name features by their real Ignite UI identifier** (e.g. `igx-icon`, not "material icon") and cross-link the topic.
+
+## Verify every claim against the component
+
+The zero-risk rule is not limited to identifiers — **every statement of fact must be verified against the actual component before it ships or is recommended as an edit.** This includes defaults, value ranges, precedence/fallback behavior, version support ("since vX"), deprecations, emitted events, and rendered DOM.
+
+- **Source of truth:** follow the **Verification workflow** above. Public API facts come from MCP
+  first, then the official platform API docs. Typed source is for implementation details the API docs
+  do not expose. Existing docs and snippets are never sufficient proof by themselves.
+- **When recommending edits, verify first.** Never "correct" prose into a plausible-sounding claim you haven't checked — a confident wrong statement is worse than the original.
+- **If you can't verify it, don't assert it.** Write `‹VERIFY: …›` or leave the existing text and flag it — never guess a default, a version, or a behavior.
+- Behavioral claims that read fine but contradict the source (e.g. "the image falls back to initials on load error" when the code only sets precedence) are exactly what this rule catches.
diff --git a/.claude/skills/igniteui-doc-topics/SKILL.md b/.claude/skills/igniteui-doc-topics/SKILL.md
new file mode 100644
index 0000000000..479d47443e
--- /dev/null
+++ b/.claude/skills/igniteui-doc-topics/SKILL.md
@@ -0,0 +1,26 @@
+---
+name: igniteui-doc-topics
+description: >-
+  Author or audit Ignite UI documentation topics: component pages, how-to guides, conceptual
+  overviews, and category indexes for both the Angular doc set and the cross-platform React / Web
+  Components / Blazor doc set. Use this whenever someone asks to write, draft, create, review, audit,
+  fix, or standardize a documentation topic, tutorial, guide, reference page, or concept overview for
+  Ignite UI.
+---
+
+# Ignite UI doc topics adapter
+
+This is a Claude adapter for the canonical repo-local skill.
+
+Before doing any task actions, read and follow the canonical skill at:
+
+`../../../.ai/skills/igniteui-doc-topics/SKILL.md`
+
+Resolve every canonical reference path relative to that canonical skill directory:
+
+- `../../../.ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md`
+- `../../../.ai/skills/igniteui-doc-topics/references/house-style.md`
+- `../../../.ai/skills/igniteui-doc-topics/references/audit-rubric.md`
+
+Do not treat this adapter as a separate source of rules. If this adapter conflicts with the canonical
+skill, the canonical `.ai` skill wins.
diff --git a/.codex/skills/igniteui-doc-topics/SKILL.md b/.codex/skills/igniteui-doc-topics/SKILL.md
new file mode 100644
index 0000000000..f55d37c3fd
--- /dev/null
+++ b/.codex/skills/igniteui-doc-topics/SKILL.md
@@ -0,0 +1,26 @@
+---
+name: igniteui-doc-topics
+description: >-
+  Author or audit Ignite UI documentation topics: component pages, how-to guides, conceptual
+  overviews, and category indexes for both the Angular doc set and the cross-platform React / Web
+  Components / Blazor doc set. Use this whenever someone asks to write, draft, create, review, audit,
+  fix, or standardize a documentation topic, tutorial, guide, reference page, or concept overview for
+  Ignite UI.
+---
+
+# Ignite UI doc topics adapter
+
+This is a Codex adapter for the canonical repo-local skill.
+
+Before doing any task actions, read and follow the canonical skill at:
+
+`../../../.ai/skills/igniteui-doc-topics/SKILL.md`
+
+Resolve every canonical reference path relative to that canonical skill directory:
+
+- `../../../.ai/skills/igniteui-doc-topics/references/diataxis-cheatsheet.md`
+- `../../../.ai/skills/igniteui-doc-topics/references/house-style.md`
+- `../../../.ai/skills/igniteui-doc-topics/references/audit-rubric.md`
+
+Do not treat this adapter as a separate source of rules. If this adapter conflicts with the canonical
+skill, the canonical `.ai` skill wins.

From 9c0a9d66de0de85f99e631ea3f12b28efed30315 Mon Sep 17 00:00:00 2001
From: Galina Edinakova <gedinakova@infragistics.com>
Date: Tue, 21 Jul 2026 08:38:22 +0300
Subject: [PATCH 30/30] chore(*): Updated NG changelog with 22.0.0 (#437)

---
 docs/xplat/docConfig.json                        |  4 +++-
 .../en/components/general-changelog-dv.mdx       | 16 ++++++++++++++++
 .../jp/components/general-changelog-dv.mdx       | 16 ++++++++++++++++
 3 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/docs/xplat/docConfig.json b/docs/xplat/docConfig.json
index 027ef6fba3..5722b551ff 100644
--- a/docs/xplat/docConfig.json
+++ b/docs/xplat/docConfig.json
@@ -60,7 +60,9 @@
             { "name": "{PackageVerChanges-25-2-DEC}", "value": "20.2.1 (December 2025)"},
             { "name": "{PackageVerChanges-25-2-FEB}", "value": "20.2.2 (February 2026)"},
             { "name": "{PackageVerChanges-26-1-JAN}", "value": "21.0.0 (January 2026)"},
-            { "name": "{PackageVerLatest}",           "value": "21.0.1 (March 2026)"},
+            { "name": "{PackageVerChanges-26-1-MAR}", "value": "21.0.1 (March 2026)"},
+            { "name": "{PackageVerChanges-26-1}",     "value": "21.1.0 (June 2026)"},
+            { "name": "{PackageVerLatest}",           "value": "22.0.1 (July 2026)"},
             { "name": "{PackageAngularComponents}",   "value": "igniteui-angular"},
             { "name": "{RepoSamples}",      "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/samples"},
             { "name": "{RepoBrowser}",      "value": "https://github.com/IgniteUI/igniteui-angular-examples/tree/master/browser"},
diff --git a/docs/xplat/src/content/en/components/general-changelog-dv.mdx b/docs/xplat/src/content/en/components/general-changelog-dv.mdx
index 0c251cfed5..ae7ea1db7b 100644
--- a/docs/xplat/src/content/en/components/general-changelog-dv.mdx
+++ b/docs/xplat/src/content/en/components/general-changelog-dv.mdx
@@ -33,6 +33,22 @@ For changes specific to igniteui-angular components, please see CHANGELOG.MD.
 
 ## **{PackageVerLatest}**
 
+### General
+
+- **Angular 22 compatibility** — All Ignite UI for Angular components are now fully compatible with Angular 22.
+
+- **Standalone component support** — Components can now be used directly in standalone Angular applications without `NgModule`. New `provide*()` functions (e.g. `provideIgxCategoryChart()`) let you register component feature sets through `bootstrapApplication()` providers, and imperative `register*()` functions are available for DI-free setups.
+
+- **Per-component entry points for improved tree-shaking** — Each package now exposes named subpath entry points (e.g. `import 'igniteui-angular-charts/category-chart'`) that register only the feature set you need. The root package import remains fully side-effect-free and tree-shakeable, so you only pay for the components you use. For DataChart, graduated entry points such as `data-chart-category`, `data-chart-scatter`, and `data-chart-financial` let you pull in individual series families without bundling the entire chart.
+
+### Bug Fixes
+
+| Bug Number | Control | Description |
+|------------|---------|-------------|
+| 3689 | DataChart | An error is thrown when destroying chart with a data tooltip layer |
+
+## **{PackageVerChanges-26-1}**
+
 ### Enhancements
 
 #### {PackageCharts}
diff --git a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
index 5d3fc4c27a..e7c0d65440 100644
--- a/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
+++ b/docs/xplat/src/content/jp/components/general-changelog-dv.mdx
@@ -35,6 +35,22 @@ igniteui-angular コンポーネントに固有の変更については CHANGELO
 
 ## **{PackageVerLatest}**
 
+### 一般
+
+- **Angular 22 互換性** — すべての Ignite UI for Angular コンポーネントが Angular 22 と完全に互換性を持つように更新されました。
+
+- **スタンドアロン コンポーネントのサポート** — `NgModule` なしでスタンドアロン Angular アプリケーションでコンポーネントを直接使用できるようになりました。新しい `provide*()` 関数 (例: `provideIgxCategoryChart()`) を使用して `bootstrapApplication()` プロバイダーを通じてコンポーネント機能セットを登録でき、DI 不要のセットアップ向けに命令型の `register*()` 関数も利用可能です。
+
+- **ツリーシェイキング改善のためのコンポーネントごとのエントリ ポイント** — 各パッケージは、必要な機能セットのみを登録する名前付きサブパス エントリ ポイント (例: `import 'igniteui-angular-charts/category-chart'`) を公開するようになりました。ルート パッケージのインポートは完全にサイドエフェクトなしでツリーシェイク可能なままであるため、使用するコンポーネントのみがバンドルされます。DataChart の場合、`data-chart-category`、`data-chart-scatter`、`data-chart-financial` などの段階的なエントリ ポイントを使用して、チャート全体をバンドルせずに個々のシリーズ ファミリを取り込むことができます。
+
+### バグ修正
+
+| バグ番号 | コントロール | 説明 |
+|------------|---------|-------------|
+| 3689 | DataChart | データ ツールチップ レイヤーを含むチャートを破棄するときにエラーがスローされる。 |
+
+## **{PackageVerChanges-26-1}**
+
 ### 機能拡張
 
 #### {PackageCharts}