score:21
i'll probably go more into detail this time about what you can do and what possibilities you have:
a highchart
event function always has the form js("function(event) { ... }")
. the js
stands for javascript and prevents r from interpreting the code inside. luckily, javascript looks a lot like r, which will make it easier to write statements even if you don't know any javascript.
the function inside always has to have an event
parameter. from the highcharts
documentation, this event has several properties, most important of all, point
. properties in javascript can be accessed by a dot .
, just like you would use a $
in r. so event.point
will be the point you clicked on.
now, this point also has a lot of properties, of which most are not very useful. but possible values you might want to use are category
, color
, x
and y
for respective axis values. so if you'd like to know the y value of the clicked point, event.point.y
is the command. another example: in your case, event.point.x
would yield the x
value, which in the case of a bar chart is not the category
, but the index of the category
(counting starts at 0 here). in the previous example (your code snippet), i also used the object this
. this
stands for the series
that has been clicked. this is just a shortcut, because you could also get the series via event.point.series
. and the series itself has a lot of properties, like i.e. the name
.
note concerning javascript: lists (arrays) in javascript are created with the [ ... ]
brackets. i used this in the code below to send multiple values in one command.
that is the first part. now, you want to communicate the selection to your shiny app. shiny has inbuilt information channels for this purpose. one is the javascript function shiny.oninputchange
. this function has two arguements, the second one is the value you want to send. the first one is the name, under which you want to access the value later on. so the usage is always shiny.oninputchange('myvar', value)
. now this value gets sent to your server and is accessible under input$myvar
. there, you have the same rules as for any other input. you can put input$myvar
into reactive environments and they will react, whenever something new is sent to input$myvar
.
concerning your direct request: to know what category the clicked value belongs to, can be achieved by changing the initial click function just a bit. (i renamed the functions to suit their functionality.) the explanation above should make it understandable. the second feature, with the legend click, uses another event "slot" that is built into highcharts
. the legenditemclick
works just like the normal click
, but only listens to legend clicks. there are some more event handlers that can be assigned, i.e. mouseover
if you need hover events.
okay, now here is a sample code to give a working example for what i wrote above:
best regards
library("shiny")
library("highcharter")
ui <- shinyui(
fluidpage(
column(width = 8, highchartoutput("hcontainer", height = "500px")),
column(width = 4, textoutput("text"))
)
)
server <- function(input, output) {
a <- data.frame(b = letters[1:10], c = 11:20, d = 21:30, e = 31:40)
output$hcontainer <- renderhighchart({
canvasclickfunction <- js("function(event) {shiny.oninputchange('canvasclicked', [this.name, event.point.category]);}")
legendclickfunction <- js("function(event) {shiny.oninputchange('legendclicked', this.name);}")
highchart() %>%
hc_xaxis(categories = a$b) %>%
hc_add_series(name = "c", data = a$c) %>%
hc_add_series(name = "d", data = a$d) %>%
hc_add_series(name = "e", data = a$e) %>%
hc_plotoptions(series = list(stacking = false, events = list(click = canvasclickfunction, legenditemclick = legendclickfunction))) %>%
hc_chart(type = "column")
})
makereactivebinding("outputtext")
observeevent(input$canvasclicked, {
outputtext <<- paste0("you clicked on series ", input$canvasclicked[1], " and the bar you clicked was from category ", input$canvasclicked[2], ".")
})
observeevent(input$legendclicked, {
outputtext <<- paste0("you clicked into the legend and selected series ", input$legendclicked, ".")
})
output$text <- rendertext({
outputtext
})
}
shinyapp(ui, server)
Source: stackoverflow.com
Related Query
- How to know information about the clicked bar in highchart column r shiny plot
- How to detect multiple cliks in a bar in highchart column r shiny plot
- How to apply borderRadius only for top side of Column or Bar in Highchart
- How to change the palette colors of a highcharter column plot which depends on a variable?
- How to make 1st bar selected in column highchart on page load?
- How do I open a new window / tab by clicking on a column / bar within a Highchart graph?
- Column Highchart - display absolute values but keep information about which values are negative
- Highchart : How to plot Stacked bar graph with line by below JSON respons
- How to add a vertical plot line in multiple line series and show the tooltip on Plot line in highchart
- How to show the value in top of each column bar | Hightcharts | Vue-chartkick | Cube Js
- Highchart shiny R scatter plot - how to define individual point colors
- How to drilldown a stacked column highchart to show all stacks instead of clicked
- How to add the "isSum" bar in Highchart Waterfall chart in R?
- Highcharts - Column Chart Drilldown, how to change the drilldown bar color based on some value
- Highchart basic bar : How to know which specific bar section is clicked?
- Highcharts: How to move the column bar to the left most side when there is only one point in drilldown
- In highchart how to plot the line in 3d container
- Highcharts - Scatter plot: How to send information from clicks to a function with information about the click as parameters
- Highcharts Chart Bar - How can I display in the chart, only one column from my HTML table?
- how to truncate the stackLabels on yaxis for a stacked Grouped column highchart
- highcharter: how can I customize the labels on a column plot
- How to set different bar width in the same series Highchart
- How to modify the code so that Highcharts graph does not cover fixed navigation bar at the top of the page?
- How to set a 24h range on the y-axis of a column highchart
- Highcharts: how to maintain the same order of category labels when bar chart changes to column chart
- How to make HighStock / HighChart scroll bar location default to the left hand side?
- Align second scatter series to the side similar to how column and bar charts do using HighCharts
- How to show a column with the value Zero in Bar chart in Highcharts?
- How to embed text on the bar of the highchart
- How to reduce the space between Bars with a fixed bar width in Highcharts column chart?
More Query from same tag
- Increase different marker sizes when hovering series using highcharts
- Highstock + Bootstrap datepicker
- Highcharts - Update a series point [x,y] values?
- Highstock - Single line series-Dynamically create marker based on a trigger
- Bold X-Axis Label on Point Hover in Highcharts Column Chart
- HighCharts: How to include text event to the left of chart when exporting
- Custom Font Size Highchart Word Cloud
- Highcharts Semi Donut Pie with Negative Percentage
- Move highcharts yAxis.tickPositioner callback function outside to some util function
- HeighCharts SVG Keep font-size fix
- Highcharts yaxis labels Format
- Reset / Set ZoomType Control in Highstock
- Highcharts Y-axis title text length is more than chart's height
- yAxis resizer to change svgrenderer position also highcharts
- How can I install highcharts-angular *and* highcharts?
- Issue with highchart data display when parsing JSON data
- Print target labels on xAxis with labels.formatter
- Displaying additional text for Highcharts Bubble chart
- Semi-circle donut pie chart with labels (data names) and %-ages on the pie ... and data numbers on mousehover
- Not able to display highcharts in php
- (kendoUI chart) Possible to reflow its size with a resizing window?
- Getting highcharts to re-animate a line graph
- How to change height of ENTIRE xAxis labels using Highcharts?
- Highcharts boxplot custom labels for maximum quartiles median and minimum?
- HighCharts: Use shared tooltip only when series overlap
- High Charts tooltip
- Import Highcharts module SvgRenderer failed
- Off-Screen Toggle Show Not Showing
- Highcharts - Pie inner circle size
- Highcharts - Pass a dictionary as data for a timeline series