Chart JS - Use time for xAxes

Related searches

i added this code

scales: 
{
        xAxes: 
        [{
            type: 'time',
            time: 
            {
                unit: 'month',
                displayFormats: { month: 'MM' },
                max: '2017-10-09 18:43:53',
                min: '2017-10-02 18:43:53'
            }
        }]
},

to the options but it does not work. Any ideas what i'm making wrong?

FIDDLE -> https://jsfiddle.net/o473y9pw/


Since you wish to use time for x-axis, your labels array should be an array of date/time string (labels array is correspondent to x-axis).

You would also need to set the parser property (to parse the date/time correctly), and x-axis' ticks source to data (to properly generate x-axis ticks).

UPDATE

If you only have a min and max date then, you can create a nice little plugin to populate the labels (date) array dynamically, as such :

plugins: [{
   beforeInit: function(chart) {
      var time = chart.options.scales.xAxes[0].time, // 'time' object reference
         // difference (in days) between min and max date
         timeDiff = moment(time.max).diff(moment(time.min), 'd');
      // populate 'labels' array
      // (create a date string for each date between min and max, inclusive)
      for (i = 0; i <= timeDiff; i++) {
         var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
         chart.data.labels.push(_label);
      }
   }
}]

note: moment.js is used to make calculations easier.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩ ( for demonstration purposes, I've changed the time unit to day )

$(document).ready(function() {

   new Chart(document.getElementById("chartBox"), {
      type: 'line',
      data: {
         datasets: [{
            data: [12, 19, 3, 5, 2, 3, 32, 15],
            label: "",
            borderWidth: 2,
            borderColor: "#3e95cd",
            fill: false,
            pointRadius: 0
         }]
      },
      options: {
         scales: {
            xAxes: [{
               type: 'time',
               time: {
                  parser: 'YYYY-MM-DD HH:mm:ss',
                  unit: 'day',
                  displayFormats: {
                     day: 'ddd'
                  },
                  min: '2017-10-02 18:43:53',
                  max: '2017-10-09 18:43:53'
               },
               ticks: {
                  source: 'data'
               }
            }]
         },
         legend: {
            display: false
         },
         animation: {
            duration: 0,
         },
         hover: {
            animationDuration: 0,
         },
         responsiveAnimationDuration: 0
      },
      plugins: [{
         beforeInit: function(chart) {
            var time = chart.options.scales.xAxes[0].time, // 'time' object reference
               timeDiff = moment(time.max).diff(moment(time.min), 'd'); // difference (in days) between min and max date
            // populate 'labels' array
            // (create a date string for each date between min and max, inclusive)
            for (i = 0; i <= timeDiff; i++) {
               var _label = moment(time.min).add(i, 'd').format('YYYY-MM-DD HH:mm:ss');
               chart.data.labels.push(_label);
            }
         }
      }]
   });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js"></script>

<canvas id="chartBox"></canvas>

Chart JS - Use time for xAxes, Chart JS - Use time for xAxes. scales: { xAxes: [{ type: 'time', time: { unit: 'month', displayFormats: { month: 'MM' }, max: '2017-10-09 18:43:53', min: '2017-10-02 18:43:53' } }] }, to the options but it does not work. Time Cartesian Axis. The time scale is used to display times and dates. When building its ticks, it will automatically calculate the most comfortable unit base on the size of the scale. Date Adapters. The time scale requires both a date library and corresponding adapter to be present. By default, Chart.js includes an adapter for Moment.js.


The dataset should be an array of objects with properties x for time and y for value. How else could you draw the chart, right?

$(document).ready(function() {
  var data = [{
      x: new moment().add(-10, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-8, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-6, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-4, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-2, "months"),
      y: Math.random() * 100
    },
    {
      x: new moment().add(-0, "months"),
      y: Math.random() * 100
    },
  ];

  new Chart(document.getElementById("chartBox"), {
    type: 'line',
    data: {
      datasets: [{
        data: data,
        borderColor: "#3e95cd",
        fill: false
      }]
    },
    options: {
      scales: {
        xAxes: [{
          type: 'time'
        }]
      },
      legend: false
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js"></script>

<canvas id="chartBox"></canvas>

How to format x-axis time scale values in Chart.js v2, Just set all the selected time unit's displayFormat to MMM DD options: { scales: { xAxes: [{ type: 'time', time: { displayFormats: { 'millisecond':  Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X axis and 1 or more Y axis to map points onto the 2 dimensional canvas.


If the xAxis label is in date format use this code

time: 
     {
         format: 'MM',
         unit: 'month',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-10-02 18:43:53'
     }

If the xAxis label is as what u used numerals use

 time:
      {
         format: 'MM',
         unit: 'month',
         parser:'MM',
         displayFormats: { month: 'MM' },
         max: '2017-10-09 18:43:53',
         min: '2017-00-02 18:43:53'
      }

ChartJS Time Format example, <!doctype html> <html> <head> <title>Line Chart</title> <script title: { display: true, text: "Chart.js Time Scale" }, scales: { xAxes: [{ type: "time", time: { format:  Chart.js version: 2.7.2. Browser name and version: Link to your project: manhar-developer changed the title X Axes time scale (hour format) in chart.js not working [Bug] X Axes time scale (hour format) in chart.js not working on Jun 28, 2018.


You might want to change a few things.

  1. Your data should include time data.

  2. If you set scale unit to be month, your min max should be more than one month to see the actual scales.

Here's simplified working example.

https://jsfiddle.net/f2xmkkao/

Showing Date-Time values on a Chart Axis, I tried to use your example for Date time example using TimeStamps with following data. I am getting weird time on x axis (500 ms, 000 ms, 200 ms etc) I am doing  You can create charts on a Date / Time axis by setting, Date / Time values to x property of dataPoint. If you set JavaScript Date objects to x, then CanvasJS automatically figures out and renders a date/time axis. In case you want to use Timestamps instead, then you can do so by setting xValueType property of dataSeries to “dateTime”.


Time · GitBook, tooltipFormat, String, The moment js format string to use for the tooltip. When providing data for the time scale, Chart.js supports all of the formats that var chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { xAxes: [{ time: { unit:  Chart.js is a popular open source library that helps us to plot data in web applications. It is highly customizable, but configuring all of its options remains a challenge for some people. Let’s


Chart.js xAxis time: This method is not implemented: either, I use moment.js in my project so I think the adapter is found (but maybe I missed something to using it with chart.js, i d'ont know). Please could you help me to  Your data starts at "2016-11-29T01:44:04.695Z" but the x-axis min is rounded to "2016-11-29T01:00:00.000Z". It'd be nice to be able to keep the hour unit but round to the nearest minute so that the min/max ticks don't have to start at the beginning of the hour.


Configuring Time Scales. You can use a time scale to display times and dates on a chart. As mentioned in the introductory Chart.js tutorial, you need to include Moment.js in your projects to display time. One restriction on using a time scale is that it can be displayed only on the x-axis.