rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Put marker on x axis

Hello ,

we are using highstock library to create a candlestick graph.
so x axis is datetime and y axis is a security trading price.
We have a news data. we want to show the news data on the same graph of candlesticks.
we have [epoch, newsheader and newcontent] for each news points.
We have a total 20 days of candle stick data.
navigator is enabled below the graph. so that users can zoom in and zoom out to specific time range.

Requirement is :
  • News marker need to be placed over the x axis based on epoch.
  • On hovering on the news marker on x axis, A tooltip should appear showing the newsheader.
  • Clicking on the marker, small popup should appear showing newscontent.
  • News marker should be of diamond shape.
I could not find an option to put scattered points on the x axis.

Any suggestion?
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Put marker on x axis

Hi there,

Welcome to our forum and thank you for contacting us with your question.

If you need to create scatter markers on xAxis, simply assign their y value to zero. The rest of your parameters 'newsheader' and 'newscontent' can be passed as separate values to the point data objects, and later be used in the tooltip formatter function (or point events in general).

Code example:

Code: Select all

  
  series: [{
    data: [{
      x: 1,
      y: 0,
      newsContent: 'Lorem Ipsum',
      newsHeader: 'Dolor sit amet'
    }, {
      x: 2,
      y: 0
    }, {
      x: 3,
      y: 0
    }]
  }]
I have prepared a small demo with points on xAxis to give you some inspiration.

DEMO: https://jsfiddle.net/BlackLabel/uw51yax9/

I hope that you will find it useful,
Have a good day!
Kamil Musiałowski
Highcharts Developer
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

Hello ,

Thanks for responding. :)

I tried that using y value to zero. it worked.
But, In the example that you shared, has data which is relative near to zero. That is [2, 5, 2, 3, 6].

in my case, data is relatively bigger.
Assume, we use [302, 305, 302, 303, 306] then line becomes flatten and relative difference does not gets noticed easily.
The range visible on the y axis should be based on above series : [302, 305, 302, 303, 306] and still news need to be on the x axis only.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Put marker on x axis

Hi there,

You are right about higher y values. In that case I'd suggest creating a second yAxis just for the scatter points and setting the visible property on it to false.

DEMO: https://jsfiddle.net/BlackLabel/92ym6gp3/

Let me know if that's a better option for you,
Best regards!
Kamil Musiałowski
Highcharts Developer
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

It worked! thanks a lot...
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: Put marker on x axis

You're welcome!

Please do not hesitate to contact us in the future,
Have a good day!
Kamil Musiałowski
Highcharts Developer
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

@kamil.m, I am facing another issue. I could put the marker on x axis, but then there is another issue.
check : https://jsfiddle.net/9mr70ze2/
see the graph in full screen mode.
now, go to legend, then disable the 'market volume' then see the x axis labels, it looks ugly to users.
why is such behaviour? how to fix it?
so, below are the things in our graph.
first graph {
candlestick, buy marker, sell marker,
}
first x axis {
news data, other data with different icon which I have not shown,
}
second graph{
market volume, buy volume, sell volume
}
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Put marker on x axis

Thanks for contacting us with your question!

The problem is caused by the linked xAxis. In your case, you don't need 2 seperate xAxis so I removed one of them which was hidden and now everything works fine even if you hide/show the 'market volume' series.

Demo: https://jsfiddle.net/BlackLabel/1ne4rvwm/

I hope you will find it useful
Best regards
Jakub
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

If we check https://www.highcharts.com/demo/stock/c ... and-volume , there is no config for x axis still 2 x axises are created by highcharts.
so, what is the default convention over here?
when are they created automatically?
like, if I create 3 y axis, does 3 x axis linked with each other created automatically ?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Put marker on x axis

Hey!

In the demo you sent, in the config there is only 1 xAxis and on the chart there are 2 xAxis created because one of them is automatically added by navigator (as navigator xAxis). The same happens with yAxis, on this demo there are 2 yAxis configured and the chart has 3 yAxis because one comes from navigator. The xAxis and yAxis are totally independent and you don't need the same amount of them on the chart.

On the demo below I logged in the console no. of xAxis and the list of them and the same with yAxis. It clearly shows 2 xAxis which one of them is navigator xAxis and 3 yAxis.
Demo: https://jsfiddle.net/BlackLabel/gwj3bdsm/

When you disable the navigator, the number of xAxis decreases to 1 and yAxis to 2, see:
Demo: https://jsfiddle.net/BlackLabel/Lqsgd3yf/

Let me know if you have any further questions!
Best regards
Jakub
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

But then in solution given by link by jakub.j : https://jsfiddle.net/BlackLabel/1ne4rvwm/ above, how news data points are correctly plotted in x axis of candlestick graph, not on x axis of volume graph? I thought news are in candlestick graph x axis so, i thought there is another x which is for candlestick graph.
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

Also I am unable to understand is when I was using 2 x axis, what was the reason for garbaged x axis labels when I hide a market colume series? What happens internally in that scenario?
jakub.j
Posts: 1091
Joined: Tue Jan 24, 2023 11:14 am

Re: Put marker on x axis

Hey!

It doesn't matter on which xAxis you plot the series, as far as the timestamps are aligned for all the series, you don't need to use a new xAxis. In you case the labels where misaligned, because when you linked the xAxis and you hid the only series attached to this axis, it disappears and causes the label misalignment.
The link between those 2 xAxis you made is unnecessary in this case.

To give you a clear view, where it is useful to have 2 xAxis, I'm sending you a demo where both the series have different timestamps and you can clearly see it couldn't be done with just one xAxis to achieve the desired result.
Demo: http://jsfiddle.net/BlackLabel/3zmv4bL8/

I hope you will find it useful
Best regards
Jakub
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

there is one more issue.
in my application, there are buy and sell volume data which are after market volume in timeline, I reproduced the issue in this link.

https://jsfiddle.net/7wysgotc
you can see:
"last buy marker time ", "Wed Dec 07 2022 17:12:00 GMT+0530 (India Standard Time)"
"last sell marker time ", "Tue Dec 06 2022 19:12:00 GMT+0530 (India Standard Time)"
"last market volume time ", "Tue Dec 06 2022 17:12:00 GMT+0530 (India Standard Time)"

so, buy and sell marker should be visible of above time when screen is loaded as dataGrouping does not apply to buy and sell marker series.

last buy and sell marker are not visible when screen is loaded. why? and how to solve it?
"because when you linked the xAxis and you hid the only series attached to this axis, it disappears and causes the label misalignment." -> this line is not understable. will you please elaborate more?
rushikesh
Posts: 31
Joined: Wed Jul 20, 2022 10:14 am

Re: Put marker on x axis

also , can ordinal set to true and breaks on x axis using together cause any issue?

Return to “Highcharts Stock”