Auto-wrap long chart titles

[egret230]

*** 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.

[hfrntt]

Yes it solves the problem with auto-wrapping text, and no it doesn't shrink the chart, you can see this here: http://highcharts.com/jsbin/uvoraw/edit

I filled a bug report here: https://github.com/highslide-software/h ... issues/776

[egret230]

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

   $("div#chart-envelope").resizable({
      resize: function() {
         resizeChart();
      },
      stop: function() {
         updateNewChart();
      }
   });

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...