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