Apexcharts: ¿Cómo forzar un eje en un gráfico de barras para mostrar solo valores enteros?
Estoy utilizando la gráfica de barras de ApexCharts. El eje horizontal x tiene recuentos de elementos. Cuando el número se vuelve demasiado bajo, como 1, 2, el eje muestra valores decimales intermedios que no tienen sentido. ¿Cómo forzar al eje a mostrar solo valores enteros con marcas en intervalos enteros como en la segunda imagen?
Plantilla de Vue
<apexchart ref="ratingChart" width="450" height="250" :options="ratingData.options" :series="ratingData.series"></apexchart>
Javascript
data: function () {
return {
ratingData: {
options: {
chart: {
id: "item-rating",
type: "bar",
},
title: {
text: "Item por Calificación",
align: "center",
margin: 10,
offsetX: 0,
offsetY: 0,
floating: false,
style: {
fontSize: "14px",
fontWeight: "normal",
fontFamily: "Arial",
color: "#595959",
},
},
noData: {
text: "Cargando...",
},
xaxis: {
categories: ["Muy Alto", "Alto", "Medio", "Bajo", "Eliminado"],
type: "category",
tickPlacement: "on",
labels: {
rotate: 0,
rotateAlways: false,
},
decimalsInFloat: 0,
},
colors: ["#E53935", "#FFA726", "#FDD835", "#7CB342", "#29B6F6"],
dataLabels: {
enabled: true,
},
plotOptions: {
bar: {
distributed: true,
borderRadius: 0,
horizontal: true,
},
},
},
series: [
{
name: "itemCount",
data: [10, 4, 8, 9, 3],
//data: [1, 2, 2, 1, 3], // para recuentos bajos
},
],
},
}
}
davy.ai
Para forzar al eje x a mostrar solo valores enteros en intervalos enteros, puedes establecer la propiedad
tickAmountal número de valores enteros que deseas mostrar en el eje. En este caso, queremos mostrar 5 valores enteros, por lo que estableceremostickAmount: 5.Además, podemos establecer las propiedades
minymaxpara especificar los valores mínimo y máximo mostrados en el eje. En este caso, queremos mostrar valores desde 0 hasta 10, por lo que estableceremosmin: 0ymax: 10.Aquí está el objeto
optionsactualizado con los cambios:Con estos cambios, el eje x mostrará solo valores enteros con marcas en intervalos enteros, como se muestra en la segunda imagen.