Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

278
Views
Rewriting Highchart function in highcharter for R-markdown

Short and sweet: Rewriting a highchart function in R.

I figured out how to write a function in highcharts to rank my values and categories in a heatmap. So that the category with the highest number will display on top and vice versa. This is represented in a year column that that has a different ranking of each year. Issue is that the code is done in the highcharts container in javascropt and I want to recreate this piece of code in a R-markdown file but can't manage to figure out how to wrap the function that ranks the values and catagories as my highchart code does. Specifically this function:

const processedData = [];

columnsData.forEach(column => {
  column.data.sort((a, b) => a.value - b.value);
  column.data.forEach((dataEl, index) => {
    processedData.push({
      name: column.year,
      y: index,
      value: dataEl.value,
      dataLabels: {
        format: dataEl.name + ': ' + dataEl.value
      }
    });
  });
});

Any help with wrapping the function to highcharter would be great.

const columnsData = [{
  year: '2001',
  data: [{
    name: 'A',
    value: 55
  }, {
    name: 'B',
    value: 45
  }, {
    name: 'C',
    value: 67
  }]
}, {
  year: '2002',
  data: [{
    name: 'D',
    value: 15
  }, {
    name: 'E',
    value: 24
  }, {
    name: 'F',
    value: 67
  }]
}, {
  year: '2003',
  data: [{
    name: 'G',
    value: 77
  }, {
    name: 'H',
    value: 56
  }, {
    name: 'I',
    value: 58
  }]
}];

const processedData = [];

columnsData.forEach(column => {
  column.data.sort((a, b) => a.value - b.value);
  column.data.forEach((dataEl, index) => {
    processedData.push({
      name: column.year,
      y: index,
      value: dataEl.value,
      dataLabels: {
        format: dataEl.name + ': ' + dataEl.value
      }
    });
  });
});

console.log(processedData)

Highcharts.chart('container', {
  chart: {
    type: 'heatmap',
    marginTop: 40,
    marginBottom: 80,
    plotBorderWidth: 1
  },
  xAxis: {
    type: 'category'
  },

  yAxis: {
    visible: false
  },

  colorAxis: {
    min: 0,
    minColor: '#FFFFFF',
    maxColor: Highcharts.getOptions().colors[0]
  },

  legend: {
    align: 'right',
    layout: 'vertical',
    margin: 0,
    verticalAlign: 'top',
    y: 25,
    symbolHeight: 280
  },

  series: [{
    name: 'Sales per employee',
    borderWidth: 1,
    data: processedData,
    dataLabels: {
      enabled: true,
      color: '#000000'
    }
  }]
});

Highcharter (RMD):

spx_highchart %>%
  hchart(type = "heatmap",
         hcaes(
           x = year,
           y = class,
           value = returns,
           color = colour,
           borderWidth = 1
         )

JS Fiddle: https://jsfiddle.net/6y45fdjt/

about 4 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!