Issue with displaying correct domain values in legend tick-CodePudding

I am working on continuous color legend using d3.interpolateViridis. I have problem in displaying the legend tick values. I want to display my min(at one end) and max(at another end) (domain values) in legend. I tried changing ticks value but no help.

Here is my code snippet:

//scale
var colorScale2 = d3.scaleSequential(d3.interpolateViridis).domain([0, 0.38]);
    
//other code
    
var legendscale = d3.scaleLinear()
.range([0, legendheight - margin.top - margin.bottom])
.domain(colorscale.domain());
        
// scale tick
var legendaxis = d3.axisRight()
.scale(legendscale)
.tickSize(16)
.ticks(2);

Also, I have shared JS fiddle link where it takes tick as 0.0 and 0.2(this is supposed to be max value: 0.38).

https://jsfiddle.net/shru90/e42vcLy0/30/

Note: My min value is 0 and max is 0.38(which can vary based on data)

CodePudding user response：

By default, the axis puts ticks at nice, round values. If there are specific values that you want to have tick marks for, then you can set the tickValues:

d3.axisRight()
    .scale(legendscale)
    .tickSize(16)
    .tickValues(legendscale.domain());