Search code examples
javascriptreact-chartjschartjs-2.6.0

Set Minimum date for X Axis in scatter plot ChartJS


When I pass my data points with a numerical value for the Y coordinate and a date value for the x coordinate the scatter plot starts the x axis at 1976 even though my earliest date is 2018. How can I set the x axis starting value? Here is what my data and options look like. Date Format: 2018/06/30

data: {
    datasets: [{
        label: 'Scatter Dataset',
        data: [{
            x: 10,
            y: ‘2018/06/30’
        }, {
            x: 0,
            y: ‘2018/06/01’
        }, {
            x: 100,
            y: ‘2018/06/04’
        }]
    }]
}
options: {
    scales: {
        xAxes: [{
            type: 'time',
                     ticks: {
                     suggestedMin: ‘2018/01/01’,
            }
        }]
    }
}

I have trying passing new Date(‘2018/01/01’) to the suggestedMin, I have also tried using Min instead of suggestedMin.


Solution

  • We can add minimum starting point on x axis like this,

    data: {
        datasets: [
            {
                label: 'Scatter Dataset',
                data: [
                    {
                        x: 10,
                        y: ‘2018/06/30’
                    }, {
                        x: 0,
                        y: ‘2018/06/01’
                    }, {
                        x: 100,
                        y: ‘2018/06/04’
                    }
                ]
            }
        ]
    },
    
    options: {
        scales: {
            xAxes: [{
                type: 'time',
                ticks: {
                    suggestedMin: '2018/01/01',
                },
                time: {
                    min:2018/01/01,
                    max:2028/02/02
                }
            }]
        }
    }