In Chart.js set chart title, name of x axis and y axis?

Solution 1:

In Chart.js version 2.0, it is possible to set labels for axes:

options = {
  scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'probability'
      }
    }]
  }     
}

See Labelling documentation for more details.

Solution 2:

For Chart.js version 3

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

Solution 3:

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

Solution 4:

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