chart = {
const svg = d3.create("svg")
.attr("height", height - margin.top - margin.bottom)
.attr("width", width - margin.left - margin.right)
.attr("viewBox", [0, 0, width, height]);
svg
.append("g")
.attr("fill", c1)
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", (d, i) => x(i))
.attr("y", (d) => y(d.Rainfall))
.transition()
.ease(d3.easeBounceOut)
.duration(speed)
.attr("height", d => y(0) - y(d.Rainfall))
.attr("width", x.bandwidth())
.attr("class", "rectangle");
svg
.append("text")
.attr("text-anchor", "middle")
.attr("y", 0 - (margin.left /4))
.attr("x", 0 - (height / 2))
.attr("dy", ".75em")
.attr("transform", "rotate(-90)")
.attr("font-size", "16px")
.text("Rainfall (mm)");
svg
.append("text")
.attr("x", (width / 2))
.attr("y", margin.top)
.attr("text-anchor", "middle")
.style("font-size", "24px")
.style("text-decoration", "underline")
.text("Donegal Rainfall 2020 - 2022");
svg.append("g")
.call(xAxis)
.selectAll("text")
.attr("transform", "rotate(90)")
.attr("text-anchor", "start")
.attr("x", "10")
.attr("y", "-5");
svg.append("g").call(yAxis);
return svg.node();
}