The annotation feature in Highcharter is reportedly malfunctioning when applied to the date x-axis in

Question

The annotation feature in Highcharter is reportedly malfunctioning when applied to the date x-axis in

I've been attempting to include annotations in my highcharter chart, but for some reason, it's not working and is displaying [object][object] instead.

Below is the data:

structure(list(variable = structure(c(15522, 15553, 15584, 15614, 
15645, 15675, 15706, 15737, 15765, 15796), class = "Date"), value = c(417376, 
423563, 430290, 455643, 451542, 422419, 429472, 451694, 454900, 
456844)), row.names = c(NA, 10L), .Names = c("variable", "value"
), class = "data.frame")

The code I'm using is to add annotation specifically for the last value on the graph, potentially within a rectangle box.

currmonth <- max(pricedata$variable)
pricedata$value <- round(pricedata$value)
highchart(type = "chart") %>% 
  hc_chart(backgroundColor = "white",zoomType = 'x') %>%
  hc_add_series_times_values(pricedata$variable, pricedata$value, name = "Price") %>%
  hc_annotations(list(xValue = currmonth, title = list(text = 'Annotated chart!')))

Here is the visual representation of the chart:

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

You'll notice that the annotation appears as [object][object] in the top left corner.

UPDATE: After trying out the solution provided, unfortunately, it did not work.

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

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

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

javascript r highcharts r-highcharter

Answer 1

Answer №1

Inspired by the example provided at this link, and guided by the informative tutorial available here, it is indeed possible to achieve similar results.

Starting with the creation of the chart through the use of the hchart function is recommended.

library(tidyverse) # for pull and last
library(highcharter)

currmonth <- max(data$variable)
lastvalue <- data %>% pull(value) %>% last()

hc <- hchart(data, "line", hcaes(variable, value))

After creating the chart, the next step is to add annotations resembling the provided examples:

hc %>% 
  hc_annotations(
      list(
          labelOptions = list(y = 50, x = 0),
          labels = list(
            list(
              point = list(
                x = highcharter::datetime_to_timestamp(currmonth),
                y = lastvalue,
                xAxis = 0,
                yAxis = 0
              ),
              text = scales::dollar(lastvalue)
              )
            )
          )
      )

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

Although highchartsJS requires a significant amount of nested lists, this approach effectively adds annotations in highcharter (for now).

Answer 2

Inspired by the example provided at this link, and guided by the informative tutorial available here, it is indeed possible to achieve similar results.

Starting with the creation of the chart through the use of the hchart function is recommended.

library(tidyverse) # for pull and last
library(highcharter)

currmonth <- max(data$variable)
lastvalue <- data %>% pull(value) %>% last()

hc <- hchart(data, "line", hcaes(variable, value))

After creating the chart, the next step is to add annotations resembling the provided examples:

hc %>% 
  hc_annotations(
      list(
          labelOptions = list(y = 50, x = 0),
          labels = list(
            list(
              point = list(
                x = highcharter::datetime_to_timestamp(currmonth),
                y = lastvalue,
                xAxis = 0,
                yAxis = 0
              ),
              text = scales::dollar(lastvalue)
              )
            )
          )
      )

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

Although highchartsJS requires a significant amount of nested lists, this approach effectively adds annotations in highcharter (for now).

The annotation feature in Highcharter is reportedly malfunctioning when applied to the date x-axis in

Answer №1

Similar questions

Tips for manipulating the DOM: Pushing existing elements when new ones are dynamically created with JavaScript

Using HTML and JavaScript, we can set two different color values - one for the background and one for the h1 title

Block users from viewing the image displayed within a JavaScript canvas

Is it possible to create dynamic meta tags in Angular that will appear in a Twitter-style card preview?

Utilize esbuild to monitor for any modifications, recompile the code, and automatically restart the express server

Utilize underscore's groupBy function to categorize and organize server data

JavaScript function to evaluate true conditions

When the defineModel macro is used in Vue.js, it does not automatically update the state

Prevent clicking on form until setInterval has been cleared using React useEffect

Playing sound using jQuery when the body of the page is replaced

Dealing with incorrect user authentication in a login system using MySql and NodeJs

What is the goal of JSON.parse(JSON.stringify(x))?

Display tables based on selected changes with dynamically changing options

Utilizing NodeJS to Refine JSON Data

`The Art of Binding() with Objects Created on the Fly`

The Joi Validation feature is ineffective when used with the schema provided below

An incorrect object was removed from the array

Issue with Vue/Nuxt 3: Unable to modify properties of null when setting 'textContent'

Updating an element in jQuery using the .each() method

Guide on downloading the complete Vue.js to-do list with JsPdf