Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

153
Vistas
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 la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda