[Chartjs]-Set minimum number of steps in line chart

by

1👍

✅

You can just use a second dataset with all the values being 10 and then make it transparent non hitable so no tooltip shows and hide it in the legend:

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [0, 0, 0, 0, 0, 0],
        borderColor: 'blue'
      },
      {
        label: 'filler',
        data: [10, 10, 10, 10, 10, 10],
        borderWidth: 1,
        fill: false,
        pointHitRadius: 0,
        radius: 0,
        hoverRadius: 0,
        borderColor: '#00000000'
      }
    ]
  },
  options: {
    legend: {
      labels: {
        filter: (lEl) => (lEl.text !== 'filler')
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

EDIT:

You can use the suggestedMax option, this will make it that it will always show 10 as max unless the data goes above it, then it will adjust the max to whatever the data needs automatically.

var options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [0, 0, 0, 0, 0, 0],
      borderColor: 'blue'
    }]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          suggestedMax: 10
        }
      }]
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

-1👍

Adding to answer/comments presented by @LeeLenalee I updated code to chart.js v.3x

Hence, I would recommend:

  1. update to latest version of chart.js v3.5.1:
    in code you have both links
    improved performance and new options, expecially if data contains dates as in your case.
    (v3.x not backwards compatible with v2.x)
  2. use Time Cartesian Axis
    note difference between "time" (equidistance) and "timeseries" (according whether or not there is a datapoint)
    and you would have to add momentjs and chartjs-adapter-moment (see code snippet) or add luxon etc … as suggested by @LeeLenalee
    (x-Axis daily view, weekly, monthly, annual – moment.js handles the filtering). Comes in handy for you 😜

Please advise if following environment and data structure is correct (I guessed your data structure):

let yourDataJson = [{x: '2021-08-13', y: 20.2},{x: '2021-08-15', y: 16},{x: '2021-08-19', y: 9},{x: '2021-08-23', y: 35},{x: '2021-09-02', y: 2}];

let yourData = {
  datasets: [{
    label: 'Orders: Product A',
    data: yourDataJson,
    borderColor: 'rgba(0,0,255,1)',
    backgroundColor: 'rgba(0,0,255,0.5)',
    fill: true
  }
  ]
};

let yourOptions = {
  scales: {
    x: { // <-- v3.x now object "{", not array "[{" anymore
      type: 'timeseries', // <-- try "time" and "timeseries" to see difference
      time: {
        unit: 'day', // <-- set 'hour' / 'day' / 'week' / 'month' or 'year'
        displayFormats: {
          hour: 'h:mm a',
          day: 'ddd, MMM DD, YYYY',
          week: 'dddd',
          month: 'MMM'
        },
        tooltipFormat: 'dddd, MMM DD, YYYY' // <-- new in v3.x
      },
      ticks: {
        minRotation: 80, // avoiding overlapping of x-Axis ticks
        maxRotation: 90
      }
    },
    y: { // <-- v3.x now object "{", not array "[{" anymore
      ticks: {
        beginAtZero: true,
        callback: function (value) {
          if (Number.isInteger(value)) return value;
        }
      },
      suggestedMin: 0,
      // the data maximum used for determining the ticks is Math.max(dataMax, suggestedMax)
      suggestedMax: 10
    }
  }
};

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const myChart = new Chart(ctx, {
  type: 'line',
  data: yourData,
  options: yourOptions
});

document.querySelector('#btnTime').addEventListener('click', () => {
  myChart.options.scales['x'].type = 'time';
  myChart.update();
});
document.querySelector('#btnTimeseries').addEventListener('click', () => {
  myChart.options.scales['x'].type = 'timeseries';
  myChart.update();
});
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script> -->

<!-- get the latest version of Chart.js, now at v3.5.1 -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<!-- for x-Axis type 'time' or 'timeseries' to work, you need additional libraries -->
<!-- (like moment.js and its adapter) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment"></script>

<button id='btnTime'>time</button>
<button id='btnTimeseries'>timeseries</button>

<canvas id="chartJSContainer" width="600" height="400"></canvas>

Leave a comment