Почему в d3.js axisRight не правильно масштабируется?

У меня есть график.

Вот какая проблема:

Слева есть значения, по оси y. И значение не совпадают с графиков. Хотя масштаб для должен совпадать. Я все пробовал. Я точно что то допускаю.

Вот код:

//624 - ширина
//244 - высота
data = [
    {id: '1d', date: "07.09", value: 10},
    {id: '2d', date: "08.09", value: 31},
    {id: '3d', date: "09.09", value: 41},
    {id: '4d', date: "10.09", value: 21},
    {id: '5d', date: "11.09", value: 100},
    {id: '6d', date: "12.09", value: 890},
    {id: '7d', date: "13.09", value: 1000},
    {id: '8d', date: "14.09", value: 900},
    {id: '9d', date: "15.09", value: 980},
    {id: '10d', date: "16.09", value: 1200},
    {id: '11d', date: "17.09", value: 1100},
    {id: '12d', date: "18.09", value: 990},
    {id: '13d', date: "19.09", value: 790},
    {id: '14d', date: "20.09", value: 890},
    {id: '15d', date: "21.09", value: 789},
    {id: '16d', date: "22.09", value: 345},
    {id: '17d', date: "23.09", value: 110},
    {id: '18d', date: "24.09", value: 130},
];

const x = d3.scaleBand().rangeRound([40, 624]).padding(0.1);
const y = d3.scaleLinear().range([244, 0]); // Тут я как понимаю создаю область начиная с 244 заканчивая 0 по оси y. Извините если плохо понял что это.

x.domain(data.map((d) => d.date));
y.domain([0, d3.max(data, d => d.value) + 225]); // определяю по этой оси самое максимальное значение которое может быть и делаю отступ.

const chartContainer = d3.select(".block_schedule");
const chart = chartContainer.append("g");

chart.selectAll('.bar')
    .data(data)
    .enter()
    .append("rect")
    .classed('bar', true)
    .attr("width", x.bandwidth())
    .attr("height", data => 244 - y(data.value))
    .attr("x", data => x(data.date))
    .attr("y", data => y(data.value) - 20);

chart.append('g').call(d3.axisBottom(x).tickSizeOuter(0))
    .attr("color", "#6a6a6a")
    .attr("font-family", "MotivaSansExtraMedium, Sans-serif")
    .attr("font-size", "9px")
    .attr("transform", `translate(0, ${244 - 20})`);

    chart.append('g').call(d3.axisRight(y).tickSizeOuter(0).tickPadding(5)) // тут задаю ось y. Указываю нужный мастштаб
    .attr("color", "#6a6a6a")
    .attr("font-family", "MotivaSansExtraMedium, Sans-serif")
    .attr("font-size", "9px")

chart.selectAll(".label")
    .data(data)
    .enter()
    .append('text')
    .text(data => data.value)
    .attr("x", data => x(data.date) + x.bandwidth() / 2)
    .attr("y", data => y(data.value) - 25)
    .attr('text-anchor', "middle")
    .classed("label", true);

Я очень зеленый в этой теме. Хочу сильно начинать строить графики. Документацию читал, мало что понял, но вот писал и писал и что то получилось, а за недопонимания сами понимаете, идут ошибки. Подскажите пожалуйста!