I have below D3 js code -
const svg = select(svgRef.current);
const { width, height } = wrapperRef.current.getBoundingClientRect();
const stackGenerator = stack().keys(keys);
const layers = stackGenerator(data);
const extent = [0, 100];
const yScale = scaleLinear().domain(extent).range([height, 0]);
const x0Scale = scaleBand()
.domain(data.map((d) => d.name))
.range([0, width])
.padding(0.46);
const x1Scale = scaleBand()
// .domain(data.map((d) => d.type))
.rangeRound([0, x0Scale.bandwidth()])
.padding(0.12);
const xAix = axisBottom(x0Scale);
const yAix = axisLeft(yScale);
svg.select(".x-axis").attr("transform", `translate(0, ${height})`).call(xAix);
svg
.select(".y-axis")
.attr("transform", `translate(${0 + 25}, 0 )`)
.call(yAix);
I have extent 0 to 100 for Y Axis. I am getting Y-Axis in the group of 10 points - (0,10,20,30,40,50,60,70,80,90,100)
I want to plot it in the gap of 25 - (0,25,50,75,100)
How can I achieve it?
when creating the y-axis you can pass the number of ticks that you want to render
svg
.select(".y-axis")
.attr("transform", `translate(${0 + 25}, 0 )`)
.call(yAix.ticks(5));
the other way would be using tickValues
svg
.select(".y-axis")
.attr("transform", `translate(${0 + 25}, 0 )`)
.call(yAix.tickValues([0,25,50,75,100]));