SOLVED: bar chart: "scales.[x/y]Axes.barPercentage" is deprecated. Please use "dataset.barPercentage" instead

Hi All,

This post is regarding CHART JS   , while creating Bar Chart , browser/apis gives warning
"bar chart: "scales.[x/y]Axes.barPercentage" is deprecated. Please use "dataset.barPercentage" instead".
You may not find much information about this over internet but fixing this is quite simple.
You have to remove scales tag and add data tag like below:
data: {
                datasets: [{
                    barPercentage: 0.3,
                    barThickness: 3,
                    maxBarThickness: 6,
                    minBarLength: 2
                }]
            }

Code with Error:
new Chart(monthlySalesChart, {
        type: 'bar',
        data: {
          //labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
          labels: ['Mon','Tue','Wed','Thurs','Fri','Sat','Sun'],
          datasets: [{
            label: 'Sales',
          //  data: [150,110,90,115,125,160,190,140,100,110,120,120],
            data: [2,3,6,111,32,2,100],
            backgroundColor: colors.primary
          }]
        },
        options: {
          maintainAspectRatio: false,
          legend: {
            display: false,
              labels: {
                display: false
              }
          },
       
          scales: {
            xAxes: [{
              display: true,
              barPercentage: .3,
              categoryPercentage: .6,
              gridLines: {
                display: false
              },
              ticks: {
                fontColor: '#8392a5',
                fontSize: 10
              }
            }],
            yAxes: [{
              gridLines: {
                color: gridLineColor
              },
              ticks: {
                fontColor: '#8392a5',
                fontSize: 10,
                min: 0,
                max: 200
              }
            }]
          }
        }
      }

Updated Code:
new Chart(monthlySalesChart, {
        type: 'bar',
        data: {
          //labels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
          labels: ['Mon','Tue','Wed','Thurs','Fri','Sat','Sun'],
          datasets: [{
            label: 'Sales',
          //  data: [150,110,90,115,125,160,190,140,100,110,120,120],
            data: [2,3,6,111,32,2,100],
            backgroundColor: colors.primary
          }]
        },
        options: {
          maintainAspectRatio: false,
          legend: {
            display: false,
              labels: {
                display: false
              }
          },
          data: {
                datasets: [{
                    barPercentage: 0.3,
                    barThickness: 3,
                    maxBarThickness: 6,
                    minBarLength: 2
                }]
            }
        
        }
      }
 Hope this will help developers who are using Chart.js in showing graphs etc.
You can read more about chat.js using this link

Thanks
Netsuite Guru

Download Netsuite Guru Android App
Follow Me on Linkedin
Our FB Page