You can get the position of the blue rectangle by instructing the user to move the joystick along the edges so that the values you see are the red curve. You should also instruct user to leave joystick in centered position since you usually need to know the center. Calcuated center is not always the real center position.
For each axis separate those values by the side of the center they are on and find those that are the closest to the center point. That would work with calculated center. Now you have the blue rectangle.
E.g. on X axis you see values ranging from 0-20 and 80-100, center is ~50 > blue rectangle is 20 - 80.
Assuming you want to calibrate it so that values are 0-100 (green) you calculate correction for the x axis as
calibratedX = (uncalibrated - 20) * 100 / 60
Values are shifted by 20 to the right (-20 to normalize them to 0-60) and their range is 60 (80 - 20) which you want to upscale to 0-100. After that clip values to 0-100 since they will be outside for every point on the red line that was outside the blue rectangle.
Result looks like
where pink are the values after transformation, and the pink area outside the green rectangle is cut away.
Regarding the center point: just run it through those calculations as well.