CODEWITHSUNDEEP
javascripthighcharts
Castro
Castro

Reputation: 87

Displaying labels near of each bar

I need to place the label (category) for each bar to the right of its bar (as on attached image). The bar's count is from 1 to 20. Temporary solution is

  options.xAxis.labels.align = 'right';
  options.xAxis.labels.rotation = 90;
  options.xAxis.labels.x = 36;
  options.xAxis.labels.y = 7;

But the bars are scaled and its width depends on bar count. So I can't set label position with x and y coordinates, it should be flexible. How can I solve that?

What I should have http://jsfiddle.net/dvasuta/A8LQC/

This is what happens now, if data is less than I expected http://jsfiddle.net/dvasuta/A8LQC/1/

enter image description here

Upvotes: 0

Views: 113

Answers (2)

Mark
Mark

Reputation: 108512

Here's how I'd implement it (and what I think @SebastianBochan is talking about). First, disable the category xAxis labels. Then, in the load event of the chart, loop the points of the last series (since this will be the farthest right bar) and add the "category" label using the Renderer.text method. 

    chart: {
        type: 'column',
        events: {
            load: function(event){
               var lastSeries = this.series[this.series.length-1];
                for (var i = 0; i < lastSeries.points.length; i++){
                    var point = lastSeries.points[i];
                    var text = this.renderer.text(
                        categories[i], 
                        point.plotX + this.plotLeft + (point.pointWidth * 2) + 5, 
                        this.xAxis[0].height - 5
                    ).attr({
                        zIndex: 5,
                        rotation: 90
                    }).add();
                }
            }
        }
    },

Here's a fiddle demonstrating this approach. Run it multiple times to see how it handles varying series length.

EDITS FOR COMMENTS

To place the text in between the bars use something like this:

        events: {
            load: function(event){

               var lastSeries = this.series[this.series.length-1]; 
               var firstSeries = this.series[0];

               // barSpace is the spacing between the bars
               var barSpace = (firstSeries.points[1].plotX - lastSeries.points[0].plotX) / 2;

               for (var i = 0; i < lastSeries.points.length; i++){
                    var point = lastSeries.points[i];                       
                   var text = this.renderer.text(
                        categories[i], 
                        this.plotLeft + point.plotX + barSpace - 3,  //3 is a fudge factor it should be 1/2 the text height
                        this.xAxis[0].height - 5
                    ).attr({
                        zIndex: 5,
                        rotation: 90
                    }).add();
                    console.log(text);
                }
            }
        }

Updated fiddle.

Upvotes: 1

Sebastian Bochan
Sebastian Bochan

Reputation: 37578

As I mentioned on the forum, you can use renderer which can get position from last column in each "column group".

Upvotes: 0

Related Questions