D3js - change Vertical bar chart to Horizontal bar chart

Active3 hr before
Viewed126 times

7 Answers


I just did the same thing last night, and I basically ended up rewriting the code as it was quicker than fixing all the bugs but here's the tips I can give you.,The biggest issues with flipping the x and y axis will be with things like return h - yScale(d.global) because height is calculated from the "top" of the page not the bottom. ,An alternative is to rotate the chart (see this). This is a bit hacky as then you need to maintain the swapped axes in your head (the height is actually the width etc), but it is arguably simpler if you already have a working vertical chart., Taking a theorem as a definition and proving the original definition as a theorem

here's my own code making it horizontal if it helps:

var w = 600;
var h = 600;
var padding = 30;

var xScale = d3.scale.linear()
   .domain([0, d3.max(dataset, function(d) {
      return d.values[0];
   })]) //note I'm using an array here to grab the value hence the [0]
   .range([padding, w - (padding * 2)]);

var yScale = d3.scale.ordinal()
   .rangeRoundBands([padding, h - padding], 0.05);

var svg = d3.select("body")
   .attr("width", w)
   .attr("height", h)

   .attr("x", 0 + padding)
   .attr("y", function(d, i) {
      return yScale(i);
   .attr("width", function(d) {
      return xScale(d.values[0]);
   .attr("height", yScale.rangeBand())
load more v

There is no specific trick for this chart. Compared to the vertical version, you just have to build the axis the other way around.,The Html part of the code just creates a div that will be modified by d3 later on.,This post describes how to turn the barplot horizontal with d3.js. This can be handy when you have long labels. Note that you could consider building lollipop plot as well. This example works with d3.js v4 and v6,The first part of the javascript code set a svg area. It specify the chart size and its margin. Read more.

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>
load more v

A bar chart can be horizontal or vertical based on its orientation. I will go with the vertical one in the form of a JavaScript Column chart.,Update: a 2nd part of my d3.js tutorial series is available as well: Building a D3.js Calendar Heatmap (to visualize StackOverflow Usage Data),The full source code is available here.,Order data points intuitively – alphabetically or sorted;

I want to create a chart with 1000 pixels width and 600 pixels height.

   <svg />
   const margin = 60;
   const width = 1000 - 2 * margin;
   const height = 600 - 2 * margin;

   const svg = d3.select('svg');
load more v

Let's construct a vertical bar chart using the above XYZ.csv file that stores the values of XYZ stock prices. , We learned about SVG charts, scales and axes in the previous chapters. Here, we will learn to create SVG bar chart with scales and axes in D3. ,Step 1: Start with creating the SVG and defining the scales for our bar chart as shown below. , Thus, we can create a bar chart using D3.

year, value
2011, 45
2012, 47
2013, 52
2014, 70
2015, 75
2016, 78
load more v

This color-changing happens on hover, so no, it’s not a glitch of any sort. The visualization is fairly simple but requires a decent amount of work. Let’s talk a little bit about D3 before proceeding with the code.,That’s isn’t necessarily a bad thing, as you can customize the hell out of every visualization. Before proceeding further, let’s take a quick look at the end result:,And now the moment you’ve been waiting for. We still have a lot of things to do, so let’s get right to it.,D3.js requires a lot of code — no arguing there. But that’s just what makes it so special — the ability to customize absolutely everything. We’ve only scratched the surface here, and options to tweak are endless.

First things first — the data. We’ll store some dummy data in the JSON format. I’ve named mine sales.json and it looks like this:

   Period”: “Q1– 2020”,
   “Amount”: 1000000
}, {
   Period”: “Q2– 2020”,
   “Amount”: 875000
}, {
   Period”: “Q3– 2020”,
   “Amount”: 920000
}, {
   Period”: “Q4– 2020”,
   “Amount”: 400000
load more v


load more v

How to make a D3.js-based bar chart in javascript. Seven examples of grouped, stacked, overlaid, and colored bar charts. ,Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [{
   x: ['giraffes', 'orangutans', 'monkeys'],
   y: [20, 14, 23],
   type: 'bar'

Plotly.newPlot('myDiv', data);
load more v

Other "vertical-chart" queries related to "D3js - change Vertical bar chart to Horizontal bar chart"