javascript - Chart js x-axis values getting repeated twice - Stack Overflow

admin管理员组

文章数量:1289634

I'm using the following code to generate a line chart using chart js plugin, in which I'm facing the problem where the x-axis values are repeated twice.

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

var painChartContext = document.getElementById('pain_chart');
    var painChart = new Chart(painChartContext, {
        type: 'line',
        data: {
            labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)],
            datasets: [{
                label: "Pain",
                data: [8, 9, 7, 3, 10, 3, 4],
                fill: false,
                borderColor: '#b71705',
                spanGaps: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            'millisecond': 'MM/DD',
                            'second': 'MM/DD',
                            'minute': 'MM/DD',
                            'hour': 'MM/DD',
                            'day': 'MM/DD',
                            'week': 'MM/DD',
                            'month': 'MM/DD',
                            'quarter': 'MM/DD',
                            'year': 'MM/DD',
                        },
                        min: '04/13',
                        max: '04/19'
                    }                 
                }],
            },
        }
    });

As I mentioned above this gives me the following chart, where x-axis date values are repeating twice.

Also in my console, I'm getting a warning message about moment js;

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in uping major release. Please refer to for more info.

which I think is because of this line of code;

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

Kindly anyone give me a solution for this, thanks.

I'm using the following code to generate a line chart using chart js plugin, in which I'm facing the problem where the x-axis values are repeated twice.

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

var painChartContext = document.getElementById('pain_chart');
    var painChart = new Chart(painChartContext, {
        type: 'line',
        data: {
            labels: [newDate(-7), newDate(-6), newDate(-5), newDate(-4), newDate(-3), newDate(-2), newDate(-1)],
            datasets: [{
                label: "Pain",
                data: [8, 9, 7, 3, 10, 3, 4],
                fill: false,
                borderColor: '#b71705',
                spanGaps: true
            }]
        },
        options: {
            scales: {
                xAxes: [{
                    type: 'time',
                    time: {
                        displayFormats: {
                            'millisecond': 'MM/DD',
                            'second': 'MM/DD',
                            'minute': 'MM/DD',
                            'hour': 'MM/DD',
                            'day': 'MM/DD',
                            'week': 'MM/DD',
                            'month': 'MM/DD',
                            'quarter': 'MM/DD',
                            'year': 'MM/DD',
                        },
                        min: '04/13',
                        max: '04/19'
                    }                 
                }],
            },
        }
    });

As I mentioned above this gives me the following chart, where x-axis date values are repeating twice.

Also in my console, I'm getting a warning message about moment js;

Deprecation warning: moment construction falls back to js Date. This is discouraged and will be removed in uping major release. Please refer to https://github./moment/moment/issues/1407 for more info.

which I think is because of this line of code;

function newDate(days) {
    return moment().add(days, 'd').format('MM/DD');
}

Kindly anyone give me a solution for this, thanks.

• javascript
• momentjs
• chart.js

Share Improve this question Follow edited Aug 9, 2023 at 14:57 isherwood 61.1k1616 gold badges120120 silver badges169169 bronze badges asked Apr 20, 2017 at 7:18 karthikarthi 56933 gold badges1616 silver badges2626 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

So chartjs is creating the x-axis labels dynamically and decided it can show two labels per day, which when formatted end up showing two dates that are the same.

Pass a new field unit to the time object and set it to day. this will cause the chart to only show one tick per day in the time frame. (example fiddle)

options: {
        scales: {
            xAxes: [{
                type: 'time',
                time: {
                     unit: 'day',
                }                 
            }],
        },
    }

本文标签： javascriptChart js xaxis values getting repeated twiceStack Overflow