diff --git a/src/pages/course/course-scatter/course-scatter.ts b/src/pages/course/course-scatter/course-scatter.ts
index 5bce0e6..5978a6b 100644
--- a/src/pages/course/course-scatter/course-scatter.ts
+++ b/src/pages/course/course-scatter/course-scatter.ts
@@ -99,7 +99,8 @@ export default class CourseScatter extends Vue
                     type: 'cross'
                 },
                 formatter: (ps: any[]) => ps[0].data[0] + '<br>' + ps.map(p =>
-                    `${CourseScatter.DOT.replace('{color}', p.color)}${p.data[2]}: ${p.data[1]}<br>`).join('')
+                    `${CourseScatter.DOT.replace('{color}', p.color)}
+                    ${FormatUtils.limit(p.data[2], 22)}: ${p.data[1]}<br>`).join('')
             },
 
             // Legend
diff --git a/src/pages/overall/overall-bar/overall-bar.ts b/src/pages/overall/overall-bar/overall-bar.ts
index 86e0bdc..edbb588 100644
--- a/src/pages/overall/overall-bar/overall-bar.ts
+++ b/src/pages/overall/overall-bar/overall-bar.ts
@@ -2,6 +2,7 @@ import {Component, Prop, Vue} from 'vue-property-decorator';
 import {Course} from '@/components/app/app';
 import {GPAUtils} from '@/utils/gpa-utils';
 import Constants from '@/constants';
+import {FormatUtils} from '@/utils/format-utils';
 
 @Component({
 })
@@ -40,7 +41,7 @@ export default class OverallBar extends Vue
                     rotate: 90,
 
                     // Truncate text length
-                    formatter: (value: string) => value.length <= 16 ? value : value.substr(0, 14) + '...'
+                    formatter: (value: string) => FormatUtils.limit(value, 16)
                 },
             },