Allows axis label formatter function to be set via the options

README.md

@@ -156,9 +156,55 @@ window.chart = new Highcharts.Chart({
     }]
   }
 });
+
 </script>
 
 
+For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options.
+
+```
+xAxis: {  	
+	labels: {
+	    groupedOptions: [{
+	  	    style: {
+	  	  	    color: 'red' // set red font for labels in 1st-Level  
+	  	    }
+	    }, {
+	  	    rotation: -45, // rotate labels for a 2nd-level
+	  	    align: 'right'
+	    }],
+	    rotation: 0 // 0-level options aren't changed, use them as always
+    },
+    categories: [{
+        name: "America",
+        categories: [{
+            name: "USA",
+            categories: ["New York", "San Francisco"]
+        }, {
+            name: "Canada",
+            categories: ["Toronto", "Vancouver"]
+        }, {
+            name: "Mexico",
+            categories: ["Acapulco", "Leon"]
+        }]
+    }, {
+        name: "Europe",
+        categories: [{
+            name: "United Kingdom",
+            categories: ["London", "Liverpool"]
+        }, {
+            name: "France",
+            categories: ["Paris", "Marseille"]
+        }, {
+            name: "Germany",
+            categories: ["Berlin", "Munich"]
+        }]
+    }]
+}
+```
+
+
+
 ### Code
 
 The latest code is available on github: [https://github.com/blacklabel/grouped_categories/](https://github.com/blacklabel/grouped_categories/)

grouped-categories.js

@@ -5,12 +5,13 @@
  *
  * License: Creative Commons Attribution (CC)
  */
-(function(HC){
+(function(HC, HA){
 /*jshint expr:true, boss:true */
 var UNDEFINED = void 0,
     mathRound = Math.round,
     mathMin   = Math.min,
     mathMax   = Math.max,
+    merge     = HC.merge,
 
     // cache prototypes
     axisProto  = HC.Axis.prototype,
@@ -258,7 +259,8 @@ axisProto.render = function () {
   if (!grid) {
     grid = axis.labelsGrid = axis.chart.renderer.path()
       .attr({
-        strokeWidth: options.lineWidth,
+        strokeWidth: options.lineWidth, // < 4.0.3
+        'stroke-width': options.lineWidth, // 4.0.3+ #30
         stroke: options.lineColor
       })
       .add(axis.axisGroup);
@@ -298,7 +300,9 @@ axisProto.render = function () {
       tick.destroyed = 0;
     }
     else
-      tick.label.show();
+	  tick.label.attr({
+		visibility: ''
+	  });
   });
 };
 
@@ -364,7 +368,9 @@ axisProto.groupSize = function (level, position) {
 
 // Override methods prototypes
 tickProto.addLabel = function () {
-  var category;
+  var category,
+      axis = this.axis,
+      options = axis.options.labels;
 
   _tickAddLabel.call(this);
 
@@ -373,9 +379,12 @@ tickProto.addLabel = function () {
     return;
 
   // set label text
-  if (category.name)
-    this.label.attr('text', category.name);
-
+  if (category.name) {
+    this.value = category;
+    var labelText = options.formatter ? options.formatter.call(this, category) : category.name;
+	this.label.attr('text', labelText);
+  }
+
   // create elements for parent categories
   if (this.axis.isGrouped)
     this.addGroupedLabels(category);
@@ -389,6 +398,7 @@ tickProto.addGroupedLabels = function (category) {
       options = axis.options.labels,
       useHTML = options.useHTML,
       css     = options.style,
+      userAttr= options.groupedOptions,
       attr    = { align: 'center' , rotation: options.rotation },
       size    = axis.horiz ? 'height' : 'width',
       depth   = 0,
@@ -399,10 +409,13 @@ tickProto.addGroupedLabels = function (category) {
     if (depth > 0 && !category.tick) {
       // render label element
       this.value = category.name;
-      var name = options.formatter ? options.formatter.call(this, category) : category.name;
+      var name = options.formatter ? options.formatter.call(this, category) : category.name,
+      	  hasOptions = userAttr && userAttr[depth-1],
+     	  mergedAttrs =  hasOptions ? merge(attr, userAttr[depth-1] ) : attr,
+     	  mergedCSS = hasOptions && userAttr[depth-1].style ? merge(css, userAttr[depth-1].style ) : css;
       label = chart.renderer.text(name, 0, 0, useHTML)
-        .attr(attr)
-        .css(css)
+        .attr(mergedAttrs)
+        .css(mergedCSS)
         .add(axis.labelGroup);
 
       // tick properties
@@ -486,7 +499,7 @@ tickProto.render = function (index, old, opacity) {
   function fixOffset(group, treeCat, tick){
   		var ret = 0;
 			if(isFirst) {
-					ret = $.inArray(treeCat.name, treeCat.parent.categories);
+					ret = HA.inArray(treeCat.name, treeCat.parent.categories);
 					ret = ret < 0 ? 0 : ret;
 					return ret;
 			} 
@@ -541,4 +554,4 @@ tickProto.getLabelSize = function () {
     return _tickGetLabelSize.call(this);
 };
 
-}(Highcharts));
+}(Highcharts, HighchartsAdapter));

index.html

@@ -174,7 +174,7 @@ <h3>Usage and demos</h3>
   series: [{
     data: [19, 6, 2, 1, 9, 4, 15, 2, 9, 11, 16, 18]
   }],
-  xAxis: {
+  xAxis: {    
     categories: [{
       name: "America",
       categories: [{
@@ -205,6 +205,49 @@ <h3>Usage and demos</h3>
 </script>
 
 
+<p>For each level you can define subset of styling options. 0-level categories are based on the default Highcharts options.</p>
+
+<pre><code>
+xAxis: {  	
+    labels: {
+        groupedOptions: [{
+            style: {
+                color: 'red' // set red font for labels in 1st-Level  
+            }
+        }, {
+            rotation: -45, // rotate labels for a 2nd-level
+            align: 'right'
+        }],
+        rotation: 0 // 0-level options aren't changed, use them as always
+    },
+    categories: [{
+        name: "America",
+        categories: [{
+            name: "USA",
+            categories: ["New York", "San Francisco"]
+        }, {
+            name: "Canada",
+            categories: ["Toronto", "Vancouver"]
+        }, {
+            name: "Mexico",
+            categories: ["Acapulco", "Leon"]
+        }]
+    }, {
+        name: "Europe",
+        categories: [{
+            name: "United Kingdom",
+            categories: ["London", "Liverpool"]
+        }, {
+            name: "France",
+            categories: ["Paris", "Marseille"]
+        }, {
+            name: "Germany",
+            categories: ["Berlin", "Munich"]
+        }]
+    }]
+}
+</pre></code>
+
 <h3>Code</h3>
 
 <p>The latest code is available on github: <a href="https://github.com/blacklabel/grouped_categories/">https://github.com/blacklabel/grouped_categories/</a></p>

manifest.json

@@ -1,6 +1,6 @@
 {
 	"name": "Grouped-Categories",
-	"version": "1.0.3",
+	"version": "1.0.5",
 	"title": "Grouped Categories",
 	"author": {
 		"name": "Black Label",
@@ -26,7 +26,7 @@
 	"maintainers": [
 		{
 			"name": "Sebastian Bochan",
-			"email": "sebastian2@blacklabel.pl",
+			"email": "sebastian@blacklabel.pl",
 			"url": "http://www.blacklabel.pl"
 		},{
 			"name": "Paweł Fus",