[FEATURE] Text wrap long legend text

[nanospeck]

My ChartJs legend text is overflowing in the same line when the text is too long. Is there any parameter that I can use to enable text-wrap.

Expected Behavior

It will be nice to have something like the following, if the width is exceeding the set value. It will be auto-wrapped.

legend: {
    itemStyle: {
        width: 90 // or whatever, auto-wrap
    },
}

Current Behavior

Legend text is overflowing in the same line when the text is too long

Possible Solution

As suggested above

Context

While assigning a long text for legend

Environment

• Chart.js version: 2.3.0
• Browser name and version: All

[nanospeck]

If someone familiar with the core can give some pointers and direction, actually I can try to help.

[etimberg]

@nanospeck the legend code is in https://github.com/chartjs/Chart.js/blob/master/src/core/core.legend.js

Off the top of my head, I'm not sure what the best thing to start with is. You'd need changes to fit which measures the size of the legend and also changes to the drawing code

[PabloMCampos]

I read other articles and all concludes that you need to remove native chart.js legend and replace by another html div to have multiple line legends. I think that is important to have an option for this in the bundle of chart.js, not as outside solution

[riancintiyo]

You can update and move the legend position, change the font size, or even deactivate the legend dynamically by using onResize function (https://www.chartjs.org/docs/latest/configuration/responsive.html), this function passed two arguments which are Context and size.

So, we can use onResize function to mutating the option configuration (the documentation for this : (https://www.chartjs.org/docs/latest/developers/updates.html) . In that documentation example shows that you can use this function to mutating the option configuration :

function updateConfigByMutating(chart) {
    chart.options.plugins.title.text = 'new title';
    chart.update();
}

From here, we can utilize the query inside function updateConfigByMutating(chart) place it inside onResize method and set whatever screen size condition.

[poojavirgo]

Hi , Is this issue is open , i want to work on it.

[raushan9jnv]

yes open

[Sagar1219]

Oh Come one!!! Take this live, we need it or help with alternate ( case: PieChart )

[pvjhansen]

My Grandma is faster and she dead. Get it done

[dangreen]

Hi guys. If you want to customize the legend visually, please use an HTML legend. Due to Chart.js using canvas, we can't implement every requested feature cause this will bloat the code.