CODEWITHSUNDEEP
d3.js
mcsekar
mcsekar

Reputation: 486

Stacked Bar Graph in d3js

I am new to D3Js.i am following this http://codepen.io/benlister/pres/bNeLQy for stacked bar graph.I am not sure how to make the y axis absolute.Here it is shown in % .I tried adding y.domain([0,500]); It didnt work.Please help.

Upvotes: 0

Views: 192

Answers (2)

senschen
senschen

Reputation: 804

Try changing this line var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format(".0%")); to var yAxis = d3.svg.axis().scale(y).orient("left").tickFormat(d3.format("d")); for integer values on your y axis.

See here for more details.

Upvotes: 0

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

First, if you are talking about the % symbol, you have to change the tick format.

The code is this:

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".0%"));

Just remove the tickFormat, or change it to the format you want.

But your problem is bigger than that: the y axis shows percent because the data is being transformed to percentages. This is the code that does the math:

data.forEach(function (d) {
            var y0 = 0;

            d.rates = color.domain().map(function (name) {
                console.log();;
                return {
                    name: name,
                    y0: y0,
                    y1: y0 += +d[name],
                    amount: d[name]
                };
            });
            d.rates.forEach(function (d) {
                d.y0 /= y0;
                d.y1 /= y0;
            });

Check this example to see how to do it with absolute values:

https://bl.ocks.org/mbostock/3886208

Upvotes: 1

Related Questions