diff --git a/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx b/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx
index 0b679009..349705e2 100644
--- a/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx
+++ b/src/pages/ContentScripts/features/repo-fork-tooltip/ForkChart.tsx
@@ -28,11 +28,14 @@ interface ForkChartProps {
 
 const ForkChart = (props: ForkChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
-
   const option: echarts.EChartsOption = {
     tooltip: {
       trigger: 'axis',
@@ -52,10 +55,11 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
       splitLine: {
         show: false,
       },
+
+      minInterval: minInterval,
       axisLabel: {
         color: TH.FG_COLOR,
         formatter: {
@@ -137,6 +141,23 @@ const ForkChart = (props: ForkChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx b/src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx
index 4f5ddc0d..ccee7f95 100644
--- a/src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx
+++ b/src/pages/ContentScripts/features/repo-header-labels/ActivityChart.tsx
@@ -28,7 +28,11 @@ interface ActivityChartProps {
 
 const ActivityChart = (props: ActivityChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -52,7 +56,7 @@ const ActivityChart = (props: ActivityChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -136,6 +140,23 @@ const ActivityChart = (props: ActivityChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx b/src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx
index d1e4c0a9..b5cbe94e 100644
--- a/src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx
+++ b/src/pages/ContentScripts/features/repo-header-labels/ContributorChart.tsx
@@ -28,9 +28,12 @@ interface ContributorChartProps {
 
 const ContributorChart = (props: ContributorChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
-
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
 
   const option: echarts.EChartsOption = {
@@ -52,7 +55,7 @@ const ContributorChart = (props: ContributorChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -136,6 +139,23 @@ const ContributorChart = (props: ContributorChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx b/src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx
index 37a04197..9d93146e 100644
--- a/src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx
+++ b/src/pages/ContentScripts/features/repo-header-labels/OpenRankChart.tsx
@@ -28,7 +28,11 @@ interface OpenRankChartProps {
 
 const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -52,7 +56,7 @@ const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -136,6 +140,23 @@ const OpenRankChart = (props: OpenRankChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-header-labels/ParticipantChart.tsx b/src/pages/ContentScripts/features/repo-header-labels/ParticipantChart.tsx
index 2479b3ea..7fba0d71 100644
--- a/src/pages/ContentScripts/features/repo-header-labels/ParticipantChart.tsx
+++ b/src/pages/ContentScripts/features/repo-header-labels/ParticipantChart.tsx
@@ -28,7 +28,11 @@ interface ParticipantChartProps {
 
 const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -52,7 +56,7 @@ const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -136,6 +140,23 @@ const ParticipantChart = (props: ParticipantChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-issue-tooltip/IssueChart.tsx b/src/pages/ContentScripts/features/repo-issue-tooltip/IssueChart.tsx
index 0a4ffac8..316f2347 100644
--- a/src/pages/ContentScripts/features/repo-issue-tooltip/IssueChart.tsx
+++ b/src/pages/ContentScripts/features/repo-issue-tooltip/IssueChart.tsx
@@ -27,7 +27,14 @@ interface IssueChartProps {
 
 const IssueChart = (props: IssueChartProps): JSX.Element => {
   const { theme, width, height, data, onClick } = props;
-
+  const issueCommentsData = data['issueComments'];
+  const startTime = Number(issueCommentsData[0][0].split('-')[0]);
+  const endTime = Number(
+    issueCommentsData[issueCommentsData.length - 1][0].split('-')[0]
+  );
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -63,7 +70,7 @@ const IssueChart = (props: IssueChartProps): JSX.Element => {
     xAxis: {
       type: 'time',
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 30 * 3600 * 24 * 1000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -157,6 +164,23 @@ const IssueChart = (props: IssueChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
       if (onClick) {
         instance.on('click', (params) => {
diff --git a/src/pages/ContentScripts/features/repo-pr-tooltip/MergedLinesChart.tsx b/src/pages/ContentScripts/features/repo-pr-tooltip/MergedLinesChart.tsx
index 93b9807d..de018b93 100644
--- a/src/pages/ContentScripts/features/repo-pr-tooltip/MergedLinesChart.tsx
+++ b/src/pages/ContentScripts/features/repo-pr-tooltip/MergedLinesChart.tsx
@@ -26,7 +26,14 @@ interface MergedLinesChartProps {
 
 const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const mergedCodeAdditionData = data['mergedCodeAddition'];
+  const startTime = Number(mergedCodeAdditionData[0][0].split('-')[0]);
+  const endTime = Number(
+    mergedCodeAdditionData[mergedCodeAdditionData.length - 1][0].split('-')[0]
+  );
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -60,8 +67,9 @@ const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
     },
     xAxis: {
       type: 'time',
+
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -150,6 +158,23 @@ const MergedLinesChart = (props: MergedLinesChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);
diff --git a/src/pages/ContentScripts/features/repo-pr-tooltip/PRChart.tsx b/src/pages/ContentScripts/features/repo-pr-tooltip/PRChart.tsx
index 3c4aaa51..1f8b8f41 100644
--- a/src/pages/ContentScripts/features/repo-pr-tooltip/PRChart.tsx
+++ b/src/pages/ContentScripts/features/repo-pr-tooltip/PRChart.tsx
@@ -27,7 +27,14 @@ interface PRChartProps {
 
 const PRChart = (props: PRChartProps): JSX.Element => {
   const { theme, width, height, data, onClick } = props;
-
+  const PROpenedData = data['PROpened'];
+  const startTime = Number(PROpenedData[0][0].split('-')[0]);
+  const endTime = Number(
+    PROpenedData[PROpenedData.length - 1][0].split('-')[0]
+  );
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -62,8 +69,9 @@ const PRChart = (props: PRChartProps): JSX.Element => {
     },
     xAxis: {
       type: 'time',
+
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -157,6 +165,23 @@ const PRChart = (props: PRChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
       if (onClick) {
         instance.on('click', (params) => {
diff --git a/src/pages/ContentScripts/features/repo-star-tooltip/StarChart.tsx b/src/pages/ContentScripts/features/repo-star-tooltip/StarChart.tsx
index 1df10ea5..b7e4f504 100644
--- a/src/pages/ContentScripts/features/repo-star-tooltip/StarChart.tsx
+++ b/src/pages/ContentScripts/features/repo-star-tooltip/StarChart.tsx
@@ -27,7 +27,11 @@ interface StarChartProps {
 
 const StarChart = (props: StarChartProps): JSX.Element => {
   const { theme, width, height, data } = props;
-
+  const startTime = Number(data[0][0].split('-')[0]);
+  const endTime = Number(data[data.length - 1][0].split('-')[0]);
+  const timeLength = endTime - startTime;
+  const minInterval =
+    timeLength > 2 ? 365 * 24 * 3600 * 1000 : 30 * 3600 * 24 * 1000;
   const divEL = useRef(null);
 
   const TH = theme == 'light' ? LIGHT_THEME : DARK_THEME;
@@ -50,8 +54,9 @@ const StarChart = (props: StarChartProps): JSX.Element => {
     },
     xAxis: {
       type: 'time',
+
       // 30 * 3600 * 24 * 1000  milliseconds
-      minInterval: 2592000000,
+      minInterval: minInterval,
       splitLine: {
         show: false,
       },
@@ -136,6 +141,23 @@ const StarChart = (props: StarChartProps): JSX.Element => {
     let chartDOM = divEL.current;
     const instance = echarts.getInstanceByDom(chartDOM as any);
     if (instance) {
+      if (timeLength > 2) {
+        instance.on('dataZoom', (params: any) => {
+          let option = instance.getOption() as {
+            xAxis: { minInterval?: any }[];
+          };
+          const startValue = params.batch[0].start;
+          const endValue = params.batch[0].end;
+          let minInterval: number;
+          if (startValue == 0 && endValue == 100) {
+            minInterval = 365 * 24 * 3600 * 1000;
+          } else {
+            minInterval = 30 * 24 * 3600 * 1000;
+          }
+          option.xAxis[0].minInterval = minInterval;
+          instance.setOption(option);
+        });
+      }
       instance.setOption(option);
     }
   }, []);