0

Estou trabalhando em um gráfico, e estou tentando colocar um Subtitle que varia de acordo com o valor que o usuário escolhe. Não achei em nenhum doc como fazer isso, e tentei usar um Subtitle:{text:}, mas não funciona, e também não dá erro. Alguém sabe de alguma alternativa? Meu código abaixo:

function chart_graph(){

  var ctx = document.getElementsByClassName("bar-chart","line-chart");

  var chartGraph = new Chart(ctx, { 
                type: 'bar', 
                data: { 
                  labels: dataBar1 , 
                datasets: [{ type: 'line',
                label:"Dias de Estoque", 
                data: dataBar2,
                yAxisID: "y-axis-0",
                backgroundColor: "rgba(250,250,250,0.0)",
                borderColor:     "rgba(255,99,132,0.9)",
                borderWidth:  4,
                },
                {
                label:"Valor de Estoque", 
                data: dataBar4,
                yAxisID: "y-axis-1",
                backgroundColor: "rgba(151,187,205,0.9)",
                },
                ] },
                options: {
                  legend: {
                    position: 'bottom'
                  },
                  title: {
                    display: true,
                    text: 'DIAS E VALOR(R$) EM ESTOQUE', 
                    subtitle: {
                    display: true,
                    text: subtitle_graph,  

                  },
                  },
                tooltips: {
                mode: 'label'
                },
                responsive: true,
                scales: {
                yAxes: [
                  {
                    gridLines:{

                      lineWidth:4,
                      zeroLineWidth : 4,
                              },
                stacked: true,
                position: "right",
                yAxisID: "y-axis-0",
                ticks: { min: 0, beginAtZero: true, 
                       },
                scaleLabel: {
                            display: true,
                            labelString: 'DIAS',
                               },
                },
                 {
                stacked: false,
                position: "left",
                yAxisID: "y-axis-1", 
                ticks: { min: 0, 
                         beginAtZero: true,
                         crosshair:{
                          enabled: true,
                          valueFormatString: "#,##0.##",

                      },
                 },
                scaleLabel: {
                            display: true,
                            labelString: 'VALOR(R$)',

                               },          
                  }    ]
                        }
                          }   
                             });
                 };

1 Resposta 1

1

Você pode passar um string array para a propriedade title.text, como notado na documentação oficial:

var options = {
  type: 'pie',
  data: {
    labels: ["Opção 1", "Opção 2", "Opção 3"],
    datasets: [
        {
          data: [12, 19, 3]
        }
        ]
  },
  options: {
    title: {
        display: true,
        position: 'top',
        text: ['Título','Subtítulo'],
        fontSize: 14
    },
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);

Renderização do código exemplo


Outra opção é usar um plugin como o Chart.js Subtitle Plugin, que permite maior flexibilidade que a opção anterior.

8
  • Então, eu tentei fazer dessa maneira(array)(text: ['DIAS E VALOR EM ESTOQUE',subtitle_graph],), e ficou assim: DIAS E VALOR EM ESTOQUE, MP-NAC Ele lê e printa exatamente o que tem dentro da array, inclusive a vírgula :( Commented 8/03/2019 às 16:42
  • @MarliBenicio aqui funcionou, veja: jsfiddle.net/qopkr0h2. Confira se estamos usando a mesma versão e a passagem do array está correta (no seu comentário o subtitle_graph é mesmo uma string já definida?). Commented 8/03/2019 às 17:24
  • Estou com essa: "cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" Então, sim. Essa variável(subtitle_graph), veio do controller(ruby on rails), trabalhei ela(ajax) e trouxe pra dentro do chart.js . COncordo que dessa maneira ['DIAS E VALOR EM ESTOQUE', subtitle_graph], deveria funcionar, mas ele está entendendo a vírgula como uma string também e printando na tela, e tudo na mesma linha. Será que é por conta de versão? Commented 8/03/2019 às 18:19
  • É sim! Li o changelog da versão 2.7.0 (que meu exemplo usa) e nela foi implementado o suporte à títulos multi-linha. Commented 9/03/2019 às 23:24
  • Nossa, muito obrigada!! É isso mesmo haha. Finalmente concluí a task aqui. Eu estava tentando versões anteriores e não me toquei q poderia ser uma mais nova. :) Commented 11/03/2019 às 11:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .