Is it possible to achieve a Column Chart output in R/Highcharts?

Looking to utilize highchart to create a chart with columns stacked within each other for different countries.

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

I want the smaller column to be nested inside the larger one for each country.

Any suggestions on how I can achieve this effect?

This is the code I currently have:

library(tidyverse)
library(gapminder)
library(highcharter)

gapminder::gapminder %>%
  
  filter(year >= 1990,country %in% c('Chile','Argentina'))%>%     
  
  hchart(
    type = 'column',
    
    hcaes(x = year, y = gdpPercap, group = country),
    visible = TRUE,
    showInLegend = TRUE,
    name  = "",
    zIndex = 9999999,
    zoneAxis = 'x',
    color = 'blue'          
    
  ) %>%

  hc_subtitle(text = "") %>%
  hc_legend(enabled = FALSE) %>%
  hc_xAxis(enabled = FALSE,title = FALSE) %>%
  hc_yAxis(enabled = FALSE,title = FALSE,
           labels = list(enabled = FALSE)) %>%
  
  hc_plotOptions(
    column = list(stacking = NULL,pointWidth = 10)
    
  )

I am looking for guidance on how to manipulate the positions of the columns in the chart.

javascriptrhighchartsr-highcharter

Answer №1

Yes, it is indeed possible to achieve this using hchart. You just need to specify the groupPadding and pointWidth parameters as vectors, with each position corresponding to a different series. In this case, "Argentina" and "Chile" are the two groups.

gapminder::gapminder %>
  
  filter(year >= 1990,country %in% c('Chile','Argentina'))%>%     
  hchart(
    type = 'column',
    hcaes(x = year, y = gdpPercap, group = country),
    visible = TRUE,
    showInLegend = TRUE,
    zIndex = 9999999,
    groupPadding = c(.5,.5), #length 2 vector for 2 groups
    pointWidth = c(80,40) #length 2 vector for 2 groups
  ) %>%
  hc_subtitle(text = "") %>%
  hc_legend(enabled = FALSE) %>%
  hc_xAxis(enabled = FALSE,title = FALSE) %>%
  hc_yAxis(enabled = FALSE,title = FALSE,
           labels = list(enabled = FALSE)) %>%
  hc_plotOptions(
    column = list(stacking = NULL,pointWidth = 10)
  )

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

What is the best way to establish a sequence for consecutive elements in a csv string?

I've got a string csv that holds PORTCODE and latitude longitude coordinates of a location. Using these values, I plot markers on a google map. Example CSV string: ANC|61.2181:149.9003, ANC|61.2181:149.9003, TLK|62.3209:150.1066, DNL|63.1148:151. ...

javascriptc#

Passing parameters from a div to a single page component in Vue.js: A complete guide

There is code that appears on multiple pages: <div id="contact-us" class="section md-padding bg-grey"> <div id="contact"></div> <script src="/dist/build.js"></script> </div> Included in main.js is: im ...

javascriptvue.jsvue-component

Utilize the filter function to refine and sort through objects

