Bar chart 1

HTML

<script src="http://examples.kevinchisholm.com/libraries/mustache.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>

<div 
	class="barchart" 
	data-role="barchart" 
	data-width=300
	data-height=400 
    data-data="x"
    data-configurations=""
>
</div>

<style>
	.barchart{
		/*width:100%;
		border: 1px solid red;*/
	}

	.barchart svg{
		width:100%;
		/*border: 1px solid green;*/
	}

	.barchartg{

	}

	.barchart .axis path{
		fill: none;
		stroke: #000;
		shape-rendering: crispEdges;
	}

	.barchart .axis line {
		fill: none;
		stroke: none;
		shape-rendering: crispEdges;
	}

	.barchart .x.axis path {
		display: none;
	}

	.barchart .axis text{
		fill: #005a70;
	}

	.barchart.dark .axis text{
		fill: #ffffff;
	}
	.barchart.dark .axis path{  
		stroke: #ffffff;
	}

	.barchart .bar:hover {
		fill: #e9168a;
	}

</style>


<script>

	$(document).ready(function() {
		console.log("test")

		var $this = $(".barchart");

		var w = $this.data("width");
		var h = $this.data("height");
		var data = $this.data("data");

		var data = [{
			"label": "Apples",
			"value": 100
		},
		{
			"label": "Pears",
			"value": 120
		},
		{
			"label": "Bananas",
			"value": 20
		}];

		var configurations = $this.data("configurations");

		function colores_google(n) {
			var colores_g = ["#f7b363", "#448875", "#2b2d39", "#c12f39", "#f8dd2f", "#1b91dc"];
			return colores_g[n % colores_g.length];
		}

		//asess the margin bottom for the chart based on the max char label
		var charLabelCount = [];
		data.map(function(d) { 
			var labelStr =  d.label.toString();
			charLabelCount.push(labelStr.length); 
		})
		var maxChars = charLabelCount.reduce(function(a, b) {
			return Math.max(a, b);
		});

		var bottomMarg = 60;
		if(maxChars > 15){
			bottomMarg = 170;
		}
		//bottom margin calculation

		var margin = {top: 15, right: 20, bottom: bottomMarg, left: 40},
		    width = w - margin.left...