CODEWITHSUNDEEP
angularchart.jsng2-charts
MANOJKUMARG
MANOJKUMARG

Reputation: 45

chart.js Scale Label not working Chart js in Angular 14

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

Upvotes: 2

Views: 1133

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31371

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

Upvotes: 2

Related Questions