legend

defines the configuration of a chart legend

legend?: ILegendConfig;

Example

const chart = new dhx.Chart("chart_container", {
    scales: {
        // scales config
    },
    series: [
        // list of series 
    ],
    legend: {
        series: ["A", "B", "C"],
        valign: "top",
        halign: "right"
    }    
});

The list of config options for legend (for charts with scales)

tip

You can apply the options below to configure the legend for charts with the following types: "line", "spline", "bar", "x-bar", "area", "splineArea", "radar", "scatter".

form	(string) the form of the legend markers ("rect" or "circle") Related Sample: Chart. Legend form
itemPadding	(number) padding between legend items
halign	(string) the horizontal alignment of the legend block: "left" | "right" (by default) | "center" Related Sample: Chart. Legend position
valign	(string) the vertical alignment of the block: "top" (by default) | "bottom" | "middle" Related Sample: Chart. Legend position
series	(array) the list of series that should be shown in the legend Related Sample: Chart. Enable legend
margin	(number) margin between the scale and the legend
direction	(string) optional, the arrangement of the legend items: "row" (default) | "column"
size	(number) optional, defines width or height of legend block, px

The list of config options for legend (for charts without scales: Pie, Pie3D, Donut)

tip

You can apply the options below to configure the legend for charts with the following types: "pie", "pie3D", "donut".

values	(object) maps attributes of legend items to data set properties. Contains the following properties: text - (string) the pointer to the data value to take a text for the legend from color - (string) the pointer to the data value to take a color for the legend from Related Sample: Chart. Donut chart initialization Related Sample: Chart. Pie chart initialization Related Sample: Chart. Pie 3D chart initialization
form	(string) the form of the legend markers ("rect" or "circle")
itemPadding	(number) padding between legend items
halign	(string) the horizontal alignment of the legend block: "left" | "right" (by default) | "center"
valign	(string) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"
margin	(number) margin between the series and the legend
direction	(string) optional, the arrangement of the legend items: "row" (default) | "column"
size	(number) optional, defines width or height of legend block, px

The list of config options for legend (for charts without scales: Treemap)

tip

You can apply the options below to configure the legend for charts with the "treeMap" type.

type	(string) defines the way of displaying values in the legend and the logic for coloring tiles: "range" | "groupName" (by default). type: "range" - Each tile will have the color depending on the value of the tile. The legend shows value ranges. Related Sample: Chart. Treemap chart initialization type: "groupName" - All tiles within one group will have the same color. The legend shows the group names. Related Sample: Chart. Treemap chart with groups initialization
treeSeries	(array) required, an array of objects that define configuration for legend items and color of rectangular tiles. Each object can contain the following properties: greater - (number) optional, defines range for values of tiles; specifies the value to be shown in the "greater than or equal to" legend from - (number) optional, defines range for values of tiles;specifies the lowest value to be shown in the "from-to" legend to - (number) optional, defines range for values of tiles; specifies the highest value to be shown in the "from-to" legend less - (number) optional, defines range for values of tiles; specifies the value to be shown in the "less than or equal to" legend color - (string) optional, defines the color both of the legend item and related tiles active - (boolean) optional, defines whether tiles with corresponding values are active (true, by default) or inactive (false) id - (string) the id of a legend item: Optional, if type: "range". Related Sample: Chart. Treemap chart initialization Mandatory, if type: "groupName". You need to specify the id of the group as id of the legend item. Related Sample: Chart. Treemap chart with groups initialization
form	(string) the form of the legend markers: "rect" (by default) | "circle"
itemPadding	(number) padding between legend items
halign	(string) the horizontal alignment of the legend block: "left" | "right" (by default) | "center"
valign	(string) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"
margin	(number) margin between the series and the legend
direction	(string) optional, the arrangement of the legend items: "row" (default) | "column"
size	(number) optional, defines the width or height of the legend block in pixels