put Subtitle on Chart.js

Question

I am working on a chart, and I am trying to put a Subtitle that varies according to the value that the user chooses. I didn’t find in any doc how to do this, and I tried to use Subtitle:{text:}, but it doesn’t work, and it doesn’t work. Does anyone know of any alternatives? My code below:

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$)',

                               },          
                  }    ]
                        }
                          }   
                             });
                 };

Answer 1

You can pass a string array to the property title.text, as noted in official documentation:

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);

---

Another option is to use a plugin like Chart.js Subtitle Plugin, which allows greater flexibility than the previous option.