Разбивка строк подсказки Chartjs

Можно ли получить разрывы строк в подсказках chartjs?

tooltipTemplate: "<%if (label){%><%=label%>: <%}%><%= value %>"

Я хочу заменить ":" на новую строку.

Я пробовал с , \u000D, \n и <br /> безрезультатно.

Обновление: Теперь я изменил принятый ответ, что chart.js находится на версии 2. p >

Ответ 1

Если вы используете 2.0.0-beta2, вы можете использовать обратный вызов tooltip и возвращать массив строк.

tooltips: {
    mode: 'single',
    callbacks: {
        afterBody: function(data) {
            var multistringText = ['first string'];
            // do some stuff
            multistringText.push('another string');

            return multistringText;
        }
    }
}

Ответ 2

В этот момент времени невозможно добавить разрывы строк во всплывающую подсказку или метку оси. В настоящее время разработчиками являются варианты реализации обсуждения; обсуждение можно найти Разрешить обертывание меток осей (проблема с github).

Ответ 3

Вы можете использовать обратный вызов нижнего колонтитула всплывающих подсказок, он также не будет отображать цветной квадрат для каждого списка.

tooltips: {
  callbacks: {
    label: function(tooltipItem, data) {
      let label = data.datasets[tooltipItem.datasetIndex].label;
      let value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
      return label + ': ' + value;
    },
    footer: function(tooltipItems, data) {
      return ['new line', 'another line'];
    }
  }
}

Ответ 4

Actuall все обратные вызовы всплывающих подсказок поддерживают несколько строк текста, и вы можете использовать обратный вызов label, как обычно. Он по умолчанию помещает метку данных в текст подсказки.

Цитата из документация:

Все функции должны возвращать либо строку, либо массив строк. Массивы строк рассматриваются как несколько строк текста.

Пример кода:

tooltips: { callbacks: { label: (tooltipItem, data) => { if (tooltipItem.index % 2) return ['Item 1', 'Item 2', 'Item 3']; else return 'Single line'; } } }