r - Adjust c3 axis labels with css

Question

I am using R's c3 package which is a wrapper for the C3 javascript charting library by Masayuki Tanaka.

My c3 chart below cuts off the last date on the x-axis.

Using Chrome Inspector I can manually adjust the text-anchor: middle to text-anchor: end

and that seems to work.

However, I do not understand how to do this with css.

Here's my R Script and related css though I don't think that R is relevant to the issue here.

R Script

library(shiny)
library(c3)

data <- data.frame(a = abs(rnorm(20) * 10),
                   b = abs(rnorm(20) * 10),
                   date = seq(as.Date("2014-01-01"), by = "month", length.out = 20))


ui <- fluidPage(
  
  includeCSS("c3.css"),
  
  c3Output("chart",  height = "100%")
)

server <- function(input, output, session) {
  output$chart <- renderC3({
    data %>%
      c3(x = 'date') %>%
      tickAxis('x', count = 5, format = '%Y-%m-%d') 
  })
}

shinyApp(ui, server)

css

.c3-line {
  stroke-width: 4px !important; 
}

.c3-axis-x-label {
    text-anchor: end; 
}

question from:https://stackoverflow.com/questions/65649271/adjust-c3-axis-labels-with-css

Answer 1

You haven't pasted any actual code, but it's highly likely that the code below will help:

.c3-axis-x g.tick:nth-last-child(3) text {
  transform:translateX(-5%);
}

You need to target the text correctly and adjust value to your needs.

Edit: Actually it's not :last-child - adjusted, based on some actual code. In essence you need to target your selector properly and apply the transform property.

Edit2: So it was actually the .c3-axis-x group that includes the tick texts. Code updated (yet again)