Search code examples
chart.jsscaletype

Chart.js - scaleType='date' not working

Using Chart.js, I'm trying to get the x-axis (and toolips) to show a DATE, but all I can get are large integers appearing as the x-axis label. I've compared what the example in the documentation does and I don't see what it's doing that i'm not. Can anyone please help?

Here's the tiny example that I created showing it not working. (btw - as a side issue, notice that if the color of the RED line is spelled Red rather than red, the line looks normal, but tooltips no longer work on that line) https://plnkr.co/edit/CKUf4zFC1vhe3VNUF5Lf?p=preview

javascript for the above plunker example is below
----------------------------------------------------
<!DOCTYPE html>
<html>
<head>
</head>

<body>
  <div>
    <canvas id="canvas"></canvas>

    <script>
      var chartData = {
        datasets: [{
          borderColor: 'Red',
          label: 'Capital R in borderColor, tooltips dont work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 25
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 28
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 22
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 18
          }]
        }, {
          borderColor: 'green',
          label: 'borderColor all lower case, tooltips now work',
          data: [{
            x: new Date('2011-04-11T11:45:00'),
            y: 15
          }, {
            x: new Date('2011-04-11T12:51:00'),
            y: 18
          }, {
            x: new Date('2011-04-11T14:10:00'),
            y: 12
          }, {
            x: new Date('2011-04-11T15:15:00'),
            y: 8
          }]
        }, ]
      };


      window.onload = function() {

        var ctx = document.getElementById("canvas").getContext("2d");
        window.myScatterxx = Chart.Scatter(ctx, {
          data: chartData,
          scaleType: 'date',
          options: { title: { display: true, text: "scaleType='date' isn't working", fontSize:36} },
        });
      };
    </script>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js">
    </script>

</body>
</html>
Solution

  • First of all, since the documentation is messy, I'm not surprised you didn't get how to create a time-scale chart. The actual call is the following :

    window.myScatterxx = Chart.Scatter(ctx, {
    data: chartData,
    options: {
        title: {
            display: true,
            text: "it is now working",
            fontSize: 36
        },
        scales: {
            xAxes: [{
                // This is the important part
                type: "time",
            }]
        }
    },
});

    Now you have the correct syntax, you'd need to import the correct library as well. As I can see in the piece of code you gave, you imported Chart.min.js, but you need more since you know work with the time element.

    You can either :

    Finally, I also noticed in your code you had a problem displaying tooltips for the red dataset. It is because you defined its color as Red. Change it to red and tooltips will work again :

    datasets: [{
    borderColor: 'red',
    label: 'Capital R in borderColor, tooltips now work',
    data: [
        // ...
    ]
}]

    You can see all these fixes live in this jsFiddle, and here is the final result :

    enter image description here