I am trying to create a simple chart with horizontal bars but when trying to get the X-axis made, I had trouble finding values, and I always end up with slightly mismatched values like the picture below, is there a formula for finding these ticks?

EDIT : this was fixed : it was just an unrelated issue to the chart itself.

here is the formula i am using to generate the chart and axis :

// 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.