Enhance your Highmap R or JavaScript visualization with a unique custom legend feature

Provided below is my code snippet,

output$map <- renderHighchart({
region_map = hcmap("countries/nz/nz-all")
      highchart(type = "map") %>% 
      hc_title(text = "Average") %>% 
      hc_add_series_map(map = region_map, df = data1, joinBy = "name", value = "LTA", borderColor = "#141B4D",
                        color = "color", 
                        showInLegend = TRUE, 
                        borderWidth = 1)
                        )  %>%
      hc_tooltip(useHTML = TRUE, headerFormat ="", pointFormat = "{point.name} <br> LTA: {point.value}") %>%
  })

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

Also, included is my dataset information,

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

structure(list(name = c("Auckland", "Bay of Plenty", "Canterbury", 
"Central North Island", "Central Otago / Lakes District", "Coromandel"
), LTA = c(23, 42, 25, 69, 71, 145), Changelabel = c("<20% Decrease", 
">20% Decrease", "<20% Decrease", ">20% Decrease", ">20% Decrease", 
">20% Decrease"), color = c("#B7DEE8", "#00B0F0", "#B7DEE8", 
"#00B0F0", "#00B0F0", "#00B0F0")), .Names = c("name", "LTA", 
"Changelabel", "color"), row.names = c(NA, 6L), class = "data.frame")

While everything seems to be in working order, there seems to be an issue with the legend display as it shows a gradient regardless of the assigned color column. How can I specify the legend to correspond with the color column and associated changelabels like:

