CODEWITHSUNDEEP
javascriptd3.jsnvd3.js
HattrickNZ
HattrickNZ

Reputation: 4643

nvd3 + lineplusbarchart + allign axises

not sure if I am going about this the right way but here goes...

So i have the this example see fiddle here using lineplusbarchart and i am building on it from this question i posted here: SO question

I have edited the lineplusbarchart to show the labels on the xaxis:

    chart.xAxis.tickFormat(function(d) {
  var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
          return dx;
      })
      .showMaxMin(false);

but i am still having a couple of issues to get what i want...

1 ->
how can i make the y1 and y2 axis be alligned? (ideally it would be good if there was only one axis)
2 ->
how do i remove the y2 axis? (soution here but this does not work as I then want the 2 axis aligned)
3 ->
how do i make the thickness of the barchart part for label1 and label5 to be the same thickness as the others(lable2,3 and 4)?

Upvotes: 0

Views: 1287

Answers (1)

user3431161
user3431161

Reputation: 31

hope this helps:

  1. you can use chart.lines.forceY() to set a range. To make it work with dynamic values I'd suggest to find the overall max value of the attached data and use it for the bar and the lines. Eg: 

    var maxValue = d3.max(d3.entries(testdata), function(d) {
        return d3.max(d3.entries(d.value.values), function(e) {
            return e.value.y;
        });
    }),
    minValue = 0;

chart.bars.forceY([minValue, maxValue]);
chart.lines.forceY([minValue, maxValue]);
  2. Your posted solution is exactly what I would do too.
  3. Remove padData()

Upvotes: 3

Related Questions