CanvasJS Basic StockChart | CanvasJS JavaScript StockChart

CanvasJS Basic StockChart | CanvasJS JavaScript StockChart

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the StockChart -->
<div id="stockChartContainer" style="height: 450px; width: 100%;"></div>

JavaScript

var dataPoints = [

  { x: new Date(2018, 01, 5,12,30,2), y: 55 },
  { x: new Date(2018, 01, 5,15,30,15), y: 50 },
  { x: new Date(2018, 01, 5,22,30,15), y: 50 },
  { x: new Date(2018, 01, 6,10,30,30), y: 65 },
  { x: new Date(2018, 04, 6,10,30,30), y: 95 },
   { x: new Date(2018, 04, 10,10,30,30), y: 95 },
    { x: new Date(2018, 04, 15,10,30,30), y: 95 },
 
];

var stockChart = new CanvasJS.StockChart("stockChartContainer", {
  title:{
    text: "Basic StockChart"
  },
  exportEnabled: true,
  charts: [{
    data: [{
      type: "candlestick",
       risingColor: "#3BD80D",
      fallingColor: "#fd5d93",				
        yValueFormatString: "###", 
      dataPoints: dataPoints
    }]
  }],
  navigator: {
    
  },
  rangeSelector: {
		inputFields: {
       enabled: false,
       },		
      buttons: [{
        range: 1, 
        rangeType: "minute",
        label: "1minute"
      },{
        range: 1, 
        rangeType: "hour",
        label: "1hour"
      },{
        range: 1, 
        rangeType: "day",
        label: "1day"
      },{            
        range: 1,
        rangeType: "month",
        label: "1Month"
      },{            
        rangeType: "all",
        label: "Show All" //Change it to "All"
        
      }],
     },
});

stockChart.render();