Chart.js and long labels

charts chart.js radar-chart
user2857678 picture user2857678 · Jan 28, 2014 · Viewed 36.4k times · Source

I use Chart.js to display a Radar Chart. My problem is that some labels are very long : the chart can't be display or it appears very small.

So, is there a way to break lines or to assign a max-width to the labels?

Thank you for your help!

Answer

Arivan Bastos picture Arivan Bastos · Jun 18, 2016

For Chart.js 2.0+ you can use an array as label:

Quoting the DOCs:

"Usage: If a label is an array as opposed to a string i.e. [["June","2015"], "July"] then each element is treated as a seperate line."

var data = {
   labels: [["My", "long", "long", "long", "label"], "another label",...],
   ...
}

Related questions

Dynamically update values of a chartjs chart

I created an basic bar chart using chartjs and it works fine. Now I want to update the values on a time based interval. My problem is that after I created the chart, I do not know how to update …

Read More
Click events on Pie Charts in Chart.js

I've got a question regard Chart.js. I've drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value …

Read More
How to clear a chart from a canvas so that hover events cannot be triggered?

I'm using Chartjs to display a Line Chart and this works fine: // get line chart canvas var targetCanvas = document.getElementById('chartCanvas').getContext('2d'); // draw line chart var chart = new Chart(targetCanvas).Line(chartData); But the problem occurs when I …

Read More