[Chartjs]-Change ChartJs axis title dynamically

by

11👍

✅

You can change the scale title simply by updating the labelString value in your chart object’s options property and calling the .update() prototype method.

Assuming I have a chart instance called myBar (the instance is what is returned from the Chart.js constructor), then I can use the below example to change the y-axes title.

myBar.options.scales.yAxes[0].scaleLabel.labelString = "My New Title";
myBar.update();

Here is a codepen that demonstrates a working example of this. Just click on the “Change Title” button to see if work.

3👍

in V3 the scales have changed so every scale is its own object, to get jordanwillis answer to work you will need to change it to:

myBar.options.scales.y.title.text = 'New title';
myBar.update();

But you can also use scriptable options which update automatically when the chart gets redrawn so you can do it internally in the options object itself:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange'
      },

      {
        label: '# of People',
        data: [3, 1, 9, 3, 7, 4],
        borderColor: 'lightBlue'
      }
    ]
  },
  options: {
    scales: {
      y: {
        title: {
          display: true,
          text: (ctx) => {
            const chart = ctx.scale.chart;
            const chartStatus = chart.data.datasets.map((e, i) => (!!chart.getDatasetMeta(i).hidden));

            if (chartStatus.every(e => e === false)) {
              return 'no datasets hidden'
            } else if (chartStatus.every(e => e === true)) {
              return 'all datasets hidden'
            } else {
              let ret = chartStatus.reduce((acc, curr, i) => {
                if (curr) {
                  acc += ` ${i},`
                }

                return acc;
              }, chartStatus.indexOf(true) === chartStatus.lastIndexOf(true) ? 'dataset:' : 'datasets:')

              ret = ret.substring(0, ret.length - 1)
              ret += ' hidden'
              return ret
            }
          }
        }
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.js"></script>
</body>

Leave a comment