Polar Stacked Column chart Legend settings - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Polar Stacked Column chart Legend settings

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from   w w  w.ja v  a  2s.  c  om*/
    // Parse the data from an inline table using the Highcharts Data plugin
    $('#container').highcharts({
        series: [
            {
                name: 'someCategory #1',
                data: [12, 13, 14, 15, 5, 17]
            },
            {
                name: 'someCategory #2',
                data: [13, 15, 4, 12, 14, 16]
            },
            {
                name: 'someCategory #3',
                data: [1, 15, 13, 4, 14, 30]
            },
            {
                name: 'someCategory #4',
                data: [13, 15, 3, 12, 1, 16]
            }
        ],
        chart: {
            polar: true,
            type: 'column',
            borderWidth: 0,
            backgroundColor: 'transparent',
            plotBackgroundColor: 'transparent',
            plotBorderWidth: 0,
            width: 275,
            height: 300
        },
        title: {
            text: ''
        },
        subtitle: {
            text: ''
        },
        legend: {
            enabled: false,
        },
        xAxis: {
            categories: [' thisisalong name', ' yetanotherreallylong name', ' i dont even know what to write', ' hmletsthinkofsomething', ' stillnonamethought of', ' thisisthelastone'],
            labels: {
                useHTML: true
            }
        },
        yAxis: {
            min: 0,
            endOnTick: false,
            showLastLabel: true,
            labels: {
                formatter: function () {
                    return this.value + '%';
                }
            }
        },
        tooltip: {
            valueSuffix: '%',
            followPointer: true
        },
        plotOptions: {
            series: {
                stacking: 'normal',
                shadow: false,
                groupPadding: 0,
                pointPlacement: 'on'
            },
        }
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/highcharts-more.js"></script> 
      <script src="https://code.highcharts.com/modules/data.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 326px; height: 300px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials