CODEWITHSUNDEEP
javascripthighcharts
pfifas
pfifas

Reputation: 592

How to get proper stack labels with 'datetime' axis?

First off, the fiddle to my question is here: http://jsfiddle.net/pfifas/aTh7F/

The problem

I want to display the sum of the values of all series at each point on the horizontal axis as stack labels above each stack. Because I have negative stacks and I do not want to display positive and negative totals above and beneath separately, I set up a formatter function manually (lines 42 through 50 in the fiddle). The stack labels that I want should be the sum over all values at a given point, i.e. the sum of the positive stacks minus the sum of all negative stacks. E.g. if the data series at the first point is 

data: [1,-2,3,4]

I would like the stack label to display a "6" above the stacked bar. My formatter function works fine with data series of the sort

data: [1,-2,3,4]

But once I add a date variable to each series like

data: [
[Date.UTC(2010, 0, 1), 4],
[Date.UTC(2010, 3, 1), 15],
[Date.UTC(2010, 6, 1), 17],
[Date.UTC(2010, 9, 1), 10]
]

the stack labels are not displayed anymore. I think I am making a mistake with the indexing of the array in the formatter function. How do I have to change the indexing to achieve the correct result?

On a different note, where can I learn more about which variables are available inside the formatter environment and how to handle them in highcharts?

Edit:

In response to Onkloss answer, I should highlight that this issue is related to setting the axis to type 'datetime', not to whether the array of data is multidimensional (as the previous question title was suggesting).

Upvotes: 0

Views: 277

Answers (2)

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

The issue is the use of this.x here:

for (i = 0; i < 4; i++) {
    sum += series[i].yData[this.x];
}

For "normal" x-axis types this works well since you can open the yData by index. In your case it will end up trying to find something like series[0].yData[1262304000000], which won't work.

I'm not aware of any easy way to find the relationship between the timestamp this.x and which index that has on the x-axis. My solution uses another for loop to compare the timestamp from this.x with the xData array, and if it matches we use the data in the sum, as shown in this updated formatter:

formatter: function () {
    // If doing negative, ignore
    if(this.total <= 0)
        return;

    var sum = 0;
    var series = this.axis.series;

    for (var i = 0; i < series.length; i++){
        for(var j = 0; j < series[i].xData.length; j++) {
            if(series[i].options.type == 'column' && series[i].xData[j] == this.x) {
                sum += series[i].yData[j];
                break;
            }
        }
    }

    return sum;
}

This updated JSFiddle shows it in action.

Upvotes: 1

Barbara Laird
Barbara Laird

Reputation: 12717

If I understand what you're asking for correctly, the following formatter function should work:

        formatter: function () {
            return this.total >= 0 ?this.total : null ;
        },

http://jsfiddle.net/aTh7F/1/

As to the available options in the formatter function, http://api.highcharts.com/highcharts#plotOptions.column.dataLabels.formatter should help. But, I tend to just put a breakpoint in the function and inspect what this is. :)

Upvotes: 1

Related Questions