score:1

Accepted answer

basically, the answer is to replace this:

[
    {y: 30, x: 'jan 2019'},
    {y: 20, x: 'apr 2019'},
    {y: 25, x: 'jul 2019'},
]

with this:

[null, 30, 20, 25, null]

score:1

chart.js doesn't like date-labels as string. you should use a date() or momentjs() object to give a date.


using momentjs, your graph could look something like this;

const newdate = (mdy) => moment(mdy, "mm-dd-yyyy");

var linechartdata = {
    labels: [newdate('9-1-2018'), newdate('1-1-2019'), newdate('4-1-2019'), newdate('6-1-2019'), newdate('9-1-2019')],
    datasets: [{
        label: 'oranges',
        bordercolor: 'blue',
        backgroundcolor: 'orange',
        fill: false,
        data: [
            { y: 30, x: newdate('1-1-2019') },
            { y: 20, x: newdate('4-1-2019') },
            { y: 25, x: newdate('6-1-2019') }
        ],
    }]
};

window.onload = function() {
    var ctx = document.getelementbyid('canvas').getcontext('2d');
    window.myline = chart.line(ctx, {
        data: linechartdata,
        options: {
            hover: {
                mode: 'new mode'
            },
            responsive: true,
            hovermode: 'index',
            stacked: false,
            scales: {
                yaxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left'
                }],
                xaxes: [{
                    type: 'time',
                    time: {
                        displayformats: {
                            'millisecond': 'mmm yy',
                            'second': 'mmm yy',
                            'minute': 'mmm yy',
                            'hour': 'mmm yy',
                            'day': 'mmm yy',
                            'week': 'mmm yy',
                            'month': 'mmm yy',
                            'quarter': 'mmm yy',
                            'year': 'mmm yy',
                        }
                    }
                }]
            }
        }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="canvas" ></canvas>

(note; the extra empty data could me removed, please take a look at the chartjs time docs)


edit: based on comments, a more complete solution, with the original data being parsed as the op intended.

const newdate = (mdy) => moment(mdy, "mmm yyyy");
const data = {
  labels: ['oct 2018', 'jan 2019', 'apr 2019', 'jul 2019', 'oct 2019'],
  points: [
    {y: 30, x: 'jan 2019'},
    {y: 20, x: 'apr 2019'},
    {y: 25, x: 'jul 2019'}
  ]
};

var linechartdata = {
    labels: data.labels.map(l => newdate(l)),
    datasets: [{
        label: 'oranges',
        bordercolor: 'blue',
        backgroundcolor: 'orange',
        fill: false,
        data: data.points.map(p => { return { ...p, x: newdate(p.x) } })
    }]
};

window.onload = function() {
    var ctx = document.getelementbyid('canvas').getcontext('2d');
    window.myline = chart.line(ctx, {
        data: linechartdata,
        options: {
            hover: {
                mode: 'new mode'
            },
            responsive: true,
            hovermode: 'index',
            stacked: false,
            scales: {
                yaxes: [{
                    type: 'linear',
                    display: true,
                    position: 'left'
                }],
                xaxes: [{
                    type: 'time',
                    time: {
                    parser: 'mmm yyyy',
                        tooltipformat: 'mmm yyyy',
                        displayformats: {
                            'millisecond': 'mmm yyyy',
                            'second': 'mmm yyyy',
                            'minute': 'mmm yyyy',
                            'hour': 'mmm yyyy',
                            'day': 'mmm yyyy',
                            'week': 'mmm yyyy',
                            'month': 'mmm yyyy',
                            'quarter': 'mmm yyyy',
                            'year': 'mmm yyyy',
                        }
                    }
                }]
            }
        }
    });
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<canvas id="canvas" ></canvas>


Related Query

More Query from same tag