diff --git a/components/metrics/BarChart.js b/components/metrics/BarChart.js
index 4354f18c..ad1f611f 100644
--- a/components/metrics/BarChart.js
+++ b/components/metrics/BarChart.js
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
-import { dateFormat } from 'lib/lang';
+import { dateFormat, timeFormat } from 'lib/lang';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
@@ -46,7 +46,7 @@ export default function BarChart({
       case 'minute':
         return index % 2 === 0 ? dateFormat(d, 'h:mm', locale) : '';
       case 'hour':
-        return dateFormat(d, 'ha', locale);
+        return timeFormat(d, locale);
       case 'day':
         if (records > 31) {
           if (w <= 500) {
@@ -131,6 +131,7 @@ export default function BarChart({
               minRotation: 0,
               maxRotation: 0,
               fontColor: colors.text,
+              autoSkipPadding: 1,
             },
             gridLines: {
               display: false,
diff --git a/lib/lang.js b/lib/lang.js
index c2c93891..3bb6ffe8 100644
--- a/lib/lang.js
+++ b/lib/lang.js
@@ -118,6 +118,11 @@ export const dateLocales = {
   'it-IT': it,
 };
 
+const timeFormats = {
+  // https://date-fns.org/v2.17.0/docs/format
+  'en-US': 'ha',
+};
+
 export const menuOptions = [
   { label: '中文', value: 'zh-CN', display: 'cn' },
   { label: '中文(繁體)', value: 'zh-TW', display: 'tw' },
@@ -152,3 +157,7 @@ export const menuOptions = [
 export function dateFormat(date, str, locale) {
   return format(date, str, { locale: dateLocales[locale] || enUS });
 }
+
+export function timeFormat(date, locale = 'en-US') {
+  return format(date, timeFormats[locale] || 'p', { locale: dateLocales[locale] });
+}