Timestamp Candlestick chart with viewportMinimum-viewportMaximum

Timestamp Candlestick chart with viewportMinimum-viewportMaximum

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: "Timestamp Candlestick chart with viewportMinimum-viewportMaximum"
  },
  zoomEnabled: true,
  axisY: {
    includeZero: false,
    title: "Prices",
    prefix: "$ "
  },
  
  axisX: {
    viewportMinimum: new Date(2012, 01, 01, 12, 00),
    viewportMaximum: new Date(2012, 01, 01, 12, 59)
  },

  data: [{
    type: "candlestick",
    dataPoints: [{
        x: new Date(2012, 01, 01, 12, 10),
        y: [5198, 5629, 5159, 5385]
      }, {
        x: new Date(2012, 01, 01, 12, 15),
        y: [5366, 5499, 5135, 5295]
      }, {
        x: new Date(2012, 01, 01, 12, 20),
        y: [5296, 5378, 5154, 5248]
      }, {
        x: new Date(2012, 01, 01, 12, 25),
        y: [5283, 5348, 5032, 5229]
      }, {
        x: new Date(2012, 01, 01, 12, 30),
        y: [5220, 5448, 5164, 5258]
      }, {
        x: new Date(2012, 01, 01, 12, 35),
        y: [5276, 5735, 5215, 5703]
      }, {
        x: new Date(2012, 01, 01, 12, 40),
        y: [5704, 5815, 4888, 5619]
      }, {
        x: new Date(2012, 01, 01, 12, 45),
        y: [5609, 5885, 5548, 5879]
      },

      {
        x: new Date(2012, 01, 01, 12, 50),
        y: [6040, 6052, 5671, 5693]
      }, {
        x: new Date(2012, 01, 01, 12, 55),
        y: [5702, 5971, 5604, 5682]
      }, {
        x: new Date(2012, 01, 01, 13, 00),
        y: [5697, 5962, 5477, 5930]
      }, {
        x: new Date(2012, 01, 01, 13, 05),
        y: [5911, 6229, 5910, 5985]
      }, {
        x: new Date(2012, 01, 01, 13, 10),
        y: [5997, 6011, 5566, 5842]
      },

      {
        x: new Date(2012, 01, 01, 13, 15),
        y: [5480, 6142, 5318, 5735]
      }, {
        x: new Date(2012, 01, 01, 13, 20),
        y: [5756, 6309, 5700, 6299]
      }, {
        x: new Date(2012, 01, 01, 13, 25),
        y: [6289, 6342, 5972, 6176]
      }, {
        x: new Date(2012, 01, 01, 13, 30),
        y: [6171, 6415, 6129, 6304]
      }
    ]
  }]
});
chart.render();