Currently following types of legends are supported:
- for colors:
- DiscreteColorLegend (for a fixed number of colors, good for series);
- SearchableDiscreteColorLegend) (same as DiscreteColorLegend, but with search on top);
- ContinuousColorLegend (for gradually changing colors);
- for sizes:
- ContinuousSizeLegend (for gradually changing size).
Type: Array<string|{title: string|react element, color: String, strokeDasharray: string, strokeStyle: string, strokeWidth: number, disabled: boolean}|react element>
Array of items that should be shown on the legend. The array should consist from either objects (title, optional color, optional strokeDasharray, optional strokeStyle, optional strokeWidth, and optional disabled flag) or strings (treated as titles). The stroke properties should match those in your series (see line series)
Type: (vertical|horizontal)
Default: 'vertical'
String either horizontal or vertical representing which direction the legend elements are rendered.
Type: function(Object, number): void
Default: noop
Click callback for the item in the list. Gets the clicked item and its index as parameters.
Type: function
Default: noop
This handler is triggered either when the user's mouse enters a legend item. The handler passes three arguments, the corresponding item, legend index and the actual event.
<DiscreteColorLegend
...
onItemMouseEnter={(item, index, event) => {
// does something on mouse enter
// you can access the value of the event
}}Type: function
Default: noop
This handler is triggered either when the user's mouse leaves a legend item. The handler passes three arguments, the corresponding item, legend index and the actual event.
<DiscreteColorLegend
...
onItemMouseLeave={(item, index, event) => {
// does something on mouse leave
// you can access the value of the event
}}Type: number
Outer width of the component. Default width is not set.
Type: number
Outer height of the component. Default is not set, the component stretches with the items added into it.
SearchableDiscreteColorLegend allows the user to perform search among the items.
Its API includes the API of DiscreteColorLegend, but adds several search-related items:
Type: string
Default: ''
Type: function(Array, string):Array
Function that is should filter out the unnecessary items by the given initial array of items and the search string. By default the function returns an array of items which titles contain a string.
Type: string
Default: ''
Placeholder for an search input field.
Type: function(string):void
Event handler for the change of the input field. The handler is triggered with the search field value as a parameter.
Type: string|number
The title that is shown in the beginning of the legend.
Type: string|number
The title that is show in the middle of the legend.
Type: string|number
The title that is show in the end of the legend.
Type: string
The initial color of the bar
Type: string
The end color of the bar.
Type: string
The middle color of the bar.
Type: number
Outer width of the component.
Type: number
Outer height of the component.
Type: string|number
The title that is shown in the beginning of the legend.
Type: string|number
The title that is show in the end of the legend.
Type: number
Default: 2
The initial size of the circles in the legend.
Type: number
Default: 20
The end size of the circles in the legend.
Type: number
Default: 10
Total amount of circles displayed in the legend
Type: number
Outer width of the component.
Type: number
Outer height of the component.