DHTMLX Docs & Samples Explorer

legend

Attributes

  • width - (integer) the block width
  • align - (string) the horizontal align of the block: 'left', 'right' or 'center'
  • valign - (string) the vertical align of the block: 'top','bottom' or 'middle'
  • layout - (string) a layout that defines text stretching in horizontal or vertical direction :'x' or 'y'
  • padding - (integer) the legend block padding. Doesn't affect parameters 'align' and 'valign'
  • margin - (integer) the legend block margin
  • marker - an object that defines markers in the details block
    • type - (string) the marker type: 'square', 'round' or 'item' (if you set the 'item' type, the legend marker will use the same template as items in the chart)
    • radius - (integer) the marker radius (by default, 3)
    • width - (integer) the marker width
    • height - (integer) the marker height
  • toggle - (boolean) enables/disables the possibility to hide/show a graph by clicking on the graph legend item. For all charts, except for Stacked Vertical Bar, Stacked Horizontal Bar and Stacked Area, the default value is true. For the excepted charts the default value is false.
  • values - an array of objects, each of which defines a separate legend item
    • text - (string) the text label of an item
    • color - (string) the color of an item
    • markerType - (string) the marker type: 'square', 'round' or 'item' (if you set the 'item' type, the legend marker will use the same template as items in the chart)
    • toggle - (boolean) enables/disables the possibility to hide/show a graph by clicking on the specified legend item

Legend block can be defined by:

  • a template for element text in legend block.
    • Value type: String, function
  • an object with settings.
    • Value type: Object
var chart =  new dhtmlXChart({
   legend:{
	width: 75,
	align:"right",
	valign:top,
	marker:{
		type:"round",
		width:15
	},
        values:[
		{text:"company A",color:"#3399ff"},
		{text:"company B",color:"#66cc00", markerType:"item"}
	]
    },
    ...
})

or

chart.define("legend",{
	width: 75,
	align:"right",
	valign:top,
	marker:{
		type:"round",
		width:15
	},
	template:"#year#"
});