3

I am trying to increase the font size of the x and y axis in the plot created using NVD3 and rCharts. Here is my code for the plot. Any help is appreciated.

n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
         return '<b>ID:</b> ' + e.point.ID
         } !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')
Koundy
  • 5,265
  • 3
  • 24
  • 37
  • right now the easiest way is to add css as in http://stackoverflow.com/questions/17883017/adjusting-axis-labels-nvd3-graph-in-rcharts , but I know this is probably not a workable solution. I will try to work on another way and provide an answer that works straight from R. – timelyportfolio Jun 30 '14 at 14:53

1 Answers1

6

Actually, I think I discovered a solution thanks to this stack overflow discussion. Let me know if it works for you. Change the font-size to whatever you would like. You could also provide a full set of CSS to change style, location, color, etc.

dat <- data.frame(
  pValues = runif(20,0,5),
  Chr = 1:20,
  ID = sample(LETTERS[1:20])
)

n1 <- nPlot(pValues~Chr,data=dat,type="scatterChart",height=400,width=750)
n1$chart(tooltipContent= "#! function(key, x, y, e){
     return '<b>ID:</b> ' + e.point.ID
     } !#")
n1$chart(forceY = c(0,8))
n1$chart(forceX = c(0,10))
#n1$chart(color = '#! function(d){return d.pValues} !#')
n1$xAxis(axisLabel = 'Chromosome')
n1$yAxis(axisLabel = '-log P value')
n1

n1$setTemplate(afterScript = '<script>
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-axislabel { font-size: 15px; }";
  document.body.appendChild(css);
</script>'
)
n1

n1$chart(margin = list(left=100)) 
n1

### as stated in comments, x is basically unworkable but this kind of works

n1$xAxis(
  axisLabel = 'Chromosome'
  ,tickFormat = "#!function(d){return d + "        " }!#"  #add space to the number
  ,rotateLabels=90                                         #rotate tick labels
)
n1$setTemplate(afterScript = '<script>
  var css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-x .nv-axislabel { font-size: 50px; }";
  document.body.appendChild(css);
  css = document.createElement("style");
  css.type = "text/css";
  css.innerHTML = ".nv-y .nv-axislabel { font-size: 50px; }";
  document.body.appendChild(css);
 </script>'
)
n1$chart(margin=list(left=100,bottom=100))
n1
Community
  • 1
  • 1
timelyportfolio
  • 6,479
  • 30
  • 33
  • Thanks for answering, It's working for me but now i have another problem. **The axis labels are going beyond the plot area** so, i have to define plot margins now. Can you help me ?? I am good at R but i don't know any javascript or html. – Koundy Jul 01 '14 at 05:56
  • see http://stackoverflow.com/questions/20334863/rcharts-how-to-add-axis-lables-and-headings-to-nvd3-chart. For `y`, solution is fairly easy `n1$chart(margin=list(left=100))` so change the 100 to a size that works. I am still working on `x` since the obvious ways do not work, such as `n1$chart(margin=list(left=100,bottom=100))`. – timelyportfolio Jul 07 '14 at 20:00
  • I actually can't find a good way to handle `x` since nvd3 does not allow this to be set. Also, I can change manually in script but it gets changed back on any resize event. Just to show something that works, but I think unacceptably, I added more code in my previous answer that rotates the x tick labels with spaces, but I do not really consider it viable. – timelyportfolio Jul 07 '14 at 21:21