dc.js

Class: HtmlLegend

HtmlLegend

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

new HtmlLegend()

Source:
Returns:
Type
HtmlLegend
Example
chart.legend(HtmlLegend().container(legendContainerElement).horizontal(false))

Classes

HtmlLegend

Methods

container( [container])

Set the container selector for the legend widget. Required.

Parameters:
Name Type Argument Description
container String <optional>
Source:
Returns:
Type
String | HtmlLegend

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 | HtmlLegend

horizontal( [horizontal])

Display the legend horizontally instead of vertically

Parameters:
Name Type Argument Description
horizontal String <optional>
Source:
Returns:
Type
String | HtmlLegend

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 | HtmlLegend

legendItemClass( [legendItemClass])

This can be optionally used to override class for legenditem and just use this class style. This is helpful for overriding the style of a particular chart rather than overriding the style for all charts.

Setting this will disable the highlighting of selected items also.

Parameters:
Name Type Argument Description
legendItemClass String <optional>
Source:
Returns:
Type
String | HtmlLegend

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 | HtmlLegend
Example
// default legendText
legend.legendText(pluck('name'))

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

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

maxItems( [maxItems])

Maximum number of legend items to display

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