Plot Reciprocal Values For Column Height for column chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

Plot Reciprocal Values For Column Height for column 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">
    window.onload=function(){// ww w.j av  a2 s .  c  o  m
var player_name_array = ["Aaron Rodgers", "Andrew Luck", "Drew Brees", "Russell Wilson", "Peyton Manning", "Ryan Tannehill", "Tony Romo", "Matt Ryan", "Cam Newton", "Ben Roethlisberger", "Eli Manning", "Philip Rivers", "Colin Kaepernick", "Teddy Bridgewater", "Marcus Mariota", "Matthew Stafford", "Robert Griffin III", "Joe Flacco", "Jay Cutler", "Sam Bradford"];
var series_array =[38,33,63,64,67,95,75,85,96,76,999,999,999,999,999,999,999,999,999,999];
var inv_data = [];
for (i = 0; i < series_array.length; i++) {
   inv_data[i] = 1 / series_array[i];
}
rankings_chart = new Highcharts.Chart({
        chart: {
            renderTo:'rankings_chart',
            type: 'column'
        },
        title: {
            text: 'Draft Rankings'
        },
        subtitle: {
            text: 'Source: The Internet'
        },
        xAxis: {
            categories: player_name_array,
            crosshair: true
        },
        yAxis: {
            //type: 'logarithmic',
            //reversed: true,
            title: {
                text: 'Drarft Rankings'
            }
        },
        tooltip: {
            pointFormatter: function() {
                return 1 / this.y;
            }
        },
        plotOptions: {
            series: {
                stacking:'normal',
                dataLabels: {
                    formatter: function() {
                        return 1 / this.y;
                    }
                }
            },
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        rangeSelector: {
          selected: 1
        },
        series : [{
            name : 'Draft Data',
            data : inv_data
        }]
  });
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="rankings_chart"></div>  
   </body>
</html>

Related Tutorials