CODEWITHSUNDEEP
javascriptd3.jsbar-chartscaling
Micromegas
Micromegas

Reputation: 1689

How to scale bars of barchart so it shows the complete graph with data

I created a simple barchart with d3.js. My problem my complete chart is not shown but it is cut off to the right. Only 16 of the 20 bars are shown

I guess it is a scaling issue but I don't know how to fix it. If I increase the width it shows me more bars, but I'd like to keep the original width. Here is my code: 

{#Creating a barchart#}
var dataset = [133,131,111,345,665,665,454,44,4,235....]; //These are the bars

var svgWidth = 900, svgHeight = 400, barPadding = 10;
var barWidth = (svgWidth / dataset.length * 2 );

var svg = d3.select('svg')
    .attr("width", svgWidth)
    .attr("height", svgHeight);

var yScale = d3.scaleLinear()
    .domain([0, d3.max(dataset)])
    .range([0, svgHeight]);

var barChart = svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("y", function(d) {
         return svgHeight - yScale(d)
    })
    .attr("height", function(d) {
        return yScale(d);
    })
    .attr("width", barWidth - barPadding)
    .attr("transform", function (d, i) {
        var translate = [barWidth * i, 0];
        return "translate("+ translate +")";
    });

var text = svg.selectAll("text")
    .data(dataset)
    .enter()
    .append("text")
    .text(function(d) {
        return d;
    })
    .attr("y", function(d, i) {
        return svgHeight - d - 2;
    })
    .attr("x", function(d, i) {
        return barWidth * i;
    })
    .attr("fill", "black");

</script>

Any help is highly appreciated!! Thanks in advance!

Upvotes: 0

Views: 153

Answers (1)

jeppekaka
jeppekaka

Reputation: 52

Try removing the multiplication by 2 in your barWidth formula

var barWidth = svgWidth / dataset.length;

Upvotes: 1

Related Questions