nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

How to differentiate weeks for months in high chart graph

Hi Team,

I have to differential xaxis labels for week (W1,W2,W3...) and wanted to show period (P1, P2, P3 , etc.....) below weeks labels with line as differentiator for months.

Please find attachment for reference.

Kindly suggest for this.
Attachments
new WSD graph.png
new WSD graph.png (11.56 KiB) Viewed 459 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to differentiate weeks for months in high chart graph

Hi there,

Thank you for contacting us!

In that case, I would suggest using two features.
The first one would be to use xAxis.categories to specify the (w1, w2, w3...) categories for xAxis labels.
Then, to get the period separators and show the period names below weeks labels, you can get both of these features with the official BlackLabel grouped categories plugin.

xAxis.categories: https://api.highcharts.com/highcharts/xAxis.categories
Grouped categories: https://blacklabel.github.io/grouped_categories/

If you will have any problems while implementing those features into your project, please prepare a working demo and I'll be more than happy to help you.
Best regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to differentiate weeks for months in high chart graph

Hi Kamil.m

Thank you for your suggestion.
I have created a demo application and in the axis, I gave week numbers. but, I wanted to showcase partitions between weeks for a particular month (I did not bind month values on the x-axis). It will be a great help if you guide something to achieve above expectations.

Demo: https://jsfiddle.net/nilesh_nagdeve007/y6wb3k9m/92/
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to differentiate weeks for months in high chart graph

I have implemented it by using the aforementioned grouped categories module, let me know what you think about this solution.

https://jsfiddle.net/BlackLabel/kdcp7qLr/

Best regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to differentiate weeks for months in high chart graph

Thank you for your suggestion, this is exactly the same as I want, but in addition to this, I don't want to show an extra line around the week number and period number.
Kindly refer above screenshot which I provide earlier
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to differentiate weeks for months in high chart graph

I came up with a different, and probably better solution to this request.
We still use the grouped categories plugin, but I have disabled the whole grid by setting the xAxis.tickWidth to 0 in line 545.

Then, by using the Highcharts SVGRenderer I wrote a solution that dynamically adds those separator lines to your xAxis. By using the SVGRenderer you have more flexibility when it comes to styling those lines.

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

Let me know what you think about this solution,
Best regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to differentiate weeks for months in high chart graph

Hi Kamil.m,
I am not able to see the output correctly in the graph,
In your demo, I am getting below output in the graph
Attachments
Demo1.png
Demo1.png (37.39 KiB) Viewed 394 times
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to differentiate weeks for months in high chart graph

Hi there,

I think that you forgot to import the grouped categories plugin.

Please add the following script src to your HTML:

Code: Select all

https://blacklabel.github.io/grouped_categories/grouped-categories.js"
Do not hesitate to contact us with any further requests,
Regards!
Kamil Musiałowski
Highcharts Developer
nilesh.nagdeve
Posts: 30
Joined: Wed Jun 29, 2022 2:16 pm

Re: How to differentiate weeks for months in high chart graph

Hi kamil.m,
Thank you for your response.
But I don't want to use any third-party libraries for this.
It will be a great help if you suggest something from HighChart.
kamil.m
Posts: 892
Joined: Thu May 19, 2022 1:33 pm

Re: How to differentiate weeks for months in high chart graph

I don't think you should consider Black Label plugins (it is not a library), as third-party ones.
Black Label is a company that has an official partnership with Highcharts, where you can find dedicated support and development teams for various Highcharts features, such as creating custom plugins for the Highcharts library itself.

Meet the BlackLabel team on the official Highcharts website: https://www.highcharts.com/blog/people/

Read more about the partnership here: https://blacklabel.pl/highcharts/

Nevertheless, if you still insist on not using the official Highcharts plugin, then I'd suggest using the xAxis.categories for W1, W2, W3, etc., and then render the rest with the Highcharts SVG Renderer, just like I showed you before.

Let me know your thoughts about it,
Best regards!
Kamil Musiałowski
Highcharts Developer

Return to “Highcharts Usage”