Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

151
Views
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
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!