title: Highstock - How can i display the open, high, low, close in the line or area charts tooltip
body: <p>I'm trying to display the open, high, low, close in the line or area chart's tooltip. Right now, the data for the line and the area charts is being sent in a JSON array which looks like this</p>
  
  <pre><code>{timestamp, close}
  </code></pre>
  
  <p>Now for OHLC or candlestick charts this JSON changes to </p>
  
  <pre><code>{timestamp,open, high, low, close}
  </code></pre>
  
  <p>I've tried this method which only works for OHLC and candlestick.</p>
  
  <pre><code>tooltip: {
                      valueDecimals: 2,
                      useHTML: true,
                      formatter: function() {
  
  
  
                          /*
                           * tooltip formatter function
                           * 
                           */
                          var d = new Date(this.x);
                          var s = '';
  
                          if (chartGlobalOptions.range.indexOf("m") &gt;= 0) {
  
                              s += '&lt;b&gt;' + Highcharts.dateFormat('%b %e, %Y', this.x) + '&lt;/b&gt;&lt;br /&gt;';
  
                          } else {
  
                              s += '&lt;b&gt;' + Highcharts.dateFormat('%b %e, %Y [%H:%M]', this.x) + '&lt;/b&gt;&lt;br /&gt;';
  
                          }
  
  
                          $.each(this.points, function(i, point) {
                              if (point.series.name.indexOf("Volume") &gt;= 0) {
  
                                  /*
                                   * if the series is volume, then don't show the decimals
                                   * 
                                   */
                                  s += '&lt;b&gt;&lt;span style = "color:' + point.series.color + ';"&gt;' + point.series.name + ' &lt;/span&gt;' + ' : ' + Highcharts.numberFormat(point.y, 0) + '&lt;/b&gt;&lt;br /&gt;';
                              } else if (point.series.type == 'candlestick' || point.series.type == 'ohlc')  {
  
                                  s += '&lt;b&gt;&lt;span style = "color:' + point.series.color + ';"&gt;' + point.series.name  + ' : ' + Highcharts.numberFormat(point.point.close, 3) + '&lt;/b&gt;&lt;br /&gt;';
                                  s += '&lt;span style ="color:' + point.series.color + ';"&gt;Open&lt;/span&gt;: ' + point.point.open +
                                       '&lt;br/&gt;&lt;span style ="color:' + point.series.color + ';"&gt;High&lt;/span&gt;: ' + point.point.high +
                                       '&lt;br/&gt;&lt;span style ="color:' + point.series.color + ';"&gt;Low&lt;/span&gt;: ' + point.point.low + 
                                       '&lt;br/&gt;&lt;span style ="color:' + point.series.color + ';"&gt;Close&lt;/span&gt;: ' + point.point.close + '&lt;br/&gt;';
                              }
  
                              else {
                                  s += '&lt;b&gt;&lt;span style = "color:' + point.series.color + ';"&gt;' + point.series.name + ' &lt;/span&gt;' + ' : ' + Highcharts.numberFormat(point.y, 3) + '&lt;/b&gt;&lt;br /&gt;';
                              }
  
  
  
                          });
                          return s;
                      },
                      shared: true
                  },
  </code></pre>
  
  <p>What modifications are needed to be done in order to display ohlc values in the tooltip of the line chart ? I've been trying to find a solution for quite some time without any success. </p>
  
  <p>Thanks,</p>
  
  <p>Maxx</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Here is the series option that i'm setting </p>
  
  <pre><code>series: [{
                          type: chartGlobalOptions.chartTypes.name,
                          name: $('#symbol-name').text(),
                          data: data.prices,
                          id: 'Price Axes',
                          dataGrouping: {
                              units: groupingUnits
                          }
                      }, {
                          type: 'column',
                          name: 'Volume',
                          data: data.volume,
                          yAxis: 1,
                          dataGrouping: {
                              units: groupingUnits,
                              approximation: 'close'
                          }
                      }]
  </code></pre>
  
  <p>And here is the data that i'm getting from the server.</p>
  
  <pre><code>{"prices":[{"x":1387377184000,"y":1.05,"high":1.06,"low":1.05,"open":1.06,"close":1.05},{"x":1387377509000,"y":1.04,"high":1.06,"low":1.04,"open":1.05,"close":1.04},{"x":1387378295000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387379370000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387380217000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381181000,"y":1.04,"high":1.04,"low":1.04,"open":1.04,"close":1.04},{"x":1387381324000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387382146000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03},{"x":1387383229000,"y":1.03,"high":1.03,"low":1.03,"open":1.03,"close":1.03}],
  "volume":[[1387377184000,0],[1387377509000,35600],[1387378295000,0],[1387379370000,25300],[1387380217000,0],[1387381181000,0],[1387381324000,4500],[1387382146000,1700],[1387383229000,4000],[1387383788000,2600],[1387384004000,1000],[1387384218000,2900],[1387385045000,0],[1387385840000,10000],[1387386013000,100],[1387386627000,6200],[1387386981000,0],[1387387439000,2500],[1387387728000,2500],[1387387950000,0],[1387388920000,0],[1387389210000,500],[1387389890000,15500],[1387390124000,400],[1387390988000,11900],[1387391264000,4900],[1387391832000,0],[1387392803000,0],[1387393369000,6200],[1387393774000,200],[1387394744000,0],[1387395716000,0],[1387395904000,2800],[1387396334000,15000],[1387396689000,0],[1387397664000,0],[1387398328000,12300],[1387398706000,7000],[1387400379000,13000],[1387463638000,0],[1387464573000,46200],[1387465371000,4000],[1387465588000,0],[1387465948000,33000],[1387466607000,0],[1387466883000,11400],[1387468648000,13500],[1387470272000,12800],[1387470693000,0],[1387471718000,0],[1387472674000,0],[1387472742000,0],[1387473768000,100],[1387474795000,0],[1387475319000,29500],[1387475698000,99100],[1387475822000,14400],[1387476297000,3400]]}
  </code></pre>
  
  <p>Here is how i'm setting the data in the server</p>
  
  <pre><code>$this-&gt;price[]          = array (
                                                $eachRow[ "timestamp" ] * 1000 ,
                                                $eachRow[ "close" ] * 1 ,
                                                $eachRow[ "high" ] * 1 ,
                                                $eachRow[ "low" ] * 1 ,
                                                $eachRow[ "open" ] * 1 ,
                                                $eachRow[ "close" ] * 1
                              ) ;
  
  return json_encode ( array (
                                       "prices"             =&gt; $this-&gt;resultArray[ "prices" ] ,
                                       "volume"             =&gt; $this-&gt;resultArray[ "volume" ] ));
  </code></pre>
  
  <p>And i do a  <code>var data = JSON.parse(data);</code> at the very beginning just after i get the values from the server. Please let me know what is wrong with my program. I mean if i hardcode the same values directly in the data object i get the correct result.</p>