diff --git a/addons/survey/static/src/js/survey_session_chart.js b/addons/survey/static/src/js/survey_session_chart.js
index e370bcbfcf8..83b9a2e652e 100644
--- a/addons/survey/static/src/js/survey_session_chart.js
+++ b/addons/survey/static/src/js/survey_session_chart.js
@@ -188,6 +188,10 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
* Which will be displayed as "this is an
example of
a label"
* Obviously, the more labels you have, the more columns, and less screen space is available.
*
+ * When the screen space is too small for long words, those long words are split over multiple rows.
+ * At 6 chars per row, the above example becomes ["this", "is an", "examp-", "le of", "a label"]
+ * Which is displayed as "this
is an
examp-
le of
a label"
+ *
* We also adapt the font size based on the width available in the chart.
*
* So we counterbalance multiple times:
@@ -236,8 +240,13 @@ publicWidget.registry.SurveySessionChart = publicWidget.Widget.extend({
let resultLines = [];
let currentLine = [];
for (let i = 0; i < words.length; i++) {
- // If the word we are adding exceed already the number of characters for the line, we add it anyway before passing to a new line
- currentLine.push(words[i]);
+ // Chop down words that do not fit on a single line, add each part on its own line.
+ let word = words[i];
+ while (word.length > charPerLine) {
+ resultLines.push(word.slice(0, charPerLine - 1) + '-');
+ word = word.slice(charPerLine - 1);
+ }
+ currentLine.push(word);
// Continue to add words in the line if there is enough space and if there is at least one more word to add
const nextWord = i+1 < words.length ? words[i+1] : null;