Skip to main content

legend

Required for Treemap charts, optional for other types of charts. Defines the configuration of a chart legend

legend?: object;

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)​

info

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".

Usage​

legend?: {
    series: string[],
    direction?: "row" | "column", // "row" by default
    form?: "rect" | "circle", // "rect" by default
    halign?: "left" | "right" | "center", // "right" by default
    itemPadding?: number,
    margin?: number,
    size?: number,
    valign?: "top" | "middle" | "bottom", // "top" by default
}

Description​

series(required) the list of series that should be shown in the legend
Related Sample: Chart. Enable legend
direction(optional) the arrangement of the legend items: "row" (default) | "column"
form(optional) the form of the legend markers: "rect" (by default) | "circle"

Related Sample: Chart. Legend form
halign(optional) the horizontal alignment of the legend block: "left" | "right" (by default) | "center"
Related Sample: Chart. Legend position
itemPadding(optional) padding between legend items
margin(optional) margin between the scale and the legend
size(optional) defines width or height of legend block, px
valign(optional) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"
Related Sample: Chart. Legend position


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

info

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

Usage​

legend?: {
    values: {
        text: string;
        color: string;
    },
    direction?: "row" | "column", // "row" by default
    form?: "rect" | "circle", // "rect" by default
    halign?: "left" | "right" | "center", // "right" by default
    itemPadding?: number,
    margin?: number,
    size?: number,
    valign?: "top" | "middle" | "bottom", // "top" by default
}

Description​

values(required) maps attributes of legend items to data set properties. Contains the following properties:
  • text - (required) the pointer to the data value to take a text for the legend from
  • color - (required) 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
direction(optional) the arrangement of the legend items: "row" (default) | "column"
form(optional) the form of the legend markers: "rect" (by default) | "circle"
halign(optional) the horizontal alignment of the legend block: "left" | "right" (by default) | "center"
itemPadding(optional) padding between legend items
margin(optional) margin between the series and the legend
size(optional) defines width or height of legend block, px
valign(optional) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"


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

info

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

Usage​

legend: {
    type?: "groupName" | "range", // "groupName" by default
    treeSeries: [
        {
            greater?: number,
            from?: number,
            to?: number,
            less?: number,
            color?: string,
            active?: boolean,
            id?: string,
        },
        // more objects
    ],
    direction?: "row" | "column", // "row" by default
    form?: "rect" | "circle", // "rect" by default
    halign?: "left" | "right" | "center", // "right" by default
    itemPadding?: number,
    margin?: number,
    size?: number,
    valign?: "top" | "middle" | "bottom", // "top" by default
}

Description​

type(optional) defines the way of displaying values in the legend and the logic for coloring tiles: "range" | "groupName" (by default).
treeSeries(required) an array of objects that define configuration for legend items and color of rectangular tiles. Each object can contain the following properties:
  • greater - (optional) defines range for values of tiles; specifies the value to be shown in the "greater than or equal to" legend
  • from - (optional) defines range for values of tiles;specifies the lowest value to be shown in the "from-to" legend
  • to - (optional) defines range for values of tiles; specifies the highest value to be shown in the "from-to" legend
  • less - (optional) defines range for values of tiles; specifies the value to be shown in the "less than or equal to" legend
  • color - (optional) defines the color both of the legend item and related tiles
  • active - (optional) defines whether tiles with corresponding values are active (true, by default) or inactive (false)
  • id - the id of a legend item:
direction(optional) the arrangement of the legend items: "row" (default) | "column"
form(optional) the form of the legend markers: "rect" (by default) | "circle"
halign(optional) the horizontal alignment of the legend block: "left" | "right" (by default) | "center"
itemPadding(optional) padding between legend items
margin(optional) margin between the series and the legend
size(optional) defines the width or height of the legend block in pixels
valign(optional) the vertical alignment of the block: "top" (by default) | "bottom" | "middle"


The list of config options for legend (for charts without scales: Calendar heatmap)​

PRO VERSION ONLY

The calendar heatmap chart is available only in the PRO version of the DHTMLX Chart (or DHTMLX Suite).

info

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

Usage​

legend?: {
    values?: {
        text?: string,
        tick?: number, // 10 by default
        majorTick?: number, // 1 by default
        step?: number, // 1 by default
        tickTemplate?: string => string,
    },
    halign?: "left" | "right" | "center", // "right" by default
    margin?: number, // 0 by default
    size?: number,
    valign?: "top" | "middle" | "bottom", // "top" by default
}

Description​

values(optional) an object with settings for the content of the legend. The object can contain the following properties:
  • text - (optional) the title of the legend
  • tick - (optional) sets the size of the main step (division) of the legend scale; 10 by default
  • majorTick - (optional) sets the number of divisions between display of labels on the legend scale; 1 by default
  • step - (optional) sets the step of display of divisions on the legend scale; 1 by default. step: 1 means that each division will be displayed on the scale
  • tickTemplate - (optional) sets a template for display of labels on the legend scale
halign(optional) the horizontal alignment of the legend: "left" | "right" (by default) | "center"
margin(optional) margin between the series and the legend; 0 by default
size(optional) defines the height of the legend container
valign(optional) the vertical alignment of the legend: "top" (by default) | "bottom" | "middle"


Related article: Configuration