Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

1.1K
Visualizações
Chartjs Tooltip Line Breaks

Is it possible to get line breaks in chartjs tooltips?

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

I want to replace ": " with a new line.

I've tried with &#013;, \u000D, \n and <br /> to no avail.

Update: I have changed my accepted answer now that chart.js is on version 2.

over 4 years ago · Santiago Trujillo
3 Respostas
Responde à pergunta

0

If you are using 2.0.0-beta2, you can use tooltip callback and return array of strings there.

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

            return multistringText;
        }
    }
}
over 4 years ago · Santiago Trujillo Relatório

0

Actually all tool-tip callbacks support multiple lines of text, and you can use label callback as usual. It renders data label as tool-tip text by default.

Quoted from documentation:

All functions must return either a string or an array of strings. Arrays of strings are treated as multiple lines of text.

Example code:

tooltips: {
    callbacks: {
      label: (tooltipItem, data) => {
        if (tooltipItem.index % 2)
          return ['Item 1', 'Item 2', 'Item 3'];
        else
          return 'Single line';
      }
    }
  }
over 4 years ago · Santiago Trujillo Relatório

0

You can use tooltips footer callback,it will also not render coloured square for each list.

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'];
    }
  }
}

over 4 years ago · Santiago Trujillo Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda