Chart.js - how to make proportional intervals on X axis on line chart

Question

I'm using Chart.js to draw the line chart with 6 points. That points are:

  x: 140,      y: null,
  x: 150.5,    y: 3500,
  x: 886.35,   y: 3500,
  x: 1617.2,   y: 0,
  x: 2348.05,  y: 0
  x: 2583,     y: null

As one can see, the intervals between x0 and x1 (and also x4-x5) are much smaller than x1-x2-x3-x4. But on the chart they are being drawn like they are equal:

I would rather expect, that the gap between x0 and x1 will be much shorter than between x1 and x2. Can it be done some way?

Code snippet:

var chart = new Chart(document.getElementById("myChart1"), {
  type: 'line',
  data: {
    labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
    datasets: [{
      label: 'My chart',
      spanGaps: true,
      lineTension: 0,
      data: [{
          x: 140,
          y: null
        },
        {
          x: 155.5,
          y: 3500
        },
        {
          x: 886.35,
          y: 3500
        },
        {
          x: 1617.2,
          y: 0
        },
        {
          x: 2348.05,
          y: 0
        },
        {
          x: 2583,
          y: null
        }
      ],
      fill: false,
      borderColor: '#4bc0c0'
    }]
  },
  options: {
    showXLabels: 30,
    legend: {
      display: false
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        },
        ticks: {
          suggestedMin: 0,
          suggestedMax: 3700
        }
      }],
      xAxes: [{
        scaleLabel: {
          display: true,
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10
        }
      }]
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="myChart1"></canvas>

Answer 1

1. Just add type: 'linear' to the xAxes object, like this:

   xAxes: [{ type: 'linear', scaleLabel: { ...

2. Your first point has y:null and it won't be included on the chart. I changed it to x:140,y:0.

try{
var chart = new Chart(document.getElementById("my_chart"), {
  type: 'line',
  data: {
    labels: [140, 155.5, 886.35, 1617.2, 2348.05, 2583],
    datasets: [{
      label: 'My chart',
      spanGaps: false,
      lineTension: 0,
      data: [{
          x: 140,
          y: 0
        },
        {
          x: 155.5,
          y: 3500
        },
        {
          x: 886.35,
          y: 3500
        },
        {
          x: 1617.2,
          y: 0
        },
        {
          x: 2348.05,
          y: 0
        },
        {
          x: 2583,
          y: null
        }
      ],
      fill: false,
      borderColor: '#4bc0c0'
    }]
  },
  options: {
    showXLabels: 30,
    legend: {
      display: false
    },
    tooltips: {
      enabled: true,
    },
    scales: {
      yAxes: [{
        scaleLabel: {
          display: true
        },
        ticks: {
          suggestedMin: 0,
          suggestedMax: 3700
        }
      }],
      xAxes: [{
      type: 'linear', /* <--- this */
      scaleLabel: {
          display: true,
        },
        ticks: {
          autoSkip: true,
          maxTicksLimit: 10
        }
      }]
    }
  }
});
}catch(e){}

body { m1argin-bottom: -30px }

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="my_chart"></canvas>