Update function.js

function.js

@@ -97,7 +97,7 @@ const generateAreaChartYtb2 = async () => {
 	let svg = document.querySelector("#area-chart");
 	svg.innerHTML = "";
 	svg = d3.select("#area-chart").append("svg")
-		.attr("width", width).attr("height", height)
+		.attr("width", width + spacing).attr("height", height)
 		.append("g").attr("transform", "translate(" + spacing / 2 + "," + spacing / 2 + ")");
 
 	svg.append("g")
@@ -111,6 +111,20 @@ const generateAreaChartYtb2 = async () => {
 
 	yScale.domain([0, d3.max(stackedData[stackedData.length - 1], function (d) { return d[1] })]);
 
+	svg.append("text")
+		.attr("text-anchor", "start")
+		.attr("x", 530)
+		.attr("y", 430)
+		.text("Semana")
+
+	svg.append("text")
+		.attr("x", 0)
+		.attr("y", -20)
+		.text(titlex)
+		.attr("text-anchor", "start")
+
+
+
 	svg.append("g")
 		.call(d3.axisLeft(yScale).tickFormat(d3.format("d")));
 
@@ -126,12 +140,6 @@ const generateAreaChartYtb2 = async () => {
 		.enter().append("g")
 		.attr("class", "series");
 
-	series.append("text")
-		.attr("text-anchor", "end")
-		.attr("x", width)
-		.attr("y", height + 40)
-		.text("Semana");
-
 	series.append("path")
 		.style("fill", function (d, i) { return colors[i]; })
 		.attr("d", function (d) { return area(d); });