"D3.js (v4) Bar Chart example"
Bootstrap 3.0.0 Snippet by victorgaldamezstarshot

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.js"></script> <!--script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script--> <!-- 196 por fila --> <div class="testdiv"> <svg width="1500" height="270"></svg> </div>
body { font-family: Roboto; } svg {width: 100%; height: auto;} div.enable { overflow-x:auto; width: 300px; height: 300px; padding: 15px; overflow-y: hidden; } /* X-Axis text format */ svg g.x-axis text { fill: #181F27; font-size: 12px; font-weight: bold; line-height: 14px; } /* Y-Axis text format */ svg g.y-axis text { fill: #A0AEB6; font-size: 12px; font-weight: bold; line-height: 14px; } /* X-Axis baseline */ .tick:first-of-type line { stroke: #DCE1E5; } /* X-Axis dashed lines */ .tick:not(:first-of-type) line { stroke: #DCE1E5; stroke-dasharray: 6,2; } /* In tooltip content text format */ .d3-tip span.expense { color: #181F27 !important; font-family: Roboto !important; font-size: 14px !important; font-weight: bold !important; line-height: 16px !important; } /* Tooltip */ .d3-tip { margin-top: 8px; line-height: 1; font-weight: bold !important; font-size: 14px !important; padding: 15px; background: transparent; background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEMAAAA1CAYAAAAasVavAAACQklEQVR4nO2aT2sTQRjGZ/9E6x6UUFMtraAIXjyJn8IvIEgP9uTFj+DZq34Fe9a7X8LaKi2CGGsb0yiJEZWmSZrdcd46kz5b2uJlMoc8P3iTyWZhnve3O7sJbKT+EdUbrXtK6Re60DU1JURx1Davyzevzb82H3Uq2+QLrYuV+drs5WzmfNiEE6TXH9Ra7R8rZjinxI3dHimtpkqEcNiv6VvZE+JIxnRDGUBJBlGUUYIyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAKAOgDIAyAMoAxjKiKNIhg4QC+07HW7X++PPXn1vZhRmvT/6laaKS+P9OyDwv1CjPvWXp7fe19D3O5gZb2437+eLC0zj5fd3b7OY4JEl8Y+FKLasYKWcxPBip5rf2fqGLuq80Ra6/7HxtPhmnsyWHKrXl9cxYXd9cqs5Wny1enTtViIjY/d7pdTvdx3fv3H7lMY4skZGtwslwQhJ1JMOXlHj9/Yeli9VLz08SckzESwnpIYOG99zOcbjtuIzUY1VMyQPqmRHy6HNjd880rx2D4YHearT2Vtc2l2Ufu2/FY57E9u0cKBTiu5zwkpD+YKilRMSbtY2HVsS5E8L6rInjJpYmpdlMmq9vN7ufdpqdt+82HqiyiIkGDWHEzYnL0t1rZe3KxcytY2Fiv3/Ovr/5Q4RgkzKW5nMVSIQLFQq8a7mxVuUrfZBAoTht/iB/Df4C4IS8WTNVMN8AAAAASUVORK5CYII=); /* 67x53 */ width:90px; height:53px; background-repeat: no-repeat; text-align:center; -webkit-background-size: 90px 53px; -moz-background-size: 90px 53px; -o-background-size: 90px 53px; background-size: 90px 53px; }
$(document).ready( function(){ //Datos a mostrar en el gráfico data = [ {category:'Eyecare',expense:60}, {category:'Medical',expense:60}, {category:'Dentist',expense:60}, {category:'Eyecare1',expense:60}, {category:'Medical1',expense:60}, {category:'Dentist1',expense:60}, {category:'Eyecare2',expense:60}, {category:'Medical2',expense:60}, {category:'Dentist2',expense:33} ]; var svg = d3.select("svg"), //Size and place of the graph margin = {top: 50, right: 50, bottom: 50, left: 50}, width = +svg.attr("width") - margin.left - margin.right, height = +svg.attr("height"), g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //Format of the x axis values var formatNumber = d3.format(".2f"); //AXIS - I //xAxis var scaleX = d3.scaleBand() .domain(data.map(function(d) { return d.category; })) .range([0, width]) .padding(0.7); var xAxis = d3.axisBottom(scaleX) .tickPadding(10) .tickSize(0); function customXAxis(g) { g.call(xAxis); g.select(".domain").remove(); } g.append("g") .attr("class", "x-axis") .attr("transform", "translate(-" + margin.left + "," + height + ")") .call(customXAxis); //yAxis var yMax = d3.max(data, function(d) { return d.expense; }); var scaleY = d3.scaleLinear() .domain([0, yMax * ( 1 + 0.40 )]) .range([height, 0]); var yAxis = d3.axisRight(scaleY) .tickSize(width) .tickFormat(function(d) { return "$" + formatNumber(d); }); function customYAxis(g) { g.call(yAxis); g.select(".domain").remove(); g.selectAll(".tick text") .attr("x", -margin.left + 10) .attr("y", 0); } g.append("g") .attr("class", "y-axis") .call(customYAxis); //AXIS - F //TOOLTIPS - I // Setup the tool tip. Note that this is just one example, and that many styling options are available. // See original documentation for more details on styling: http://labratrevenge.com/d3-tip/ var tooltip = d3.tip() .attr("class", "d3-tip") .offset([-8, 0]) .html( function(d) { return "<span class='expense'>" + "$" + formatNumber(d.expense) + "</span>"; } ); svg.call(tooltip); // append the rectangles for the bar chart svg.selectAll(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return scaleX(d.category); }) .attr("width", scaleX.bandwidth()) .attr("y", function(d) { return scaleY(d.expense) + margin.bottom; }) .attr("height", function(d) { return height - scaleY(d.expense); }) .on('mouseover', tooltip.show) .on('mouseout', tooltip.hide); function showTooltip() { tooltip.show; $("#manolo").popover(); } //Colour the bars by the colors array var colors = ["#FF0000", "#00FF00", "#0000FF", "#CC0000", "#00CC00", "#0000CC", "#FF0000", "#AA0000", "#00AA00", "#0000AA"]; $(".bar").each(function(index, bar) { $(this).css("fill", colors[index]); }); });

Related: See More


Questions / Comments: