Adjust c3 axis labels with css - 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;
}

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)

Answer 2

One thing that popps to my head immediately:
With your css you are only targeting the 'date' element.
You other 'text' element doesnt have a class, therefore the css for '.c3-axis-x-label' will only target the first text element.
Try adding 'c3-axis-x-label' class also to your other 'text' element.
Another thing:
The 'text' tag that you want to adjust has its styles written in the tag
When you set styles like this it will always override the applied CSS.
One solution i can think of, is to add !important in your CSS to override the style. I do not recommend using !important, but if its too difficult to actually change the css directly then this might be a solution.
If you can add a class to the other text element the try applying styles to 'text' in your css:
g > text {
text-anchor: end;
}
Let me know if any of that helped. Otherwise some code would come in handy to help you out