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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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 {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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)
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Vue Argon Design System
Responsive Column Chart

Questions / Comments: