Glistening R resize plotOutput

Attempting to resize a plotOutput using Shiny R.

The plot in question can be viewed https://i.sstatic.net/fgzag.png

This is the code snippet:

#In ui:
fluidRow(
        column(width = 12,
           h4("Diagrama Persistencia"),
           plotOutput("Diagrama")
        )
      )

#In server 
output$Diagrama <- renderPlot({
        F_PlotDiag(Diag = isolate(values$data), tipoPlot = input$radioPlot, tamEjeNom = input$sliderTamEjeNom)
      }, height = input$sliderHeight, width = input$sliderWidth) 

We need to adjust the height and width parameters. This adjustment is necessary within an observeEvent context.

By scaling down, the entire plot does not fit on the screen. The reduced dimensions result in an inaccurate representation like this:

https://i.sstatic.net/sUZY2.png

However, upon downloading the FIRST image and viewing it separately, the output appears as expected unlike the second scaled version: https://i.sstatic.net/sHrkg.png

Is there a method to display the complete plot in the browser by adjusting its scale? Essentially, achieving a similar view to that of a downloaded image.

Lacking CSS expertise, logical solutions are limited, but attempts have been made in modifying the HTML as follows:

https://i.sstatic.net/2Ow5U.png

tags$style(type="text/css", ".shiny-bound-output { transform: 'scale(.5)' }")
  tags$style(type="text/css", ".shiny-plot-output { transform: 'scale(.5)' }")
  tags$style(type="text/css", "#Diagrama { height: 20px }")

Unfortunately, these attempts have yielded no successful outcome.

Answer №1

You didn't include a reproducible example, but you can refer to this helpful example for guidance. This code snippet locates the image within the div element with the id of distPlot and sets the CSS properties accordingly.

tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),

Below is the complete code:

library(shiny)

ui <- shinyUI(fluidPage(

   tags$style(HTML("div#distPlot img {width: auto; height: auto; max-width: auto; max-height: 400px;}")),
   titlePanel("Old Faithful Geyser Data"),
   sidebarLayout(
      sidebarPanel(
         sliderInput("bins",
                     "Number of bins:",
                     min = 1,
                     max = 50,
                     value = 30)
      ),
      mainPanel(
         plotOutput("distPlot")
      )
   )
))

server <- shinyServer(function(input, output) {

   output$distPlot <- renderPlot({
      x    <- faithful[, 2] 
      bins <- seq(min(x), max(x), length.out = input$bins + 1)

      hist(x, breaks = bins, col = 'darkgray', border = 'white')
   }, width=600, height=1200)
})

shinyApp(ui = ui, server = server)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

An HTML webpage that automatically refreshes but does't display the iframe content when the underlying HTML page is being updated

I have a script that updates a text file with completed tasks, creating log files in the process. I then use another script to format these logs with HTML code for tables, headings, banners, etc., saving the formatted version as Queue.html. To display this ...

Acquiring administrative authorization upon user login with PHP

I have developed a registration form and a login form using PHP. However, whenever I run this code, it displays the message "invalid username" when the username is invalid, or it says "your account isn't approved by admin yet." Can anyone please guide ...

Having difficulty with the rendering of a backbone.js collection view. Encountering an issue where I am receiving an error message: "Uncaught TypeError: Cannot call method 'on' of undefined" within my

I'm currently learning backbone.js and I can't seem to figure out why my view is showing up as undefined on line 67 of coupons.js. I've included a gist since the files are quite lengthy. Another issue I'm facing is that if I refresh th ...

Issue with z-index not applying to a fixed header

I've been attempting to recreate the problem using this plunker. .demo-blog.mdl-layout .mdl-layout__content { padding-top: 0px; position: relative; margin-top: -80px; z-index: 100; } header.main-header{ z-index: -50; } My goal is ...

"Creating dynamic radio buttons within a dynamic table using Ajax and jQuery: a step-by-step guide for toggling

Looking to generate a dynamic html table with data retrieved from a web method in asp.net using Ajax jQuery. One of the fields is a boolean value that needs to be associated with radio buttons. However, encountering an issue where setting attributes like ...

