Skip to content Skip to sidebar Skip to footer

Bars Are Going Beyond The Chart Range In D3 Bar Chart

Bars in the grouped bar chart positioned correctly across x axis, however even thought I have a pre-defined range some of the bars are always beyond the chart with some y value equ

Solution 1:

This code sets 5000 as the max value:

const maxValue = d3.max(storeData.dataset[0].values, (d) => d.value);
yScale.domain([maxValue, 0]);

Actually, max value is much higher (I get 400000000):

const maxValue = storeData.dataset.reduce((maxAll, item) => {
  return item.values.reduce((maxItem, val) => 
    Math.max(maxItem, val.value), maxAll);
}, 0);
    
console.log('MAX VALUE: ', maxValue);

Setting a correct value as domain upper limit for the yScale should solve the issue.


Post a Comment for "Bars Are Going Beyond The Chart Range In D3 Bar Chart"