From 32a050da57e063c5528eb5eb0c1d1f355e9c034d Mon Sep 17 00:00:00 2001 From: "amtul.noor" Date: Wed, 10 Jan 2024 11:59:36 +0100 Subject: [PATCH] fix: x-axis labels overlapping in detailed chart --- .../workflows/timeline/BaseTimelineDetailedChart.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/workflows/timeline/BaseTimelineDetailedChart.vue b/src/components/workflows/timeline/BaseTimelineDetailedChart.vue index 8d75f5f..5dcf5dc 100644 --- a/src/components/workflows/timeline/BaseTimelineDetailedChart.vue +++ b/src/components/workflows/timeline/BaseTimelineDetailedChart.vue @@ -24,7 +24,7 @@ const props = defineProps() const height = props.height || 60 const marginTop = 10 const marginRight = 10 -const marginBottom = 30 +const marginBottom = 50 const marginLeft = 40 const _width = computed(() => props.width ?? 300) @@ -70,6 +70,11 @@ function render([data, startDate, endDate, maxY]) { .classed('x-axis-group', true) .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).ticks(6).tickPadding(8).tickSize(5).tickFormat(d3.utcFormat("%d.%m.%Y"))) + .selectAll("text") + .style("text-anchor", "end") + .attr("dx", "-0.9em") + .attr("dy", "-0.2em") + .attr("transform", "rotate(-60)") svg.select('.x-axis-group .domain').attr('stroke', colors.gray['400']) svg.selectAll('.x-axis-group .tick text').attr('fill', colors.gray['400'])