Add different colors to each bar in D3

Question

I am using d3 library to display bar charts with each bar having a different color. Here is my code -

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

    .chart div {
      font: 10px sans-serif;
      background-color: steelblue;
      text-align: right;
      padding: 3px;
      margin: 1px;
      color: white;
    }

    </style>
<div class="chart"></div>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var data  = [{"label":"Recommended", "value":60},{"label":" You", "value":60},{"label":"Peers","value":40}];
var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);



d3.select(".chart")
  .selectAll("div")
    .data(data)
    .enter().append("div")
 // .attr("width",400)
 // .attr("depth",400)
   .style("width", function(d) { return d.value + "px"; })
  // .style("fill", function(d,i) { return data[i].color;})
   .text(function(d,i) { return data[i].label; });

</script>

I am unable to get different color for each bar. Can anyone please help me fix it.

score 4 · Accepted Answer · answered Feb 03 '16 at 20:25

You are modifying fill styling, but you have div elements, so you need background-color property.

Also, you should use your color scale range as a function to get a correct result.

var data = [{
  "label": "Recommended",
  "value": 60
}, {
  "label": " You",
  "value": 60
}, {
  "label": "Peers",
  "value": 40
}];
var color = d3.scale.ordinal().range(["#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var x = d3.scale.linear()
  .domain([0, d3.max(data)])
  .range([0, 420]);



d3.select(".chart")
  .selectAll("div")
  .data(data)
  .enter().append("div")
  // .attr("width",400)
  // .attr("depth",400)
  .style("width", function(d) {
    return d.value + "px";
  })
  .style("background-color", function(d, i) {
    return color(i);
  })
  .text(function(d, i) {
    return data[i].label;
  });

.chart div {
  font: 10px sans-serif;
  text-align: right;
  padding: 3px;
  margin: 1px;
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.0/d3.min.js"></script>
<div class="chart"></div>

Hey thanks , it worked. If I want to increase the size of the bar chart and also the text inside it how can I do it ? — Newbie, Feb 03 '16 at 20:33
@Newbie it depends on what logic would you like to use for the size. But the basics would be almost the same: add `.style("some-prop", function(datum, index) { // calculations here })` to the chain and play with the calculations. — Artyom Neustroev, Feb 03 '16 at 20:42
And If we want to display the value for label beside the bar outside it how can we do it ? — Newbie, Feb 03 '16 at 21:01

score 1 · Answer 2 · answered Feb 03 '16 at 20:30

// Took from http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
         color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
}

d3.select(".chart")
    .selectAll("div")
    .data(data)
    .enter().append("div")
    .style("background", function (d) { return getRandomColor(); })
    .style("color", function (d) { return '#FFFFFF'; })
    .style("width", function(d) { return d.value + "px"; })
    .text(function(d,i) { return data[i].label; });

score 0 · Answer 3 · answered Oct 08 '18 at 02:16

@jprivillaso

good answer but i used the D3 index itself and pulled color codes from json object

buildlegendvalues =
[{
  "1.0": "#79abbd",
  "2.0": "#6784b4",
  "3.0": "#9b799b",
  "4.0": "#a07b70"
}]

  bl = 0;
  function getByIndex(buildlegendvalues, index) {
    bl++
    return buildlegendvalues[Object.keys(buildlegendvalues)[index]];
  }

and then:

 .attr("fill", function() { return getByIndex(buildlegendvalues,bl); })

Add different colors to each bar in D3

3 Answers3