如何在 react-chartjs-2 中获取动态步长

Question

I am using Chart.js to draw graphs in typescript. I want to get a dynamic weight and bring a minimum and a maximum . And with maxTicksLimit as 5 , I want to keep 5 Ticks no matter what data comes in. The decimal point of body weight is taken to the first decimal point.

ex) 50.3

I want to show the difference between minimum and maximum as much as possible.

please help me!!!

ex1) maximum weight: 74.5, minimum weight: 71

result
Y Axis maximum weight: 76, Y Axis minimum weight: 71

ex1 result image

enter image description here

ex2) maximum weight: 76.9, minimum weight: 62

result
Y Axis maximum weight: 76, Y Axis minimum weight: 61

ex2 result image

enter image description here

Answer 1

I solved this problem in the following way.

There was a callback function of afterBuildTicks in chart.js

※ chart.js documents link .

It becomes possible to customize the ticks.

//... middle code skip
const getChartMaxAndMin = (
    maxValue,
    minValue
): { max: number; min: number } => {
    // Convert all decimal places to integers
    let max = Math.ceil(maxValue);
    let min = Math.floor(minValue);
    // a multiple of 5
    const MULTIPLES = 5;
    const DIVIDED_REMAINING_VALUE_LIMIT = 3;
    // Maximum to Minimum difference
    const diff = max - min;
    const diffDividedRemainingValue = diff % MULTIPLES;

    const remainingValue =
        MULTIPLES *
            (diffDividedRemainingValue > DIVIDED_REMAINING_VALUE_LIMIT
                ? Math.floor(diff / MULTIPLES) + 2
                : Math.floor(diff / MULTIPLES) + 1) -
        diff;

    if (remainingValue % 2 !== 0) {
        max = max + Math.floor(remainingValue / 2) * 2;
        min = min - Math.floor(remainingValue % 2);
        return { max, min };
    }

    max = max + remainingValue / 2;
    min = min - remainingValue / 2;
    return { max, min };
};

const customizedAxesTicks = (axis) => {
    const EQUAL_PARTS = 5; // set 5 parts
    const max = axis.max;
    const min = axis.min;
    const steps = (max - min) / EQUAL_PARTS;
    const ticks = [];

    for (let i = min; i <= max; i += steps) {
        ticks.push(i);
    }
    axis.ticks = ticks;
    return;
};

const {max, min} = getChartMaxAndMin(68,57);

const chartOptions = {
  //... code skip
  scales: {
    yAxes: [
      {
        //... code skip
        ticks: {
          max: max,
          min: min
  },
  afterBuildTicks: customizedAxesTicks,
  //... code skip
};

I would appreciate it if you could let me know if there is a better way

Answer 2

The beforeBuildTicks callback also works to create a dynamic tick step size. Here is the code:

{
    maintainAspectRatio: false,
    tooltips: {
        mode: 'label',
        position: 'nearest',
    },
    scales: {
        xAxes:[
            {...}
        ],
        yAxes: [
            {
                position: 'left',
                id: 'y-axis-0',
                scaleLabel: {
                    display: true,
                    labelString: 'label string goes here',
                    fontSize: 16,
                },
                ticks: {
                    beginAtZero: true,
                    stepSize: .25,
                },
                beforeBuildTicks: function(axis) {
                    if (axis.max >= 17) {
                        axis.options.ticks.stepSize = 1;
                    } else if (axis.max >= 10) {
                        axis.options.ticks.stepSize = .5;
                    }
                }
            }
        ]
    }
}