Too long chart axis label title

Question

Say, I have a way too long axis title like the one here: http://jsfiddle.net/KaZMr/
What I would like to achieve is truncating that long title and display it in a hint. I know it can be simply truncated with something like:

//...
title: {
          text: 'Temperature (°C)'.substring(0, 10) + "..." 
       },
//...

But how can I apply hint on it? I know it can be done with svg elements like in this question, but highcharts does not seem to parse such markup correctly inside title.text.
So probably anyone knows a workaround for this?

score 3 · Accepted Answer · edited May 23 '17 at 11:49

I think there are a number of ways to go about solving this issue, all of which involve using the useHTML attribute of the title.

http://api.highcharts.com/highcharts#title.useHTML

Here's a quick and dirty implementation as a starting point.

http://jsfiddle.net/qeQQn/

HTML

<div id="wrapper">
  <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto">
  </div>
  <div id="divCT"><strong>Long Text Message</strong><br />
    This is such a big axis title that it cannot be fully displayed and overlaps everything. So loooooooooooooooooooooooooooooooooooooong</div>
</div>

some of the JavaScript:

    yAxis: {
        title: {
            useHTML: true,
            text: '<span id="highCT">Long Text Message</span>'
        },

...

$("#highCT").on(
    {
        mouseenter: function() {
            $("#divCT").show();
        },
        mouseleave: function() {
            $("#divCT").hide();
        }    
    }
);

CSS

#wrapper {
    position: relative; 
    margin: 0; 
    padding: 0;
}
#highCT {
    text-decoration: none;
}
#divCT {
    position: absolute; 
    top: 100px; 
    left: 40px; 
    width: 300px;
    display: none;   
    z-index: 20000; 
    background-color: #000; 
    color: #FFF;
    font: 10pt Arial, sans-serif;
    padding: 10px;
}

However, I have to wonder what is going on with your chart if you have to use such a long title. Without knowing more and at first glance, it seems you would want to keep the title short and add descriptive text somewhere near the chart that is always visible, or at least visible by other means than hovering/clicking on the side title.

...of sideways interest:
Is it possible to use jQuery .on and hover?

How to change the style of Title attribute inside the anchor tag? (if you want to try to tackle the issue with an a tag on the title)

Wow, that `useHTML` property is just what I was looking for, I guess. Thanks! — Artyom Neustroev, Jun 08 '13 at 20:50

Too long chart axis label title

1 Answers1