HC Categories

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="graphContainer" style="height: 400px"></div>

JavaScript

var categoryLinks = {
   "Capital Metro (K)": "DistrictDashboard.aspx?AreaID=1",
   "Eastern (C)": "DistrictDashboard.aspx?AreaID=2",
   "Great Lakes (J)": "DistrictDashboard.aspx?AreaID=3",
   "Northeast (B)": "DistrictDashboard.aspx?AreaID=5",
   "Pacific (F)": "DistrictDashboard.aspx?AreaID=6",
   "Southern (S)": "DistrictDashboard.aspx?AreaID=8",
   "Western (E)": "DistrictDashboard.aspx?AreaID=9"
 };

 var myChart = Highcharts.chart('graphContainer', {
   chart: {
     //type: 'bar'
   },
   title: {
     text: 'Area RSQ Dashboard'
   },
   tooltip: {
     //            positioner: function (labelWidth, labelHeight, point) {
     //                var tooltipX = point.plotX;
     //                var tooltipY = point.plotY;
     //                return { x: tooltipX, y: tooltipY };
     //                var chart = this;
     //           }
     //comma above and more tool tip stuff below
     followPointer: true,
     hideDelay: 100,


     formatter: function() {
       var text = '';
       if (this.series.name == 'Targeted') {
         text = '<b>' + this.x + '</b> <br>' + this.series.name + ': ' + this.y + '<br>' + this.point.USMFalse + '<br>' + this.point.sentNotAnswered;
       }
       if (this.series.name == 'Participating') {
         text = '<b>' + this.x + '</b> <br>' + this.series.name + ': ' + this.y + '<br>';
       }
       if (this.series.name == 'Non-Targeted') {
         text = '<b>' + this.x + '</b> <br>' + this.series.name + ': ' + this.y + '<br>';
       }
       return text;
     }
   },
   xAxis: {
     type: "category",
     uniqueNames: true,
     categories: ["Capital Metro (K)", "Eastern (C)", "Great Lakes (J)", "Northeast (B)", "Pacific (F)", "Southern (S)", "Western (E)"],

     labels: {
       formatter: function() {
         return '<a href="' + categoryLinks[this.value] + '">' + this.value + '</a>';
       },
       useHTML: true
     }
   },
   yAxis: {
     type: 'logarithmic',
     //min: 0, <= THIS WILL CAUSE ISSUE  
...