Legend

Element

Creates a legend for a chart element. Parameters are a pair of coordinates. The label names and the label colors are supplied in the attributes:

  • labels (Array): array of strings containing label names
  • labelArray (Array): alternative array for label names (has precedence over 'labels')
  • colors (Array): array of color values
  • colorArray (Array): alternative array for color values (has precedence over 'colors')
  • opacities (Array): opacity of a line in the legend
  • legendStyle or style: at the time being only 'vertical' is supported.
  • rowHeight: height of an entry in the legend (in px)
  • linelength: length of a line in the legend (measured in the coordinate system)
  • frozen (Boolean, false)
Usage (signatures)
board.create('legend', [x, y]);
Parameters
Name Type Description
x Number

Horizontal coordinate of the left top point of the legend
y Number

Vertical coordinate of the left top point of the legend
Examples
var board = JXG.JSXGraph.initBoard('jxgbox', {axis:true,boundingbox:[-4,48.3,12.0,-2.3]});
var x       = [-3,-2,-1,0,1,2,3,4,5,6,7,8];
var dataArr = [4,7,7,27,33,37,46,22,11,4,1,0];

colors = ['green', 'yellow', 'red', 'blue'];
board.create('chart', [x,dataArr], {chartStyle:'bar', width:1.0, labels:dataArr, colors: colors} );
board.create('legend', [8, 45], {labels:dataArr, colors: colors, strokeWidth:5} );


var inputFun, cf = [], cf2 = [], niveaunum,
    niveauline = [], niveauopac = [],legend;

  inputFun = "x^2/2-2*x*y+y^2/2";
  niveauline = [-3,-2,-1,-0.5, 0, 1,2,3];
  niveaunum = niveauline.length;
  for (let i = 0; JXG.Math.lt(i, niveaunum); i++) {
    let niveaui = niveauline[i];
    niveauopac.push(((i + 1) / (niveaunum + 1)));
    cf.push(board.create("implicitcurve", [
      inputFun + "-(" + niveaui.toFixed(2) + ")", [-2, 2], [-2, 2]], {
      strokeWidth: 2,
      strokeColor: JXG.palette.red,
      strokeOpacity: niveauopac[i],
      needsRegularUpdate: false,
      name: "niveau"+i,
      visible: true
    }));
  }
  legend = board.create('legend', [-1.75, 1.75], {
    labels: niveauline,
    colors: [cf[0].visProp.strokecolor],
    strokeOpacity: niveauopac,
    linelength: 0.2,
    frozen:true
  }
  );
Attributes

Own

colors

frozen

labels

lineLength

rowHeight

strokeOpacity

strokeWidth

style

colors

Description

(Circular) array of label colors.

Type
Array
Default Value
"['#B02B2C', '#3F4C6B', '#C79810', '#D15600', '#FFFF88', '#c3d9ff', '#4096EE', '#008C00']"
Source
options.js, line 7033

frozen

Description

The element can be fixed and may not be dragged around. If true, the legend will even stay at its position on zoom and moveOrigin events.

Type
Boolean
Default Value
false
See
Source
options.js, line 7082

labels

Description

Label names of a legend element.

Type
Array
Default Value
"['1', '2', '3', '4', '5', '6', '7', '8']"
Source
options.js, line 7024

lineLength

Description

Length of line in one legend entry

Type
Number
Default Value
1
Source
options.js, line 7042

rowHeight

Description

Height (in px) of one legend entry

Type
Number
Default Value
20
Source
options.js, line 7062

strokeOpacity

Description

(Circular) array of opacity for legend line stroke color for one legend entry.

Type
Array
Default Value
[1]
Source
options.js, line 7052

strokeWidth

Description

Height (in px) of one legend entry

Type
Number
Default Value
5
Source
options.js, line 7072

style

Description

Default style of a legend element. The only possible value is 'vertical'.

Type
String
Default Value
'vertical'
Source
options.js, line 7015

Inherited

none

Throws

If the element cannot be constructed with the given parent objects an exception is thrown.

Type
Exception

Details

Type
JXG.Legend
Source
base/chart.js, line 1422