how can i create this type of chart ?

[jahnvi25]

we have a requirement to show chart attached in the image.. how can i create such chart using highstock ?

sample.png (16.31 KiB) Viewed 1021 times

[jakub.j]

We appreciate you reaching out to us!

I prepared a custom solution for you. I added a scatter series which markers are invisible, but using points' coordinates, you can manipulate labels' positions as well as the text and color. The labels are drawn exactly on the scatter point, they move as the chart moves. The line is a simple connection between the first scatter point and the one that is hidden below the label.

Demo: https://jsfiddle.net/BlackLabel/26tqc74u/

Let me know if that was what you were looking for!
Best regards
Jakub

[jahnvi25]

thanks for reply and sorry for late reply, now that i am working on this chart. i do have few more questions..
i am trying to draw against dateTime axis.. and to scatter chart in middle of plot.. do i have to add null ? like in your example..
i am trying below..

https://jsfiddle.net/0dk1f4jr/1/

but adding just one null data point.. does not seem to be working.

[jakub.j]

Hey,

I'm not sure if I understand your question correctly.
Could you please visualize where do you want the labels to be?

Best regards
Jakub

[jahnvi25]

those scatter lines are toward the end of plot.. and we can not see the numbers.. how can i bring those lines towards middle of the plot.. so line chart would display half of the plot.. and rest would display scatter (3 dotted lines) .. by just adding more nulls ??

[jahnvi25]

i found the screenshot for this example..
look at the attached the screenshot. on one side it shows historical (which has different range) and from middle of the plot it does show LOW,MEDIAN and HIGH which is on different scale... can i use two Axis.. ?
also for x-axis in your example.. i do have to add null values...

error.jpg (38.18 KiB) Viewed 952 times

[jakub.j]

Thanks for contacting us with your question!

You can use two xAxis, I prepared the chart so it looks like the one you send me.

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

Feel free to ask any further questions!

[jahnvi25]

Thanks a loooot !!. this is sooo much better. and its working perfect... Thanks again for all help.. and sorry for confusion in explaining my issue..

Highchart is great product with great support.. i really appreciate your help..

[jakub.j]

You're welcome!
It's great to hear that you enjoy Highcharts library

In case of any further questions, feel free to contact us again.
Regards
Jakub

[jahnvi25]

one more small question.. i am trying to draw 3 years worth of weekly data.. and chart is creating ticks for every year.. and shows beginning of the year. which is working perfectly. but its not showing beginning of 2023 as shown in screenshot... i tried
tickPixelInterval:40,tickInterval:null but thats not working.. i even tried tickAmount:3 but thats not working ..

any idea how can i force that year to display..

error.jpg (49.03 KiB) Viewed 940 times

[jakub.j]

Hey!

To force the last tick set xAxis.endOnTick to true.

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

Feel free to ask any further questions!
Best regards
Jakub

[jahnvi25]

tried that already.. it does not work in actual program. it displays '2024' but misses the 2023.. is there a way i can control how many ticks it displays..and somehow format that or something..

[jakub.j]

Hey!

To set the exact ticks on the xAxis you need to use xAxis.tickPositions, you set the values in milliseconds from year 1970, this might help.
You also need to format the date using xAxis.labels.formatter to display only the year.

I prepared a demo for you, which shows you, how it can be done:

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

Let me know if that was what you were looking for!
Best regards
Jakub