Перед выводом чисел на оси можно округлить их до разумного количества знаков

let v = 5.99999999999999999999
v = +v.toFixed(2) // => 6

let format = d3.format(".0f");
console.log(format(5.999999999999999)); // "6"

/**
 * Класс Plotter предназначен для рисования графиков на HTML5 Canvas.
 * Он предоставляет методы для отображения координатной сетки, осей, насечек и самих графиков.
 */
export class Plotter {
    /**
     * Конструктор класса Plotter.
     * Инициализирует параметры для масштабирования и отображения графика.
     * @param {CanvasRenderingContext2D} ctx - Контекст рисования canvas
     * @param {number} width - Ширина рабочей области в пикселях
     * @param {number} height - Высота рабочей области в пикселях
     * @param {number} x0 - X-координата начала системы координат (в пикселях)
     * @param {number} y0 - Y-координата начала системы координат (в пикселях)
     * @param {number} xMin - Минимальное значение по оси X (в единицах данных)
     * @param {number} xMax - Максимальное значение по оси X (в единицах данных)
     * @param {number} yMin - Минимальное значение по оси Y (в единицах данных)
     * @param {number} yMax - Максимальное значение по оси Y (в единицах данных)
     */
    constructor(ctx, width, height, x0, y0, xMin, xMax, yMin, yMax) {
        // Сохраняем контекст canvas для рисования
        this.ctx = ctx;
        
        // Сохраняем координаты начала системы координат (в пикселях)
        this.x0 = x0;
        this.y0 = y0;
        
        // Вычисляем масштабные коэффициенты для преобразования данных в пиксели
        // xScale - количество единиц данных на один пиксель по оси X
        this.xScale = (xMax - xMin) / width;
        // yScale - количество единиц данных на один пиксель по оси Y
        this.yScale = (yMax - yMin) / height;
        
        // Преобразуем границы области в пиксельные координаты относительно начала системы координат
        this.xMin = xMin / this.xScale;
        this.xMax = xMax / this.xScale;
        this.yMin = yMin / this.yScale;
        this.yMax = yMax / this.yScale;
    }
 
    /**
     * Рисует координатную сетку.
     * @param {number} xCell - Ширина клетки сетки по оси X (в единицах данных)
     * @param {number} yCell - Высота клетки сетки по оси Y (в единицах данных)
     * @param {string} color - Цвет линий сетки (по умолчанию "lightgray")
     */
    drawGrid(xCell, yCell, color = "lightgray") {
        // Сохраняем текущее состояние контекста (стили, трансформации)
        this.ctx.save();
        
        // Переносим начало координат в указанную точку (x0, y0)
        this.ctx.translate(this.x0, this.y0);
        
        // Инвертируем ось Y, чтобы направление вверх было положительным
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для линий сетки
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = color;
        
        // Начинаем новый путь
        this.ctx.beginPath();
        
        // Преобразуем размеры клеток из единиц данных в пиксели
        xCell /= this.xScale;
        yCell /= this.yScale;
        
        // Рисуем вертикальные линии сетки
        let x = this.xMin; // Начинаем от левой границы
        do {
            // Перемещаем перо в начало линии (нижняя точка)
            this.ctx.moveTo(x, this.yMin);
            // Рисуем линию до верхней точки
            this.ctx.lineTo(x, this.yMax);
            // Переходим к следующей вертикальной линии
            x += xCell;
        } while (x <= this.xMax); // Продолжаем пока не достигнем правой границы
        
        // Рисуем горизонтальные линии сетки
        let y = this.yMin; // Начинаем от нижней границы
        do {
            // Перемещаем перо в начало линии (левая точка)
            this.ctx.moveTo(this.xMin, y);
            // Рисуем линию до правой точки
            this.ctx.lineTo(this.xMax, y);
            // Переходим к следующей горизонтальной линии
            y += yCell;
        } while (y <= this.yMax); // Продолжаем пока не достигнем верхней границы
        
        // Отрисовываем все линии
        this.ctx.stroke();
        
        // Восстанавливаем сохраненное состояние контекста
        this.ctx.restore();
    }
 
