Can this stock graph be made using Highstock?

Question

Could this graph be made using Highstock? I'm currently using Highstock, but never saw this kind. Before I waste weeks trying, the question needs to be asked... If yes, how can this be made? by shifting the stock chart, and create another Xaxis at the right?

Stock projection

I am not sure what are your particular requirements, but I think that something like in the shared image could be done by using `candlestick` series and add some null points to get extra space and keep the date format. In the extra space this parable could be rendered by using the SVGRenderer tool. Demo: https://jsfiddle.net/BlackLabel/3c2pqzj7/ — Sebastian Wędzel, Jul 27 '20 at 13:53
Thank you for your answer. But the parabolic graph at the right is not just a picture, it is also a realtime graph, so should be rendered by Highstock too. That's the reason why I thought creating 2 Xaxis, one for the candlestick graph at the left, one for the parabolic graph at the right. — FrancoisG, Jul 28 '20 at 14:20
How the data structure for the parabolic graph looks like? Have you decided which from the series would you like to use to display it? https://www.highcharts.com/demo — Sebastian Wędzel, Jul 28 '20 at 14:27
Well, the left graph is a normal candlestick OHLC stock graph, and the right graph is a classic curve line, with 4 series I guess, one per curve, starting from the last candlestick point. xAxis is time (day dates). — FrancoisG, Jul 29 '20 at 15:05
Good point! I think that something, like is done here, could be a good start: https://jsfiddle.net/BlackLabel/mkpj71n4/ — Sebastian Wędzel, Jul 30 '20 at 07:59
Excellent! Thanks Sebastian! You made my day (and probably my week too) ! I just could not get this simple idea... — FrancoisG, Jul 30 '20 at 08:32
Maybe you could post it as an answer, so that I can get this question 'ANSWERED' — FrancoisG, Jul 30 '20 at 08:51
Sure thing, thanks! In case of any trouble with implementing - this thread could be continued in the comments under the answer — Sebastian Wędzel, Jul 30 '20 at 09:07

score 1 · Accepted Answer · answered Jul 30 '20 at 09:05

According to the comments - a similar result could be achieved by adding additional series with proper data.

Demo: https://jsfiddle.net/BlackLabel/mkpj71n4/

chart: {
  events: {
    load() {
      let chart = this;

      function addNewSeries(y, color) {
        let data = [],
          xValue = startDay,
          yData = 420; // last candle

        for (let i = 0; i < 20; i++) {
          xValue = xValue + 30 * 60 * 1000;
          yData = yData + i * y
          data.push([xValue, yData])
        }
        chart.addSeries({
          data: data,
                        color: color
        })
      }

      for (let i = 0; i < 4; i++) {

        if (i === 0) {
          addNewSeries(0.1, 'orange')
        } else if (i === 2) {
          addNewSeries(-0.1, 'orange')

        } else if (i === 3) {
          addNewSeries(0.2, 'red')

        } else {
          addNewSeries(-0.2, 'red')
        }
      }
    }
  }
},

API: https://api.highcharts.com/highcharts/chart.events.load

API: https://api.highcharts.com/class-reference/Highcharts.Chart#addSeries

Can this stock graph be made using Highstock?

1 Answers1