DenLilleMand DenLilleMand - 1 year ago 79
CSS Question

d3.js barchart not quite like I want it

Im doing a simple bar chart with d3.js (version 4.1), and i have followed an example from the official documentation. This is my jsfiddle:

My current barchart

This is my code:


<div class="diagram-wrapper">
<div class="barchart">
<div class="header">
<h2>High score</h2>
<div class="content">



var data = [{
points: 50,
name: "gunnar"
}, {
points: 100,
name: "herp"
}, {
points: 500,
name: "Jacob"

var width = 420,
barHeight = 20;

var x = d3.scaleLinear()
.range([0, width]);

var chart =".diagram-wrapper div.barchart div.content")
.attr("width", width);

x.domain([0, d3.max(data, function(d) {
return d.points;

chart.attr("height", barHeight * data.length);

var bar = chart.selectAll("g")
.attr("transform", function(d, i) {
return "translate(0," + i * barHeight + ")";

.attr("width", function(d) {
return x(d.points);
.attr("height", barHeight - 1);

.attr("x", function(d) {
return x(d.points) - 3;
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) {
return d.points;

But all of the examples i can find are from version 3, or they use TSV og SCV data format... What i want is something like this:

Example of what i want

So basically my questions are as follows:

  • How do i turn the bars vertical instead of horizontal?

  • How do i add the names below the bars in the x-axis?

  • How do i add some values to the y-axis, that the points then relate to?

Sorry for all the questions, i really did investigate the docs, but i can't quite wrap my head around it when theres a leak of working examples and blogposts in 4.1


Answer Source

There is no easy way to "flip" an horizontal bar chart to a vertical bar chart... you have to pretty much change almost all the code. Here I'll show the basic steps (Please note that I'm not modifying your code, but creating a new one).

First, the data is the same. Then, we append the SVG:

var width = 400, height = 500;

var svg ="#chart")
  .attr("width", width)
  .attr("height", height);

After that, we define the scales. The x axis is now qualitative, while the y axis is quantitative:

var xScale = d3.scaleBand()
  .domain({ return}))
  .range([100, width])

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d){ return d.points})])
  .range([height - 40, 10]);

Then, we bind the data:

var bars = svg.selectAll(".bars")

With the data bounded we append the rectangles. This is the tricky part: notice how we calculate x, y, width and height:

bars.attr("x", function(d){ return xScale(})
  .attr("y", function(d){ return yScale(d.points)})
  .attr("width", xScale.bandwidth())
  .attr("height", function(d){ return (height - 40) - yScale(d.points)})
  .attr("fill", "steelblue");

And then, the axes:

var xAxis = d3.axisBottom(xScale);
var yAxis = d3.axisLeft(yScale);

svg.append("g").attr("transform", `translate(0,${height-40})`)

svg.append("g").attr("transform", "translate(100,0)")

And the fiddle shows the code working:

PS: there are some magic numbers in the code. Also, I'm using a template literal that won't work if you use IE.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download