    /**
     * Рисует координатные оси с метками.
     * @param {string} xLabel - Метка для оси X (по умолчанию "x")
     * @param {string} yLabel - Метка для оси Y (по умолчанию "y")
     * @param {string} color - Цвет осей и меток (по умолчанию "black")
     * @param {string} font - Шрифт для меток (по умолчанию "12px Arial")
     */
    drawAxes(xLabel = "x", yLabel = "y", color = "black", font = "12px Roboto") {
        // Сохраняем текущее состояние контекста
        this.ctx.save();
        
        // Переносим и инвертируем систему координат как в drawGrid
        this.ctx.translate(this.x0, this.y0);
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для осей
        this.ctx.lineWidth = 0.5;
        this.ctx.strokeStyle = color;
        
        // Начинаем новый путь для осей
        this.ctx.beginPath();
        
        // Рисуем ось X (горизонтальная линия)
        this.ctx.moveTo(this.xMin, 0); // Начинаем от левой границы
        this.ctx.lineTo(this.xMax, 0); // До правой границы
        
        // Рисуем ось Y (вертикальная линия)
        this.ctx.moveTo(0, this.yMin); // Начинаем от нижней границы
        this.ctx.lineTo(0, this.yMax); // До верхней границы
        
        // Отрисовываем оси
        this.ctx.stroke();
        
        // Инвертируем только ось Y обратно для правильного отображения текста
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для текста меток
        this.ctx.fillStyle = color;
        this.ctx.font = font;
        this.ctx.textAlign = "center"; // Выравнивание по центру
        this.ctx.textBaseline = "middle"; // Базовая линия по середине
        
        // Рисуем метку оси X справа от оси
        this.ctx.fillText(xLabel, this.xMax + 10, -10);
        
        // Рисуем метку оси Y сверху от оси
        this.ctx.fillText(yLabel, 0, -this.yMax - 10);
        
        // Восстанавливаем состояние контекста
        this.ctx.restore();
    }
 
    /**
     * Рисует насечки (тики) на осях координат.
     * @param {number} xCell - Расстояние между насечками по оси X (в единицах данных)
     * @param {number} yCell - Расстояние между насечками по оси Y (в единицах данных)
     * @param {string} color - Цвет насечек (по умолчанию "black")
     */
    drawTicks(xCell, yCell, color = "black") {
        // Сохраняем состояние контекста
        this.ctx.save();
        
        // Переносим и инвертируем систему координат
        this.ctx.translate(this.x0, this.y0);
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для насечек
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = color;
        
        // Начинаем новый путь
        this.ctx.beginPath();
        
        // Преобразуем расстояния между насечками в пиксели
        xCell /= this.xScale;
        yCell /= this.yScale;
        
        // Рисуем вертикальные насечки (для оси X)
        let x = this.xMin; // Начинаем от левой границы
        do {
            // Рисуем короткую горизонтальную линию (длиной 8 пикселей)
            this.ctx.moveTo(x, -4); // Начало линии
            this.ctx.lineTo(x, 4);  // Конец линии
            x += xCell; // Переходим к следующей насечке
        } while (x <= this.xMax); // Продолжаем до правой границы
        
        // Рисуем горизонтальные насечки (для оси Y)
        let y = this.yMin; // Начинаем от нижней границы
        do {
            // Рисуем короткую вертикальную линию (длиной 8 пикселей)
            this.ctx.moveTo(-4, y); // Начало линии
            this.ctx.lineTo(4, y);  // Конец линии
            y += yCell; // Переходим к следующей насечке
        } while (y <= this.yMax); // Продолжаем до верхней границы
        
        // Отрисовываем все насечки
        this.ctx.stroke();
        
        // Восстанавливаем состояние контекста
        this.ctx.restore();
    }
 
    /**
     * Рисует числовые подписи (единицы измерения) на осях.
     * @param {number} xCell - Расстояние между подписями по оси X (в единицах данных)
     * @param {number} yCell - Расстояние между подписями по оси Y (в единицах данных)
     * @param {string} color - Цвет текста (по умолчанию "black")
     * @param {string} font - Шрифт текста (по умолчанию "10px Arial")
     */
    drawUnits(xCell, yCell, color = "black", font = "10px Roboto") {
        // Сохраняем состояние контекста
        this.ctx.save();
        
        // Переносим начало координат, но не инвертируем ось Y (текст должен быть читаемым)
        this.ctx.translate(this.x0, this.y0);
        
        // Устанавливаем стили для текста
        this.ctx.fillStyle = color;
        this.ctx.font = font;
        
        // Преобразуем расстояния между подписями в пиксели
        xCell /= this.xScale;
        yCell /= this.yScale;
        
        // Устанавливаем выравнивание текста (влево и вверх от точки)
        this.ctx.textAlign = "left";
        this.ctx.textBaseline = "top";
        
        // Рисуем подписи для оси X
        let x = this.xMin; // Начинаем от левой границы
        do {
            // Вычисляем значение в единицах данных и отображаем его
            // Подпись размещается немного выше оси X (y=4) и справа от тика (x+4)
            this.ctx.fillText(x * this.xScale, x + 4, 4);
            x += xCell; // Переходим к следующей подписи
        } while (x <= this.xMax); // Продолжаем до правой границы
        
        // Рисуем подписи для оси Y
        let y = this.yMin; // Начинаем от нижней границы
        do {
            // Вычисляем значение в единицах данных и отображаем его
            // Подпись размещается немного правее оси Y (x=4) и выше тика (-y+4)
            this.ctx.fillText(y * this.yScale, 4, -y + 4);
            y += yCell; // Переходим к следующей подписи
        } while (y <= this.yMax); // Продолжаем до верхней границы
        
        // Восстанавливаем состояние контекста
        this.ctx.restore();
    }
 
