charts/canvas/examples/13-candlestick-chart/candle-stick-chart-with-rising-color-and-tooltip-customization.html

   1 <!DOCTYPE HTML>\r
   2 <html>\r
   3 <head>\r
   4 <script type="text/javascript">\r
   5 window.onload = function () {\r
   6         var chart = new CanvasJS.Chart("chartContainer",\r
   7         {\r
   8                 title:{\r
   9                         text: "Candle Stick chart using risingColor property"\r
  10                 },\r
  11                 zoomEnabled: true,\r
  12                 axisY: {\r
  13                         includeZero:false,\r
  14                         title: "Prices",\r
  15                         prefix: "$ "\r
  16                 },\r
  17                 axisX: {\r
  18                         interval:2,\r
  19                         intervalType: "month",\r
  20                         valueFormatString: "MMM-YY",\r
  21                         labelAngle: -45\r
  22                 },\r
  23                 data: [\r
  24                 {\r
  25                         type: "candlestick",\r
  26                         risingColor: "#F79B8E",\r
  27                         dataPoints: [\r
  28                                 {x: new Date(2012,01,01),y:[5198, 5629, 5159, 5385]},\r
  29                                 {x: new Date(2012,02,01),y:[5366, 5499, 5135, 5295]},\r
  30                                 {x: new Date(2012,03,01),y:[5296, 5378, 5154, 5248]},\r
  31                                 {x: new Date(2012,04,01),y:[5254, 5279, 4788, 4924]},\r
  32                                 {x: new Date(2012,05,01),y:[4910, 5286, 4770, 5278]},\r
  33                                 {x: new Date(2012,06,01),y:[5283, 5348, 5032, 5229]},\r
  34                                 {x: new Date(2012,07,01),y:[5220, 5448, 5164, 5258]},\r
  35                                 {x: new Date(2012,08,01),y:[5276, 5735, 5215, 5703]},\r
  36                                 {x: new Date(2012,09,01),y:[5704, 5815, 4888, 5619]},\r
  37                                 {x: new Date(2012,10,01),y:[5609, 5885, 5548, 5879]},\r
  38                                 {x: new Date(2012,11,01),y:[5878, 5965, 5823, 5905]}\r
  39                         ]\r
  40                 }\r
  41                 ]\r
  42         });\r
  43         chart.render();\r
  44 }\r
  45 </script>\r
  46         <script src="../../canvasjs.min.js"></script>\r
  47         <title>CanvasJS Example</title>\r
  48 </head>\r
  49 <body>\r
  50 <div id="chartContainer" style="height: 400px; width: 100%;">\r
  51 </div>\r
  52 </body>\r
  53 </html>