cssrshinyrenderingrcharts

CSS rCharts adjustments overlap the staggerLabel function in R renderChart{}

The names on the xAxis are too long, and are overlapping each other, and it can be seen in this image: xAxis Labels overlapping - Yaxis numbers are fine

I am plotting a discreteBarChart with rCharts package, where xAxis contains Names and yAxis contains numbers the numbers on the yAxis are too long (9 digits) and not shown all, so I had to do some CSS edits to show them correctly, after doing so, the argument "staggerLabels = TRUE" looses its effect in the xAxis, means the names on the xAxis are overlapping each other because i included CSS customization for the yAxis for numbers

this is how it looked like before adding the CSS lines: xAxis good labels- Yaxis numbers not shown all

any help please to prevent overlapping? or to view the Labels on the xAxis in an diagonal line?

server.r

    output$top10Clients <- renderChart({

    topclients <- 
      arrange(ct %>%  
                group_by(as.character(Customer)) %>% 
                summarise(
                  CTo = sum(as.numeric(`Net turnover`))
                ), desc(CTo))
    colnames(topclients)[colnames(topclients)=="as.character(Customer)"] <- "Customer"

    topclients <- subset(topclients[1:10,], select = c(Customer, CTo))

    p <- nPlot(CTo~Customer, data = topclients, type = "discreteBarChart", dom = "top10Clients")
    p$params$width <- 1000
    p$params$height <- 200
    p$xAxis(staggerLabels = TRUE)
    p$yAxis(staggerLabels = TRUE, width = 50)

    return(p)
  })

custom.css

.nv-discreteBarWithAxes .nvd3 > g > g > text,
.nv-axisMaxMin text {
  transform: translateX(13px); 

}

would be so pleased for any help or hint Thanks a lot

Solution

  • you can add below properties to each 

    div.a {
  width: 150px;
  height: 80px;
  -ms-transform: rotate(20deg); 
  -webkit-transform: rotate(20deg);
  transform: rotate(20deg);
}
    <body>
<h2>Test</h2>
<div class="a">Test World!</div>
<br>

</body>