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

563
Views
Legends in Chart Js don't appears

The legend is not shown in Chart JS, I have read documentation and others but nothing... Only the label in which you typed a phrase is displayed. I know it's something very simple but it's making me waste my time. my chart

Code:

type: 'bar',
                data: {
                    labels: [{% for elemento1 in mesesEvolucion %}'{{ elemento1 }}',{% endfor %} ],
                    datasets: [{
                            label: 'Evolucion de el último año',
                            data: [{% for elemento1 in elemento.datosGraficaEvolucion %}{{ elemento1.mesX }},{% endfor %} ],
                            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: {
                    scales: {
                        y: {
                            beginAtZero: true,
                            ticks: {color: 'white'}
                        },
                        x: {
                            beginAtZero: true,
                            ticks: {color: 'white'}
                        }
                    },
                    plugins: {
                        legend: {
                            display: true,
                            labels: {
                                color: 'rgb(255, 255, 255)'
                            }
                        },
                        title: {
                            display: true,
                            text: 'Evolución anual',
                            color: '#FFFFFF',
                            font: {
                                size: '14'
                            }
                        }
                    }
                }
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Try this:

plugins: {
    legend: {
      position: "top",
      display: true,
        labels: {
          color: "#0d6dfdb0",
          font: {
            family: "IRANSansWeb" 
          }
        },
        tooltip: {
          bodyFont: {
            family: "IRANSansWeb" 
          },
          titleFont: {
            family: "IRANSansWeb" 
          }
        }

    },
    title: {
      display: true,
      text: "some title",
      color: "rgb(16, 97, 219)",
      font: {
        family: "IRANSansWeb",
      },
    },
  },
about 4 years ago · Juan Pablo Isaza Report
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!