Chartjs-Unable to change y-axis value dynamically based on data for Stacked bar chart in reactjs

by

0👍

To dynamically compute the ticks you need a couple things.

  1. A utility to precompute and find the maximum value in your data.
  2. A utility to compute the maximum axis tick.

To find the maximum value in the array of (presumably objects) data you can do something similar to the following.

const findMaxVal = (arr, field) => Math.max(...arr.map((el) => el[field]));

const data = [
  {
    id: 0,
    customField: 23
  },
  {
    id: 1,
    customField: 31
  },
  {
    id: 2,
    customField: 29
  },
  {
    id: 3,
    customField: 7
  },
  {
    id: 4,
    customField: 13
  }
];

const findMaxVal = (arr, field) => Math.max(...arr.map((el) => el[field]));

console.log(findMaxVal(data, "customField")); // 31

[edit]

You mention in comments your data has this shape

[
  {xaxis: "bar-stacked", data:[0,12,19,50,2,30,14]},
  {yaxis: "bar-stacked", data:[2,4,15,29,10,3,1]},
]

To find the maximum value in the data you can simply spread data into Math.max.

const findMaxVal = data => Math.max(...data);

const data = [
      {xaxis: "bar-stacked", data:[0,12,19,50,2,30,14]},
      {yaxis: "bar-stacked", data:[2,4,15,29,10,3,1]},
    ];

const findMaxVal = data => Math.max(...data);

console.log(findMaxVal(data[0].data)); // 50
console.log(findMaxVal(data[1].data)); // 29

[/edit]

To compute the max tick you can compute the next "chunked" tick after the maximum computed from data with something similar to:

const computeTicks = (val, chunk = 10) => Math.floor(val / chunk) * chunk + chunk;

or

const computeTicks = (val, chunk = 10) => Math.ceil(val / chunk) * chunk;

The difference between the two is what to "round" to if the value is even divided by the chunk amount, i.e. if data max 80 should have max tick of 80 or 90. This first would yield 90 while the second would yield 80.

const computeTicks = (val, chunk = 10) => Math.floor(val / chunk) * chunk + chunk;

console.log(computeTicks(13)); // 20
console.log(computeTicks(19, 10)); // 20
console.log(computeTicks(20, 10)); // 30

console.log(computeTicks(13, 5)); // 15
console.log(computeTicks(13, 6)); // 18
console.log(computeTicks(18, 6)); // 24
console.log(computeTicks(19, 6)); // 24

Put these two together to compute the ticks to display in the graph.

const dataMax = findMaxVal(data, 'fieldIwantMaxOf'); // <-- compute max val before JSX return

...

<Bar
  ...
  options={{
    ...,
    scales: {
      ...,
      yAxes: [
        {
          ...,
          ticks: {
            ...,
            max: computeTicks(dataMax, 10) || 500, // <-- compute max or use default 500
          }
        },
        ...,
      ]
    }
  }}
/>

Leave a comment