It is currently Thu Oct 27, 2016 12:58 am Advanced search

Auto-wrap long chart titles

Technical support, bug reports and more.

Auto-wrap long chart titles

Postby egret230 » Mon Feb 20, 2012 12:27 am

*** Auto-wrap long chart titles ***

Does the new useHTML feature finally solve this problem? Or do we still need to add <br> tags to wrap long chart titles that extend beyond the width of the chart div?

Also, when my title does wrap to two (or more) lines, is there a way to cause the chart to shrink a little bit, so that the chart title doesn't cover up the actual chart?

This is a problem when a chart is dynamically created - it's not known in advance how long or wordy the chart title is going to be.
User avatar
Posts: 43
Joined: Wed Oct 06, 2010 4:04 pm
Location: Rhode Island, USA

Re: Auto-wrap long chart titles

Postby hfrntt » Thu Feb 23, 2012 1:17 pm

Yes it solves the problem with auto-wrapping text, and no it doesn't shrink the chart, you can see this here:

I filled a bug report here: ... issues/776
Slawek Kolodziej
Highcharts support team
Posts: 6394
Joined: Mon Aug 30, 2010 10:41 am

Re: Auto-wrap long chart titles

Postby egret230 » Mon Feb 27, 2012 12:05 am

To re-state the original problem: long chart titles don't wrap (the useHTML feature solves this problem)

Additional Problem #1: the wrapped chart title covers up the chart

Additional Problem #2: the setSize(newWidth, newHeight, false) method does not do anything to the chart title. If you make the chart twice as wide, for example, the width of the chart title stays the same as it was originally.

I've solved all of these problems.

Step 1: use the useHTML feature with the chart title

Step 2: in the BODY of the html page, have a DIV with class="ui-helper-hidden-accessible" (requires jQuery and jQuery UI - this is a jQuery UI class that effectively hides the div without actually hiding it, so that its width and height attributes can be obtained. The starting width of this div should be set to approx. 90% of the starting width of the chart canvas.

Step 3: before creating the chart object, first set the contents of this div to the chart title - with jQuery: $("#whatever").html( chartTitleVar ); Then obtain the resulting height of this div and use that to set the marginTop attribute of the chart -- this will give you the necessary space above the chart for the title, without the title (which may wrap several lines) covering up the actual chart.

Step 4: when resizing the chart (which I do by putting the chart canvas inside a div which uses the jQuery UI .resizable() method, I do the following:

Code: Select all
      resize: function() {
      stop: function() {

function resizeChart does this: newChart.setSize(newWidth, newHeight, false);

function updateNewChart - this re-creates the entire chart object - but first it sets the width of the special div described above to 90% of the new chart canvas width, and then repeats step #3 above

The end result is pretty slick - I have a completely resizable chart, where the chart title wraps however many lines it needs to without covering up the chart - except for a slight hiccup at the very end of the resize, since the animation happens when I recreate the entire chart obect.

Hope that helps somebody...
User avatar
Posts: 43
Joined: Wed Oct 06, 2010 4:04 pm
Location: Rhode Island, USA

Return to Highcharts Usage

Who is online

Users browsing this forum: No registered users and 10 guests