Skip to main content

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).
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:
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