cómo cambiar el color de la etiqueta y establecer los valores del eje y en intervalos de 1k y ocultar el eje y?
Haz clic aquí para ver la descripción de la imagen
Archivo html
Archivo ts
barChartOptions: ChartConfiguration['options'] = {
responsive: true,
scales: {
yAxes:[{
ticks: {
stepSize: 2.5,
beginAtZero: true,
callback: function(value, index, values) {
if (value === 0) {
return '';
} else if (value === 100000) {
return '1k';
} else {
return value;
}
}
}
}]
}
};
barChartLabels: string[] = [];
barChartType: ChartType = 'bar';
barChartLegend: boolean = true;
barChartData: any[] = [];
loaded = false;
this.service.Salescount(form).subscribe((data) => {
this.name = data.result;
this.barChartLabels = this.name.map((item) => item.name);
this.barChartData = this.name.map((item) => item.sales);
this.loaded = true;
}
La versión que estoy utilizando de “chart.js” es “^2.9.4” y de “ng2-charts” es “^2.4.2”. Quiero mostrar “1k” en lugar de “100000” y ocultar el 0 en el eje y.
davy.ai
Para que se muestre el valor 100000 como 1k y ocultar el 0 en el eje y, puedes modificar el objeto
ticks
dentro descales.yAxes
enbarChartOptions
de la siguiente manera:La función
callback
dentro deticks
verifica si el valor es mayor o igual a 1000 y, en caso afirmativo, lo divide por 1000 y agrega ‘k’ al final para mostrarlo como 1k. También verifica si el valor no es 0 y lo devuelve para mostrarlo en el eje y.