{"id":20383,"date":"2020-11-26T15:03:04","date_gmt":"2020-11-26T14:03:04","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20383"},"modified":"2026-01-13T11:16:44","modified_gmt":"2026-01-13T11:16:44","slug":"working-with-highcharts-javascript-syntax-in-r","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/integration\/working-with-highcharts-javascript-syntax-in-r\/","title":{"rendered":"Working with Highcharts JavaScript Syntax in R"},"content":{"rendered":"<p>This tutorial will show you how to customize and adjust your interactive chart in JavaScript syntax within R.<br \/>\nWe will use <a href=\"https:\/\/jkunst.com\/highcharter\/\" target=\"_blank\" rel=\"noopener noreferrer\">Highcharter<\/a> (Highcharts R wrapper) to build the interactive charts and the Highcharts API (in Javascript) to customize the R code. <\/p>\n<p>Well, spoiler alert, it is very easy to use JavaScript in R. All you have to do is to wrap your JavaScript code into the List() method.<\/p>\n<p>Let&#8217;s take a look at this demo made in pure Highcharts\/JavaScript as an example:<\/p>\n<p class=\"demo-comtainer\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"VwKwPKR\" src=\"https:\/\/codepen.io\/piotr-madej\/embed\/VwKwPKR?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\" title=\"A line chart displays random data\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/piotr-madej\/pen\/VwKwPKR'>VwKwPKR<\/a> by Piotr Madej<br \/>\n  (<a href='https:\/\/codepen.io\/piotr-madej'>@piotr-madej<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>The example includes events and methods such as <a href=\"https:\/\/api.highcharts.com\/highcharts\/chart.events.render\" target=\"_blank\" rel=\"noopener noreferrer\">render()<\/a> and the <a href=\"https:\/\/api.highcharts.com\/highcharts\/plotOptions.series.dataLabels.formatter\" target=\"_blank\" rel=\"noopener noreferrer\">dataLabels.formatter function<\/a> that enable dynamic changes and interaction with the chart.<br \/>\nNow, if you would like to use the same JavaScript code of events and methods in R, all you have to do is to use the list() method, then copy and paste the JavaScript code. In our example, add <code>events = list()<\/code> and <code>dataLabels = list()<\/code>  in the R code (source <a href=\"https:\/\/github.com\/madepiet\/highcharts-demos\/blob\/master\/highcharts-r\/chart.R\" target=\"_blank\" rel=\"noopener noreferrer\">GitHub<\/a>):<\/p>\n<pre>...\r\n    events = list(render = JS(\"function() {\r\n        const chart = this,\r\n          data = chart.series[0].data;\r\n        let pointsToProject = [];\r\n        (chart.myCustomCircles || []).forEach(function(circle) {\r\n          circle.destroy();\r\n        }); \r\n        chart.myCustomCircles = []; \r\n        pointsToProject = chart.series[0].points.filter(function(point) {\r\n          return point.flag && point.isInside;\r\n        });\r\n        \/\/ Where to draw a circle\r\n        pointsToProject.forEach(function(point) {\r\n          const customCircle = chart.renderer.circle(\r\n              chart.plotLeft + point.plotX,\r\n              chart.plotSizeY + chart.plotTop,\r\n              4\r\n            )\r\n            .attr({\r\n              fill: 'red',\r\n              zIndex: 2\r\n            })\r\n            .add();\r\n          chart.myCustomCircles.push(customCircle);\r\n        });\r\n        \/\/ Where to render the text\r\n        if (!chart.myCustomText) {\r\n          chart.myCustomText = chart.renderer.text(\r\n              ',\r\n              chart.plotLeft,\r\n              35\r\n            )\r\n            .add();\r\n        }\r\n        chart.myCustomText.attr({\r\n          text: 'Number of points with max value: ' + pointsToProject.length,\r\n        });\r\n      }\r\n      \"\r\n    ))\r\n...\r\n\r\n    series = list(\r\n      dataLabels = list(\r\n        enabled = TRUE,\r\n        formatter = JS(\"function() {\r\n          let visiblePoints = this.series.points.filter(function(point) {\r\n              return point.isInside;\r\n            }),\r\n            max = visiblePoints.reduce(function(acc, cur) {\r\n              return Math.max(cur.y, acc);\r\n            }, 0);\r\n          if (this.y === max) {\r\n            this.point.flag = true;\r\n            return this.y;\r\n          } else {\r\n            this.point.flag = false;\r\n          }\r\n        }\r\n        \"\r\n      )\r\n    )<\/pre>\n<p>You can also use a simplified template. For instance, the code below allows you to dynamically change the chart background. This code is a good starting point to create your own advanced configurations:<\/p>\n<pre>library('highcharter')\r\nhighchart() % > %\r\n  hc_add_series(\r\n    type = \"line\",\r\n    data = list(5, 4, 3, 5)\r\n  ) % > %\r\n  hc_chart(events = list(load = JS(\"function() {\r\n      var chart = this; chart.update({\r\n        chart: {\r\n          backgroundColor: '#FCFFC5'\r\n        }\r\n      }); console.log('Updated chart background color!');\r\n    }\r\n    \")\r\n  ))<\/pre>\n<p>To recap, you can use this customization approach in places where you can write regular JavaScript functions in the available Highcharts API options. <\/p>\n<p>We encourage you to use what you learned here to create interactive charts using R, and you are welcome to leave your questions and comments under this article!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to write JavaScript in R to create interactive charts with Highcharts and Highcharter.<\/p>\n","protected":false},"author":255,"featured_media":21961,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[1105],"tags":[1094,793],"coauthors":[844],"class_list":["post-20383","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-integration","tag-highcharts-core","tag-r"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20383","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/255"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20383"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20383\/revisions"}],"predecessor-version":[{"id":29332,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20383\/revisions\/29332"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/21961"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20383"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20383"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20383"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20383"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}