diff --git a/docs/data/charts/areas-demo/PercentAreaChart.js b/docs/data/charts/areas-demo/PercentAreaChart.js
index bc7b1542dfb05..012c77e2cb2c6 100644
--- a/docs/data/charts/areas-demo/PercentAreaChart.js
+++ b/docs/data/charts/areas-demo/PercentAreaChart.js
@@ -21,7 +21,6 @@ const getPercents = (array) =>
 export default function PercentAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/areas-demo/PercentAreaChart.tsx b/docs/data/charts/areas-demo/PercentAreaChart.tsx
index ce2534e1ad3bd..6b3fad9557554 100644
--- a/docs/data/charts/areas-demo/PercentAreaChart.tsx
+++ b/docs/data/charts/areas-demo/PercentAreaChart.tsx
@@ -20,7 +20,6 @@ const getPercents = (array: number[]) =>
 export default function PercentAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.js b/docs/data/charts/areas-demo/SimpleAreaChart.js
index 89cc76fb7cb86..d84e816a566bd 100644
--- a/docs/data/charts/areas-demo/SimpleAreaChart.js
+++ b/docs/data/charts/areas-demo/SimpleAreaChart.js
@@ -15,7 +15,6 @@ const xLabels = [
 export default function SimpleAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx b/docs/data/charts/areas-demo/SimpleAreaChart.tsx
index 89cc76fb7cb86..d84e816a566bd 100644
--- a/docs/data/charts/areas-demo/SimpleAreaChart.tsx
+++ b/docs/data/charts/areas-demo/SimpleAreaChart.tsx
@@ -15,7 +15,6 @@ const xLabels = [
 export default function SimpleAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
       xAxis={[{ scaleType: 'point', data: xLabels }]}
diff --git a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview
index 9cb309cab20e1..d9ee2a68e2d25 100644
--- a/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview
+++ b/docs/data/charts/areas-demo/SimpleAreaChart.tsx.preview
@@ -1,5 +1,4 @@
 <LineChart
-  width={500}
   height={300}
   series={[{ data: uData, label: 'uv', area: true, showMark: false }]}
   xAxis={[{ scaleType: 'point', data: xLabels }]}
diff --git a/docs/data/charts/areas-demo/StackedAreaChart.js b/docs/data/charts/areas-demo/StackedAreaChart.js
index 11e420c3dc1ac..53a8f6434c045 100644
--- a/docs/data/charts/areas-demo/StackedAreaChart.js
+++ b/docs/data/charts/areas-demo/StackedAreaChart.js
@@ -17,7 +17,6 @@ const xLabels = [
 export default function StackedAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: uData, label: 'uv', area: true, stack: 'total', showMark: false },
diff --git a/docs/data/charts/areas-demo/StackedAreaChart.tsx b/docs/data/charts/areas-demo/StackedAreaChart.tsx
index 11e420c3dc1ac..53a8f6434c045 100644
--- a/docs/data/charts/areas-demo/StackedAreaChart.tsx
+++ b/docs/data/charts/areas-demo/StackedAreaChart.tsx
@@ -17,7 +17,6 @@ const xLabels = [
 export default function StackedAreaChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: uData, label: 'uv', area: true, stack: 'total', showMark: false },
diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.js b/docs/data/charts/bar-demo/BarChartStackedBySign.js
index cd80a684e3ec3..abcfd892dac9f 100644
--- a/docs/data/charts/bar-demo/BarChartStackedBySign.js
+++ b/docs/data/charts/bar-demo/BarChartStackedBySign.js
@@ -17,7 +17,6 @@ const xLabels = [
 export default function BarChartStackedBySign() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx
index cd80a684e3ec3..abcfd892dac9f 100644
--- a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx
+++ b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx
@@ -17,7 +17,6 @@ const xLabels = [
 export default function BarChartStackedBySign() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview
index 2a8f56c6c34d3..aafa8663e165d 100644
--- a/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview
+++ b/docs/data/charts/bar-demo/BarChartStackedBySign.tsx.preview
@@ -1,5 +1,4 @@
 <BarChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv', id: 'pvId', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.js b/docs/data/charts/bar-demo/BiaxialBarChart.js
index 9c3bf8daba86d..f08813851d70a 100644
--- a/docs/data/charts/bar-demo/BiaxialBarChart.js
+++ b/docs/data/charts/bar-demo/BiaxialBarChart.js
@@ -17,7 +17,6 @@ const xLabels = [
 export default function BiaxialBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/bar-demo/BiaxialBarChart.tsx b/docs/data/charts/bar-demo/BiaxialBarChart.tsx
index 1d7c5020429b0..32beb28e059c9 100644
--- a/docs/data/charts/bar-demo/BiaxialBarChart.tsx
+++ b/docs/data/charts/bar-demo/BiaxialBarChart.tsx
@@ -17,7 +17,6 @@ const xLabels = [
 export default function BiaxialBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/bar-demo/MixedBarChart.js b/docs/data/charts/bar-demo/MixedBarChart.js
index 4e6516e4d95e8..9833c681f0bb4 100644
--- a/docs/data/charts/bar-demo/MixedBarChart.js
+++ b/docs/data/charts/bar-demo/MixedBarChart.js
@@ -18,7 +18,6 @@ const xLabels = [
 export default function MixedBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx b/docs/data/charts/bar-demo/MixedBarChart.tsx
index 4e6516e4d95e8..9833c681f0bb4 100644
--- a/docs/data/charts/bar-demo/MixedBarChart.tsx
+++ b/docs/data/charts/bar-demo/MixedBarChart.tsx
@@ -18,7 +18,6 @@ const xLabels = [
 export default function MixedBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/MixedBarChart.tsx.preview b/docs/data/charts/bar-demo/MixedBarChart.tsx.preview
index 4b2c9d9c8fa97..fc30c1a497e62 100644
--- a/docs/data/charts/bar-demo/MixedBarChart.tsx.preview
+++ b/docs/data/charts/bar-demo/MixedBarChart.tsx.preview
@@ -1,5 +1,4 @@
 <BarChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv', stack: 'stack1' },
diff --git a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js
index e2571d8f5105f..940728d3f241c 100644
--- a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js
+++ b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.js
@@ -17,7 +17,6 @@ const xLabels = [
 export default function PositiveAndNegativeBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx
index e2571d8f5105f..940728d3f241c 100644
--- a/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx
+++ b/docs/data/charts/bar-demo/PositiveAndNegativeBarChart.tsx
@@ -17,7 +17,6 @@ const xLabels = [
 export default function PositiveAndNegativeBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/bar-demo/SimpleBarChart.js b/docs/data/charts/bar-demo/SimpleBarChart.js
index 0c7073a98dc88..f14ae3ab4b2bd 100644
--- a/docs/data/charts/bar-demo/SimpleBarChart.js
+++ b/docs/data/charts/bar-demo/SimpleBarChart.js
@@ -16,7 +16,6 @@ const xLabels = [
 export default function SimpleBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId' },
diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx b/docs/data/charts/bar-demo/SimpleBarChart.tsx
index 0c7073a98dc88..f14ae3ab4b2bd 100644
--- a/docs/data/charts/bar-demo/SimpleBarChart.tsx
+++ b/docs/data/charts/bar-demo/SimpleBarChart.tsx
@@ -16,7 +16,6 @@ const xLabels = [
 export default function SimpleBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId' },
diff --git a/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview b/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview
index 70296b709c03d..a0af48296c84e 100644
--- a/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview
+++ b/docs/data/charts/bar-demo/SimpleBarChart.tsx.preview
@@ -1,5 +1,4 @@
 <BarChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv', id: 'pvId' },
diff --git a/docs/data/charts/bar-demo/StackedBarChart.js b/docs/data/charts/bar-demo/StackedBarChart.js
index c8b2bcfd1c573..1529a093beac0 100644
--- a/docs/data/charts/bar-demo/StackedBarChart.js
+++ b/docs/data/charts/bar-demo/StackedBarChart.js
@@ -16,7 +16,6 @@ const xLabels = [
 export default function StackedBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx b/docs/data/charts/bar-demo/StackedBarChart.tsx
index c8b2bcfd1c573..1529a093beac0 100644
--- a/docs/data/charts/bar-demo/StackedBarChart.tsx
+++ b/docs/data/charts/bar-demo/StackedBarChart.tsx
@@ -16,7 +16,6 @@ const xLabels = [
 export default function StackedBarChart() {
   return (
     <BarChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
diff --git a/docs/data/charts/bar-demo/StackedBarChart.tsx.preview b/docs/data/charts/bar-demo/StackedBarChart.tsx.preview
index 87771a1884f45..117bd197e9174 100644
--- a/docs/data/charts/bar-demo/StackedBarChart.tsx.preview
+++ b/docs/data/charts/bar-demo/StackedBarChart.tsx.preview
@@ -1,5 +1,4 @@
 <BarChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv', id: 'pvId', stack: 'total' },
diff --git a/docs/data/charts/bars/BarLabel.js b/docs/data/charts/bars/BarLabel.js
index c684e33fa3e4c..83c26ee3dec51 100644
--- a/docs/data/charts/bars/BarLabel.js
+++ b/docs/data/charts/bars/BarLabel.js
@@ -6,7 +6,6 @@ export default function BarLabel() {
     <BarChart
       xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
       series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-      width={500}
       height={300}
       barLabel="value"
     />
diff --git a/docs/data/charts/bars/BarLabel.tsx b/docs/data/charts/bars/BarLabel.tsx
index c684e33fa3e4c..83c26ee3dec51 100644
--- a/docs/data/charts/bars/BarLabel.tsx
+++ b/docs/data/charts/bars/BarLabel.tsx
@@ -6,7 +6,6 @@ export default function BarLabel() {
     <BarChart
       xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
       series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-      width={500}
       height={300}
       barLabel="value"
     />
diff --git a/docs/data/charts/bars/BarLabel.tsx.preview b/docs/data/charts/bars/BarLabel.tsx.preview
index 12bc56aa174ed..e7c3283f62519 100644
--- a/docs/data/charts/bars/BarLabel.tsx.preview
+++ b/docs/data/charts/bars/BarLabel.tsx.preview
@@ -1,7 +1,6 @@
 <BarChart
   xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
   series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-  width={500}
   height={300}
   barLabel="value"
 />
\ No newline at end of file
diff --git a/docs/data/charts/bars/BarsDataset.js b/docs/data/charts/bars/BarsDataset.js
index 370b75fe0b39e..ada6d5ebac795 100644
--- a/docs/data/charts/bars/BarsDataset.js
+++ b/docs/data/charts/bars/BarsDataset.js
@@ -9,7 +9,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 300,
   margin: { left: 30 },
   sx: {
diff --git a/docs/data/charts/bars/BarsDataset.tsx b/docs/data/charts/bars/BarsDataset.tsx
index 370b75fe0b39e..ada6d5ebac795 100644
--- a/docs/data/charts/bars/BarsDataset.tsx
+++ b/docs/data/charts/bars/BarsDataset.tsx
@@ -9,7 +9,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 300,
   margin: { left: 30 },
   sx: {
diff --git a/docs/data/charts/bars/BasicBars.js b/docs/data/charts/bars/BasicBars.js
index ee4a235633186..ce4b5247d762c 100644
--- a/docs/data/charts/bars/BasicBars.js
+++ b/docs/data/charts/bars/BasicBars.js
@@ -6,7 +6,6 @@ export default function BasicBars() {
     <BarChart
       xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
       series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/bars/BasicBars.tsx b/docs/data/charts/bars/BasicBars.tsx
index ee4a235633186..ce4b5247d762c 100644
--- a/docs/data/charts/bars/BasicBars.tsx
+++ b/docs/data/charts/bars/BasicBars.tsx
@@ -6,7 +6,6 @@ export default function BasicBars() {
     <BarChart
       xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
       series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/bars/BasicBars.tsx.preview b/docs/data/charts/bars/BasicBars.tsx.preview
index 81167296938e1..384dac71f14ab 100644
--- a/docs/data/charts/bars/BasicBars.tsx.preview
+++ b/docs/data/charts/bars/BasicBars.tsx.preview
@@ -1,6 +1,5 @@
 <BarChart
   xAxis={[{ scaleType: 'band', data: ['group A', 'group B', 'group C'] }]}
   series={[{ data: [4, 3, 5] }, { data: [1, 6, 3] }, { data: [2, 5, 6] }]}
-  width={500}
   height={300}
 />
\ No newline at end of file
diff --git a/docs/data/charts/bars/CustomLabels.js b/docs/data/charts/bars/CustomLabels.js
index 8e22ead904871..d239b781acb07 100644
--- a/docs/data/charts/bars/CustomLabels.js
+++ b/docs/data/charts/bars/CustomLabels.js
@@ -15,7 +15,6 @@ export default function CustomLabels() {
         }
         return context.bar.height < 60 ? null : item.value?.toString();
       }}
-      width={600}
       height={350}
     />
   );
diff --git a/docs/data/charts/bars/CustomLabels.tsx b/docs/data/charts/bars/CustomLabels.tsx
index 8e22ead904871..d239b781acb07 100644
--- a/docs/data/charts/bars/CustomLabels.tsx
+++ b/docs/data/charts/bars/CustomLabels.tsx
@@ -15,7 +15,6 @@ export default function CustomLabels() {
         }
         return context.bar.height < 60 ? null : item.value?.toString();
       }}
-      width={600}
       height={350}
     />
   );
diff --git a/docs/data/charts/bars/CustomLabels.tsx.preview b/docs/data/charts/bars/CustomLabels.tsx.preview
index 44fe9443bee57..7f9bb5ddee619 100644
--- a/docs/data/charts/bars/CustomLabels.tsx.preview
+++ b/docs/data/charts/bars/CustomLabels.tsx.preview
@@ -10,6 +10,5 @@
     }
     return context.bar.height < 60 ? null : item.value?.toString();
   }}
-  width={600}
   height={350}
 />
\ No newline at end of file
diff --git a/docs/data/charts/bars/GridDemo.js b/docs/data/charts/bars/GridDemo.js
index 659741b134d2e..2b1529abd5855 100644
--- a/docs/data/charts/bars/GridDemo.js
+++ b/docs/data/charts/bars/GridDemo.js
@@ -8,7 +8,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 400,
 };
 
diff --git a/docs/data/charts/bars/GridDemo.tsx b/docs/data/charts/bars/GridDemo.tsx
index 659741b134d2e..2b1529abd5855 100644
--- a/docs/data/charts/bars/GridDemo.tsx
+++ b/docs/data/charts/bars/GridDemo.tsx
@@ -8,7 +8,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 400,
 };
 
diff --git a/docs/data/charts/bars/HorizontalBars.js b/docs/data/charts/bars/HorizontalBars.js
index 5260d99b35962..7491aa6f776db 100644
--- a/docs/data/charts/bars/HorizontalBars.js
+++ b/docs/data/charts/bars/HorizontalBars.js
@@ -8,7 +8,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 400,
 };
 
diff --git a/docs/data/charts/bars/HorizontalBars.tsx b/docs/data/charts/bars/HorizontalBars.tsx
index 5260d99b35962..7491aa6f776db 100644
--- a/docs/data/charts/bars/HorizontalBars.tsx
+++ b/docs/data/charts/bars/HorizontalBars.tsx
@@ -8,7 +8,6 @@ const chartSetting = {
       label: 'rainfall (mm)',
     },
   ],
-  width: 500,
   height: 400,
 };
 
diff --git a/docs/data/charts/bars/StackBars.js b/docs/data/charts/bars/StackBars.js
index 4d7d533d2da5d..458443fc4dca5 100644
--- a/docs/data/charts/bars/StackBars.js
+++ b/docs/data/charts/bars/StackBars.js
@@ -22,7 +22,6 @@ export default function StackBars() {
 }
 
 const config = {
-  width: 600,
   height: 350,
   margin: { left: 40 },
   hideLegend: true,
diff --git a/docs/data/charts/bars/StackBars.tsx b/docs/data/charts/bars/StackBars.tsx
index 2dd857d690578..89e63fa212b87 100644
--- a/docs/data/charts/bars/StackBars.tsx
+++ b/docs/data/charts/bars/StackBars.tsx
@@ -22,7 +22,6 @@ export default function StackBars() {
 }
 
 const config: Partial<BarChartProps> = {
-  width: 600,
   height: 350,
   margin: { left: 40 },
   hideLegend: true,
diff --git a/docs/data/charts/line-demo/BiaxialLineChart.js b/docs/data/charts/line-demo/BiaxialLineChart.js
index 1c5edbd62d3ed..48fdd2e8ced7e 100644
--- a/docs/data/charts/line-demo/BiaxialLineChart.js
+++ b/docs/data/charts/line-demo/BiaxialLineChart.js
@@ -16,7 +16,6 @@ const xLabels = [
 export default function BiaxialLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx b/docs/data/charts/line-demo/BiaxialLineChart.tsx
index 1c5edbd62d3ed..48fdd2e8ced7e 100644
--- a/docs/data/charts/line-demo/BiaxialLineChart.tsx
+++ b/docs/data/charts/line-demo/BiaxialLineChart.tsx
@@ -16,7 +16,6 @@ const xLabels = [
 export default function BiaxialLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
diff --git a/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview b/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview
index 64ba24a044d1d..4051635cda08c 100644
--- a/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview
+++ b/docs/data/charts/line-demo/BiaxialLineChart.tsx.preview
@@ -1,5 +1,4 @@
 <LineChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv', yAxisId: 'leftAxisId' },
diff --git a/docs/data/charts/line-demo/CustomLineMarks.js b/docs/data/charts/line-demo/CustomLineMarks.js
index 5c36b4448533f..cd96e6fa2293c 100644
--- a/docs/data/charts/line-demo/CustomLineMarks.js
+++ b/docs/data/charts/line-demo/CustomLineMarks.js
@@ -16,7 +16,6 @@ const xLabels = [
 export default function CustomLineMarks() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/line-demo/CustomLineMarks.tsx b/docs/data/charts/line-demo/CustomLineMarks.tsx
index 5c36b4448533f..cd96e6fa2293c 100644
--- a/docs/data/charts/line-demo/CustomLineMarks.tsx
+++ b/docs/data/charts/line-demo/CustomLineMarks.tsx
@@ -16,7 +16,6 @@ const xLabels = [
 export default function CustomLineMarks() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         {
diff --git a/docs/data/charts/line-demo/DashedLineChart.js b/docs/data/charts/line-demo/DashedLineChart.js
index 9544f962c77f3..49036b554cedf 100644
--- a/docs/data/charts/line-demo/DashedLineChart.js
+++ b/docs/data/charts/line-demo/DashedLineChart.js
@@ -20,7 +20,6 @@ const xLabels = [
 export default function DashedLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId' },
diff --git a/docs/data/charts/line-demo/DashedLineChart.tsx b/docs/data/charts/line-demo/DashedLineChart.tsx
index 9544f962c77f3..49036b554cedf 100644
--- a/docs/data/charts/line-demo/DashedLineChart.tsx
+++ b/docs/data/charts/line-demo/DashedLineChart.tsx
@@ -20,7 +20,6 @@ const xLabels = [
 export default function DashedLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv', id: 'pvId' },
diff --git a/docs/data/charts/line-demo/LineWithPrediction.js b/docs/data/charts/line-demo/LineWithPrediction.js
index 1e5858c5ddf6b..37b5863a0a9ef 100644
--- a/docs/data/charts/line-demo/LineWithPrediction.js
+++ b/docs/data/charts/line-demo/LineWithPrediction.js
@@ -62,7 +62,6 @@ export default function LineWithPrediction() {
       ]}
       xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
       height={200}
-      width={400}
       slots={{ line: CustomAnimatedLine }}
       slotProps={{ line: { limit: 5 } }}
       sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
diff --git a/docs/data/charts/line-demo/LineWithPrediction.tsx b/docs/data/charts/line-demo/LineWithPrediction.tsx
index 981c7805dd3eb..f2c8cb2912a32 100644
--- a/docs/data/charts/line-demo/LineWithPrediction.tsx
+++ b/docs/data/charts/line-demo/LineWithPrediction.tsx
@@ -69,7 +69,6 @@ export default function LineWithPrediction() {
       ]}
       xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
       height={200}
-      width={400}
       slots={{ line: CustomAnimatedLine }}
       slotProps={{ line: { limit: 5 } as any }}
       sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
diff --git a/docs/data/charts/line-demo/LineWithPrediction.tsx.preview b/docs/data/charts/line-demo/LineWithPrediction.tsx.preview
index f15f69543aae0..5917414925c36 100644
--- a/docs/data/charts/line-demo/LineWithPrediction.tsx.preview
+++ b/docs/data/charts/line-demo/LineWithPrediction.tsx.preview
@@ -8,7 +8,6 @@
   ]}
   xAxis={[{ data: [0, 1, 2, 3, 4, 5, 6, 7, 8] }]}
   height={200}
-  width={400}
   slots={{ line: CustomAnimatedLine }}
   slotProps={{ line: { limit: 5 } as any }}
   sx={{ '& .line-after path': { strokeDasharray: '10 5' } }}
diff --git a/docs/data/charts/line-demo/SimpleLineChart.js b/docs/data/charts/line-demo/SimpleLineChart.js
index 3e1d80c63c750..9c02b029f7c79 100644
--- a/docs/data/charts/line-demo/SimpleLineChart.js
+++ b/docs/data/charts/line-demo/SimpleLineChart.js
@@ -16,7 +16,6 @@ const xLabels = [
 export default function SimpleLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv' },
diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx b/docs/data/charts/line-demo/SimpleLineChart.tsx
index 3e1d80c63c750..9c02b029f7c79 100644
--- a/docs/data/charts/line-demo/SimpleLineChart.tsx
+++ b/docs/data/charts/line-demo/SimpleLineChart.tsx
@@ -16,7 +16,6 @@ const xLabels = [
 export default function SimpleLineChart() {
   return (
     <LineChart
-      width={500}
       height={300}
       series={[
         { data: pData, label: 'pv' },
diff --git a/docs/data/charts/line-demo/SimpleLineChart.tsx.preview b/docs/data/charts/line-demo/SimpleLineChart.tsx.preview
index 5c74942984f3c..7d1e31573ed6a 100644
--- a/docs/data/charts/line-demo/SimpleLineChart.tsx.preview
+++ b/docs/data/charts/line-demo/SimpleLineChart.tsx.preview
@@ -1,5 +1,4 @@
 <LineChart
-  width={500}
   height={300}
   series={[
     { data: pData, label: 'pv' },
diff --git a/docs/data/charts/lines/AreaBaseline.js b/docs/data/charts/lines/AreaBaseline.js
index cbaa2965c4085..dc52f5cee85fe 100644
--- a/docs/data/charts/lines/AreaBaseline.js
+++ b/docs/data/charts/lines/AreaBaseline.js
@@ -12,7 +12,6 @@ export default function AreaBaseline() {
           baseline: 'min',
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/AreaBaseline.tsx b/docs/data/charts/lines/AreaBaseline.tsx
index cbaa2965c4085..dc52f5cee85fe 100644
--- a/docs/data/charts/lines/AreaBaseline.tsx
+++ b/docs/data/charts/lines/AreaBaseline.tsx
@@ -12,7 +12,6 @@ export default function AreaBaseline() {
           baseline: 'min',
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/AreaBaseline.tsx.preview b/docs/data/charts/lines/AreaBaseline.tsx.preview
index b5f56b85ada1c..a7ac332cb11eb 100644
--- a/docs/data/charts/lines/AreaBaseline.tsx.preview
+++ b/docs/data/charts/lines/AreaBaseline.tsx.preview
@@ -7,6 +7,5 @@
       baseline: 'min',
     },
   ]}
-  width={500}
   height={300}
 />
\ No newline at end of file
diff --git a/docs/data/charts/lines/BasicArea.js b/docs/data/charts/lines/BasicArea.js
index 6359cf3e489ec..840c09e4a1b96 100644
--- a/docs/data/charts/lines/BasicArea.js
+++ b/docs/data/charts/lines/BasicArea.js
@@ -11,7 +11,6 @@ export default function BasicArea() {
           area: true,
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/BasicArea.tsx b/docs/data/charts/lines/BasicArea.tsx
index 6359cf3e489ec..840c09e4a1b96 100644
--- a/docs/data/charts/lines/BasicArea.tsx
+++ b/docs/data/charts/lines/BasicArea.tsx
@@ -11,7 +11,6 @@ export default function BasicArea() {
           area: true,
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/BasicArea.tsx.preview b/docs/data/charts/lines/BasicArea.tsx.preview
index aafe3eb4717de..4fcb3d9fa4db3 100644
--- a/docs/data/charts/lines/BasicArea.tsx.preview
+++ b/docs/data/charts/lines/BasicArea.tsx.preview
@@ -6,6 +6,5 @@
       area: true,
     },
   ]}
-  width={500}
   height={300}
 />
\ No newline at end of file
diff --git a/docs/data/charts/lines/BasicLineChart.js b/docs/data/charts/lines/BasicLineChart.js
index 7044a387cdeb4..33dbe25bce62f 100644
--- a/docs/data/charts/lines/BasicLineChart.js
+++ b/docs/data/charts/lines/BasicLineChart.js
@@ -10,7 +10,6 @@ export default function BasicLineChart() {
           data: [2, 5.5, 2, 8.5, 1.5, 5],
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/BasicLineChart.tsx b/docs/data/charts/lines/BasicLineChart.tsx
index 7044a387cdeb4..33dbe25bce62f 100644
--- a/docs/data/charts/lines/BasicLineChart.tsx
+++ b/docs/data/charts/lines/BasicLineChart.tsx
@@ -10,7 +10,6 @@ export default function BasicLineChart() {
           data: [2, 5.5, 2, 8.5, 1.5, 5],
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/BasicLineChart.tsx.preview b/docs/data/charts/lines/BasicLineChart.tsx.preview
index f134e78962681..9812820a06691 100644
--- a/docs/data/charts/lines/BasicLineChart.tsx.preview
+++ b/docs/data/charts/lines/BasicLineChart.tsx.preview
@@ -5,6 +5,5 @@
       data: [2, 5.5, 2, 8.5, 1.5, 5],
     },
   ]}
-  width={500}
   height={300}
 />
\ No newline at end of file
diff --git a/docs/data/charts/lines/CSSCustomization.js b/docs/data/charts/lines/CSSCustomization.js
index 678bd21dfd330..0bb23d1934d2f 100644
--- a/docs/data/charts/lines/CSSCustomization.js
+++ b/docs/data/charts/lines/CSSCustomization.js
@@ -21,6 +21,8 @@ export default function CSSCustomization() {
           id: 'Years',
           dataKey: 'date',
           scaleType: 'time',
+          min: new Date(1990, 0, 1),
+          max: new Date(2018, 0, 1),
           valueFormatter: (date) => date.getFullYear().toString(),
         },
       ]}
@@ -52,7 +54,6 @@ export default function CSSCustomization() {
           showMark: false,
         },
       ]}
-      width={600}
       height={300}
     >
       <defs>
diff --git a/docs/data/charts/lines/CSSCustomization.tsx b/docs/data/charts/lines/CSSCustomization.tsx
index 678bd21dfd330..0bb23d1934d2f 100644
--- a/docs/data/charts/lines/CSSCustomization.tsx
+++ b/docs/data/charts/lines/CSSCustomization.tsx
@@ -21,6 +21,8 @@ export default function CSSCustomization() {
           id: 'Years',
           dataKey: 'date',
           scaleType: 'time',
+          min: new Date(1990, 0, 1),
+          max: new Date(2018, 0, 1),
           valueFormatter: (date) => date.getFullYear().toString(),
         },
       ]}
@@ -52,7 +54,6 @@ export default function CSSCustomization() {
           showMark: false,
         },
       ]}
-      width={600}
       height={300}
     >
       <defs>
diff --git a/docs/data/charts/lines/ExpandingStep.js b/docs/data/charts/lines/ExpandingStep.js
index 1937c4f8ddf7c..9ed5f6f1406e4 100644
--- a/docs/data/charts/lines/ExpandingStep.js
+++ b/docs/data/charts/lines/ExpandingStep.js
@@ -48,7 +48,7 @@ export default function ExpandingStep() {
           select
           label="curve"
           value={curve}
-          sx={{ minWidth: 200, mb: 2 }}
+          sx={{ minWidth: 100, mb: 2 }}
           onChange={(event) => setCurve(event.target.value)}
         >
           {stepCurves.map((curveType) => (
diff --git a/docs/data/charts/lines/ExpandingStep.tsx b/docs/data/charts/lines/ExpandingStep.tsx
index 81352ed1cb883..ced1b7152e734 100644
--- a/docs/data/charts/lines/ExpandingStep.tsx
+++ b/docs/data/charts/lines/ExpandingStep.tsx
@@ -49,7 +49,7 @@ export default function ExpandingStep() {
           select
           label="curve"
           value={curve}
-          sx={{ minWidth: 200, mb: 2 }}
+          sx={{ minWidth: 100, mb: 2 }}
           onChange={(event) => setCurve(event.target.value as StepCurve)}
         >
           {stepCurves.map((curveType) => (
diff --git a/docs/data/charts/lines/LineAnimation.js b/docs/data/charts/lines/LineAnimation.js
index 7bb2d20fda951..21ece3c2c134f 100644
--- a/docs/data/charts/lines/LineAnimation.js
+++ b/docs/data/charts/lines/LineAnimation.js
@@ -45,7 +45,7 @@ export default function LineAnimation() {
           height={400}
         />
       </div>
-      <Stack spacing={1} direction="row">
+      <Stack spacing={1} direction="row" flexWrap="wrap">
         <Button
           variant="outlined"
           onClick={() =>
diff --git a/docs/data/charts/lines/LineAnimation.tsx b/docs/data/charts/lines/LineAnimation.tsx
index 7bb2d20fda951..21ece3c2c134f 100644
--- a/docs/data/charts/lines/LineAnimation.tsx
+++ b/docs/data/charts/lines/LineAnimation.tsx
@@ -45,7 +45,7 @@ export default function LineAnimation() {
           height={400}
         />
       </div>
-      <Stack spacing={1} direction="row">
+      <Stack spacing={1} direction="row" flexWrap="wrap">
         <Button
           variant="outlined"
           onClick={() =>
diff --git a/docs/data/charts/lines/MarkOptimization.js b/docs/data/charts/lines/MarkOptimization.js
index c30b86d85f256..a63d1c10a917c 100644
--- a/docs/data/charts/lines/MarkOptimization.js
+++ b/docs/data/charts/lines/MarkOptimization.js
@@ -11,7 +11,6 @@ export default function MarkOptimization() {
           showMark: ({ index }) => index % 2 === 0,
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/MarkOptimization.tsx b/docs/data/charts/lines/MarkOptimization.tsx
index c30b86d85f256..a63d1c10a917c 100644
--- a/docs/data/charts/lines/MarkOptimization.tsx
+++ b/docs/data/charts/lines/MarkOptimization.tsx
@@ -11,7 +11,6 @@ export default function MarkOptimization() {
           showMark: ({ index }) => index % 2 === 0,
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/lines/MarkOptimization.tsx.preview b/docs/data/charts/lines/MarkOptimization.tsx.preview
index 9a1e732dc19da..8708a7444419e 100644
--- a/docs/data/charts/lines/MarkOptimization.tsx.preview
+++ b/docs/data/charts/lines/MarkOptimization.tsx.preview
@@ -6,6 +6,5 @@
       showMark: ({ index }) => index % 2 === 0,
     },
   ]}
-  width={500}
   height={300}
 />
\ No newline at end of file
diff --git a/docs/data/charts/lines/StackedAreas.js b/docs/data/charts/lines/StackedAreas.js
index 3b4cc93301f4c..2fc42ff3edcf4 100644
--- a/docs/data/charts/lines/StackedAreas.js
+++ b/docs/data/charts/lines/StackedAreas.js
@@ -4,49 +4,52 @@ import { dataset } from './GDPperCapita';
 
 export default function StackedAreas() {
   return (
-    <LineChart
-      dataset={dataset}
-      xAxis={[
-        {
-          id: 'Years',
-          dataKey: 'date',
-          scaleType: 'time',
-          valueFormatter: (date) => date.getFullYear().toString(),
-        },
-      ]}
-      yAxis={[
-        {
-          width: 70,
-        },
-      ]}
-      series={[
-        {
-          id: 'France',
-          label: 'French GDP per capita',
-          dataKey: 'fr',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-        {
-          id: 'Germany',
-          label: 'German GDP per capita',
-          dataKey: 'dl',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-        {
-          id: 'United Kingdom',
-          label: 'UK GDP per capita',
-          dataKey: 'gb',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-      ]}
-      width={600}
-      height={400}
-    />
+    <div>
+      <LineChart
+        dataset={dataset}
+        xAxis={[
+          {
+            id: 'Years',
+            dataKey: 'date',
+            scaleType: 'time',
+            min: new Date(1990, 0, 1),
+            max: new Date(2018, 0, 1),
+            valueFormatter: (date) => date.getFullYear().toString(),
+          },
+        ]}
+        yAxis={[
+          {
+            width: 70,
+          },
+        ]}
+        series={[
+          {
+            id: 'France',
+            label: 'French GDP per capita',
+            dataKey: 'fr',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+          {
+            id: 'Germany',
+            label: 'German GDP per capita',
+            dataKey: 'dl',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+          {
+            id: 'United Kingdom',
+            label: 'UK GDP per capita',
+            dataKey: 'gb',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+        ]}
+        height={400}
+      />
+    </div>
   );
 }
diff --git a/docs/data/charts/lines/StackedAreas.tsx b/docs/data/charts/lines/StackedAreas.tsx
index 3b4cc93301f4c..2fc42ff3edcf4 100644
--- a/docs/data/charts/lines/StackedAreas.tsx
+++ b/docs/data/charts/lines/StackedAreas.tsx
@@ -4,49 +4,52 @@ import { dataset } from './GDPperCapita';
 
 export default function StackedAreas() {
   return (
-    <LineChart
-      dataset={dataset}
-      xAxis={[
-        {
-          id: 'Years',
-          dataKey: 'date',
-          scaleType: 'time',
-          valueFormatter: (date) => date.getFullYear().toString(),
-        },
-      ]}
-      yAxis={[
-        {
-          width: 70,
-        },
-      ]}
-      series={[
-        {
-          id: 'France',
-          label: 'French GDP per capita',
-          dataKey: 'fr',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-        {
-          id: 'Germany',
-          label: 'German GDP per capita',
-          dataKey: 'dl',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-        {
-          id: 'United Kingdom',
-          label: 'UK GDP per capita',
-          dataKey: 'gb',
-          stack: 'total',
-          area: true,
-          showMark: false,
-        },
-      ]}
-      width={600}
-      height={400}
-    />
+    <div>
+      <LineChart
+        dataset={dataset}
+        xAxis={[
+          {
+            id: 'Years',
+            dataKey: 'date',
+            scaleType: 'time',
+            min: new Date(1990, 0, 1),
+            max: new Date(2018, 0, 1),
+            valueFormatter: (date) => date.getFullYear().toString(),
+          },
+        ]}
+        yAxis={[
+          {
+            width: 70,
+          },
+        ]}
+        series={[
+          {
+            id: 'France',
+            label: 'French GDP per capita',
+            dataKey: 'fr',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+          {
+            id: 'Germany',
+            label: 'German GDP per capita',
+            dataKey: 'dl',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+          {
+            id: 'United Kingdom',
+            label: 'UK GDP per capita',
+            dataKey: 'gb',
+            stack: 'total',
+            area: true,
+            showMark: false,
+          },
+        ]}
+        height={400}
+      />
+    </div>
   );
 }
diff --git a/docs/data/charts/lines/TestLines.js b/docs/data/charts/lines/TestLines.js
deleted file mode 100644
index ea22fc4e3a57e..0000000000000
--- a/docs/data/charts/lines/TestLines.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
-
-export default function TestLines() {
-  return (
-    <LineChart
-      xAxis={[
-        {
-          id: 'lineCategories',
-          data: [2, 5, 20, 23, 25],
-        },
-      ]}
-      yAxis={[
-        {
-          id: 'lineCategoriesY',
-          scaleType: 'linear',
-        },
-      ]}
-      series={[
-        {
-          stack: '1',
-          area: true,
-          data: [2, 5, 3, 4, 1],
-        },
-        {
-          data: [10, 3, 1, 2, 10],
-        },
-        {
-          stack: '1',
-          area: true,
-          data: [10, 3, 1, 2, 10],
-        },
-      ]}
-      width={600}
-      height={500}
-    />
-  );
-}
diff --git a/docs/data/charts/lines/TestLines.tsx b/docs/data/charts/lines/TestLines.tsx
deleted file mode 100644
index ea22fc4e3a57e..0000000000000
--- a/docs/data/charts/lines/TestLines.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
-
-export default function TestLines() {
-  return (
-    <LineChart
-      xAxis={[
-        {
-          id: 'lineCategories',
-          data: [2, 5, 20, 23, 25],
-        },
-      ]}
-      yAxis={[
-        {
-          id: 'lineCategoriesY',
-          scaleType: 'linear',
-        },
-      ]}
-      series={[
-        {
-          stack: '1',
-          area: true,
-          data: [2, 5, 3, 4, 1],
-        },
-        {
-          data: [10, 3, 1, 2, 10],
-        },
-        {
-          stack: '1',
-          area: true,
-          data: [10, 3, 1, 2, 10],
-        },
-      ]}
-      width={600}
-      height={500}
-    />
-  );
-}
diff --git a/docs/data/charts/lines/TestLinesTime.js b/docs/data/charts/lines/TestLinesTime.js
deleted file mode 100644
index 492a101f5d546..0000000000000
--- a/docs/data/charts/lines/TestLinesTime.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
-
-export default function TestLinesTime() {
-  return (
-    <LineChart
-      xAxis={[
-        {
-          id: 'lineCategories',
-          data: [
-            new Date(2012, 2, 1),
-            new Date(2012, 2, 2),
-            new Date(2012, 2, 5),
-            new Date(2012, 2, 10),
-            new Date(2012, 2, 15),
-          ],
-          scaleType: 'time',
-        },
-      ]}
-      yAxis={[
-        {
-          id: 'lineCategoriesY',
-          scaleType: 'linear',
-        },
-      ]}
-      series={[
-        {
-          id: 's1',
-          stack: '1',
-          area: true,
-          data: [2, 5, 3, 4, 1],
-        },
-        {
-          id: 's2',
-          data: [10, 3, 1, 2, 10],
-        },
-        {
-          id: 's3',
-          stack: '1',
-          area: true,
-          data: [10, 3, 1, 2, 10],
-        },
-      ]}
-      width={600}
-      height={500}
-    />
-  );
-}
diff --git a/docs/data/charts/lines/TestLinesTime.tsx b/docs/data/charts/lines/TestLinesTime.tsx
deleted file mode 100644
index 492a101f5d546..0000000000000
--- a/docs/data/charts/lines/TestLinesTime.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import * as React from 'react';
-import { LineChart } from '@mui/x-charts/LineChart';
-
-export default function TestLinesTime() {
-  return (
-    <LineChart
-      xAxis={[
-        {
-          id: 'lineCategories',
-          data: [
-            new Date(2012, 2, 1),
-            new Date(2012, 2, 2),
-            new Date(2012, 2, 5),
-            new Date(2012, 2, 10),
-            new Date(2012, 2, 15),
-          ],
-          scaleType: 'time',
-        },
-      ]}
-      yAxis={[
-        {
-          id: 'lineCategoriesY',
-          scaleType: 'linear',
-        },
-      ]}
-      series={[
-        {
-          id: 's1',
-          stack: '1',
-          area: true,
-          data: [2, 5, 3, 4, 1],
-        },
-        {
-          id: 's2',
-          data: [10, 3, 1, 2, 10],
-        },
-        {
-          id: 's3',
-          stack: '1',
-          area: true,
-          data: [10, 3, 1, 2, 10],
-        },
-      ]}
-      width={600}
-      height={500}
-    />
-  );
-}
diff --git a/docs/data/charts/quickstart/SimpleCharts.js b/docs/data/charts/quickstart/SimpleCharts.js
index 885055748894d..095ac95e03d3f 100644
--- a/docs/data/charts/quickstart/SimpleCharts.js
+++ b/docs/data/charts/quickstart/SimpleCharts.js
@@ -16,7 +16,6 @@ export default function SimpleCharts() {
           data: [2, 5, 3],
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/quickstart/SimpleCharts.tsx b/docs/data/charts/quickstart/SimpleCharts.tsx
index 885055748894d..095ac95e03d3f 100644
--- a/docs/data/charts/quickstart/SimpleCharts.tsx
+++ b/docs/data/charts/quickstart/SimpleCharts.tsx
@@ -16,7 +16,6 @@ export default function SimpleCharts() {
           data: [2, 5, 3],
         },
       ]}
-      width={500}
       height={300}
     />
   );
diff --git a/docs/data/charts/quickstart/SimpleCharts.tsx.preview b/docs/data/charts/quickstart/SimpleCharts.tsx.preview
index bc548a6822dde..4295ee3ac02e0 100644
--- a/docs/data/charts/quickstart/SimpleCharts.tsx.preview
+++ b/docs/data/charts/quickstart/SimpleCharts.tsx.preview
@@ -11,6 +11,5 @@
       data: [2, 5, 3],
     },
   ]}
-  width={500}
   height={300}
 />
\ No newline at end of file