diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.tsx
similarity index 99%
rename from src-docs/src/views/elastic_charts/category_chart.js
rename to src-docs/src/views/elastic_charts/category_chart.tsx
index b7e8dadb94e..4416c6ca66c 100644
--- a/src-docs/src/views/elastic_charts/category_chart.js
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -169,7 +169,7 @@ const customTheme = {
   <Axis
     id="bottom-axis"
     position={${rotated ? '"left"' : '"bottom"'}}
-    showGridLines={false}
+    gridLine={{ visible: false }}
   />
   <Axis
     id="left-axis"
@@ -221,7 +221,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
         <Axis
           id="bottom-axis"
           position={rotated ? 'left' : 'bottom'}
-          showGridLines={false}
+          gridLine={{ visible: false }}
         />
         <Axis
           id="left-axis"
diff --git a/src-docs/src/views/elastic_charts/pie_alts.js b/src-docs/src/views/elastic_charts/pie_alts.tsx
similarity index 98%
rename from src-docs/src/views/elastic_charts/pie_alts.js
rename to src-docs/src/views/elastic_charts/pie_alts.tsx
index bfbd3d7bd41..978e521e7e4 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.js
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -152,7 +152,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -190,7 +190,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -299,7 +299,7 @@ export default () => {
   />
   <Axis
     id="left-axis"
-    showGridLines
+    gridLine={{ visible: true }}
     position={${rotated ? "'bottom'" : "'left'"}}
     ${
       formatted
diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.tsx
similarity index 99%
rename from src-docs/src/views/elastic_charts/sizes.js
rename to src-docs/src/views/elastic_charts/sizes.tsx
index ba09040f6f6..dcaf04e249f 100644
--- a/src-docs/src/views/elastic_charts/sizes.js
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -239,7 +239,7 @@ class Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
-                showGridLines={false}
+                gridLine={{ visible: false }}
                 style={xAxisStyle}
               />
               <Axis
@@ -347,7 +347,7 @@ class Sizes extends Component {
     position="bottom"
     title={'${xAxisTitle}'}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    showGridLines={false}
+    gridLine={{ visible: false }}
     style={${JSON.stringify(xAxisStyle)}}
   />
   <Axis
diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.tsx
similarity index 96%
rename from src-docs/src/views/elastic_charts/theming.js
rename to src-docs/src/views/elastic_charts/theming.tsx
index 0732d7108a5..925baf34e3c 100644
--- a/src-docs/src/views/elastic_charts/theming.js
+++ b/src-docs/src/views/elastic_charts/theming.tsx
@@ -119,11 +119,11 @@ export default () => {
           yAccessors={['y']}
           color={['black']}
         />
-        <Axis id="bottom-axis" position="bottom" showGridLines />
+        <Axis id="bottom-axis" position="bottom" gridLine={{ visible: true }} />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.tsx
similarity index 98%
rename from src-docs/src/views/elastic_charts/theming_categorical.js
rename to src-docs/src/views/elastic_charts/theming_categorical.tsx
index 3f6e76f0027..fc20de73060 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.js
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -334,12 +334,12 @@ export default () => {
           <Axis
             id="bottom-axis"
             position="bottom"
-            showGridLines={chartType !== 'BarSeries'}
+            gridLine={{ visible: chartType !== 'BarSeries' }}
           />
           <Axis
             id="left-axis"
             position="left"
-            showGridLines
+            gridLine={{ visible: true }}
             tickFormat={(d) => Number(d).toFixed(2)}
           />
         </Chart>
@@ -439,12 +439,12 @@ export default () => {
   <Axis
     id="bottom-axis"
     position="bottom"
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.tsx
similarity index 96%
rename from src-docs/src/views/elastic_charts/time_chart.js
rename to src-docs/src/views/elastic_charts/time_chart.tsx
index 0c18e1c67bd..f2af0d4168c 100644
--- a/src-docs/src/views/elastic_charts/time_chart.js
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -109,13 +109,13 @@ export default () => {
           id="bottom-axis"
           position="bottom"
           tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-          showGridLines={chartType !== 'BarSeries'}
+          gridLine={{ visible: chartType !== 'BarSeries' }}
           tickPadding={0}
         />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
@@ -180,12 +180,12 @@ export default () => {
     id="bottom-axis"
     position="bottom"
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}