Legend

Legend element of chart
Class: Chart.Legend()
Legend element of the chart that categorizes the DataSeries/DataPoints.


Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{width:700,
                                           height:250});

 /* Create instance of Legend */
 legend: {title: 'Students', 
          margin:[0,-50,10,-20],
          vAlign:'center', 
          hAlign:'right', 
          borderWidth:1,
          background:'#e0e693', 
          borderColor:'#7c0eeb',
          cornerRadius:[7, 7, 7, 7],
          titleFont:{fontSize:16, fontColor:'#078a88'}
         };          
 data: [{
         plotAs: 'column', 
         name: 'Boys',
         points: [
                 {xLabel: "Arts and Craft", y: 15},
                 {xLabel: "Bike Riding", y: 30},
                 {xLabel: "Computer Games", y: 18},
                 {xLabel: "Watching TV", y: 22}
                 ]
        },
        {plotAs: 'column',
         name: 'Girls',
         points: [
                 {xLabel: "Arts and Craft", y: 30},
                 {xLabel: "Bike Riding", y: 5},
                 {xLabel: "Computer Games", y: 45},
                 {xLabel: "Watching TV", y: 25}
                 ]
        }
  ];

 /* Add the legend to chart */
 chart.setData(data);
 chart.render(); // draw the chart
Using JSON Approach
                                    var chartJSON = {
    width: 700,
    height: 250, 
    legend: {title: 'Students', 
             margin:[0,-50,10,-20],
             vAlign:'center', 
             hAlign:'right', 
             borderWidth:1,
             background:'#e0e693', 
             borderColor:'#7c0eeb',
             cornerRadius: [7, 7, 7, 7],
             titleFont:{fontSize:16, fontColor:'#078a88'}
            },          
    data: [{plotAs: 'column', 
            name: 'Boys',
            points: [{ xLabel: "Arts and Craft", y: 15 },
                     { xLabel: "Bike Riding", y: 30 },
                     { xLabel: "Computer Games", y: 18 },
                     { xLabel: "Watching TV", y: 22 }]
          },
          { plotAs: 'column',
            name: 'Girls',
            points: [{ xLabel: "Arts and Craft", y: 30 },
                     { xLabel: "Bike Riding", y: 5 },
                     { xLabel: "Computer Games", y: 45 },
                     { xLabel: "Watching TV", y: 25 }]
          }]
  };
   
 var chart = new Cosfire.Chart("chart-div", chartJSON);
 chart.render(); // draw the chart

List of Properties Supported in Legend.


Title Of The Legend
Property Type Default Possible Values Description
title String Not set --- Title of the Legend.
titleFont Font Not set --- LegendItem text font style. This property is a object of type Font provides all the necessary functionality for styling the font.
Styling The Legend
Property Type Default Possible Values Description
background String Not set Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Background color of the Legend.
borderWidth Number Not set --- Border width or line thickness of the legend.
borderColor String Not set Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Border color of the Legend.
borderStyle String solid
  • solid
  • dotted
  • dashed
 IBorder style of the Legend.
cornerRadius Array(Number) [0,0,0,0] [left, top, right, bottom] Corner Radius of the Legend.
You can set legendItem properties at one place instead of setting in every DataSeries/DataPoints.
Styling The LegendItem
Property Type Default Possible Values Description
legendItem LegendItem Not set --- This property is of type Chart.LegendItem(). This property can be used to set more properties to customize legend entry. LegendItem also can be represented as javascript object having all supported property by LegendItem class.
Example:
Code using Axis Class
                                    var chart = new Cosfire.Chart("chart-div",{ width: 500,
                                            height: 300});

/* Create instance of AxisX and AxisY */
var axisY = new Cosfire.Axis({ 
    title: "AxisY Title", 
    titleFont: { 
        fontSize: 12, 
        fontWeight: 'bold',
        fontColor: 'red'
    }
});

/* Add the axes to chart */
chart.axesY.add(axisY);
Using JSON Approach
                                    var chartJSON = {width: 500,
                 height: 300,
                 axesY :[{ title: "AxisY Title", 
                           titleFont: { 
                              fontSize: 12,
                              fontWeight: "bold",
                              fontColor: "red"
                           }
                        }]
                };
                                    
var chart = new Cosfire.Chart("chart-div", chartJSON);
Features
Property Type Default Possible Values Description
onClickVisibilityToggle Boolean false • true • false Toggle DataSeries/DataPoint visibility(Hide/Show) by clicking on legend Item.