CODEWITHSUNDEEP
chart.js
cdmh
cdmh

Reputation: 3344

Chart.js date x-axis with sparse datapoints

I want to create a stepped line chart like this where I have sparse data points for the x-axis, but want the scale to be constant.

chart

For example, some of the data I have is as below, and I want horizontal lines draw between dates where there is no given datapoint.

    "labels": ["05-Jul-07", "06-Dec-07", "07-Feb-08", "10-Apr-08", "08-Oct-08", "06-Nov-08", "04-Dec-08", "08-Jan-09", "05-Feb-09", "05-Mar-09", "04-Aug-16", "02-Nov-17", "02-Aug-18"],
    "datasets": [{
        "data": [
    { x: "05-Jul-07", y: 0.0575 },
    { x: "06-Dec-07", y: 0.055 },
    { x: "07-Feb-08", y: 0.0525 },
    { x: "10-Apr-08", y: 0.05 },
    { x: "08-Oct-08", y: 0.045 },
    { x: "06-Nov-08", y: 0.03 },
    { x: "04-Dec-08", y: 0.02 },
    { x: "08-Jan-09", y: 0.015 },
    { x: "05-Feb-09", y: 0.01 },
    { x: "05-Mar-09", y: 0.005 },
    { x: "04-Aug-16", y: 0.0025 },
    { x: "02-Nov-17", y: 0.005 },
    { x: "02-Aug-18", y: 0.0075 }
  ],

but this gives me a label for each given point, without any scale of time enter image description here

I'd appreciate help in learning this new library (using a new language), thanks!

Here's the chart code: 

<script type="text/javascript">
var ctx = document.getElementById('baserates').getContext('2d');
new Chart(ctx, {
  "type": "line",
  "data": {
    "labels": ["05-Jul-07", "06-Dec-07", "07-Feb-08", "10-Apr-08", "08-Oct-08", "06-Nov-08", "04-Dec-08", "08-Jan-09", "05-Feb-09", "05-Mar-09", "04-Aug-16", "02-Nov-17", "02-Aug-18"],
    "datasets": [{
      "data": [
        { x: "05-Jul-07", y: 0.0575 },
        { x: "06-Dec-07", y: 0.055 },
        { x: "07-Feb-08", y: 0.0525 },
        { x: "10-Apr-08", y: 0.05 },
        { x: "08-Oct-08", y: 0.045 },
        { x: "06-Nov-08", y: 0.03 },
        { x: "04-Dec-08", y: 0.02 },
        { x: "08-Jan-09", y: 0.015 },
        { x: "05-Feb-09", y: 0.01 },
        { x: "05-Mar-09", y: 0.005 },
        { x: "04-Aug-16", y: 0.0025 },
        { x: "02-Nov-17", y: 0.005 },
        { x: "02-Aug-18", y: 0.0075 }
      ],
      "fill": true,
      "backgroundColor": "rgb(192,217,255)",
      "borderColor": "rgb(0,98,251)",
      "lineTension": 0.1,
      steppedLine: true
    }]
  },
  "options": {
    "legend": {
      "display": false
    }
  }
});
</script>

Upvotes: 1

Views: 869

Answers (1)

HeadhunterKev
HeadhunterKev

Reputation: 1788

What about this? My code in the JSBin

Possible chart solution example

Simply use a time scale. You can set it to a specific unit like I prepared in the JSBin if you want. Otherwise chart.js decides the unit automatically.

options:
  scales: {
    xAxes: [{
      type: 'time'
    }]
  }
}

Note that I changed the fill color to rgba so you can see the gridLines. You don't need to do that if you don't want to. Another change I made is removing the labels-property because you don't need it if you follow the data-format of giving x- and y-values.

You should also note that the vertical line on the right side gets cut off. I don't know a way to solve that problem and can't find a solution. In your example image it works well. I would love to hear your solution to that!

Upvotes: 2

Related Questions