JSFiddle - React, Tailwind, and code Playground

by jeffgw

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

// Random float between correlation
function randomFloat(minValue, maxValue, precision, length) {
	r = []
	for (i = 0; i < length; i++) {
      if (typeof(precision) == 'undefined') {
        precision = 2;
      }
      f = parseFloat(Math.min(minValue + (Math.random() * (maxValue - minValue)), maxValue).toFixed(precision));
      r.push(f)
   } // for loop
   return r
}


function randomPrice(start,length){
	p = []
	for (i = 0; i < length; i++) {
  	step = Math.round(start + Math.random() * (7 - -2) + -2,2);
    p.push(step);
  }
  return p
}





Highcharts.chart('container', {
  chart: {
    type: 'column'
  },
  xAxis: {
    categories: null
  },
  yAxis:[{
  	title:{
    	enabled:false
    }
  },{
  	title:{
    	enabled:false
    },
    opposite:true
  },{
  	title:{
    	enabled:false
    },
    opposite:true
  }],
  plotOptions: {
    column: {
      borderColor: null,
      groupPadding: 0,//add here
      pointPadding: 0,//add here
    }
  },

  series: [{
  	name: 'Correlation',
    type:'column',
    data: randomFloat(-1,1,2,60)
  },{
  	name: 'SPY - VTI Spread',
    type:'spline',
    color:'#CCC',
    yAxis:1,
    data:randomPrice(10,60)
    
  }]
});