[Solved]-In Chart.js set chart title, name of x axis and y axis?-Chart.js

          <scatter
            data={data}
            // style={{ width: "50%", height: "50%" }}
            options={{
              scales: {
                yaxes: [
                  {
                    scalelabel: {
                      display: true,
                      labelstring: "probability",
                    },
                  },
                ],
                xaxes: [
                  {
                    scalelabel: {
                      display: true,
                      labelstring: "hours",
                    },
                  },
                ],
              },
            }}
          />

see example with name of x axis and y axis left and right.

public barchartoptions: chartoptions = {
    title: {
      display: true,
      text: 'custom chart title',
    },
    responsive: true,
    legend: {
      position: 'right',
    },
    scales: {
      yaxes: [
        {
          position: 'right',
          scalelabel: {
            display: true,
            labelstring: 'frequency rate - right',
          },
        },
        {
          position: 'left',
          scalelabel: {
            display: true,
            labelstring: 'frequency rate - left',
          },
        },
      ],
      xaxes: [
        {
          display: true,
          position: 'bottom',
          scalelabel: {
            display: true,
            labelstring: 'titulo do eixo x',
            fontstyle: 'italic',
            fontsize: 12,
            fontcolor: '#030',
          },
        },
      ],
    },
  };

in chart js 3.5.x, it seems to me the title of axes shall be set as follows (example for x axis, title = 'seconds'):

options: {
  scales: {x: { title: { display: true, text: 'seconds' }}}
}

see: https://www.chartjs.org/docs/latest/axes/labelling.html

just use this:

<script>
  var ctx = document.getelementbyid("mychart").getcontext('2d');
  var mychart = new chart(ctx, {
    type: 'bar',
    data: {
      labels: ["1","2","3","4","5","6","7","8","9","10","11",],
      datasets: [{
        label: 'your label',
        backgroundcolor: [
          "#566573",
          "#99a3a4",
          "#dc7633",
          "#f5b041",
          "#f7dc6f",
          "#82e0aa",
          "#73c6b6",
          "#5dade2",
          "#a569bd",
          "#ec7063",
          "#a5754a"
        ],
        data: [12, 19, 3, 17, 28, 24, 7, 2,4,14,6],            
      },]
    },
    //here comes the axis y label
    options : {
      scales: {
        yaxes: [{
          scalelabel: {
            display: true,
            labelstring: 'probability'
          }
        }]
      }
    }
  });
</script>

for readers in 2021:

version

"chart.js": "^3.3.2",

real world working sample:

const optionstemplate = (yaxistitle, xaxistitle) => {
    return {
        scales: {
            yaxes: {
                title: {
                    display: true,
                    text: yaxistitle,
                    font: {
                        size: 15
                    }
                },
                ticks: {
                    precision: 0
                }
            },
            xaxes: {
                title: {
                    display: true,
                    text: xaxistitle,
                    font: {
                        size: 15
                    }
                }
            }
        },
        plugins: {
            legend: {
                display: false,
            }
        }
    }
}

if you have already set labels for your axis like how @andyhasit and @marcus mentioned, and would like to change it at a later time, then you can try this:

chart.options.scales.yaxes[ 0 ].scalelabel.labelstring = "new label";

full config for reference:

var chartconfig = {
    type: 'line',
    data: {
      datasets: [ {
        label: 'defaultlabel',
        backgroundcolor: '#ff0000',
        bordercolor: '#ff0000',
        fill: false,
        data: [],
      } ]
    },
    options: {
      responsive: true,
      scales: {
        xaxes: [ {
          type: 'time',
          display: true,
          scalelabel: {
            display: true,
            labelstring: 'date'
          },
          ticks: {
            major: {
              fontstyle: 'bold',
              fontcolor: '#ff0000'
            }
          }
        } ],
        yaxes: [ {
          display: true,
          scalelabel: {
            display: true,
            labelstring: 'value'
          }
        } ]
      }
    }
  };

for chart.js version 3

options = {
  scales: {
    y: [{
      title: {
        display: true,
        text: 'your title'
      }
    }]
  }     
}