[Solved]-How can i show the labels on the x axis when there is data overlap in d3js?-d3.js

I don't think it would be nice to display all the values in smaller svg. You need to take a decision here. I can suggest you two ways:

1. You can create scrollable svg and display
2. Either don't display x axis values as you are showing on legend.

But if you still want to display you can create a custom logic of yourself like below:

You can use tickValues hook on x axis, and select which values you want to display. In my case i want to show 5 ticks.

g.append("g")
                  .attr("class", "axis")
                  .attr("transform", "translate(0," + height + ")")
                  .transition()
                  .duration(1000)
                  .call(d3.axisBottom(x).tickValues(x.domain().filter((d, i) => { 
                    const value = Math.floor(data.length/5)
                    return i % value === 0;})))
                  .selectAll("text")    
                    .style("text-anchor", "middle")
                    .attr("dx", "3em")
                    .attr("dy", "1em")
                    .attr("transform", "rotate(30)");

Please find working code at - https://stackblitz.com/edit/angular-yry3au