Check documentation for the latest version 6.0 of dhtmlxSuite Legend DHTMLX Docs

Legend

Legends are used to provide information about the charts shown on the page and tell you what each bar, line etc. represents.

Starting from version 4.0, legends get interactivity: each click on a legend item removes/adds the related data series (the first click - removes, the second - adds, the third - removes and so on).

chart/legend.png

Here is a small example which demonstrates how to create and configure the legend:

var barChart =  new dhtmlXChart({
    view:"bar",
    container:"chartBox",
        value:"#sales1#",
        color: "#58dccd",
    xAxis:{ template:"'#year#"},
    legend:{
        values:[
            {text:"Type A",color:"#58dccd"},
            {text:"Type B",color:"#a7ee70"},
            {text:"Type C",color:"#36abee"}
        ],
        valign:"middle",
        width:90,
        layout:"y"
    }
});
barChart.addSeries({ value:"#sales2#", color:"#a7ee70" });
barChart.addSeries({ value:"#sales3#", color:"#36abee" });
barChart.parse(mydataset,"json");

First of all, the legend is specified through the legend parameter.

  • values defines legend items (text - the item text label, color - the item color, markerType - the marker type, toggle - enables/disables the possibility to hide/show a specific graph by clicking on the graph legend item )
  • valign sets the vertical alignment of the legend
  • width sets the width of the legend block
  • layout defines whether items should be placed vertically or horizontally

The full list of the legend parameters you can find in chapter 'Legend parameter: attributes'.

Setting different markers for different graphs

chart/different_markers.png

To set different markers for graphs you should:

  1. Specify legend items manually, through values parameter (don't use template);
  2. Use markerType property to assign the desired marker type to a graph.
legend:{
    layout:"y",
    align:"right",
    valign:"middle",
    width:100,
    values:[
        {text:"Company A",color:"#00ccff"},  // uses the default marker
        {text:"Company B",color:"#e9df40"},  // uses the default marker
        {text:"Average",color:"#b25151",  
            markerType: "item"}              // uses the specified marker
    ]
}

Automatic generation of legend items in the Pie chart

For the Pie chart you may use a predefined definition along with the usual legend definition (shown above) and create a legend in one line - by specifying a template for items labels (dhtmlxChart will do for all the rest for you on its own).

Let's compare:

//custom definition
var myChart =  new dhtmlXChart({
    view: "chart",
    type:"pie",
    ...
    legend:{
        width:75,
        align:"right",
        valign:"middle",
        template:"#month#"
    }
});

//default definition
var myChart =  new dhtmlXChart({
    view: "chart",
    type:"pie",
    ...
    legend:"#month#"
});

chart/pie_legend.png

Related sample:  Legend

Back to top