JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
<div>
<div id='plot'>
</div>
<div id='image'>
</div>
</div>
JavaScript
require.config({
paths: {
jquery: '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min',
d3: 'https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3',
plotly: 'https://cdn.plot.ly/plotly-1.5.1.min.js?noext'
},
shim: {
plotly: {
deps: ['d3', 'jquery'],
exports: 'plotly'
}
}
});
require(['jquery', 'd3', 'plotly'], function(jquery, d3, plotly) {
var pdata = [
{
x: [15, 45, 75],
y: [0.642, 0.658, 0.544],
type: "scatter",
mode: "lines",
name: "Sample"
}
];
var layout = {
"xaxis": {
"range":[0,644],
"title":"Seconds"
},
"yaxis":{
"range":[0.464,0.719],
"title":"Loss"
},
"height":400,
"margin":{"b":60,"t":60,"l":60,"r":60},
"title": "Loss",
"width":400,
"autosize":false
};
plotly.newPlot('plot', pdata, layout, {displayModeBar: false})
plotly.Snapshot.toImage('plot', {format: 'png'}).once('success', function(url) {
document.getElementById('image').innerHTML = '<img src="' + url + '"/>'
});
})