legend Field

Creates a legend object to display with the chart.

Syntax

Javascript (Usage)
var value; // Type: chart_legend value = jQuery.wijmo.wijchartcore.options.legend;

Javascript (Specification)
var legend : chart_legend;

Example

Javascript

// This code creates a chart with a legend that is positioned below the chart (south), 
// with series labels and colors in a row (horizontal), a grey outline and lighter
// grey fill (style), has a title that reads "Legend" (text), has 5 pixels of
// space around the text (textMargin), has series labels in a black 12-point font
// (textStyle), and has a 14-point font title (titleStyle)
   $(document).ready(function () {
       $("#wijbarchart").wijbarchart({
        legend: {
        compass: "south",
        orientation: "horizontal",
        style: {fill: "gainsboro", stroke: "grey"},
        text: "Legend",
        textMargin: {left: 5, top: 5, right: 5, bottom: 5 },
        textStyle: {fill: "black", "font-size": 12},
        titleStyle: {"font-size": 14}
        },
        seriesList: [{
        label: "US",
        data: {
        x: ['PS3', 'XBOX360', 'Wii'],
        y: [12.35, 21.50, 30.56]
        }
        },
        {
        label: "Japan",
        data: {
        x: ['PS3', 'XBOX360', 'Wii'],
        y: [4.58, 1.23, 9.67]
        }
        },
        {
        label: "Other",
        data: {
        x: ['PS3', 'XBOX360', 'Wii'],
        y: [31.59, 37.14, 65.32]
        }
        }],
    });
});

Remarks

By default, each series that you create in the seriesList is represented by a color in the legend, using the seriesList label that you specify. If you do not specify a label, it is labeled "undefined." If you do not want a series to appear in the legend, you can set the seriesList legendEntry attribute to false. By default, users can click a legend entry to toggle the data series it represents in the chart.See Clickable Legend for code that allows you to disable this function.

Browser Compatibility

See Also

Reference