Legend

27 Feb 20187 minutes to read

Legend visibility

You can enable or disable the legend by using the visible property in the legend object. By default, the legend is enabled in the pivot chart.

NOTE

By default, the legend is visible in the pivot chart.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true};
    }
}

Legend shape

You can customize the legend shape in the pivot chart widget. The default value of legend shape is “Rectangle”. The following are the supported legend shapes:

• Rectangle
• Circle
• Cross
• Diamond
• Pentagon
• Hexagon
• Star
• Ellipse
• Triangle.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = { visible: true, shape: 'circle' };
    }
}

Legend position

By using the position property, you can place the legend at top, bottom, left, or right of the pivot chart.

NOTE

The default value of the legend position is bottom in the pivot chart.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = { visible: true, position:'top' };
    }
}

Legend title

To add a legend title, you should specify the title text in the title.text property.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true, title: { text: 'Countries'}};
    }
}

Legend alignment

You can align the legend to center, far, and near based on its position in the chart area by using the alignment.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true, alignment: 'near'};
    }
}

Legend items - size and border

By using the itemStyle.width, itemStyle.height, and itemStyle.border properties of the legend, you can change the size and border of legend items.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true, itemStyle:
            {
                height: 12,
                width: 12,
                border:
                {
                    color: 'magenta',
                    width: 1.5
                }
            }
        };
    }
}

Legend border

By using the border in the legend, you can customize the color and width of the border.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true, border:
            {
                color: "#FFC342",
                width: 2
            }

        };
    }
}

Legend text

By using the font, you can customize the font family, font style, font weight, and size of the legend text.

HTML

<template>
  <div>
    <ej-pivot-chart e-legend.bind="legend">
    </ej-pivot-chart>
  </div>
</template>

JAVASCRIPT

export class BasicUse {
  constructor() {

        ... //datasource

      this.legend = {visible: true,
            font: {
                fontFamily: 'Segoe UI',
                fontStyle: 'italic',
                fontWeight: 'bold',
                size: '13px'
            }

        };
    }
}