Treemap dataLabels missing from graph

[mikegodber]

Hi,

I have been starting to work with the treemaps and I can see they will be really useful to me but I am having some trouble with the data labels. Basically if the name is too long to fit in one line and it then overlaps another the label will not be shown.

I had hoped justify would work but it doesn't seem to so i wrote a custom formatter to do the work which can be seen here - http://jsfiddle.net/rd8bmjLs/5/

Unfortunately I want to embed an export of this chart direct into a pdf report which is created server side and I am unable to pass functions through to the export server as they end up surrounded by double quotes.

Am I missing some settings to make this work, or is this a bug?

[TorsteinHonsi]

Currently we don't have this feature of line-wrapping the text to the box.

@jon-a-nygaard Actually it seems quite simple to add this to the Column.prototype.alignDataLabel. Just add this to the block if (dlBox).

            dataLabel.css({
                width: alignTo.width
            });

The problem is that it is not correctly aligned to the center. If we manage to fix this, we could add an option to wrap all boxed data labels, and this option should be true by default on heatmap and treemap.

[mikegodber]

Great, thanks guys. For now I have just added my formatter into my custom export server build but it is far from perfect!

[jon-a-nygaard]

Rewrote drawDataLabels in treemap to simplify and address this issue.
This issue is fixed in the next maintenance release, alternatively use the quick fix below.
NB!: Users of the export module will still have to wait for the release, for the exported images to be correct.

Quick fix:

After loading the treemap.src.js, and before creating the chart, include the following code snippet:

Highcharts.seriesTypes.treemap.drawDataLabels = function () {
    var series = this,
        dataLabelsGroup = series.dataLabelsGroup,
        points = series.points,
        options,
        level;
    Highcharts.each(points, function (point) {
        level = series.levelMap[point.level];
        // Set options to new object to avoid problems with scope
        options = {style: {}};

        // If not a leaf, then label should be disabled as default
        if (!point.isLeaf) {
            options.enabled = false;
        }

        // If options for level exists, include them as well
        if (level && level.dataLabels) {
            options = Highcharts.merge(options, level.dataLabels);
            series._hasPointLabels = true;
        }

        // Set dataLabel width to the width of the point shape.
        if (point.shapeArgs) {
            options.style.width = point.shapeArgs.width;
        }

        // Merge custom options with point options
        point.dlOptions = Highcharts.merge(options, point.options.dataLabels);
    });

    this.dataLabelsGroup = this.group; // Draw dataLabels in same group as points, because of z-index on hover
    Highcharts.Series.prototype.drawDataLabels.call(this);
    this.dataLabelsGroup = dataLabelsGroup;
};

[mikegodber]

Thanks guys, I look forward to seeing this in action

[pawelfus]

I think above snippet may not work, for example each / merge and Series.prototype may be undefined.

[jon-a-nygaard]

@pawelfus you are right, I forgot to edit those references. I have updated the snippet above, and I think it should work fine now.
Thanks for the heads-up.