CODEWITHSUNDEEP
dc.js
Xavier
Xavier

Reputation: 1207

How to fix the height of each bar on a rowChart?

I have a rowChart that can have more or less bars based on what you filter on other graphs.

The problem is that if I set the height of the graph to e.g. 500, if I have 50 bars they will be 10px height but if I have only one, it will be 500px

var graph = dc.rowChart (".graph")
  .margins({top: 0, right: 10, bottom: 20, left: 10})
  .height(300)
  .width(200)
  .gap(0)
  .x(d3.scale.ordinal())
  .elasticX(true)
.ordering(function(d){return -d.value})
  .dimension(dim)
  .group(filteredGroup);

The group will return the top 10, but if you filter (using other graphs, you might have as low as a single item. In that case, that bar is 300px height and it looks not good (and in general, having the height change that much is not pleasant IMO).

Is there a way to leave the height of the graph flexible but the height of each bar fixed?

So to say that each bar has a height of 30, but the height of the graph is going to adjust from 30 to 300.

Upvotes: 1

Views: 1221

Answers (1)

Motin
Motin

Reputation: 5043

According to the latest documentation for DC row charts:

.fixedBarHeight([height])

Get or set the fixed bar height. Default is [false] which will auto-scale bars. For example, if you want to fix the height for a specific number of bars (useful in TopN charts) you could fix height as follows (where count = total number of bars in your TopN and gap is your vertical gap space).

Example:

var chartheight = 500;
var gap = 5;
var count = 20;
var spaceForScales = 70;
c.fixedBarHeight((chartheight - (count + 1) * gap - spaceForScales) / count);

Upvotes: 3

Related Questions