<20% Decrease - color (#B7DEE8)
>20% Decrease - color (#00B0F0)

Answer №1

Finally, after numerous attempts and experiments, I successfully achieved this task. Here is a step-by-step guide on how I accomplished it (presented here to assist future readers).

To begin, I inserted a new column named "value" in my dataset.

data1 <- data1 %>% mutate(value = ifelse(Changelabel == ">20% Decrease",1,
                          ifelse(Changelabel == "<20% Decrease",2,
                          ifelse(Changelabel == "<20% Increase",3,
                          ifelse(Changelabel == ">20% Increase",4, 5)))))

Subsequently, I established a data class for the color axis:

dclass <- data_frame(from = seq(1, 4, by = 1),
                     name = c(">20% Decrease","<20% Decrease","<20% Increase",">20% Increase"),
                     color = c("#00B0F0","#B7DEE8","#92D050","#00B050"))
dclass <- list_parse(dclass)

Then, within my chart generation code, I included the following line:

hc_colorAxis(dataClasses = dclass)

Now, the visualization displays with the expected legend functionality.

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

The video does not begin playing automatically after utilizing react-snap

I included a background video in my react app that auto-plays upon page load and functions perfectly. Here is the JSX code I used: <video autoPlay loop style={{ backgroundImage: `url(${topVideoImage})`, }} muted playsInl ...

Creating a row-wise array in R with vector elements: A step-by-step guide

I'm having trouble getting an output of elements stored row-wise when creating an array. I've searched for a solution but couldn't find anything. For instance, consider this code snippet: X = c(1,2,3) Y = c(4,5,6,7,8,9) R = array(c(X, ...

Jsx Component fails to display following conditional evaluations

One issue I am facing is having two separate redux stores: items (Items Store) quotationItems (Quote Items). Whenever a product item is added to quotationItems, I want to display <RedButton title="Remove" />. If the quotationItems store i ...

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

What measures can be taken to prohibit a user from accessing a client-side HTML file using express?

I am currently developing a task management application called "todolist." In my node.js code, I utilize express and grant it access to my directory named Client: var app = express(); app.use(express.static(__dirname + "/Client")); The contents of my Cl ...

Handling the same form button repeatedly in a loop using jQuery

I have successfully set up jquery to accept form data and send it to flask, but I am facing two issues: It only accepts the first form, which has the same IDs repeated for each element. I want all forms to be able to submit. When a submission occurs, it ...

Retrieve the URL redirected by JavaScript without altering the current page using Selenium

Is there a way to extract the URL I am supposed to be redirected to upon clicking a button on a website, without actually being redirected? The button triggers a complex Javascript function and is not a simple hyperlink. click() method doesn't meet my ...

Real-time updates using Express.js and Redis

Looking for guidance on managing real-time changes from Redis in Express.js. I am in need of fresh data from Redis every time there is an update. Can someone provide a helpful example or solution for this? ...

What is the significance of authors stating "AngularJS compiles the DOM"?

Currently, I am diving into the book Lukas Ruebbelke's AngularJS in Action, The author emphasizes throughout the text that, In AngularJS, a view is essentially the modified version of HTML after it has been processed by AngularJS. I'm struggli ...

Provide props to vue-router along with boostrap-vue's b-nav-item

I am currently in the process of transitioning my SPA from modals that load components to routed pages that load components. I have been able to successfully open a page using to="/fixtures" in the html, but I am facing an issue with passing in a component ...

Creating a blueprint for my AJAX setup to effectively incorporate a callback function

I'm currently working with AJAX to fetch timezone information in a function, but I need it to return the result. I've come to realize that AJAX is asynchronous, so I require a callback function. Although I have seen examples, I am struggling to u ...

Reactjs: Tips for precisely cropping an image to a specific aspect ratio using client-side techniques

Looking to crop an image with a minimalist approach to achieve a specific aspect ratio. For instance, if we have an image sized at 3038 x 2014 px, and desire a 1:2 aspect ratio, we would crop it to 3021 x 2014 px. The crop would be made from the center of ...

Using node.js to send a response with response.writeHead on the http module

While working on my own custom http module, I stumbled upon a few confusing points while studying the official node.js http module api: When a user utilizes the response.writeHead(statusCode, [reasonPhrase], [headers]) function, are the headers suppose ...

Is it possible for me to include the id attribute in an HTML element that has been generated using React

While working with Selenium to create end-to-end tests for a React-based web application, I noticed that very few HTML elements have the id property set. Since our development team is preoccupied with other tasks, I've taken it upon myself to address ...

Error: Trying to break down a non-iterable object is not valid

Currently working on an Ionic React app and encountering the following error: Error: TypeError - Invalid attempt to destructure non-iterable instance Once I run the program, the error occurs at this point: . Shown below is a snippet of my code: import ...

Display and view .dwg files using Javascript, HTML, and Angular

Looking for a way to upload and preview .dwg format images on a page created using js/HTML/angularjs or Angular 2+? I've attempted to use a CAD viewer js library, but the lack of documentation has made it challenging. Has anyone successfully implement ...

While working on my Laravel and Vue.js project, I encountered the following error message: "Module not found: Error: Can't resolve './vue/app' in 'C:vue odolist esourcesjs'"

Running into an issue where the app.vue file cannot be found in the app.js. I'm using Laravel version "8.31.0" and VueJS version "^2.6.12". Any assistance would be highly appreciated. The content of app.js is: require('./bootstrap'); impor ...

Struggling to locate the element value in Puppeteer? Reach out for assistance with await page.waitForSelector() or await page.waitForXPath()

insert image description here[ await page.waitForSelector('.DateRangeSelectorstyles__DateInput-sc-5md5uc-2.kXffji.sc-cSHVUG.VGFsW'); await page.type('.DateRangeSelectorstyles__DateInput-sc-5md5uc-2.kXffji.sc-cSHVUG.VGFsW','01- ...

What is the process of importing a JSON data file and utilizing it within a React component?

As a beginner in React, I am struggling with the concepts of importing, exporting, and rendering components. I have a fakeData.json file within the same src/components folder as the component I want to render. Let's take a look at the structure: < ...

Is there a more efficient alternative to `[].push.apply(this, arr)` for combining elements in an array instance within a constructor?

It only takes 0.15ms for this line in my constructor function to execute. [].push.apply(this, selector); I'm not satisfied with the 0.15ms execution time. I believe there must be a quicker alternative available. This particular line seems to be conv ...