How to draw a line with color in shiny application

Question

This may be a simplest thing for lot of people, but I'm struggling with it. I'd like to draw a line with color using html tag "hr" This is what I have tried so far in ui.R file :

HTML("<hr color='purple' >")
HTML('<hr color="purple" >')
hr( color="purple" )

None of them worked - any suggestions please?

Answer 1

Shiny exposes a lot of control over the look and feel of the application, but it happens that the color of hr isn't one of of them. So you'd need to dig down into CSS to control the appearance of the element. You can do this by using includeCSS in Shiny to add a stylesheet that you can use to control the look of your app. The easiest way, however, would likely just be to add the CSS onto your hr element directly.

HTML('<hr style="color: purple;">')

(EDIT) Note that, while this would work for most elements, hr don't respect the color property. hrs behave strangely: Changing the color of an hr element

Here you're modifying the CSS color property of your hr element. See https://developer.mozilla.org/en-US/docs/Web/CSS/color

Also note that you can use hr(style="...") instead of constructing the raw HTML, if you prefer. I find that constructing everything with Shiny tags makes the code a little easier to read in most cases, but YMMV.

Answer 2

It took a little bit of quick digging/reading into the answers and comments here, but, summarizing, this looks to work (I tested on Mac Chrome, Safari, and Firefox):

tags$hr(style="border-color: purple;")

You can use HTML(), too, if desired, but might as well stick with the Shiny tags, IMHO.