CODEWITHSUNDEEP
csshighchartslegend
Dounia Azzi
Dounia Azzi

Reputation: 11

Add a max width to legend in Highcharts

I created a column chart with an horizontal middle left legend.

But with this configuration (horizontal + middle + left), the chart is almost not visible.

The legend should be wrapped instead of taking all the available place.

A solution would be to set a max width to the legend. But how can I do that ?

Here is an example : http://jsfiddle.net/zjp8m60w/

    legend: {
        align: 'left',
        verticalAlign: 'middle',
        layout: 'horizontal', 
        floating:false,
    }

Thank you !

Upvotes: 1

Views: 6495

Answers (2)

David Kiff
David Kiff

Reputation: 1210

The examples above are a fixed width (rather than max width). You can achieve a max character width like so:

labelFormatter: function () {
            const newName = this.name.substring(0, Math.min(this.name.length, 22));

            return newName.length === this.name.length ? newName : newName + "...";
        },

This goes inside the legend settings.

Upvotes: 1

daan.desmedt
daan.desmedt

Reputation: 3820

What about changing to align them vertically, so they don't overlay the graph. With the itemWidth parameter you can set the width of the labels.

legend: {
    align: 'left',
    verticalAlign: 'middle',
    floating:false,
    itemWidth: 80,
    floating: false,
    layout: 'vertical'
}

Updated JSfiddle here

Horizontal alignment with word-wrap

legend: {
    align: 'left',
    verticalAlign: 'middle',
    floating: false,
    width: 175,
    layout: 'horizontal',
    itemStyle : '{ "word-wrap": "break-word"}'
}

See JSFiddle here

Upvotes: 2

Related Questions