El problema es que estás ejecutando una petición AJAX para obtener la información que vas a mostrar en la gráfica, pero la respuesta va a tardar y no esperas la respuesta, por eso es que no puedes usar la variable fuera de la petición.
La opción es, ejecutar la petición y, solo hasta que hayas obtenido la respuesta, crear la gráfica y te recomiendo que lo hagas en otra función.
Por otra parte, si solo estás usando un objeto de todo el JSON recibido, te recomiendo usar el método .find() en lugar de crear un ciclo.
// Define variables globales (fuera de funciones)
let ctx = document.getElementById('myChart');
let myChart = null;
// Si necesitas algo al cargar la página, solo ejecuta la función
// Asigna los valores deseados
crearGrafica(0, 40, 0);
function cargar() {
let xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 & this.status == 200) {
let obj = JSON.parse(xhttp.responseText);
console.log(obj);
let respuesta = document.getElementById("datos");
respuesta.innerHTML += 'Cambio realizado | ';
// Busca el primer objeto que coincida en lugar de recorrer
let filtro = obj.find(item => item.age == rangeval);
// Asignar valor (o cero, si no se encontró)
let currentAge = (filtro) ? parseInt(filtro.age) : 0;
/**
* IMPORTANTE: Ya tienes un parámetro (currentAge)
*
* ¿Necesitas otro?
* Asegúrate de obtenerlo y después crea la gráfica
*/
// Ejecuta una función para crear la gráfica
crearGrafica(0, 40, currentAge);
}
};
xhttp.open("GET", "livenumbers.json", true);
xhttp.send();
}
function crearGrafica(valor1, valor2, valor3) {
// Si ya se creó la gráfica
if(myChart !== null) {
// Destruir para poder crear nuevamente
myChart.destroy();
}
myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['', 'Without', 'With'],
datasets: [{
label: 'Lump sum',
data: [valor1, valor2, valor3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'#322c83',
'#ea7123'
]
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
}