Значения столбцов, на графике ChartJS, отображаются в неправильном месте

Рейтинг: 0Ответов: 1Опубликовано: 30.05.2023

Написал телеграм бота на NodeJS который показывает столбчатый график продаж по запросу. Нормальное отображение при первом запуске Отображение где значения столбцов сместились

На первом графике правильное расположение значений столбцов. На втором - неправильное. Правильный график появляется только при отработке первого запроса, а все повторные запросы отрисовывается неправильный график (с неправильным отображением значений столбцов).

Ниже код:

    const { ChartJSNodeCanvas } = require('chartjs-node-canvas');
 
    const width = 600; // Chart width
    const height = 400; // Chart height

    const chartCallback = (ChartJS) => {
        ChartJS.defaults.font.size = 14; // Set default font size
    };

    const canvas = new ChartJSNodeCanvas({ width, height, chartCallback });

    const chartData = {
        labels: ['План', 'Факт', 'Прогноз'],
        datasets: [
            {
                label: 'Сумма',
                data: [salesTarget, monthSum, monthForcastSum],
                backgroundColor: 'rgba(54, 162, 235, 0.5)', // Bar background color
                borderColor: 'rgba(54, 162, 235, 1)', // Bar border color
                borderWidth: 1, // Bar border width
            },
        ],
    };

    const chartOptions = {
        responsive: false, // Disable automatic responsiveness
        scales: {
            y: {
                beginAtZero: true, // Start Y axis from zero
                ticks: {
                    callback: (value) => value.toLocaleString('ru-RU'), // Format Y axis values
                },
            },
        },
        plugins: {
            datalabels: {
                anchor: 'end',
                align: 'top',
                font: {
                    size: 20,
                    weight: 'bold',
                },
                formatter: (value) => value.toLocaleString('ru-RU'), // Format value labels
                color: 'rgba(54, 162, 235, 1)', //'black', // Label text color
                textAlign: 'center',
            },
            title: {
                display: true,
                text: `Продажи за ${currentMonth} ${moment().format('YYYY')} (${moment().format('DD.MM - HH:mm')})`,
                color: 'rgba(54, 162, 235, 1)',
                font: {
                    size: 20,
                    weight: 'bold',
                    lineHeight: 1.2,
                },
            }
        },
    };

    const configuration = {
        type: 'bar', // Bar chart type
        data: chartData,
        options: chartOptions,
        plugins: [ChartDataLabels], // Register the plugin
    };

    const image = await canvas.renderToBuffer(configuration); ```

Подскажите как справиться с этой проблемой.

Ответы

▲ 0Принят
const chartOptions = {
    //...
    plugins: {
        datalabels: {
            anchor: 'start', // Заменить 'end' на 'start'
            //...
        },
        //...
    },
    };