Legend

import { Legend, LegendEntry } from 'cx/charts';

The Legend widget is used to display an index of elements displayed on the chart. Please refer to LineGraph, BarGraph or PieChart articles to see how legends are commonly used.

Here we'll explain an advanced use case of a legend combined out of LegendEntry and Grid widgets.

Item	Value
Item 1	82.77
Item 2	67.79
Item 3	69.76
Item 4	77.18
Item 5	88.91
Item 6	99.66
Item 7	93.37

Controller Index Columns

<div class="widgets" controller={PageController}>
    <Svg style="width:300px; height:300px;">
        <ColorMap />
        <PieChart angle={360}>
            <Repeater records-bind="$page.points">
                <PieSlice value-bind='$record.value'
                        active-bind='$record.active'
                        colorMap="pie"
                        r={80}
                        r0={20}
                        offset={5}
                        tooltip-tpl="{$record.name}: {$record.value:n;2}"
                        innerPointRadius={80}
                        outerPointRadius={90}
                        name-bind="$record.name"
                        selection={{
                            type: KeySelection,
                            bind: '$page.selection',
                            records: {bind: '$page.points'},
                            record: {bind: '$record'},
                            index: {bind: '$index'},
                            keyField: 'id'
                        }}/>
            </Repeater>
        </PieChart>
    </Svg>

    <Grid records-bind="$page.points"
        style="width: 200px"
        columns={columns}
        selection={{
            type: KeySelection,
            bind: '$page.selection',
            keyField: 'id'
        }}/>
</div>

Copied!Cx Fiddle

Note on Legend: If multiple charts are rendered on the same page, use Legend.Scope to prevent Legends from interfering with one another, as shown in this example.

`Legend` Configuration

Property	Description	Type
name	Name of the legend. Default is `legend`.	string
showValues	Whether to show values in the legend. Default is `false`.	boolean
vertical	Switch to vertical mode.	boolean
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
entryClass	Additional CSS classes to be applied to the legend entry elements.	string/object
entryStyle	Additional CSS styles to be applied to the legend entry elements	string/object
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
shape	Specifies the shape of the symbol in the legend entries. By default, the shape of the series in the chart is used. `circle`, `square`, `triangle`, etc.	string
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
valueClass	Additional CSS classes to be applied to the legend entry values.	string/object
valueFormat	Format string for the legend entry values. Default is `s`.	string
valueStyle	Additional CSS styles to be applied to the legend entry values.	string/object
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

`LegendEntry` Configuration

Property	Description	Type
colorIndex	Index of a color from the standard palette of colors. 0-15.	number
colorMap	Used to automatically assign a color based on the `colorName` and the contextual `ColorMap` widget.	string
colorName	Name used to automatically resolve color based from the contextual `ColorMap` widget. If value is not provided, `name` is used instead.	string
name	Name of the item as it will appear in the legend.	string
selected	Indicate that entry is selected.	boolean
shape	Shape of the symbol. `square`, `circle`, `triangle` etc.	string
size	Size of the symbol. Default value is `18`.	number
active	Used to indicate if an item is active or not. Inactive items are shown only in the legend.	boolean
autoFocus	Set to `true` to automatically focus the element when mounted.	boolean
baseClass	Base CSS class to be applied to the element. No class is applied by default.	string
class className	Additional CSS classes to be applied to the element. If an object is provided, all keys with a "truthy" value will be added to the CSS class list.	string/object
innerHtml html	HTML to be injected into the element.	string
items children	List of child elements.	array
layout	Define an inner layout.	string/object
legend	Name of the legend to be used. Default is `legend`. Set to `false` to hide legend entry for this item.	string \| false
legendAction	Action to be performed if the user clicks on the legend entry. Default value is `auto`. Other permitted values are `toggle` and `select`.	string
legendShape	Shape of the icon in the the legend. Default value is based on the chart type. Additional shapes can be registered using the `registerShape` function. Out of the box, CxJS offers `square`, `bar`, `column`, `line`, `vline` and `triangle` shapes.	string
mod	Appearance modifier. For example, `mod="big"` will add the CSS class `.cxm-big` to the block element.	string/array
outerLayout	Defines the outer layout which wraps the widget.	widget
plainText	Set to `true` to avoid converting inner strings to templates. Default is `false`.	boolean
preserveWhitespace ws	Keep whitespace in text based children. Default is `false`. See also `trimWhitespace`.	boolean
putInto contentFor	Used with outer layouts. Specifies the name of the content placeholder which should render the widget.	string
rx	Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to `ry` if `ry` is specified.	string/number
ry	Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to `rx` if `rx` is specified.	string/number
style	Style object applied to the wrapper div. Used for setting the dimensions of the element.	string/object
tag	Name of the HTML element to be rendered. Default is `div`.	string
text innerText	Inner text contents.	string
tooltip	Tooltip configuration. For more info see Tooltips.	string/object
trimWhitespace	Remove all whitespace in text based children. Default is `true`. See also `preserveWhitespace`.	boolean
vdomKey	Key that will be used as the key when rendering the React component.	string
visible if	Visibility of the widget. Defaults to `true`.	boolean

Documentation

Legend