Demo - FlexChart Legend Titles

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.chart.min.js"></script>
<div class="container">

  <h1>
    Legend Titles
  </h1>

  <p>
    In some cases, you may want to add some context information to
    the chart legend.</p>
  <p>
    The current version of FlexChart does not have a 'legendTitle'
    property, but you can create one easily by adding an extra
    dummy series and customizing the appearance of its entry in
    the legend:</p>
  
  <label for="legendPosition">Legend Position: </label>
  <div id="legendPosition"></div>
  
  <div id="theChart"></div>

</div>

CSS

.wj-flexchart {
   height: 300px;
}
label {
  width: 150px;
  text-align: right;
}
.wj-control {
  margin-bottom: 3px;
}

JavaScript

onload = function() {

	// create a chart
  var theChart = new wijmo.chart.FlexChart('#theChart', {
  	itemsSource: getData(),
    bindingX: 'country',
		series: [
    	{ name: 'Legend Title', visibility: 'Legend' },
    	{ binding: 'sales', name: 'Sales' },
      { binding: 'expenses', name: 'Expenses' },
      {	binding: 'downloads', name: 'Downloads' }
    ],
    rendered: function(s, e) {
    
    	// get title legend group
    	var group = s.hostElement.querySelector('.wj-legend g');
      
      // remove opacity
      group.removeAttribute('opacity');
      
      // remove rectangle before the item
      var rect = group.querySelector('rect');
      group.removeChild(rect);
      
      // adjust position of text element and make it bold
      var text = group.querySelector('text');
      text.setAttribute('x', rect.getAttribute('x'));
      text.setAttribute('font-weight', 'bold');
    }
	});
  
  // change legend position
  var legendPosition = new wijmo.input.ComboBox('#legendPosition', {
  	itemsSource: 'None,Top,Bottom,Left,Right,Auto'.split(','),
    textChanged: function(s, e) {
    	theChart.legend.position = s.text;
    },
    text: 'Right'
  });
  
	// create some random data
  function getData() {
	  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
	    data = [];
	  for (var i = 0; i < countries.length; i++) {
	    data.push({
	      country: countries[i],
	      sales: Math.random() * 10000,
	      expenses: Math.random() * 5000,
	      downloads: Math.round(Math.random() * 20000),
	    });
	  }
  	return data;
  }

}