ellen10026
Posts: 5
Joined: Tue Oct 05, 2021 1:58 pm

Candlestick and Line Series

Hi there,

I have a candlestick chart with a few additional line series. However, the points plotted from the line series do not overlay the candlesticks as I would like them to (pictures attached).

From fiddling around with some of the dataGrouping settings, I managed to get the Infringing Trades series grouped (from 4 points into 1) which overlaps with the candlestick. However, I'm struggling with the other line series.

As you can see the time range of the candlestick and the Last Price Before News point overlap, but the marker appears after the candlestick. Do you have any suggestions for how I can have them overlapping?

Thanks in advance!
Attachments
Line Marker
Line Marker
2021-10-05 (5).png (78.13 KiB) Viewed 843 times
Candlestick
Candlestick
2021-10-05 (4).png (51.9 KiB) Viewed 843 times
Chart
Chart
2021-10-05 (3).png (36.93 KiB) Viewed 843 times
ellen10026
Posts: 5
Joined: Tue Oct 05, 2021 1:58 pm

Re: Candlestick and Line Series

Is anyone able to offer any advice on this please??
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Candlestick and Line Series

Hello ellen10026,

Welcome to our forum and thanks for contacting us with your question!

These illustrations are surely helpful but I need to take a look at your code to tell what could be done. Please try to reproduce your chart config as a simplified live demo. You can start here:
https://jsfiddle.net/BlackLabel/qtrsf8jg/

Best regards!
Mateusz Bernacik
Highcharts Developer
ellen10026
Posts: 5
Joined: Tue Oct 05, 2021 1:58 pm

Re: Candlestick and Line Series

Hiya,

Thanks for responding.

Here's the best reproduction I could manage I hope this is useful: https://jsfiddle.net/7owbhcu2/

Ellen
ellen10026
Posts: 5
Joined: Tue Oct 05, 2021 1:58 pm

Re: Candlestick and Line Series

Hello, was anyone able to take a look at this please?
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Candlestick and Line Series

Hello ellen10026,

I can see two issues here. First of all the Last Price Before News point doesn't have corresponding point in candlestick series, at least by looking at x values. Indeed the time range overlap, but not exactly and that doesn't guarantee point overlapping.

Second, more important in this case thing is inconsistency in data grouping settings. For candlestick series you have specified different units values.
Set same values to see point overlapping (candlestick and Last Price Before News Series).
Demo: https://jsfiddle.net/BlackLabel/r76p0uwe/

Let me know if that was what you were looking for!
Best regards!
Mateusz Bernacik
Highcharts Developer
ellen10026
Posts: 5
Joined: Tue Oct 05, 2021 1:58 pm

Re: Candlestick and Line Series

Hello, thank you so much that's helpful! I also had another question about data grouping. Since the Infringing Trades are currently grouped, is there a way for them to separate or ungroup when the chart is zoomed in to say an hour?

If this is possible, would you mind adding to the fiddle to demonstrate? :)

Thanks,
Ellen
mateusz.b
Posts: 2006
Joined: Tue Jul 13, 2021 11:34 am

Re: Candlestick and Line Series

Hi ellen10026,

Yes, it is possible and here is the code:

Code: Select all

 xAxis: {
    "events": {
      "afterSetExtremes": function() {
        if (this.max - this.min <= 3900000) {
          this.series.forEach(series => {
            if (series.name === "Infringing Trading (Buys)") {
              series.update({
                dataGrouping: {
                  enabled: false,
                }
              })
            }
          })
        }
      }
    },
You should use afterSetExtremes event to check if the condition with zoomed range is met and if so disable data grouping with series.update method.
Demo: https://jsfiddle.net/BlackLabel/dt4fh5uk/
API reference: https://api.highcharts.com/highcharts/x ... etExtremes,
https://api.highcharts.com/class-refere ... ies#update

Let me know if you have any further questions!
Best regards!
Mateusz Bernacik
Highcharts Developer

Return to “Highcharts Stock”