chetanph
Posts: 4
Joined: Thu Sep 09, 2021 10:52 pm

Annotations table next to annotated chart

Hello,

I am considering highcharts to build an enterprise grade chart that:
1. shows annotations on the chart
2. Has a list of all relevant annotations on the right of the chart
3. If an annotations is clicked - the table on the right scrolls over to the annotation and its description

Google has the precise chart, but i would prefer to use highcharts because of the more developed framework overall ( efficiency could be key for our 10K+ users) : https://developers.google.com/chart/int ... ationchart

Please help.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Annotations table next to annotated chart

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

All your references can be achieved by highcharts, but you need to prepare a customization code for that.

I'm sending you link to the API, if you have questions about this implementation you can reach me at any time.

https://api.highcharts.com/highstock/annotations
https://jsfiddle.net/gh/get/library/pur ... tracements

Best regards.
Sebastian Hajdus
Highcharts Developer
chetanph
Posts: 4
Joined: Thu Sep 09, 2021 10:52 pm

Re: Annotations table next to annotated chart

Thanks Sebastian,

Have messaged you.

It is clear to me that Annotations API can help on all 3 points:

Point 2. exporting function that includes annotations - is it possible to include a custom column in the exporting > data table? Can URLs be added to the annotations so that if either the annotations are clicked or data table entries are clicked a url popup opens?
Point 3. there is a click event to help me on 3.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Annotations table next to annotated chart

Hi,
Thanks for the message.

You can use annotations.labels.text to add URLs inside annotations.
https://jsfiddle.net/BlackLabel/prdnc61x/

Exporting to pdf or other way with chart and table, you mean?

This article is the concept of how to synchronize selection between chart and table
https://www.highcharts.com/blog/tutoria ... and-table/

From message:
populate the table only for annotations
Could you explain?

I'm not sure that the example with the click event that you show works properly, and it's supported by API.
Here is a good way to create annotations on the stock chart.
http://jsfiddle.net/BlackLabel/Lop4d9cy/

Let me know what do you think about these solutions.
Best regards.
Sebastian Hajdus
Highcharts Developer
chetanph
Posts: 4
Joined: Thu Sep 09, 2021 10:52 pm

Re: Annotations table next to annotated chart

Thanks!

This is incredibly useful - i will get back if i have any further questions!

Best regards,
Chetan

sebastian.h wrote: Thu Sep 16, 2021 3:46 pm Hi,
Thanks for the message.

You can use annotations.labels.text to add URLs inside annotations.
https://jsfiddle.net/BlackLabel/prdnc61x/

Exporting to pdf or other way with chart and table, you mean?

This article is the concept of how to synchronize selection between chart and table
https://www.highcharts.com/blog/tutoria ... and-table/

From message:
populate the table only for annotations
Could you explain?

I'm not sure that the example with the click event that you show works properly, and it's supported by API.
Here is a good way to create annotations on the stock chart.
http://jsfiddle.net/BlackLabel/Lop4d9cy/

Let me know what do you think about these solutions.
Best regards.
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Annotations table next to annotated chart

Hi chetanph,
That's great to hear :)

Best regards.
Sebastian Hajdus
Highcharts Developer
chetanph
Posts: 4
Joined: Thu Sep 09, 2021 10:52 pm

Re: Annotations table next to annotated chart

Hi Sebastian,

I now have an issue with using range selector.

if i add a range selector to the attached chart - the three lines (on the extreme right) i am using to forecast to 1 month after today, they will also shift as the range selector will autoscale the x axis - is there a way to fix the width of the 3 lines on the right so that they occupy the same amount of x axis real estate regardless of the rangeselector option selected?

Also you will see that the primary Y axis is way too long compared to the data (the blue line chart) - how do i fix this?
Attachments
sample chart.PNG
sample chart.PNG (189.47 KiB) Viewed 1443 times
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Annotations table next to annotated chart

Hi,
Thanks for the screenshots and explanation.

Could you share with me your examples at the online code editor for the test?

Best regards.
Sebastian Hajdus
Highcharts Developer
User avatar
sebastian.h
Posts: 1734
Joined: Fri Aug 07, 2020 7:08 am

Re: Annotations table next to annotated chart

Hi,
You can start with this example, try to show in a simplified form what you mean.

Demo:
https://jsfiddle.net/BlackLabel/8j01mLno/

Best regards.
Sebastian Hajdus
Highcharts Developer

Return to “Highcharts Stock”