CODEWITHSUNDEEP
vue.jschart.jsvue-chartjs
Alvaro Navarrete
Alvaro Navarrete

Reputation: 21

ChartJS Print several points between a range of time

I wanted to print several point among the time using ChartJS.

When I set the data like this:

chartData: {
                datasets: [{
                    data: [
                        {x: '10:30', y: 20},
                        {x: '11:30', y: 20},
                        {x: '11:44', y: 20},
                        {x: '13:30', y: 20},
                        {x: '14:30', y: 20},
                        {x: '11:11', y: 20},
                        {x: '12:35', y: 20},
                        {x: '10:44', y: 20}
                    ]
                }]
            }

I get a chart that look like this:

enter image description here

I'd like that the 11:11 point was printed between 10:30-11:30, and so with 12:25 and 10:44 points

Upvotes: 0

Views: 281

Answers (1)

user2057925
user2057925

Reputation: 2653

You could use time cartesian axis as index axis. In this way you should achieve your goal. The data has been sorted, ascendingly.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
    type: 'line',
    data: {
        datasets: [{
           data: [
             {x: '10:30', y: 20},
             {x: '10:44', y: 20},
             {x: '11:11', y: 20},
             {x: '11:30', y: 20},
             {x: '11:44', y: 20},
             {x: '12:35', y: 20},
             {x: '13:30', y: 20},
             {x: '14:30', y: 20},
          ],
          borderColor: 'red',
          pointRadius: 5
        }]
    },
    options: {
      plugins: {
        legend: false
      },
      scales: {
        x: {
          type: 'time',
          time: {
            unit: 'hour',
            paser: 'HH:mm'
          }
        }
      }
    }
});
.myChartDiv {
  max-width: 600px;
  max-height: 400px;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/global/luxon.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chartjs-adapter-luxon.min.js"></script>
<div class="myChartDiv">
  <canvas id="myChart" width="600" height="400"></canvas>
</div>

Upvotes: 1

Related Questions