dc.js

Class: Legend

Legend

Legend is a attachable widget that can be added to other dc charts to render horizontal legend labels.

Examples:

new Legend()

Source:
Returns:
Type
Legend
Example
chart.legend(new Legend().x(400).y(10).itemHeight(13).gap(5))

Classes

Legend

Methods

autoItemWidth( [autoItemWidth])

Turn automatic width for legend items on or off. If true, itemWidth is ignored. This setting takes into account the gap.

Parameters:
Name Type Argument Default Description
autoItemWidth Boolean <optional>
 false
Source:
Returns:
Type
Boolean | Legend

gap( [gap])

Set or get gap between legend items.

Parameters:
Name Type Argument Default Description
gap Number <optional>
 5
Source:
Returns:
Type
Number | Legend

highlightSelected( [highlightSelected])

This can be optionally used to enable highlighting legends for the selections/filters for the chart.

Parameters:
Name Type Argument Description
highlightSelected String <optional>
Source:
Returns:
Type
String | dc.legend

horizontal( [horizontal])

Position legend horizontally instead of vertically.

Parameters:
Name Type Argument Default Description
horizontal Boolean <optional>
 false
Source:
Returns:
Type
Boolean | Legend

itemHeight( [itemHeight])

Set or get legend item height.

Parameters:
Name Type Argument Default Description
itemHeight Number <optional>
 12
Source:
Returns:
Type
Number | Legend

itemWidth( [itemWidth])

Legend item width for horizontal legend.

Parameters:
Name Type Argument Default Description
itemWidth Number <optional>
 70
Source:
Returns:
Type
Number | Legend

keyboardAccessible( [keyboardAccessible])

If set, individual legend items will be focusable from keyboard and on pressing Enter or Space will behave as if clicked on.

If svgDescription on the parent chart has not been explicitly set, will also set the default SVG description text to the class constructor name, like BarChart or HeatMap, and make the entire SVG focusable.

Parameters:
Name Type Argument Default Description
keyboardAccessible Boolean <optional>
 false
Source:
Returns:
Type
Boolean | Legend

legendText( [legendText])

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.

Parameters:
Name Type Argument Description
legendText function <optional>
Source:
Returns:
Type
function | Legend
Example
// default legendText
legend.legendText(pluck('name'))

// create numbered legend items
chart.legend(new Legend().legendText(function(d, i) { return i + '. ' + d.name; }))

// create legend displaying group counts
chart.legend(new Legend().legendText(function(d) { return d.name + ': ' d.data; }))

legendWidth( [legendWidth])

Maximum width for horizontal legend.

Parameters:
Name Type Argument Default Description
legendWidth Number <optional>
 500
Source:
Returns:
Type
Number | Legend

maxItems( [maxItems])

Maximum number of legend items to display

Parameters:
Name Type Argument Description
maxItems Number <optional>
Source:
Returns:
Type
Legend

x( [x])

Set or get x coordinate for legend widget.

Parameters:
Name Type Argument Default Description
x Number <optional>
 0
Source:
Returns:
Type
Number | Legend

y( [y])

Set or get y coordinate for legend widget.

Parameters:
Name Type Argument Default Description
y Number <optional>
 0
Source:
Returns:
Type
Number | Legend