I'm having an issue where when I create a highcharter graph for Shiny, the hover functionality doesn't work properly. I have used highcharter a ton and have never had this issue, but for some reason on this dashboard, anytime I hover over a point it either doesn't register the hover, or it provides the tooltip for a different point. Screenshot example here. Anyone have this issue before? The red arrow shows where my mouse was when taking this screenshot.
My code is below (note, there are two graphs in the fluidRow(), but removing one and making the graph take the whole row does not fix the issue).:
`############
Code in UI
fluidRow(align = "center",splitLayout(cellWidths = c("50%","50%"),
withLoader(highchartOutput(outputId = "lineChart1", height = 500, width = 700),type = "html",loader = "dnaspin"),
withLoader(highchartOutput(outputId = "lineChart2", height = 450, width = 700),type = "html",loader = "dnaspin")
)
)
`
#
Code for the actual graph (in the Server)
output$lineChart1 <- renderHighchart({
impactData <- read.csv("IMPACT_dash.csv")
colnames(impactData) <- c("Week","notAtAll","notButWill","hasSomewhat",
"hasConsiderably","hasDevastating")
highchart() %>%
hc_add_series(data = impactData, "line", color = "#404040", hcaes(x = Week, y = notAtAll),
name = "It has not and will probably never impact my life at all") %>%
hc_add_series(data = impactData, "line", color = "#8f8f8f", hcaes(x = Week, y = notButWill),
name = "It has not but will probably impact my life in the future") %>%
hc_add_series(data = impactData, color = "#91ad80", "line", hcaes(x = Week, y = hasSomewhat),
name = "It has impacted my life somewhat") %>%
hc_add_series(data = impactData, color = "#8fc96b", "line", hcaes(x = Week, y = hasConsiderably),
name = "It has impacted my life considerably") %>%
hc_add_series(data = impactData, color = "#83d64f", "line", hcaes(x = Week, y = hasDevastating),
name = "It has had a devastating impact on my life") %>%
hc_plotOptions(
series = list(
showInLegend = T,
pointFormat = "{point.y}%"
), column = list(colorByPoint = T)
) %>%
hc_yAxis(title = list(text = "Percent"),
#lables = list(format("{value}%"),
max = 100) %>%
hc_xAxis(title = list(text = "Week"), categories = impactData$Week) %>%
hc_title(text = "") %>%
hc_tooltip(pointFormat = "{point.y}%")
})
`
Sample Data:
Found the answer. It was because in my dashboard I had set it to show the page as zoomed out at 80% when opened. This caused issues with the hovers in the graph. The code that caused the issue is below
Related
I'm using Highcharts in R, and I want to format the number in the tooltip as a currency without decimal spaces. Right now, numbers appear like this: 34 537 987.21. I want that number to look like this: $34,537,987. Or, better yet, like this: $34M.
Here's a sample of my code:
highchart() %>%
hc_add_series(df,
type = 'spline',
hcaes(x = year, y = data)
) %>%
hc_add_series(df,
type = 'spline',
hcaes(x = year, y = other_data)
) %>%
hc_plotOptions(series = list(marker = list(enabled = TRUE,
hover = TRUE,
symbol = 'circle'))
) %>%
hc_tooltip(
shared = TRUE,
crosshairs = TRUE
)
Use the tooltip parameter inside hc_ad_series() and define as shown below.
highchart() %>%
hc_add_series(df,
type = 'spline',
hcaes(x = year, y = data),
tooltip = list(pointFormat = "$ {point.data}")
) %>%
hc_add_series(df,
type = 'spline',
hcaes(x = year, y = other_data),
tooltip = list(pointFormat = "$ {point.other_data}")
) %>%
hc_plotOptions(series = list(marker = list(enabled = TRUE,
hover = TRUE,
symbol = 'circle'))
)
Hope it helps.
i would like to build an interactive chart but i'm very new in highcharts, i want to add average line for the data and change the labels of the bars, now per default say "Series 1:" i want to write "Cdays: ", this is my code now
# Load required R packages
library(highcharter)
# Set highcharter options
options(highcharter.theme = hc_theme_smpl(tooltip = list(valueDecimals = 2)))
df <- data.frame(Year=c('2015','2016','2017','2018','2019'),
CD=c(24, 18, 12, 9, 14))
head(df)
hc <- df %>%
hchart('column',
hcaes(x = Year, y = CD),
color = "#702080", borderColor = "#702080",
pointWidth = 80) %>%
hc_title(text = "Critical Days") %>%
hc_xAxis(categories = 'Critical Days') %>%
hc
Thanks !!
To add the mean line, try using plotLines in hc_yAxis and set the value to mean(df$CD). You can also adjust the color, add a label, etc. here.
To change the "Series 1" you see when hovering over the bars, you should set the name inside of hchart - in this case, "Cdays".
Other minor changes below - including use of df$Year for x-axis text labels.
df %>%
hchart('column',
hcaes(x = Year, y = CD),
color = "#702080",
borderColor = "#702080",
pointWidth = 80,
name = "Cdays") %>%
hc_title(text = "Critical Days") %>%
hc_xAxis(categories = df$Year) %>%
hc_yAxis(
title = list(text = "Cdays"),
plotLines = list(
list(
value = mean(df$CD),
color = "#00FF00",
width = 3,
zIndex = 4,
label = list(
text = "mean",
style = list(color = "#00FF00")
)
)
)
)
I created a chart using highcharter in a shiny dashboard and I am trying to customize the tooltip. The chart is combined line and scatter plot. I would like it to do the following:
1) Have a single box for hover information (it currently has one for the line and one for scatter)
2) Be able to use different column of information that is not used in the series x or y values
I would like the tooltip to display the following information (whether I hover over the scatter point or line) for each particular x-axis value.
Overall
Mean: 2 [Mean: data$avghours]
Dog: 1 [data$animal: data$hours]
Below is the example code I've written that demonstrates my problem:
library (shiny)
library (shinydashboard)
library (highcharter)
header <- dashboardHeader(title = "Example")
body <- dashboardBody(
fluidRow(
box(title = "example", status = "primary", solidHeader = TRUE,
highchartOutput("chart")
)
)
)
sidebar <- dashboardSidebar()
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output) {
date <- c(1,2,3,4,5,6,7,8,9,10)
hours <- c(1,5,4,1,6,5,7,5,4,3)
avghours <- c(2,2,2,3,3,3,2,2,2,2)
animal <- c("dog","cat","cat","cat","cat","cat","cat","cat","dog","dog")
data <- data.frame(date,hours,avghours,animal)
output$chart <- renderHighchart({
highchart() %>%
hc_add_series(name = "Shipments", data=data$hours, type = "scatter", color = "#2670FF", marker = list(radius = 2), alpha = 0.5) %>%
hc_add_series(name = "Rolling Mean", data=data$avghours, color = "#FF7900") %>%
hc_yAxis(min = 0, title = list(text = "Hours")) %>%
hc_tooltip(crosshairs = TRUE)
})
}
shinyApp(ui, server)
Firt of all, you need to add all the data instead give only the vector (the vector DON´T have all the information to the tooltip you want).
To do this you need change the data argument using the data.frame with the hcaes helper function in the mapping argument to define which variable use in every axis:
highchart() %>%
hc_add_series(data = data, mapping = hcaes(x=date, y=hours), name = "Shipments", type = "scatter", color = "#2670FF", marker = list(radius = 2), alpha = 0.5) %>%
hc_add_series(data = data, hcaes(date, avghours), name = "Rolling Mean", type = "line", color = "#FF7900") %>%
hc_yAxis(min = 0, title = list(text = "Hours")) %>%
hc_tooltip(crosshairs = TRUE)
Then you can use the tooltip argument in every hc_add_series to define the tooltip in each series:
highchart() %>%
hc_add_series(data = data, hcaes(date, hours), name = "Shipments", type = "scatter",
tooltip = list(pointFormat = "tooltip with 2 values {point.animal}: {point.hours}")) %>%
hc_add_series(data = data, hcaes(date, avghours), name = "Rolling Mean", type = "line",
tooltip = list(pointFormat = "Avg hour text! {point.avghours}")) %>%
hc_yAxis(min = 0, title = list(text = "Hours")) %>%
hc_tooltip(crosshairs = TRUE)
I´m using the Plotly package in R to make a plot with both a rangeslider and rangeselector.
The problem is that the rangeslider tends to cover the x-axis tick labels.
A solution could be to manually set the location of the rangeslider, but I can't seem to find any documentation on how to do that.
Below you find a minimal working example of the problem together with a picture of it.
# Make Some Data:
Dates = as.POSIXct(c("2017-08-08 00:00")) + (0:71)*60^2
Values = rep_len(mtcars$mpg, 72)
tb = dplyr::tibble(Values, Dates)
# Plot
p = tb %>% plot_ly(type = "scatter", mode = 'markers', x = ~Dates, y = ~Values) %>%
layout(xaxis = list(
rangeslider = list(type = "date"),
rangeselector = list(
buttons = list(list(step = "all", label = "All")))
))
p
Any help will be greatly appreciated!
Cheers,
By messing around with various options/settings, I found that increasing the tick lengths and let the ticks appear on the inside of x-axis rather than on the outside solved my problem.
See the code below for an example
# Make Some Data:
Dates = as.POSIXct(c("2017-08-08 00:00")) + (0:71)*60^2
Values = rep_len(mtcars$mpg, 72)
tb = dplyr::tibble(Values, Dates)
# Plot
p = tb %>% plot_ly(type = "scatter", mode = 'markers', x = ~Dates, y = ~Values) %>%
layout(xaxis = list(ticks = "inside", ticklen = 10,
rangeslider = list(type = "date", thickness=0.1),
rangeselector = list(
buttons = list(list(step = "all", label = "All")))
))
p
However, this is a hacker solution, and I´m still on the lookout for a method to set the position of the rangeslider.
Try to solve the overlapping problem tuning the thickness parameter of rangeslider:
# Make Some Data:
Dates = as.POSIXct(c("2017-08-08 00:00")) + (0:71)*60^2
Values = rep_len(mtcars$mpg, 72)
tb = dplyr::tibble(Values, Dates)
# Plot
p = tb %>% plot_ly(type = "scatter", mode = 'markers', x = ~Dates, y = ~Values) %>%
layout(xaxis = list(
rangeslider = list(type = "date", thickness=0.3),
rangeselector = list(
buttons = list(list(step = "all", label = "All")))
))
p
Hope it can help you.
Using the first block of code in this post I want to create a tooltip that would display the list of doctors visiting a clinic on a particular day.I tried the following code which displays nothing
library(DT)
tltp = DT:: datatable(data.frame(Doctors = x[x$Clinic=="{point.series}"&x$VisitDate == "{point.x}",2]))
hc%>%hc_tooltip(pointFormat = tltp)
I also tried using the tooltip_table which gives error
tltp = tooltip_table(x = NULL, y = x[x$Clinic=="{point.series}"&x$VisitDate == "{point.x}",2]
hc%>%hc_tooltip(pointFormat = tltp)
Error: unexpected symbol in:
"tltp = tooltip_table(x = NULL, y = x[x$Clinic=="{point.series}"&x$VisitDate == "{point.x}",2]
tltp"
Apologies I am not fluent in writing javascript.
As the official page recommend, to use highcharter is good alternative read how highchartsjs works. So, see this example with a simple custom tooltip.
hc <- hchart(visits, "column", x = as.Date(VisitDate), y = freq, group = Clinic) %>%
hc_plotOptions(column = list(
dataLabels = list(enabled = FALSE),
stacking = "normal",
enableMouseTracking = TRUE)
)
Adding the simple tooltip using the column names: Clinic and freq
hc %>%
hc_tooltip(pointFormat = "this is and clinic {point.Clinic} and freq {point.freq}")
The tooltip_table function is to make tables in the tooltip:
tt <- tooltip_table(c("Clinic", "Freq"), c("{point.series.name}", "{point.y}"))
hc %>%
hc_tooltip(pointFormat = tt, useHTML = TRUE)
If you need other data to show in the tooltip you can create the columun:
visits$doctors <- sample(letters, size = nrow(visits))
And then create the chart again (using the new data) and use this column in the tooltip:
hchart(visits, "column", x = as.Date(VisitDate), y = freq, group = Clinic) %>%
hc_plotOptions(column = list(
dataLabels = list(enabled = FALSE),
stacking = "normal",
enableMouseTracking = TRUE)
) %>%
hc_tooltip(pointFormat = "Here is the doctor {point.doctors}")