vertical align legend symbol in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

vertical align legend symbol in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*from   www . j a  v  a 2  s  .c  o  m*/
(function(H){
    H.wrap(H.Legend.prototype, 'positionItem', function(proceed, item){
        proceed.call(this, item);
        if(item.legendSymbol) {
            item.legendSymbol.translate(0, 10);
        }
        if(item.legendLine){
            item.legendLine.translate(0, 10);
        }
    });
})(Highcharts);
$('#chart').highcharts({
    legend: {
        align: 'right',
        verticalAlign: 'middle',
        layout: 'vertical',
        labelFormatter: function () {
            return $('<div>').append($('<img>').attr('src', 'https://www.java2s.com/style/demo/Google-Chrome.png').css({
                height: 40,
                width: 40
            })).html();
        },
        useHTML: true
    },
    series: [{
        name: 'name',
        data: [1, 6, 3, 7, 1, 3, 4]
    }, {
        name: 'name',
        data: [2, 7, 5, 3, 3, 5, 6]
    }]
});
    });

      </script> 
   </head> 
   <body> 
      <div id="chart" style="height:400px"></div>  
   </body>
</html>

Related Tutorials