acacacac11
Posts: 3
Joined: Wed Jul 27, 2022 5:48 am

Customizing timeline end/start symbols?

Hi

We are using highcharts stock to plot data. And recently, we wanted to add a timeline with a specific style.
I tried playing around with the timeline component, but I'm not sure it's possible to get it exactly how I want.

I'd like it to be as follows
1. Always showing the 24 hour range
2. When an event is occured at specific time put a label with the event name, with a background and border
3. When an event has ended, put a small circler
4. Between the beginning and the end of the event, the color of the line should be the same.
5. When the event spans more than 1 hour, it shouldn't display the end point

I fiddled around with the configuration options, and it seems to be pretty close, but I'm not sure how to continue.
Screen Shot 2022-07-27 at 9.19.00.png
Screen Shot 2022-07-27 at 9.19.00.png (13.03 KiB) Viewed 533 times
What am I left to do?
1. Put the label inside the marker
2. Make the gray line appear in the same color as the event type,
3. Hide the "chart end" label.
4. Add axis per hour.
XAxis example.png
XAxis example.png (10.63 KiB) Viewed 533 times
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Customizing timeline end/start symbols?

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

Could you share your actual configuration of the chart in some online editor like for example JSFiddle? I wouldn't like to cause confusion and I would like to give you help based on your actual configuration options.

I am looking for your response.
Kind regards!
Hubert Kozik
Highcharts Developer
acacacac11
Posts: 3
Joined: Wed Jul 27, 2022 5:48 am

Re: Customizing timeline end/start symbols?

Hi Hubert.k

Thanks, here is the jsfiddle https://jsfiddle.net/7jvh6u5L/

Thanks
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Customizing timeline end/start symbols?

acacacac11,
Besides chart options from API to achieve the look of a timeline chart as you requested you have to some custom code and custom properties in points. To add color to a line I used zones, which are generated dynamically in chart.event.load callback function. To make labels 'on' and 'off' I used dataLabels with using proper styling and some other properties. I have prepared the demo for you, you can see it below.

Demo: https://jsfiddle.net/BlackLabel/cwg4j1pm/
API Reference: https://api.highcharts.com/highcharts/series.line.zones
https://api.highcharts.com/highcharts/chart.events.load

Creating this chart was a little tricky, so please let me know if you have any further questions.
Kind regards!
Hubert Kozik
Highcharts Developer
acacacac11
Posts: 3
Joined: Wed Jul 27, 2022 5:48 am

Re: Customizing timeline end/start symbols?

Wow!

This is perfect! I wasn't sure if it was possible.
It proves highcharts is much more customizable than I thought.

Thanks for the assistance!
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Customizing timeline end/start symbols?

acacacac11, you're welcome! Notice please, that we still didn't use the styled mode, where the graphic design is clearly separated from the chart functionality.

In case of any further questions, feel free to contact us again.
Regards!
Hubert Kozik
Highcharts Developer

Return to “Highcharts Stock”