Chartjs-How to start the chart from specific time and offest hour and then show the data on chart from target datetime in chartjs

by

1👍

You can use the min and max of the scale to let the scale start and end later:

Example:

var data = [{
    "t": 1622287843965,
    "y": "35181.38"
  },
  {
    "t": 1622288064247,
    "y": "35779.44"
  },
  {
    "t": 1622288261196,
    "y": "35681.55"
  },
  {
    "t": 1622288644294,
    "y": "35552.49"
  }
];
var ctx = document.getElementById('chartJSContainer');
const chartInstance = new Chart(ctx, {
  type: "line",
  data: {
    datasets: [{
      label: `Price`,
      data: data,
      backgroundColor: "rgba(134,159,152, 1)",
      borderColor: "rgba(174, 305, 194, 0.4)"
    }],
  },
  options: {
    parsing: {
      yAxisKey: 'y',
      xAxisKey: 't',
    },
    scales: {
      x: {
        display: true,
        type: 'time',
        min: 1622287643465,
        max: 1622288844294
      }
    },

  }
});
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.3.1/dist/chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"></script>
<canvas id="chartJSContainer" width="600" height="400"></canvas>

Documentation: https://www.chartjs.org/docs/master/axes/cartesian/time.html#common-options-to-all-axes

Leave a comment