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"
    }    
});

Related samples:

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

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"
valign(string) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"
series(array) the list of series that should be shown in the 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)​

values(object) maps attributes of legend items to data set properties. Contains the following properties:
  • id - (string/number) the id of the series that will be bound to the legend
  • 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
  • alpha - (number) transparency of a legend item
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)​

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