Estoy tratando de crear un gráfico simple con barras horizontales, pero cuando trato de hacer el eje X, tuve problemas para encontrar valores, y siempre termino con valores ligeramente disparejos como la imagen a continuación, ¿hay alguna fórmula para encontrar estos ticks? ?

EDITAR: esto se solucionó : era solo un problema no relacionado con el gráfico en sí.

aquí está la fórmula que estoy usando para generar el gráfico y el eje:

 // we create the step which the universal conversion between 1 value and pixels of width for both the bars and axis quadrants. const step = allowedWidth / maxBarValue // here we use the width of the container and the biggestValue of the bars to get the step we are going to use const barwidth = barValue * step; // here we calculate the bar width based on the step and its value // to create the quadrant const numberOfQuadrants = Math.max(Math.ceil(Math.log(MaxBarValue - MinBarValue)), 4) // although th mathematical explanation escapes me, this formula yields the best outcome of the number of quadrants. const quadrnatWidth = Math.ceil(allowedWidth / numberOfQuadrants); // here we get the maximum possible amount of quadrants to give the chart either exact quadrants or more quadrant than it needs (can be different for you) // drawing the quadrants // the quadrants are a SCSS grid view like follows .grid { display: grid; grid-template-columns: 70px 70px 70px 70x; .axis-label { position: absolute; right: 0; transform: translateX(50%); bottom: -25px; } border-right: 1px dashed var(--grey-200); } // in my case this was done programmatically using templates and injected CSS into my grid div. but the upper example defines 4 quadrants with the width of 70px each. The axis label would put the label of the axis underneath the right border which will show up as the axis defined by the quadrant.