bar chart legend with verticalAlign top - Javascript highcharts

Javascript examples for highcharts:Bar Chart

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

Description

bar chart legend with verticalAlign top

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(function () {//from   w w w  . j  a  va  2  s.  com
        $('#container').highcharts({
            chart: {
                type: 'bar'
            },
        credits: {
            enabled: false
        },
            title: {
                text: ''
            },
            xAxis: {
            labels: {
                enabled: false
            },
                categories: ['']
            },
            yAxis: {
          labels: {
                enabled: true
            },
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true,
                align: 'right',
                verticalAlign: 'top',
                x: 0,
                y: 100
            },
            tooltip: {
                enabled: false
            },
            plotOptions: {
                series: {
             minPointLength: 3,
             dataLabels: {
               color: 'white',
                    align: 'center',
                    enabled: true,
                    format: '{y} %'
                  },
                    stacking: 'percent'
                 },
                bar: {
            events: {
               legendItemClick: function () {
                  vote(1,this.userOptions.id);
                  return false;
                  }
               }
            ,
            showInLegend: true
            }
            },
                series: [
                          {
                name: 'yes',
                data: [{ y : 73.91, id : '1' }],
                id: '1'
            },
                          {
                name: 'no',
                data: [{ y : 26.09, id : '2' }],
                id: '2'
            },
             ]
        });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px"></div>  
   </body>
</html>

Related Tutorials