Сортировка осей

подскажите, кто работал с chart js, как добиться поведения чтобы при добавлении точек на график они сортировались по возрастанию? Например, если я хочу добавить временной промежуток, который уже прошел, то он по логике должен появится вот тут до, но точки всегда идут друг за другом.

var ctx = document.getElementById('myChart');
var chart = new Chart(ctx, {
    type: 'line',
    options: {
        responsive: true,
        title: {
            display: true,
            text: "Chart.js Time Scale"
        },
        scales: {
            xAxes: [{
                type: "time",
                time: {
                    format: 'DD/MM/YYYY',
                    tooltipFormat: 'll'
                },
                scaleLabel: {
                    display: true,
                    labelString: 'Date'
                }
            }],
            yAxes: [{
                scaleLabel: {
                    display: true,
                    labelString: 'value'
                }
            }]
        }
    },
    data: {
        datasets: [
            {
            label: 'Tesla',
            data: [{
                x: "04/01/2014", y: 200
            }, {
                x: "10/01/2014", y: 300
            }, {
                x: "04/01/2015", y: 1000
            }, {
                x: "10/01/2015", y: 500
            }, {
                x: "01/04/2020", y: 100
            }],
            borderColor: 'red',
            fill: false,
            borderWidth: 1
        },
        {
            label: 'Gazprom',
            data:  [{
                x: "01/04/2014", y: 100
            }, {
                x: "01/10/2014", y: 50
            }, {
                x: "01/04/2015", y: 400
            }, {
                x: "01/10/2015", y: 700
            }],
            borderColor: 'blue',
            fill: false,
            borderWidth: 1
        }]
    },
});
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Document</title>
</head>
<body>
    <section class="chart">
      <canvas id="myChart" width="1200px" height="800px"></canvas>
    </section>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script src="js/script.js"></script>
</body>
</html>


Ответы (0 шт):