Row Charts — dc-charts

Methods
elasticX
fixedBarHeight
gap
labelOffsetX
labelOffsetY
renderTitleLabel
titleLabelOffsetX
x
xAxis

Accepts
Boolean
Number
Number
Number
Number
Boolean
Number
d3.scale
d3.axis

Method Descriptions
x axis will rescale to auto-fit the data range when filtered.
set fixed bar height
set vertical gap space between rows on a particular row chart instance
set x offset (horz space to top left corner of a row) for labels on a particular row chart
set y offset (vert space to top left corner of a row) for labels on a particular row chart
Turn on/off Title label rendering (values) using SVG style of text-anchor 'end'
set x offset (horizontal space between right edge of row and right edge or text
set x scale
set x axis for the row chart instance


        rowChart01
          .dimension(genderDimension)
          .group(genderGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200);

..: - Basic row chart


        rowChart01
          .dimension(genderDimension)
          .group(genderGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200)
          .elasticX(true)
          .gap(20);

elasticX: - x axis will rescale to auto-fit the data range
gap: - set the vertical gap space between rows


        rowChart01
          .dimension(genderDimension)
          .group(genderGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200);

..: - Basic row chart


        rowChart01
          .dimension(genderDimension)
          .group(genderGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200);

..: - Basic row chart


        rowChart05
          .dimension(genderDimension)
          .group(genderGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200)
          .labelOffsetX(50)
          .labelOffsetY(50);

.labelOffsetX(): - set the x offset for the labels in the row
.labelOffsetY(): - set the y offset for the labels in the row


        rowChart06
          .dimension(maritalDimension)
          .group(maritalDimension.group())
          .width($(rowChart01.anchor()).parent().width())
          .height(200)
          .renderTitleLabel(true)
          .titleLabelOffsetX(20);

renderTitleLabel: - show labels on the bars
titleLabelOffsetX: - offset the labels left


        rowChart07
          .dimension(creditCardDimension)
          .group(creditCardGroup)
          .width($(rowChart01.anchor()).parent().width())
          .height(200)
          .cap(7);

cap(): - max number of rows


        rowChart08
          .dimension(ageGroupDimension)
          .group(ageGroupDimension.group())
          .width($(rowChart01.anchor()).parent().width())
          .height(200)
          .fixedBarHeight(13)
          .ordering(d =>  d.key )
          .colors(["#66c2a4", "#a04a4a"])
          .x(d3.scaleLog().base(2).domain([1, 200]).range([0,300]));

fixedBarHeight: - sets the height for the bars
ordering: - set the ordering of the bars
colors: - set colors for the bar
x: - set the scale for the x axis. Set to Log scale above