Legends in Chart Js don't appears

Question

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

Does any of these answer your question? https://stackoverflow.com/a/67520525/2358409 or https://stackoverflow.com/a/67521129/2358409 — uminder, May 27 '22 at 08:39

score 0 · Answer 1 · answered May 27 '22 at 08:58

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",
      },
    },
  },

answered May 27 '22 at 08:58

Mohammad Taheri

348
2
9

It has not worked for me but thank you very much, I need to have 12 legends. – Esteban May 27 '22 at 09:11
you're welcome. check if this link helps: https://jsfiddle.net/r491ge8z/7/ I think you should separate your data into different objects in datasets Array in this link you can see the multiple legends: https://stackoverflow.com/questions/59322507/combining-multiple-legend-elements-in-chart-js – Mohammad Taheri May 27 '22 at 11:07

Legends in Chart Js don't appears

1 Answers1