hrbrmstr / metricsgraphics

:chart_with_upwards_trend: htmlwidget interface to the MetricsGraphics.js D3 chart library
http://hrbrmstr.github.io/metricsgraphics/
Other
132 stars 35 forks source link

Adjust Chart Padding in Shiny #39

Closed phillc73 closed 8 years ago

phillc73 commented 8 years ago

I'm using this library to create scatter charts in a Shiny app. Things are working out pretty well so far, apart from one thing. That is the padding around the chart. Please see the image below.

relativestrengthscatter

On the right is a table from the DT package, which fits nicely in the tabBox with minimal borders. However, on the left, the metricsgraphics chart has considerable padding around the X and Y axis, resulting in quite a lot of wasted space. The right hand side of the chart appears to be fine, with minimal padding.

My chart output code is the following (apologies this is not a fully reproducable, self contained Shiny example):

  rsScatter %>%
    mjs_plot(x=POWV, y=RSP) %>%
    mjs_point(color_accessor=POWr, 
              size_accessor=BFOdds, 
              least_squares=TRUE,
              size_range=c(3, 50),
              color_type="category",
              color_range=rev(brewer.pal(n=9, name="Greens"))) %>%
    mjs_labs(x="POW V%", y="RSP") %>%
    mjs_add_baseline(1.25, "RSP 1.25") %>%
    mjs_add_mouseover("function(d, i) {
               $('#rsp svg .mg-active-datapoint')
                   .text(d.point.COURSE + ' ' + d.point.TIME + ': ' + d.point.HORSE + ' | POWr: ' + d.point.POWr + ' | POW: ' + d.point.POW + ' | POW V: ' + d.point.POWV + '%' + ' | RSP: ' + d.point.RSP +' | BF Odds: ' + d.point.BFOdds);
                }") -> rsp
phillc73 commented 8 years ago

I figured this out myself through reading the documentation and examining the functions.

For completeness:

 rsScatter %>%
    mjs_plot(x=POWV, y=RSP, left = 10, bottom = 10, top = 20) %>%
    mjs_point(color_accessor=POWr, 
              size_accessor=BFOdds, 
              least_squares=TRUE,
              size_range=c(3, 50),
              color_type="category",
              color_range=rev(brewer.pal(n=9, name="Greens"))) %>%
    mjs_labs(x="POW V%", y="RSP") %>%
    mjs_add_baseline(1.25, "RSP 1.25") %>%
    mjs_add_mouseover("function(d, i) {
               $('#rsp svg .mg-active-datapoint')
                   .text(d.point.COURSE + ' ' + d.point.TIME + ': ' + d.point.HORSE + ' | POWr: ' + d.point.POWr + ' | POW: ' + d.point.POW + ' | POW V: ' + d.point.POWV + '%' + ' | RSP: ' + d.point.RSP +' | BF Odds: ' + d.point.BFOdds);
                }") -> rsp