DC.js - Legend

Legend is an attachable screen customization. It can be added to other DC charts to render horizontal legend labels. This chapter explains about legend in detail.

Legend Methods

Legend supports the following important methods. Let us go through each one of them in detail.

autoItemWidth( [width])

This method is used to set an automatic width for legend items on or off. If true, itemWidth is ignored. It is defined below −

legend.autoItemWidth = function (width) {
   if (!arguments.length) {
      return _width;
   }
}

gap( [gap])

This method is used to set or get a gap between the legend items. It is defined as follows −

legend.gap = function (gap) {
   if (!arguments.length) {
      return _gap;
   }
}

horizontal( [h])

This method is used to position the legend horizontally and is defined as follows.

_legend.horizontal = function (h) {
   if (!arguments.length) {
      return _h;
   }
};

itemHeight( [itemHeight])

This method is used to set or get the legend item height.

legend.itemHeight = function (itemHeight) {
   if (!arguments.length) {
      return _itemHeight;
   }
};

itemWidth( [itemWidth])

This method is used to set or get the legend the item width for a horizontal legend.

_legend.itemWidth = function (itemWidth) {
   if (!arguments.length) {
      return _itemWidth;
   }
};

legendText( [text])

This method is used to set or get the legend text function. The legend widget uses this function to render the legend text for each item. If no function is specified, the legend widget will display the names associated with each group. A simple example is shown below −

legend.legendText(dc.pluck( name ))

maxItems( [items])

This method is used to display the maximum number of legend items.

x( [x])

It is used to set or get the x-coordinate for a legend widget and is defined below −

legend.x = function (x) {
   if (!arguments.length) {
      return _x;
   }
};

Similarly, you can also perform the y-coordinate.