This tutorial will show you how to customize and adjust your interactive chart in JavaScript syntax within R.
We will use Highcharter (Highcharts R wrapper) to build the interactive charts and the Highcharts API (in Javascript) to customize the R code.
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.
Let’s take a look at this demo made in pure Highcharts/JavaScript as an example:
The example includes events and methods such as render() and the dataLabels.formatter function that enable dynamic changes and interaction with the chart.
Now, 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 events = list()
and dataLabels = list()
in the R code (source GitHub):
... events = list(render = JS("function() { const chart = this, data = chart.series[0].data; let pointsToProject = []; (chart.myCustomCircles || []).forEach(function(circle) { circle.destroy(); }); chart.myCustomCircles = []; pointsToProject = chart.series[0].points.filter(function(point) { return point.flag && point.isInside; }); // Where to draw a circle pointsToProject.forEach(function(point) { const customCircle = chart.renderer.circle( chart.plotLeft + point.plotX, chart.plotSizeY + chart.plotTop, 4 ) .attr({ fill: 'red', zIndex: 2 }) .add(); chart.myCustomCircles.push(customCircle); }); // Where to render the text if (!chart.myCustomText) { chart.myCustomText = chart.renderer.text( ', chart.plotLeft, 35 ) .add(); } chart.myCustomText.attr({ text: 'Number of points with max value: ' + pointsToProject.length, }); } " )) ... series = list( dataLabels = list( enabled = TRUE, formatter = JS("function() { let visiblePoints = this.series.points.filter(function(point) { return point.isInside; }), max = visiblePoints.reduce(function(acc, cur) { return Math.max(cur.y, acc); }, 0); if (this.y === max) { this.point.flag = true; return this.y; } else { this.point.flag = false; } } " ) )
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:
library('highcharter') highchart() % > % hc_add_series( type = "line", data = list(5, 4, 3, 5) ) % > % hc_chart(events = list(load = JS("function() { var chart = this; chart.update({ chart: { backgroundColor: '#FCFFC5' } }); console.log('Updated chart background color!'); } ") ))
To recap, you can use this customization approach in places where you can write regular JavaScript functions in the available Highcharts API options.
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!
Comments
There are no comments on this post
Want to leave a comment?
Comments are moderated. They will publish only if they add to the discussion in a constructive way. Please be polite.