Legend

Legend visibility

You can enable or disable the legend by using the visible property in the legend object.

NOTE

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

<div class="e-control">
	
	{{ej-pivotchart id="PivotChart" e-legend=model.legend }}
	
	</div>
import Ember from 'ember';

export default Ember.Route.extend({
   model(){
    return {
                //...
                
                legend: {
					visible: true
				},
        }
    }
});

Legend shape

You can customize the legend shape in the pivot chart control. Default value of legend shape is “rectangle”. Following are legend shapes that are supported:

  • rectangle
  • circle
  • cross
  • diamond
  • pentagon
  • hexagon
  • star
  • ellipse
  • triangle etc.
  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true, 
                        shape: "Star" 
    				},
            }
        }
    });

    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 legend position is “bottom” in the pivot chart.

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true, 
                        shape: "Star", 
                        position: "top"
    				},
            }
        }
    });

    Legend title

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

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    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 using the alignment option.

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true, 
                        alignment: "Near"
    				},
            }
        }
    });

    Legend items - size and border

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

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true,
                        itemStyle:
                        {
                            height: 12,
                            width: 12,
                            border:
                            {
                                color: 'magenta',
                                width: 1.5
                            }
                        } 
    				},
            }
        }
    });

    Legend border

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

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true, 
                        border:{
                            color: "#FFC342",
                            width: 2
                        }
    				},
            }
        }
    });

    Legend text

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

  • js
  • import Ember from 'ember';
    
    export default Ember.Route.extend({
       model(){
        return {
                    //...
                    
                    legend: {
    					visible: true, 
                        font:
                        {
                            fontFamily: 'Segoe UI',
                            fontStyle: 'italic',
                            fontWeight: 'bold',
                            size: '13px'
                        }
    				},
            }
        }
    });