dc.js: Bar Totals with ElasticY

Question

I'm trying to implement bar totals at with bar charts in a very similar manner as you would with row charts. For row charts, the code would be

    Chart
      .width(500)
      .height(500)
      .dimension(chartDim)
      .group(chartGroup)
      .title(function(d) {
        return d3.format(",f")(d.value); // or your custom value accessor
      })
      .renderTitleLabel(true)
      .titleLabelOffsetX(50)
      .xAxis().tickFormat(function(v) {
        return "";
      });

This will return a chart with the values of it at the end of the row charts with the elasticX functionality. However, when it comes to bar chart, you would have to implement a renderlet solution like this and this where you have to manually draw the bar totals.

The issue I have with this approach is that 1) the y domain isn't elastic, so if there are wide variations in your selections, the bar totals may not show, and 2) you have to manually determine the range for the y axis.

Is there a more elegant way to create bar totals in a more elegant way without relying on the renderlet solution, something preferably similar to the row chart solution?

score 1 · Accepted Answer · answered Aug 01 '15 at 06:04

No, there is no more elegant way, until this feature makes it into dc.js proper.

However, there is a solution to the problem you're describing: the coordinate grid mixin does support internal padding, yAxisPadding, to reserve extra space when elasticY is enabled.

This should keep the labels inside the bounds.

https://github.com/dc-js/dc.js/blob/master/web/docs/api-latest.md#yaxispaddingpadding

score 0 · Answer 2 · answered Feb 02 '19 at 05:34

yAxisPadding works, but you'll end up with padding both above and below the bars, which is rarely what you want.

If you overwrite the yAxisMin function with something that always returns 0 you should be set, however, e.g.:

timeChart
  .height(200)
  .brushOn(false)
  .elasticY(true)
  .x(d3.scaleBand())
  .xUnits(dc.units.ordinal)
  .yAxisLabel('Entries')
  .yAxisPadding('10%')
  .renderLabel(true)
  .dimension(timeDimension);

timeChart.yAxisMin = () => 0;

dc.js: Bar Totals with ElasticY

2 Answers2