-1
  1. How do I make this: https://www.highcharts.com/stock/demo/candlestick-and-volume

with single line series like this:

https://www.highcharts.com/stock/demo/basic-line

Final chart should have single line series with volume

  1. How do I display a single tooltip with the following information: Date, Time: Price: Volume:
Jimmy
  • 61
  • 6

1 Answers1

1

You can achieve it by setting tooltip.split = false and using tooltip.formatter callback.

Code:

  tooltip: {
    split: false,
    formatter: function() {
      var point = this.point,
        chart = point.series.chart,
        pointIndex = point.index,
        date = Highcharts.dateFormat('%b %e, %H:%M', this.x),
        volumePoint = chart.series[1].points[pointIndex],
        text =
        '<span style="color:' + point.color +
        '">\u25CF</span> ' + point.series.name +
        ': <b>' + point.y + '</b><br/>' +
        '<br><span style="color:' + volumePoint.color +
        '">\u25CF</span> ' +
        'Volume: <b>' + volumePoint.y +
        '</b><br>' + date;

      return text;
    }
  }

Demo:

API reference:

Wojciech Chmiel
  • 7,302
  • 1
  • 7
  • 16
  • When you mouse over I would please like the volume bar to be highlighted as well as seen here https://www.highcharts.com/stock/demo/candlestick-and-volume --thank you for your help! – Jimmy Sep 06 '19 at 23:41
  • You can achieve it like in this demo: https://jsfiddle.net/BlackLabel/rLd1z9m2/. If this answer was helpful for you, please mark it as a correct one and upvote, thanks. – Wojciech Chmiel Sep 09 '19 at 08:24
  • Thank you very much Wojciech! – Jimmy Sep 10 '19 at 20:56
  • Can you please tell me how to format the price with comma and two decimal places (ex: 1,234,567.89) and how to format the volume with comma as well but no decimal places, thank you! – Jimmy Sep 20 '19 at 03:55
  • You can use the solution posted here: https://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-currency-string-in-javascript. Check the demo: http://jsfiddle.net/BlackLabel/8k7ocpd4/ – Wojciech Chmiel Sep 20 '19 at 08:38
  • Can you please tell me how to display the mouseover price with 2 decimal places if the price is over 0.99, and 6 decimal places if the value is less than 0.99 (ex: 0.123456), thank you! – Jimmy Sep 30 '19 at 06:47
  • Simply change the decimalCount that is passed to the formatMoney function. Demo: http://jsfiddle.net/BlackLabel/anp4L9do/1/ – Wojciech Chmiel Sep 30 '19 at 08:35
  • Thank you for all your help! When I resize the navigator on the bottom from left and right at http://jsfiddle.net/BlackLabel/anp4L9do/1 the mouseover stops working for some reason – Jimmy Oct 02 '19 at 06:11
  • It's because points are cropped and we should use data array instead of points, my fault. Working demo: jsfiddle.net/BlackLabel/anp4L9do/1 – Wojciech Chmiel Oct 02 '19 at 07:14
  • Hi Wojciech, It's still not working when I resize the navigator on the bottom from left and right at jsfiddle.net/BlackLabel/anp4L9do/1 the mouseover stops working – Jimmy Apr 06 '20 at 08:15