ng2-charts
ng2-charts copied to clipboard
scales.[x/y]Axes.categoryPercentage is deprecated and new code is not working
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
We have similar problems after upgrade - labels and barThickness are also ignored in the new version.
@Cup5y this one helps: https://stackoverflow.com/a/59732946/7189547
Using @diamond95 link, worked for me using
datasets: { bar: { categoryPercentage: 1.0, barPercentage: 0.9 } }
just use as stated in the docs:
data: {
datasets: [{
categoryPercentage: 0.9,
data: [10, 20, 30, 40, 50, 60, 70]
}]
};