Is there a way for me to display the comment count as text directly on the comment bubble image?

In this example on jsfiddle, I am attempting to display the number of comments (12 in this case) as text over the comment bubble image: http://jsfiddle.net/c337Z/ HTML: <ul id="top"> <li><a href="/comments"><div id="commentlink" ...

The transition from Vuetify 2 to Vuetify 3 involves replacing deprecated properties like app, clipped-left, and offset-y with the new property called "

Seeking guidance on upgrading from Vuetify/Vue 2 to 3. As a non front-end developer tasked with updating legacy code, I'm facing challenges due to the migration guide assuming CSS knowledge and lacking examples for resolving removed features. The gui ...

Tips for effectively sizing a logo within a Bootstrap navbar

<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap CSS --> <link ...

Creating a form with an input field and an image side by side in HTML

I've been attempting to display an HTML input element and an SVG image on the same line without success. I've tried various solutions from stackoverflow, but none seem to work for me. Here's my current HTML code: <div id = "inline_eleme ...

Revamp responsiveness in bootstrap 3 for printing with @media queries

My goal is to disable the responsive features of bootstrap when the event javascript:print() is triggered. This way, I want my webpage to maintain the column grid layout that I have defined, regardless of screen size. One solution suggested in this answer ...

The onbeforeunload event should not be triggered when the page is refreshed using a clicked button

Incorporated into my webpage is a sign-up form. I would like it to function in a way that if the user accidentally refreshes, closes the tab, or shuts down the browser after entering information, a specific message will appear. <input type="text" place ...

Modifying Characteristics of Elements Added Dynamically

How do I change the type attribute for dynamically added buttons? In the code below, the label names are changing perfectly, but when I try to change button types, it applies to all dynamically added buttons. My requirement is to change every button type t ...

Tips for troubleshooting ImageArray loading issues in AngularJS

Having some trouble learning Angular and getting stuck with this Image array. Can someone please help me understand what's wrong with my code and how to fix it? FilterAndImages.html <!DOCTYPE html> <html ng-app="store"> <head> < ...

HTML Buttons Remain Selected After Being Clicked

Currently working on a calculator app for a class project but I've hit a roadblock while setting up keyboard listeners. The keyboard functionality is fine, however, when it comes to clicking on buttons, specifically the non-keyboard functions, they re ...

The function R: logit{gregmisc} computes the logarithm of

I'm looking to perform a logistic transformation on a variable while setting upper and lower boundaries. I attempted to reproduce the "logit" function from the gregmisc package: library(gregmisc) x <- seq(0,10, by=0.25) xt <- logit(x, min ...

Iterate over a dataframe to produce an outcome determined by the conditions and data in other columns

My data frame, abbreviated, looks like this: A <- c(10,50,50,10,60,70,50,20,60,10) B <- c(0,3,2,4,1,3,5,1,1,2) df<- data.frame(A,B) df A B 10 0 50 3 50 2 10 4 60 1 70 3 50 5 20 1 60 1 10 2 I aim to create a new column C based on c ...

What could be preventing the jQuery from showing the JSON response?

I am having an issue with a jQuery script that is supposed to pull a quote from an API in JSON format and display it on the page. However, for some reason, I am unable to retrieve data from the API. Can you help me figure out what is wrong here? Thank yo ...

Can you identify the issue within this code that combines HTML5, CSS, and JavaScript?

I'm attempting to create a feature where, upon clicking a button, a hidden div will be revealed. However, my current implementation doesn't seem to be working. function reload(){ window.reload(); } function vis(x,z,a){ var xpar = docu ...

How can you ensure an image is centered properly when padding is applied?

Is there a way to center an image without affecting padding around it? Check out this sandbox for reference HTML <div class="imageParent"> <figure id='img-div'> <img class='image card' ...

Tips for creating an HTML table that fills the entire width of its parent element:

One of the rows in my table contains a nested table. I want both tables to fill up 100% of the width of the parent element. How can I achieve this? Check out the demo here Here's the HTML code: <div class="container"> <table> <tr ...