CODEWITHSUNDEEP
highchartscategories
Lea Cohen
Lea Cohen

Reputation: 8190

Show categories of 2 legends

I have a chart that has 2 legends. The status legend is created using the Highcharts api, and the years legend is external HTML which reloads the page with the number of columns per status as years are selected.

Most everything works fine, but one important thing I haven't been able to do is show the year numbers under the columns: enter image description here

Instead, all that appears under the columns is the areas in which the statuses are applied (happens automatically with Highcharts): enter image description here

I have the data - I know what years are supposed to appear, because I get them in the url. My only trouble is getting them under the columns.

How can I show the years under the columns?

Upvotes: 1

Views: 47

Answers (1)

Lea Cohen
Lea Cohen

Reputation: 8190

As I said, I have the data, and all I need is a means with which to enter it to the right place.

Thanks to the Highcharts detailed documentation (It's really awsome! ), and the flexibility of their api, I managed to find the dolution - and implement it - quite easily.

What I needed to understand was that I wanted to alter the xAxis labels. Fortunately, Highcharts enables the formatter attribute, which enables customizing the labels to our hearts content:

formatter: function() {
    var ret = "";
    // get the relevant years from the "yid" parameter in the url:
    var yearsForColumn = getYidValFromUrl().split("_").sort().join(" "); 
    // show the original lbel value (this.value), and under that, show the years:
    ret = "<div style=\"text-align:center;\"><span>" + this.value + "</span><br><span>" + yearsForColumn + "</span></div>";
    return ret;
}

Upvotes: 1

Related Questions