chartschatjs

How to configure how many ticks Upgrade to 4

I upgraded from ChartJs 2 to 4. The layout and ticks are still not as before.

This is a comparision between the old one version 2 (on top), and the new one version 4 at the bottom

enter image description here

enter image description here

And this is another example: version 2 enter image description here

version 4

enter image description here

This is my code for chart configuration:

options: {
        legend: { display: false },
        responsive: false,
        maintainAspectRatio: false,
        scales: {
          x: {
              type: "time",
              distribution: "timeseries",
              time: { parser: "YYYY-MM-DDTHH:mm", tooltipFormat: "ll" },
              ticks: {
                source: "data",
                maxRotation: 90,
                minRotation: 90,
                autoSkip: false
              }
            },
          y: { ticks: { beginAtZero: true, major: { enabled: true } , autoSkip: false } }
        },
        tooltips: {
          callbacks: {
            label: this.label || defaultLabel
          }
        },
      }

And this is the shared configuration for each Line dataset:

{
data: [],
  backgroundColor: "#2bb2e7",
  borderColor: "#2bb2e7",
  color: '#000',
  fill: false,
  label: "",
  pointRadius: 5,
  pointHoverRadius: 20,
  borderWidth: 3,
  cubicInterpolationMode: 'monotone',
  tension: 0.4
}

the question is:

How to control how many ticks showing on the "Y" axe (version 2 is better auto-calculating how many ticks)?

Solution

  • You can adjust the number of ticks you need by using stepSize and maxTicksLimit.

    For reference, please check the definition here:
    https://www.chartjs.org/docs/latest/api/#radialtickoptions

    options: {
  legend: { display: false },
  responsive: false,
  maintainAspectRatio: false,
  scales: {
    x: {
      type: "time",
      distribution: "timeseries",
      time: { 
        parser: "YYYY-MM-DDTHH:mm", 
        tooltipFormat: "ll" 
      },
      ticks: {
        source: "data",
        maxRotation: 90,
        minRotation: 90,
        autoSkip: false
      }
    },
    y: { 
      ticks: { 
        beginAtZero: true, 
        major: { enabled: true }, 
        autoSkip: false,
        stepSize: 5,  // Set the interval for Y-axis ticks
        maxTicksLimit: 100,  // Set the maximum number of ticks displayed
        suggestedMax: 100,  // Suggest the maximum value for Y-axis
        suggestedMin: 0  // Suggest the minimum value for Y-axis
      } 
    }
  },
  tooltips: {
    callbacks: {
      label: this.label || defaultLabel
    }
  },
}