diff --git a/src/pages/overall/graph-average/graph-average.scss b/src/pages/overall/graph-average/graph-average.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/overall/graph-average/graph-average.ts b/src/pages/overall/graph-average/graph-average.ts
new file mode 100644
index 0000000..ec1d663
--- /dev/null
+++ b/src/pages/overall/graph-average/graph-average.ts
@@ -0,0 +1,25 @@
+import {Component, Prop, Vue} from 'vue-property-decorator';
+import {Course} from '@/components/app/app';
+
+@Component({
+})
+export default class GraphOverall extends Vue
+{
+    // @ts-ignore
+    @Prop({required: true}) courses: Course[];
+
+    private settings =
+    {
+    };
+
+    /**
+     * Convert assignments list to a graph dataset.
+     */
+    get convertChart()
+    {
+        let courses = this.courses;
+
+        return {
+        }
+    }
+}
diff --git a/src/pages/overall/graph-average/graph-average.vue b/src/pages/overall/graph-average/graph-average.vue
new file mode 100644
index 0000000..1e287b3
--- /dev/null
+++ b/src/pages/overall/graph-average/graph-average.vue
@@ -0,0 +1,8 @@
+<template>
+    <div id="graph-average">
+        <ve-histogram :data="chart" :extend="settings"></ve-histogram>
+    </div>
+</template>
+
+<script src="./graph-average.ts" lang="ts"></script>
+<style src="./graph-average.scss" lang="scss"></style>