JSFiddle - React, Tailwind, and code Playground

by Ayyappan Sakthivadivel

HTML

<!-- Dependencies -->
<script src="//a----.github.io/highcharts-export-clientside/bower_components/jquery/dist/jquery.min.js"></script>
<script src="//a----.github.io/highcharts-export-clientside/bower_components/highcharts/highcharts.js"></script>
<script src="//a----.github.io/highcharts-export-clientside/bower_components/highcharts/modules/exporting.js"></script>
<script src="//a----.github.io/highcharts-export-clientside/bower_components/highcharts/modules/canvas-tools.js"></script>
<script src="//a----.github.io/highcharts-export-clientside/bower_components/export-csv/export-csv.js"></script>
<script type="application/javascript" src="//a----.github.io/highcharts-export-clientside/bower_components/jspdf/dist/jspdf.min.js"></script>
<!-- Export Client-Side module -->
<script src="//a----.github.io/highcharts-export-clientside/bower_components/highcharts-export-clientside/highcharts-export-clientside.js"></script>
<div id="container"></div>

CSS

#container {
    min-width: 300px;
    max-width: 800px;
    height: 300px;
    margin: 1em auto;
}

JavaScript

$('#container').highcharts({


    chart: {
        renderTo: 'container',
        type: 'spline',
        marginRight: 50,
        marginBottom: 80,
        spacingBottom: 100,

        borderWidth: 3,
        borderColor: '#a9a9a9', //'gray',//'#e8eaeb',
        borderRadius: 3,
        backgroundColor: '#f7f7f7',
        minPadding: 0,
        
        // SVG export renders with with the image on the chart.
        // PNG, JPG and PDF fail to render when exporting if the image is present.
        // If you remove the image, PNG, JPG, PDF and SVG all render when exported.
        /**/events: {
            load: function () {
               ...