I've been using the c3 package in R, which serves as a wrapper for the C3 javascript charting library created by Masayuki Tanaka.
One issue I encountered is that my c3 chart was cutting off the last date on the x-axis. After inspecting it in Chrome Inspector, I manually adjusted the text-anchor: middle to text-anchor: end
This workaround seemed to resolve the problem:
However, I'm unsure how to achieve this through CSS styling alone.
Below is a snippet of my R script along with the relevant CSS code. While I believe the issue lies more within the CSS aspect, here are the details:
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 Styling
.c3-line {
stroke-width: 4px !important;
}
.c3-axis-x-label {
text-anchor: end;
}