    /**
     * Рисует график по массивам координат.
     * @param {number[]} xArray - Массив X-координат точек (в единицах данных)
     * @param {number[]} yArray - Массив Y-координат точек (в единицах данных)
     * @param {string} color - Цвет графика (по умолчанию "blue")
     * @param {boolean} dots - Флаг отображения точек (по умолчанию false)
     * @param {boolean} line - Флаг отображения линии (по умолчанию true)
     */
    drawGraph(xArray, yArray, color = "blue", dots = false, line = true) {
        // Сохраняем состояние контекста
        this.ctx.save();
        
        // Переносим и инвертируем систему координат
        this.ctx.translate(this.x0, this.y0);
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для графика
        this.ctx.lineWidth = 1;
        this.ctx.strokeStyle = color;
        
        // Начинаем новый путь
        this.ctx.beginPath();
        
        // Константа для рисования полного круга (2π радиан)
        let angle2PI = 2 * Math.PI;
        
        // Проходим по всем точкам графика
        for (let i = 0; i < xArray.length; i++) {
            // Преобразуем координаты из единиц данных в пиксели
            let x = xArray[i] / this.xScale;
            let y = yArray[i] / this.yScale;
            
            if (line) {
                // Если это не первая точка и нужно рисовать линию, рисуем линию к текущей точке
                if (i != 0) {
                    this.ctx.lineTo(x, y);
                } else {
                    // Для первой точки просто перемещаем перо
                    this.ctx.moveTo(x, y);
                }
            }
            
            if (dots) {
                // Если нужно рисовать точки, рисуем маленький круг в текущей точке
                this.ctx.arc(x, y, 1, 0, angle2PI);
                // Возвращаем перо в центр точки после рисования круга
                this.ctx.moveTo(x, y);
            }
        }
        
        // Отрисовываем график
        this.ctx.stroke();
        
        // Восстанавливаем состояние контекста
        this.ctx.restore();
    }
 
    /**
     * Рисует пунктирную линию между двумя точками.
     * @param {number} x1 - X-координата начальной точки (в единицах данных)
     * @param {number} y1 - Y-координата начальной точки (в единицах данных)
     * @param {number} x2 - X-координата конечной точки (в единицах данных)
     * @param {number} y2 - Y-координата конечной точки (в единицах данных)
     * @param {string} color - Цвет линии (по умолчанию "red")
     * @param {number[]} pattern - Шаблон пунктира (по умолчанию [5, 3] - 5px черта, 3px пропуск)
     */
    drawDashedLine(x1, y1, x2, y2, color = "red", pattern = [5, 3]) {
        // Сохраняем состояние контекста
        this.ctx.save();
        
        // Переносим и инвертируем систему координат
        this.ctx.translate(this.x0, this.y0);
        this.ctx.scale(1, -1);
        
        // Устанавливаем стили для пунктирной линии
        this.ctx.strokeStyle = color;
        this.ctx.lineWidth = 1;
        this.ctx.setLineDash(pattern); // Устанавливаем шаблон пунктира
        
        // Начинаем новый путь
        this.ctx.beginPath();
        
        // Преобразуем координаты в пиксели и рисуем линию
        this.ctx.moveTo(x1 / this.xScale, y1 / this.yScale);
        this.ctx.lineTo(x2 / this.xScale, y2 / this.yScale);
        
        // Отрисовываем пунктирную линию
        this.ctx.stroke();
        
        // Восстанавливаем состояние контекста (сбрасываем пунктир)
        this.ctx.restore();
    }
}

this.ctx.fillText((x * this.xScale).toFixed(0), x + 4, 4);

this.ctx.fillText((y * this.yScale).toFixed(0), 4, -y + 4);