JSFiddle - React, Tailwind, and code Playground

by Raj Patel

HTML

<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.system.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.coreVector.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.annotation.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.highlowclose.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.userinterface.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.density.js"></script>
<script src="https://www.jchartfx.com/libs/v7/current/js/jchartfx.advanced.js"></script>
<div id="ChartDiv" style="width:600px;height:400px;"> </div>
Long term Displayed<input type="checkbox" id="LTSwitch" checked>
Medium term Displayed<input type="checkbox" id="MTSwitch" checked>
Short tern Displayed<input type="checkbox" id="STSwitch" checked>

JavaScript

$(document).ready(function($){ loadChart()})

 document.getElementById("LTSwitch").addEventListener("click", function()
	{
  var  DisplayedLT  = document.getElementById("LTSwitch").checked;
 	
	 if(DisplayedLT)
    		{AddLT_Annotations();
        series5.setVisible(true);
        series6.setVisible(true);
        }
	else
		{chart1.getData().clear();
    loadChart();
    series5.setVisible(false);
    series6.setVisible(false);}	
	 });

 document.getElementById("MTSwitch").addEventListener("click", function()
	{
  var  DisplayedMT  = document.getElementById("MTSwitch").checked;
	 if(DisplayedMT)
    		{  AddMT_Annotations();
        series7.setVisible(true);series8.setVisible(true);}
	else
		{chart1.getData().clear();
    loadChart();
    series7.setVisible(false);series8.setVisible(false);}	
	 });
   document.getElementById("STSwitch").addEventListener("click", function()
	{
  var  DisplayedST  = document.getElementById("STSwitch").checked;
	 if(DisplayedST)
    		{series9.setVisible(true);
		series10.setVisible(true);
		series11.setVisible(true);
		series12.setVisible(true);
		}
	else
		{series9.setVisible(false);
		series10.setVisible(false);
		series11.setVisible(false);
		series12.setVisible(false);
		}	
	 });




function loadChart()
{        
    chart1 = new cfx.Chart();
    
    PassData2();    
   density();
 
 
chart1.setGallery(cfx.Gallery.OpenHighLowClose);

    //chart1.setGallery(cfx.Gallery.Candlestick);
    chart1.getAxisY().setPosition(cfx.AxisPosition.Far);
    chart1.getAxisY().setForceZero(false);
//	chart1.getAxisY().getLabelsFormat().setFormat(cfx.AxisFormat.Currency);
    chart1.getSeries().getItem(0).setColor("#99FF99"); //
    chart1.getSeries().getItem(1).setColor("#99FF99"); //
    chart1.getSeries().getItem(2).setColor("#FF9999");
    chart1.getSeries().getItem(3).setColor("#9c9c9c");
   ...