In d3 Chart my xAxis tick text is not coming fully

Question

I am using a d3 chart in my project, In my chart I am formatToDateAndTime formatting my xAxis tick to show date in particular format.

My Issue what I am seeing is my xAxis tick text is not coming fully, It's cutting from starting.

Image below show's for the first value should come 'oct 16 12:00 AM' like this but, it's only showing '16 12:00 AM' in ticks.

This is my code -

var xAxis = d3
            .axisBottom(xScale)
            .ticks(5);

        const formatToDateAndTime = d3.timeFormat("%b %d %I:%M %p"); // e.g.Sep 18 02:30 PM

        xAxis.tickFormat((d, index) => {
            return formatToDateAndTime(d);
        });

Please guide me how to fix this.

Possible duplicate: https://stackoverflow.com/questions/17109549/set-y-axis-of-d3-chart-to-fit-widest-label — sibasishm, Oct 25 '19 at 06:33
@SibasishMohanty I referred this but it's not helping, can you guide me if possible ? — Javascript Coder, Oct 25 '19 at 09:39

score 0 · Answer 1 · answered Oct 25 '19 at 06:29

I fixed this Issue with transform attribute by adding .attr("transform", "translate(40, " + height + ")")

My Code -

g.append("g")
    .attr("class", "x axis")
    .attr("id", "axisX")
    .attr("transform", "translate(40, " + height + ")")
    .call(xAxis);

I am not sure this is the best solution or not but this is how I fixed this.

In d3 Chart my xAxis tick text is not coming fully

1 Answers1