I have an array of objects structured as follows: pages= [ { "id":1, "name":"name1", "languages":[ { "id":1, "lang":"en" }, { "id":2, "lang":"de" } ...

javascriptarraysfilterecmascript-6

AJAX: Learn how to execute an AJAX call using a JavaScript function

Is there a method to determine (using developer tools like Chrome, Firefox, Opera, etc) the most recent function that triggers an AJAX call? This could be helpful for debugging web applications. Appreciate your help ...

javascriptajaxdebugging

Incorporate Vuetify's v-stepper seamlessly with Vue router for dynamic functionality

Seeking assistance in integrating vuetify's v-stepper with vue router. Specific requirements include: Assigning each step its own route (e.g. /myform/step1, /myform/step2, /myform/step3, etc) Creating components for each step that are dynamically lo ...

javascriptvue.jsvue-routervuetify.jsv-stepper

Require a v-alert notification to appear on every page, ensuring visibility across the site

Imagine a scenario where there is a right drawer that displays a grade dropdown with options like grade1, grade2, and grade3. On all pages, I need a v-alert notification strip to show the total count of students. For example, if I select grade3 from the ri ...

javascriptvue.js

Tips on appending a parameter to an image URL using JavaScript

On my website, I am able to insert images with specified width and height using this code: <img src="image.php?w=100&h=100"> I would like the image size to change based on the device screen width. For screens smaller than 600px, I want to displa ...

javascripthtmlimageurl-parameters

The Bootstrap 4 Carousel experiences flickering issues during transitions when viewed on Safari browser

After integrating a Bootstrap 4 carousel onto a Drupal platform, I encountered a peculiar issue. The carousel functions smoothly on Chrome, but on Safari, it briefly blinks before transitioning to the next slide (as per the set interval time). Initially, I ...

javascripthtmlcssbootstrap-4

Verify registration by sending an email to an alternate email address through Angular Firebase

I have implemented email verification for users before registration. However, I would like to receive a verification email to my own email address in order to finalize the registration process. I want to be notified via email and only after my approval sho ...

javascriptangulartypescriptfirebase-authentication

Is it considered fundamentally inappropriate to call $scope.$digest within $scope.$on?

I recently inherited some AngularJS code, and my knowledge of both the codebase and Angular itself is limited. Within the code I inherited, there are instances where $scope.$digest is being called inside a $scope.$on method within a controller. Here's ...

javascriptangularjsangularjs-scope

Utilize AJAX in JavaScript file

I am encountering an issue with the following code: function inicioConsultar(){ $(function(){ $('#serviciosU').change(function(){ if ($('#serviciosU').val()!= "-1") { $.ajax({ url: "@Url. ...

javascriptjqueryhtmlajax

Problem encountered while using AJAX to load a PHP script, triggered by an onclick event;

My expertise lies in HTML, CSS, JavaScript, and PHP. However, I find myself lacking in knowledge when it comes to jQuery and Ajax. While I work on web design projects involving bars and nightclubs that prioritize style over performance, my current job dema ...

phpjavascripthtmlmysqlajax

Implement the color codes specified in the AngularJS file into the SASS file

Once the user logs in, I retrieve a color code that is stored in localstorage and use it throughout the application. However, the challenge lies in replacing this color code in the SASS file. $Primary-color:#491e6a; $Secondary-color:#e5673a; $button-color ...

javascriptcssangularjssass

Get the Quantmod R package for seamless downloading, saving, and loading of data

I'm interested in using quantmod to download data and save it to files for future use. Here is a snippet of code in R: library(quantmod) symbols <- c("DEXUSUK", "STLFSI", "GDP") tmpdir <- tempdir() getSymbols(symbols, src="FRED") saveSymbols ...

rquantmod

Protractor test fails to retain variable's value

I am currently executing a protractor test to validate the existence of a record in the grid based on a specific license number. However, I have encountered an issue where the value assigned to the rowNumber variable gets lost after traversing through all ...

javascriptangularjsprotractorautomated-tests

Creating a dynamic label in Echart with multiple values: A step-by-step guide

How can I customize the legend in an Echarts doughnut chart to display additional content like shown in the image below? Current Legend: [ Desired Legend: https://i.stack.imgur.com/ur0ri.png Thank you, Eric ...

javascriptpie-chartecharts

Creating obstacles in a canvas can add an extra layer of challenges and

I am working on creating a basic platformer game using the code displayed below. window.onload = function(){ var canvas = document.getElementById('game'); var ctx = canvas.getContext("2d"); var rightKeyPress = false; var leftKeyPress = false; ...

javascripthtmlcanvas

invoking a PHP function within a JavaScript script

In my collection of essential functions, there is one that I am particularly interested in: //the functions file //........ function user_exists($username){ $username = sanitize($username); $query = mysql_query("SELECT COUNT('user_id') F ...

javascriptphpajax

Is there a way to combine various Blender JSON models into a single Three.js Object3D entity?

Is there a way to combine multiple Blender JSON models into a single Three.js Object3D object? I've searched Google for answers but haven't found any solutions yet. ...

javascriptthree.js

Find an element within an array in a separate JavaScript file (leveraging AngularJS)

I am new to AngularJS and decided to create a custom map with my own markers that I defined. To do this, I started by creating a JavaScript file containing an array: var myMarkers=[{ method1='..', methode2='..' },{ method1=&a ...

javascriptarraysangularjsgoogle-mapssearch