I want to set Y Axis by 0-100 percent in the intervals of 0-25-50-75-100.
For that I am setting ticks to 4.
But I can see Y axis in the intervals of 0-20-40-60-80-100
How can I set Y axis in the intervals of 0-25-50-75-100 ??
I have below code -
const extent=[0,100];
const yScale = scaleLinear().domain(extent).range([height, 0]);
const x0Scale = scaleBand()
.domain(data.map((d) => d.month))
.range([0, width])
.padding(0.46);
const x1Scale = scaleBand()
// .domain(data.map((d) => d.type))
.rangeRound([0, x0Scale.bandwidth()])
.padding(0.22);
const xAix = axisBottom(x0Scale);
const yAix = axisLeft(yScale);
svg
.select(".x-axis")
.attr("transform", `translate(${xMargin}, ${height + yMargin})`)
.style("font-weight", "bold")
.style("font-size", "0.700rem")
.call(xAix);
svg
.select(".y-axis")
.attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix.ticks(4).tickSize(-width).tickFormat(function(d){return d + "%"}));
Use tickValues instead of ticks.
svg
.select(".y-axis")
.attr("transform", `translate(${0 + xMargin}, ${yMargin} )`)
.style("font-weight", "bold")
.style("font-size", "0.725rem")
.call(yAix
.ticksValues([0, 25, 50, 75, 100])
.tickSize(-width)
.tickFormat(function(d){return d + "%"}));
ticks is used as a hint only - d3 might display a few more or less ticks, depending on the scale and the available screen space.
tickValues allows you to select the exact values for which to display ticks.
d3 takes priority for some of the tick functions , you can do force tick Values by tickValues(d3.range(minValue, maxValue, noOfSteps)); . In your case
yAix.tickSize(-width).tickValues(d3.range(0,100,4).tickFormat(function(d){return d + "%"})
or use tickValues(d3.range(d3.min(dataarray),d3.max(dataarray),noOfticks))