[Chartjs]-Chart.js – how to make proportional intervals on X axis on line chart

by

3👍

✅

  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>

Leave a comment