Chartjs-Chartjs draw line chart where line go back and forth (by chronological order)

by

0👍

✅

try using string values on the x-axis… 

        labels: ['0', '1', '2'],
        datasets: [{
          label: data.players[0],
          data: [{x: '2', y: 15}, {x: '0', y: 25}, {x: '1', y: 45}]
        }]

see following working snippet… 

$(document).ready(function() {
    var chart = new Chart($('#myChart'), {
        type: 'line',
        data: {
            labels: ['0', '1', '2'],
            datasets: [{
              label: 'Max Ros',
              data: [{x: '2', y: 15}, {x: '0', y: 25}, {x: '1', y: 45}]
            }]
        },
        options: {
            scales: {
                yAxes: [{
                    ticks: {
                        fixedStepSize: 10,
                        beginAtZero: true
                    }
                }],
            },
        }
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.bundle.min.js"></script>
<canvas id="myChart"></canvas>

Leave a comment