diff --git a/README.md b/README.md
index a791183..9db9623 100644
--- a/README.md
+++ b/README.md
@@ -156,9 +156,55 @@ window.chart = new Highcharts.Chart({
}]
}
});
+
+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/)
diff --git a/grouped-categories.js b/grouped-categories.js
index 3202c57..adb0d76 100644
--- a/grouped-categories.js
+++ b/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));
diff --git a/index.html b/index.html
index 2f132e4..611450d 100644
--- a/index.html
+++ b/index.html
@@ -174,7 +174,7 @@ Usage and demos
series: [{
data: [19, 6, 2, 1, 9, 4, 15, 2, 9, 11, 16, 18]
}],
- xAxis: {
+ xAxis: {
categories: [{
name: "America",
categories: [{
@@ -205,6 +205,49 @@ Usage and demos
+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/
diff --git a/manifest.json b/manifest.json
index c2e42ec..7d8b89b 100644
--- a/manifest.json
+++ b/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",