Ability to render legend with label/values in columns about amcharts4 HOT 14 CLOSED

Labels are allowed to overflow by default. You can set them to be auto-truncated, though:

chart.legend.labels.template.maxWidth = 80;
chart.legend.labels.template.truncate = true;

This will truncate the labels at 80px point, however will not influence the total width of the Legend.

We're looking for an intelligent way to manipulate width of the legend.

Will keep you posted. In the interim, the above might help.

from amcharts4.

This doesn't seem to work as I would expect:

https://codepen.io/anon/pen/aKbaNE

The maxWidth seems to affect each label differently. Also, I'm not really want to set an maxWidth, although I suppose I could make it an adapter an calculate the width I want based on the chart width.

I will say if I set both a width and maxWidth, then I do get a column-like layout:

chart.legend.labels.template.width = 60;
chart.legend.labels.template.maxWidth = 60;
chart.legend.labels.template.truncate = true;

For example:
https://codepen.io/anon/pen/ZREMLK

Is it super expensive to make the labels width and maxWidth adapters?

from amcharts4.

Also, it doesn't appear that the width works as expected. The documentation states:

Element's absolute or relative width.

The width can either be absolute, set in numer pixels, or relative, set in Percent.

Relative width will be calculated using closest measured ancestor Container.

I've tried doing:

chart.legend.labels.template.width = "80%";

and that doesn't seem to work at all.

Also, the Label class indicates I should be able to use an adapter on the width:

chart.legend.labels.template.adapter.add("width", function (width, target){
	console.log("Chart Legend Label Width -> %s", width);
	return width;
});

However, that adapter is never triggered. If I change to maxWidth or minWidth it works, but it still seems very inconsistent on where the truncation starts.

from amcharts4.

This better shows off the weirdness with truncating:

https://codepen.io/anon/pen/eKmdME

Instead of truncating, is there a way to just hide overflow?

from amcharts4.

Well, that's because it tries to truncate at full words, and only truncates in the middle of a word if there's only one word left.

I suppose we can add a property which disables truncating on full words. Would that work for you?

from amcharts4.

Having the ability to non truncate on whole words would be nice and would definitely help to solve our issue.

Truncating at whole words, I would think, is generally the desired effect but when charts are trying to render in small areas, it doesn't work very well. Better to show as much of the text as it can.

In the meantime, is there a way to set the overflow to hidden? Setting the maxWidth w/out truncate still ends up making the text overlap with the value labels.

from amcharts4.

I don't think there's currently a way to hide overflow. SVG CSS doesn't work exactly the same way as in HTML.

Disabling word-crop should provide a good enough alternative.

from amcharts4.

Added in dev Label.fullWords. Will roll into next release.

from amcharts4.

Implemented in 4.0.0-beta.27 (changelog)

from amcharts4.

Perhaps amCharts isn't updated with the beta version 27 yet, but shouldn't the following crop in the middle of the word?

https://codepen.io/anon/pen/MXamaJ

Or do I have the syntax wrong?

Could someone correct my example?

Thanks!

from amcharts4.

Hm, indeed something's not entirely right. Back to testing.

from amcharts4.

Here is a correct syntax to achieve this:
https://codepen.io/team/amcharts/pen/zmjjZR

And there will be an update today which will make truncating better.

from amcharts4.

Fixed/implemented in 4.0.0-beta.61.

[4.0.0-beta.61] - 2018-10-19

Changed

• If element has url set, when clicked, it will now parse for data placeholders in curcly brackets, e.g. "{category}" allowing have dynamic data-driven URLs. Note, the elements are not url-encoded so you need to specify encoding manually, e.g.: series.columns.template.url = "https://www.google.com/search?q={category.urlEncode()}";.

Fixed

• Label.fullWords = false was not working properly.
• AxisLabelCircular was positioning labels incorrectly, if label.radius was negative (since 59).
• "grid" layout in Container was incorrectly layouting elements if their width was set in percent.
• [IE] Multi-line truncated labels were not working properly on IE.
• [IE] was incorrectly zIndexing elemens (since version 56).
• [IE] tooltip initial flicker solved.
• [IE] was incorrectly sorting multiple series tooltips (if Cursor was used).

Full change log.

Make sure you clear your browser cache after upgrading. And feel free to contact us again if you are still experiencing this issue.

from amcharts4.

I tried syntax recommended by @zeroin in my codepen (used for #817), https://codepen.io/npc42/pen/MZNgpe?editors=0010, but for some reason only the first letter of the legend label is shown, even if I increase legend.width to 100, 120 and so on. Perhaps JSON causes an issue?

from amcharts4.