JSFiddle - React, Tailwind, and code Playground
HTML
<div id = "highcharts-ecavev"></div>
JavaScript
/* This is copied from https://cloud.highcharts.com/inject/ecavev*/
(function () {
var script = document.createElement('script');
function addChart() {
// Prevent double firing of event in IE9/IE10
if (script.chartAdded) {
return;
}
script.chartAdded = true;
function parseData(completeHandler, chartOptions) {
try {
var dataOptions = {
"seriesMapping": [
{
"x": 0
},
{
"x": 0
},
{
"x": 0
},
{
"x": 0
}
],
"columnTypes": [
"date",
"float",
"float",
"float",
"float"
],
"csv": ",91 E Plus,95 Special,98 Super,Diesel\n1435708800000,1.62,1.72,1.92,2.9\n1438387200000,2.07,2.14,2.25,2.05\n1441065600000,1.89,1.96,2.07,2.05\n1443657600000,1.72,1.79,1.9,1.89\n1446336000000,1.63,1.7,1.81,1.87\n1448928000000,1.61,1.68,1.79,1.83"
};
dataOptions.sort = true
dataOptions.complete = completeHandler;
Highcharts.data(dataOptions, chartOptions);
} catch (error) {
console.log(error);
completeHandler(undefined);
}
}
var shareUrl = 'http://cloud.highcharts.com/show/ecavev';
var encodedUrl = encodeURIComponent(shareUrl);
var template = {
chart: {
renderTo: 'highcharts-ecavev'
},
navigation: {
menuItemStyle: {
fontFamily: Highcharts.SVGRenderer.prototype.getStyle().fontFamily,
padding: '2px 10px'
}
},
exporting: {
buttons: {
contextButton: {
menuItems: [{
text: '<a href="https://www.facebook.com/sharer/sharer.php?u=' + encodedUrl + '" target="_blank">' +
'Share on Facebook</a>'
}, {
text: '<a href="https://plus.google.com/share?url=' + encodedUrl + '" target="_blank">' +
'Share on Google+</a>'
}, {
text: '<a href="https://twitter.com/share?url=' + encodedUrl + '&text=' + document.title + '" target="_blank">' +
'Share on Twitter</a>'
}, {
text: '<a href="http://www.linkedin.com/shareArticle?mini=true&url=' + encodedUrl + '" target="_blank">'...