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

152
Visualizações
chart.js stacked horizontal bar labeling

I am trying to figure out how to label each stacked bar on hover with mouse, show a total across the whole stack and a total for that piece of the bar.

currently my code shows undefined for most of the bar names or shows random x axis labels, I've tired looking into other questions but it doesn't seem like anyone else has had this issue

here's my data

    data =  { x: "Sunday", y: 850, Labels: "Irelo" },
        { x: "Monday", y: 3000, Labels: "Irelo" },
        { x: "Sunday", y: 6748.4, Labels: "Quote-runner" },
        { x: "Monday", y: 2400, Labels: "Quote-runner" },
        { x: "Tuesday", y: 2900, Labels: "Quote-runner" },
        { x: "Wednesday", y: 7600, Labels: "Quote-runner" },
        

and

my chart code

        var myChart = new Chart(ctx, {
            type: 'bar',
            data: {
               labels: ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
                datasets: [{
                    data:  data,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                    ],
                    borderWidth: 1
                }]
            },
            options: {
            plugins: {
              title: {
                display: true,
                text: 'Binder'
              },
        
            },
            responsive: true,
            interaction: {
              intersect: false,
            },
            scales: {
              x: {
                stacked: false,
                type: 'category',
                labels: ['January', 'February', 'March', 'April', 'May', 'June']
              },
              y: {
                stacked: true
              }
            }
          }
        
        });
about 4 years ago · Juan Pablo Isaza
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