JSFiddle - React, Tailwind, and code Playground

by Joanna Sobańska

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>


<pre id="csv" style="display:none">date,mid-point, MA 3...

JavaScript

$(function () {
    $('#container').highcharts({

        title: {
            text: 'Price of stock'
        },

        data: {
            csv: document.getElementById('csv').innerHTML
        },
     


   series: [
   { dashStyle : 'solid',
   color:'#000000'},
      { dashStyle : 'solid',
      color:'#FF0000',
      },
            { dashStyle : 'shortdot',
      color:'#797980',
      },
                  { dashStyle : 'shortdot',
      color:'#797980',
      }
   ]

    });
});
$(function () {
    $('#container1').highcharts({

        title: {
            text: 'Relative Strength Index'
        },

        data: {
            csv: document.getElementById('csv1').innerHTML
        },
     


   series: [
   { dashStyle : 'solid',
   color:'#000000'},
      { dashStyle : 'solid',
      color:'#FF0000',
      }
   ]

    });
});

$(function () {
    $('#container2').highcharts({

        title: {
            text: 'Difference between asks and bids'
        },

        data: {
            csv: document.getElementById('csv2').innerHTML
        },
     


   series: [
   { 
   type: 'column',
   dashStyle : 'solid',
   color:'#000000'},
      {
      type: 'spline',
      dashStyle : 'solid',
      color:'#FF0000',
      }
   ]

    });
});