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

230
Visualizações
chart.js break legend into next line

I have a requirement where I need to break legends into next line in chart.js. I have 2 sets of legends with ordered group & ate group. I need all the ordered group in one line & ate group in one line. I'm using chart.js version 2.9.3 & ng2 charts version : 2.2.3 with Angular 10. I have been stuck for a while with this.

1st line should have : Ordered leaf Ordered apple Ordered mango Ordered Orange & then it should break into next line for next set /n

2nd line should have : ate leaf ate apple ate mango ate Orange.

Current behaviour refer to image link below.

[1]: https://i.stack.imgur.com/SZtLv.png

my html:

                     <div>
                    <canvas baseChart 
                    [datasets]="chartData"
                    [labels]="chartLabels"
                    [options]="chartOptions"
                    [legend]="chartLegend"
                    [chartType]="bar">
                  </canvas>
                   </div>

My component:

              this.chartData = data.Datasets;
              this.chartLabels = data.labels
              this.chartLegend= true;
              this.chartOptions= {
                 scaleShowVerticalLines: false,
                 responsive: true,
                 title: {
                    display: true,
                    text: "Vegetables sale",
                 },
                 legend: {
                    position: "bottom",
                    labels: {
                       usePointStyle: true,
                       fontSize: 10
                 },
              },
                 scales: {
                    yAxes: [{
                       stacked: true,
                       ticks: {
                          beginAtZero: true
                       },
                       scaleLabel: {
                          display: true,
                          labelString: 'Total'
                       }
                    }],
                    xAxes: [{
                       stacked: true,
                       barPercentage: 0.7,
                       categoryPercentage: 0.7
                    }]
                 }
              };

Note: I'm not using HTML legends.

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