CODEWITHSUNDEEP
highchartsaxistitleoffset
luftikus143
luftikus143

Reputation: 1285

Automated y-axis-title-offset in Highcharts possible when having varying length of y-axis title?

I've put my y-axis title on the top of the axis, in readable manner (so, turned 90°; like here). But the thing is that the longer the y-axis title, the more the graph is being pushed away. Which I can correct with "offset". 

title: 
{
  text: "Very important data here",
  align: 'high',
  rotation: 0,
}

Now, I have quite a bit of charts. And all of them have three translations (de, en, fr) as text elements within the same chart. So, the code is always the same. No possibility to adapt manually for each translation the offset.

Thus, I am trying to find a formula which calculates the correct offset for short as well as long titles (like here). Now, I am using "offset: txt.length * -5.5"; but that works less and less well the longer the title is. Tried to use SQRT, but not really successful. 

offset: txt.length * -5.5,

Does anyone have a neat way to do that?

Upvotes: 1

Views: 1342

Answers (2)

gaurang hattangady
gaurang hattangady

Reputation: 11

the above code wont work when the series is dynamically added to the graphs. In such a case, just put the above code into afterAnimate event under series object.

plotOptions:{
                series:{
                    events:{
                        afterAnimate: function(){
                            console.log('test', this.chart.yAxis[0]);
                            var chart = this.chart,
                            yAxis = chart.yAxis[0],
                            tp = yAxis.tickPositions,
                            firstLabel = yAxis.ticks[tp[0]].label.getBBox().width,
                            lastLabel = yAxis.ticks[tp[tp.length - 1]].label.getBBox().width,
                            bb = yAxis.axisTitle.getBBox();

                            yAxis.update({
                                title: {
                                    offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) + 15
                                }
                            });
                        }
                    }
                },
            }

Upvotes: 1

Paweł Fus
Paweł Fus

Reputation: 45079

You can let Highcharts draw default chart with wrong offset, and then calculate what is the width of title and update simply offset:

chart: {
        events: {
            load: function () {
                var chart = this,
                    yAxis = chart.yAxis[0],
                    firstLabel = yAxis.ticks[yAxis.tickPositions[0]].labelBBox.width,
                    lastLabel = yAxis.ticks[yAxis.tickPositions[yAxis.tickAmount - 1]].labelBBox.width,
                    bb = yAxis.axisTitle.getBBox();
                yAxis.update({
                    title: {
                        offset: -bb.width + (firstLabel > lastLabel ? firstLabel : lastLabel) //make sure that will be enough space for yAxis labels
                    }
                });
            }
        }
    }

And jsFiddle: http://jsfiddle.net/kL5md/6/

Highcharts 4.x demo: http://jsfiddle.net/kL5md/21/

Upvotes: 4

Related Questions