CandleStick Chart with Gann Angles - CanvasJS JavaScript Charts

CandleStick Chart with Gann Angles - CanvasJS JavaScript Charts

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer1" style="height: 500px; width: 500px;"></div>
<div id="chartContainer2" style="height: 500px; width: 500px;"></div>

CSS

#chartContainer1{
  z-index:2;  
  position:absolute;
}
#chartContainer2{
   z-index:1;  
   opacity:0.6;  
   position:absolute;
}

JavaScript

var chart1 = new CanvasJS.Chart("chartContainer1",
	{      
  		backgroundColor:"transparent",
      data: [     
        {
        type: "candlestick",        
        dataPoints: [
          {x: 1,y:[98, 29, 59, 85]},
          {x: 2,y:[66, 99, 35, 95]},
          {x: 3,y:[96, 78, 54, 48]},
          {x: 4,y:[54, 79, 88, 24]},
          {x: 5,y:[10, 86, 70, 78]},
          {x: 6,y:[83, 48, 32, 29]},
          {x: 7,y:[20, 48, 64, 58]},
          {x: 8,y:[76, 35, 15, 03]},
          {x: 9,y:[04, 15, 88, 19]},
          {x: 10,y:[09, 85, 48, 79]}				
        ]
      }    
      
   ]
 });
 
 var chart2 = new CanvasJS.Chart("chartContainer2",
	{    
  axisY:{
        gridThickness: 0,
        lineThickness: 0,
        valueFormatString:" ",        
      	tickThickness:0,
        viewportMinimum:0 ,
       	viewportMaximum:10,
        margin:36,
      },
      axisX:{
      	gridThickness: 0,
       	lineThickness: 0,
       	valueFormatString:" ",       
      	tickThickness:0,
       	viewportMinimum:0 ,
       	viewportMaximum:10,
        margin:30,
      },
      data: [     
        {
        type: "line",
        color:"red",
        dataPoints: [
        { x: 10, y: 1.31652 },
        { x: 0, y: 00 },
        { x: 10, y: 2.67949 },
        { x: 0, y: 00 },
        { x: 10, y: 3.39454 },
        { x: 0, y: 00 },
        { x: 10, y: 4.93145 },
        { x: 0, y: 00 },
        { x: 10, y: 10 },
        { x: 0, y: 00 },
        { x: 4.93145, y: 10 },
        { x: 0, y: 00 },
        { x: 3.39454, y: 10 },
        { x: 0, y: 00 },
        { x: 2.67949, y: 10 },
        { x: 0, y: 00 },
        { x: 1.31652, y: 10 },
        { x: 0, y: 00 },
        ]
      },   
      
   ]
 });

 chart1.render();
 chart2.render();