rezise loop issue

Front/src/coinApi.ts

@@ -34,8 +34,14 @@ export interface IGetCoinsChartRequest {
   per_page: number;
 }
 
+export interface IChartDataItem {
+  [index: number]: number,
+}
+
 export interface IGetCoinsChartResponse {
-  [key: string]: any ;
+  market_caps: Array<IChartDataItem>;
+  prices: Array<IChartDataItem>;
+  total_volumes: Array<IChartDataItem>;
 }
 
 export const coinListApi = createApi({

Front/src/coinDetails/coinChart.tsx

@@ -24,31 +24,11 @@ ChartJS.register(
   Legend
 );
 
-export const options = {
-  responsive: true,
-  plugins: {
-    legend: {
-      position: 'top' as const,
-    },
-    title: {
-      display: true,
-      text: 'Chart.js Line Chart',
-    },
-  },
-};
-
 
 export interface ICoinChartProps {
   coin: string;
 }
 
-// export interface IChartData {
-//   [key: string]: any;
-// }
-
-
-
-// ---------------------------------------- IN
 export interface IChartDataItem {
   [index: number]: number,
 }
@@ -59,7 +39,6 @@ export interface IChartData {
   total_volumes: Array<IChartDataItem>;
 }
 
-// ---------------------------------------- OUT
 export interface IChartDataFormattedItem {
   x: Date;
   y: number;
@@ -70,6 +49,12 @@ export interface IChartDataFormatted extends Array<IChartDataFormattedItem>{};
 
 
 
+export const options = {
+  responsive: false,
+  maintainAspectRatio: false,
+  plugins: {},
+};
+
 const CoinChart = (props: ICoinChartProps): JSX.Element => {
   console.log("props: ", props);
 
@@ -94,10 +79,10 @@ const CoinChart = (props: ICoinChartProps): JSX.Element => {
   }
 
   return (
-    <div>
+    <div style={{margin: 5, padding: 5}}>
       {
         data &&
-        <div>
+        <div className="chart-container" style={{margin: 5, padding: 5}}>
           <Line
             data={{
               labels: formatChartLabels(data),

Front/src/coinDetails/coinDetails.tsx

@@ -17,19 +17,21 @@ const CoinDetails = (): JSX.Element => {
       {
         dataInfo && isSuccessInfo && <>
           <div className="info">
-            <div>ID: {dataInfo.id}</div>
+            <h1>{dataInfo.id}</h1>
             <div className="links">
               <div>Homepage: {dataInfo.links.homepage}</div>
             </div>
-            <div>Description{dataInfo.description.en}</div>
           </div>
 
-          <div className="chart">
+          <div className="chart-container">
             <CoinChart coin={dataInfo.id} />
           </div>
+
+          <div>
+            Description{dataInfo.description.en}
+          </div>
         </>
       }
-
     </div>
   )
 }

Front/src/index.css

@@ -46,3 +46,10 @@ header a {
   color: #777777;
   margin-bottom: 20px;
 }
+
+.chart-container {
+  /* width: 100%; */
+  height: inherit;
+  /* height: auto; */
+  /* height: 30vh; */
+}