diff --git a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
index c83a469c50314f97b42881bfb83fcc4d75ce107c..4a032d17f6e24a2e9dfb24f05004f42252fdaed6 100644
--- a/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
+++ b/app/src/components/shared/sharedFilter/FilterHistoryDiagrams.ts
@@ -5,6 +5,7 @@ import {SelectedFilterHistoryDiagram, DiagramData} from "@/types";
 import {GenerateDashboardDiagramService} from "@/helper/generateDashboardDiagram.service";
 import FilterHistoryDiagramCard from "@/components/shared/sharedFilter/FilterHistoryDiagramCard.vue";
 import {getCreatedInspection, getVisitedTransect, getCountSpecies, getCountSpeciesBreakdown, getObservationIndex} from "@/diagramsSchema/Diagrams.schema";
+import store from "@/store";
 
 @Component({
     components: {
@@ -89,7 +90,8 @@ export default class FilterHistoryDiagrams extends Vue {
         if (this.diagramData && this.diagramData.length !== 0) {
             const find = this.diagramData.find((d) => d.diagramType === "CountSpeciesBreakdown");
             if (find) {
-                return getCountSpeciesBreakdown(find.data, this.$i18n);
+                const dataWithSpeciesName = this.getDataWithSpeciesFullName(find.data);
+                return getCountSpeciesBreakdown(dataWithSpeciesName, this.$i18n);
             }
         }
         return null;
@@ -109,6 +111,41 @@ export default class FilterHistoryDiagrams extends Vue {
         return null;
     }
 
+    /**
+     * will return only valid-data that has species and add it to diagram-data.
+     * @param data diagram-data from BE.
+     * @private
+     */
+    private getDataWithSpeciesFullName(data: Array<{Species: number; Count: number}>) {
+        const dataWithSpeciesName: Array<{}> = [];
+        for (const item of data) {
+            if (item.Species) {
+                const fullName = this.getSpeciesFullName(item.Species);
+                Object.assign(item, {SpeciesFullName: fullName});
+                dataWithSpeciesName.push(item);
+            }
+        }
+        return dataWithSpeciesName;
+    }
+
+    /**
+     * search for species full name and return it.
+     * @param speciesID e.g(499)
+     * @private
+     */
+    private getSpeciesFullName(speciesID: number) {
+        let fullName = "";
+        const speciesList = store.getters.getSpeciesList;
+        if (speciesList.length) {
+            speciesList.forEach((item) => {
+                if (item.ptnameId === speciesID) {
+                    fullName = item.fullName;
+                }
+            });
+        }
+        return fullName;
+    }
+
     /** handle requested-data */
     private async getFilterHistoryDiagramData() {
         try {
@@ -142,7 +179,6 @@ export default class FilterHistoryDiagrams extends Vue {
         }, 2000);
     }
 
-
     /**
      * request-data from BE.
      * @param type string e.g("CreatedInspections")
diff --git a/app/src/diagramsSchema/Diagrams.schema.ts b/app/src/diagramsSchema/Diagrams.schema.ts
index bd4b5891cc76880469edd1e4273e983d7f90bf9e..306ede13af5c6ca69bb258d108bdc8eb6e7a4dae 100644
--- a/app/src/diagramsSchema/Diagrams.schema.ts
+++ b/app/src/diagramsSchema/Diagrams.schema.ts
@@ -18,6 +18,7 @@ export function getVisitedTransect(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     scale: {domain: {selection: "brush"}},
                     axis: {title: i18n.t("sharedTable.date").toString()},
                 },
@@ -35,6 +36,7 @@ export function getVisitedTransect(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     axis: {title: ""},
                 },
                 y: {
@@ -66,6 +68,7 @@ export function getCreatedInspection(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     scale: {domain: {selection: "brush"}},
                     axis: {title: i18n.t("sharedTable.date").toString()},
                 },
@@ -83,6 +86,7 @@ export function getCreatedInspection(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     axis: {title: ""},
                 },
                 y: {
@@ -109,6 +113,7 @@ export function getCountSpecies(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     scale: {domain: {selection: "brush"}},
                     axis: {title: i18n.t("sharedTable.date").toString()},
                 },
@@ -130,6 +135,7 @@ export function getCountSpecies(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     axis: {title: ""},
                 },
                 y: {
@@ -145,25 +151,25 @@ export function getCountSpecies(data: Array<{}>, i18n: VueI18n) {
 
 export function getCountSpeciesBreakdown(data: Array<{}>, i18n: VueI18n) {
     return {
-        width: "container",
-        data: {values: data,
+        data: {
+            values: data,
         },
         mark: "bar",
         encoding: {
-            x: {
-                field: "Start",
+            column: {
+                field: "End",
                 type: "temporal",
                 timeUnit: "utcmonthdate",
-                axis: {title: i18n.t("sharedTable.date").toString()},
+                header: {title: i18n.t("sharedTable.date").toString(), labelOrient: "bottom"},
             },
             y: {
                 aggregate: "sum",
-                field: "Count",
                 type: "quantitative",
-                axis: {grid: false, title: i18n.t("sharedTable.speciesSeparated").toString()},
+                field: "Count",
+                axis: {title: i18n.t("sharedTable.speciesSeparated").toString()},
             },
-            column: {field: "Species", type: "ordinal", axis: null},
-            color: {field: "Count", type: "nominal", scale: {range: ["#675193", "#118861", "#225193", "#335193", "#670093", "#675593"]}},
+            x: {field: "SpeciesFullName", type: "ordinal", axis: null},
+            tooltip: {field: "SpeciesFullName", type: "ordinal"},
         },
         config: {view: {stroke: "transparent"}, axis: {domainWidth: 1}},
     };
@@ -182,6 +188,7 @@ export function getObservationIndex(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     scale: {domain: {selection: "brush"}},
                     axis: {title: i18n.t("sharedTable.date").toString()},
                 },
@@ -203,6 +210,7 @@ export function getObservationIndex(data: Array<{}>, i18n: VueI18n) {
                 x: {
                     field: "Start",
                     type: "temporal",
+                    timeUnit: "utcmonthdate",
                     axis: {title: ""},
                 },
                 y: {