ng2-charts icon indicating copy to clipboard operation
ng2-charts copied to clipboard

scales.[x/y]Axes.categoryPercentage is deprecated and new code is not working

Open Cup5y opened this issue 5 years ago • 4 comments

On project we updated Chart.js to version 2.9.0 and I get this messages in console: bar chart: "scales.[x/y]Axes.categoryPercentage" is deprecated. Please use "dataset.categoryPercentage" instead and bar chart: "scales.[x/y]Axes.maxBarThickness" is deprecated. Please use "dataset.maxBarThickness" instead

We had this and this still works (but with that warning):

     this.CvMGraphDataset = [
      {
        data: dataIncome,
        label: 'Chiffre d’affaires',
        categoryPercentage: 0.5
      },
      {
        data: dataProfit,
        label: 'Marge',
        categoryPercentage: 0.5
      },
    ];
    this.CvMGraphOptions = {
      animation: {
        duration: 600,
        easing: 'linear'
      },
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          categoryPercentage: 0.5,
          maxBarThickness: 13,
          minBarThickness: 12,
          gridLines: {
            display: false,
            color: '#F2F2F2'
          },
          ticks: {
            fontSize: 15,
            fontColor: '#000000'
          }
        }]
      }
   }

I tried with new proposed solution and categoryPercentage and barThickness are ignored:

    this.CvMGraphDataset = [
      {
        data: dataIncome,
        label: 'Chiffre d’affaires',
        categoryPercentage: 0.5,
        barThickness: 13
      },
      {
        data: dataProfit,
        label: 'Marge',
        categoryPercentage: 0.5,
        barThickness: 13
      },
    ];
    this.CvMGraphOptions = {
      animation: {
        duration: 600,
        easing: 'linear'
      },
      responsive: true,
      maintainAspectRatio: false,
      scales: {
        xAxes: [{
          gridLines: {
            display: false,
            color: '#F2F2F2'
          },
          ticks: {
            fontSize: 15,
            fontColor: '#000000'
          }
        }]
      }
    };

The question would be - is it possible you need to do something on your end so that datasets would accept these new options: https://www.chartjs.org/docs/latest/charts/bar.html#dataset-configuration

Cup5y avatar Nov 08 '19 14:11 Cup5y

We have similar problems after upgrade - labels and barThickness are also ignored in the new version.

andreyshedko avatar Jan 15 '20 13:01 andreyshedko

@Cup5y this one helps: https://stackoverflow.com/a/59732946/7189547

diamond95 avatar May 08 '20 11:05 diamond95

Using @diamond95 link, worked for me using

datasets: { bar: { categoryPercentage: 1.0, barPercentage: 0.9 } }

rscherer avatar May 26 '20 12:05 rscherer

just use as stated in the docs:

data: {
    datasets: [{
        categoryPercentage: 0.9,
        data: [10, 20, 30, 40, 50, 60, 70]
    }]
};

jfoclpf avatar May 28 '21 20:05 jfoclpf