diff --git a/erpnext/accounts/report/balance_sheet/balance_sheet.js b/erpnext/accounts/report/balance_sheet/balance_sheet.js
index f1f8e5f6e7c2..2237f7a15b9d 100644
--- a/erpnext/accounts/report/balance_sheet/balance_sheet.js
+++ b/erpnext/accounts/report/balance_sheet/balance_sheet.js
@@ -6,6 +6,20 @@ frappe.require("assets/erpnext/js/financial_statements.js", function() {
 
 	erpnext.utils.add_dimensions('Balance Sheet', 10);
 
+	frappe.query_reports["Balance Sheet"]["filters"].push(
+		{
+			"fieldname": "selectedView",
+			"label": __("Select View"),
+			"fieldtype": "Select",
+			"options": [
+				{ "value": "Report", "label": __("Report View") },
+				{ "value": "Growth", "label": __("Growth View") }
+			],
+			"default": "Report",
+			"reqd": 1
+		},
+	);
+	
 	frappe.query_reports["Balance Sheet"]["filters"].push({
 		"fieldname": "accumulated_values",
 		"label": __("Accumulated Values"),
diff --git a/erpnext/accounts/report/profit_and_loss_statement/profit_and_loss_statement.js b/erpnext/accounts/report/profit_and_loss_statement/profit_and_loss_statement.js
index e794f270c2bc..908f503493b4 100644
--- a/erpnext/accounts/report/profit_and_loss_statement/profit_and_loss_statement.js
+++ b/erpnext/accounts/report/profit_and_loss_statement/profit_and_loss_statement.js
@@ -8,6 +8,21 @@ frappe.require("assets/erpnext/js/financial_statements.js", function() {
 
 	erpnext.utils.add_dimensions('Profit and Loss Statement', 10);
 
+	frappe.query_reports["Profit and Loss Statement"]["filters"].push(
+		{
+			"fieldname": "selectedView",
+			"label": __("Select View"),
+			"fieldtype": "Select",
+			"options": [
+				{ "value": "Report", "label": __("Report View") },
+				{ "value": "Growth", "label": __("Growth View") },
+				{ "value": "Margin", "label": __("Margin View") },
+			],
+			"default": "Report",
+			"reqd": 1
+		},
+	);
+	
 	frappe.query_reports["Profit and Loss Statement"]["filters"].push(
 		{
 			"fieldname": "include_default_book_entries",
diff --git a/erpnext/public/js/financial_statements.js b/erpnext/public/js/financial_statements.js
index 5e1974299ee1..1cedc86a4690 100644
--- a/erpnext/public/js/financial_statements.js
+++ b/erpnext/public/js/financial_statements.js
@@ -2,7 +2,54 @@ frappe.provide("erpnext.financial_statements");
 
 erpnext.financial_statements = {
 	"filters": get_filters(),
+	"baseData": null,
 	"formatter": function(value, row, column, data, default_formatter, filter) {
+		if(frappe.query_report.get_filter_value("selectedView") == "Growth" && data && column.colIndex >= 3){
+			const lastAnnualValue = row[column.colIndex - 1].content;
+			let currentAnnualvalue = data[column.fieldname];
+			if(currentAnnualvalue == undefined) return 'NA';
+			let diff = (currentAnnualvalue - lastAnnualValue);
+			let annualGrowth = 0;
+			console.log(lastAnnualValue);
+			if(lastAnnualValue == 0 && currentAnnualvalue > 0){
+				console.log("inside condition")
+				annualGrowth = 1;
+			}
+			else if(lastAnnualValue > 0){
+				annualGrowth  = (currentAnnualvalue - lastAnnualValue) / lastAnnualValue;
+			}
+			console.log(annualGrowth);
+			
+			growthPercent = (Math.round(annualGrowth*10000)/100);
+
+			value = $(`<span>${((growthPercent >=0)? '+':'' )+growthPercent+'%'}</span>`);
+			if(growthPercent < 0)
+				value = $(value).addClass("text-danger");
+			else
+				value = $(value).addClass("text-success");
+			value = $(value).wrap("<p></p>").parent().html();
+			return value;
+		}
+		else if(frappe.query_report.get_filter_value("selectedView") == "Margin" && data){
+			if(column.fieldname=="account" && data.account_name == "Income"){
+				this.baseData = row;
+				console.log(this.baseData);
+			}
+			if(column.colIndex >= 2){
+				let currentAnnualvalue = data[column.fieldname];
+				let baseValue = this.baseData[column.colIndex].content;
+				if(currentAnnualvalue == undefined) return 'NA';
+				let marginPercent = Math.round((currentAnnualvalue/baseValue)*10000)/100;
+				value = $(`<span>${marginPercent+'%'}</span>`);
+				if(marginPercent < 0)
+					value = $(value).addClass("text-danger");
+				else
+					value = $(value).addClass("text-success");
+				value = $(value).wrap("<p></p>").parent().html();
+				return value;
+			}
+			
+		}
 		if (data && column.fieldname=="account") {
 			value = data.account_name || value;