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

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