Adjust c3 axis labels with css

[ixodid198]

The last date on the x-axis of my c3 chart is cut off.

Since space is tight I wish to re-align the date rather than create more space for the date to print.

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; 
}