public barChartOptions: any = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    yAxes: [
      {
        grid: {
          display: false,
        },
        scaleLabel: {
          display: true,
          labelString: 'Counts',
        },
      },
    ],
    xAxes: [
      {
        grid: {
          display: false,
        },
        scaleLabel: {
          display: true,
          labelString: 'Locale',
        },
      },
    ],
  },
};

I try the above code to add the scale label by not showing the scale label .I cannot able to add scaleLabel in bar charts, any way to add scaleLabel in X and Y,currently I used the version- Angular is 14.0 and chart.js is 3.9.1

Thanks in Advance

I want this type scalelabel

CodePudding user response：

You are defining your scales as 2 arrays, this is V2 syntax, in V3 all scales are their own object within the scales object where the key is the ID of the scale. So changing your config to this will resolve the issue:

scales: {
  y: {
    grid: {
      display: false,
    },
    title: {
      display: true,
      text: 'Counts',
    },
  },
  x: {
    grid: {
      display: false,
    },
    title: {
      display: true,
      text: 'Locale',
    },
  },
}

For all changes between V2 and V3 please read the migration guide

CodePudding user response：

Try this. Hope it will solve your issue.

public barChartOptions: any = {
  responsive: true,
  maintainAspectRatio: false,
  scales: {
    y: [
      {
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: 'Counts',
        },
      },
    ],
    x: [
      {
        grid: {
          display: false,
        },
        title: {
          display: true,
          text: 'Locale',
        },
      },
    ],
  },
};

Take reference from here -> https://www.chartjs.org/docs/latest/samples/scale-options/titles.html