0

I have two series, maximum and average, which each contain a value for all days in a month. In our desktop software we used to display these in a bar chart where the average series is overlayed on the maximum series. Since the average can never be greater than the maximum, there is no problem with hidden bars.

In NVD3 I only found options to either group or stack the bars. Grouping takes too much room. Stacking on the other side would display wrong values for the upper bars. Only if both bars start at the bottom axis, their actual values can be read from the y axis.

Can this be accomplished in NVD3 in any way?

If not directly in NVD3, could it be accomplished by accessing the Underlying d3 objects?

NicolasR
  • 2,222
  • 3
  • 23
  • 38

1 Answers1

1

This is one way to do it. You can use a multibarChart and enable the stacked option only and disable the controls which show up by default.

In my personal opinion, I would suggest going with native D3 depending on what you're trying to accomplish.

var chart = nv.models.multiBarChart().stacked(true).showControls(false);
d3.select('#chart svg').datum([
  {
    key: "Avg",
    color: "#51A351",
    values:
    [      
      { x : "Jan 1", y : 40 },
      { x : "Jan 2", y : 30 },
    ]
  },
  {
    key: "Max",
    color: "#BD362F",
    values:
    [      
      { x : "Jan 1", y : 12 },
      { x : "Jan 2", y : 8 },
    ]
  }
]).transition().duration(500).call(chart);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css">

<div id="chart" style="height: 200px;"><svg></svg></div>
sparta93
  • 3,684
  • 5
  • 32
  • 63
  • Thanks, but I don't see how it solves the problem. First of all your example data miss the fact that the maximum is always higher than the average. But the actual problem is that the maximum for Jan 1, f.e., is shown as 52 instead of 12 because the bars are stacked. I want them to be overlayed so each bar value can be correctly read from the y axis. – NicolasR May 29 '18 at 23:27
  • I tried to make it work by subtracting the average from the maximum before displaying it but then the tooltips display the wrong value. – NicolasR May 29 '18 at 23:30
  • 1
    @NicolasR, there is a way to have a custom renderer for a tooltip, refer here - https://stackoverflow.com/questions/12416508/nvd3-piechart-js-how-to-edit-the-tooltip. Also, like I said, NVD3 is not as flexible as the other d3 based wrappers/frameworks and native. So the solution has to be "hacky". – sparta93 May 29 '18 at 23:50
  • ok, in combination with the custom tooltip it should work. Actually I am willing to switch to pure d3 but for the first preview versions I thought it would be a good idea to use nvd3. – NicolasR May 30 '18 at 00:13