Candlestick chart combined with Line Chart - CanvasJS JavaScript Charts

Candlestick chart combined with Line Chart - 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="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
  		title:{
      	text:"Candlestick with Line Chart"
      },
      axisY:{
     	 includeZero: false,      
      }, 
      data: [
       {
        type: "candlestick",
        dataPoints: [
          {x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},
          {x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},
          {x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},
          {x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},
          {x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},
          {x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},
          {x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},
          {x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},
          {x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},
          {x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},
          {x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]}
        ]
      },
        {
          type: "line",

          dataPoints: [
            { x: new Date(2012, 00, 1), y: 5450 },
            { x: new Date(2012, 01, 1), y: 5414 },
            { x: new Date(2012, 02, 1), y: 5520 },
            { x: new Date(2012, 03, 1), y: 5460 },
            { x: new Date(2012, 04, 1), y: 5450 },
            { x: new Date(2012, 05, 1), y: 5500 },
            { x: new Date(2012, 06, 1), y: 5480 },
            { x: new Date(2012, 07, 1), y: 5580 },
            { x: new Date(2012, 08, 1), y: 5410 },
            { x: new Date(2012, 09, 1), y: 5500 },
            { x: new Date(2012, 10, 1), y: 5480 },
            { x: new Date(2012, 11, 1), y: 5510 }
          ]
        }
      ]
    });

 chart.render();