Bhargavi
Posts: 16
Joined: Mon May 29, 2023 1:00 pm

Highcharts responsiveness

Hi,

We are using highcharts angular for our application. We are also having svg customizations in our chart. However, we are finding issue when the legend is long we are showing in the second line then all charts are not aligning correctly the hight of the chart is loosing also when we have different number of bars in my chart then the grey bar width has to be same for all the charts right now it is not happening.
Have replicated the issue in the following link: https://codesandbox.io/s/pensive-easley ... mponent.ts
Could you please look into this issue.
User avatar
dawid.d
Posts: 750
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts responsiveness

Hi,

Thanks for the question!

If you set the marginBottom option, the bottom margin will become independent from the legend height changes. Did you mean something like this?

Demo: https://codesandbox.io/s/summer-sunset- ... mponent.ts
API: https://api.highcharts.com/highcharts/c ... rginBottom

Regards!
Dawid Draguła
Highcharts Developer
Bhargavi
Posts: 16
Joined: Mon May 29, 2023 1:00 pm

Re: Highcharts responsiveness

Hi dawid.d,

Thank you for your response.

If I set marginBottom my charts are coming like in the below image.
legendwrap (2).png
legendwrap (2).png (41.71 KiB) Viewed 292 times
Where I want to start the legend of two charts in the same line, but if I use marginBottom my charts legends are ending in the same line but I need to show the legend text of my two charts has to start in the same line
User avatar
dawid.d
Posts: 750
Joined: Thu Oct 06, 2022 11:31 am

Re: Highcharts responsiveness

Hi,

You can program the positioning of the legend manually using the legend.y option, but it seems to me that this may be too much form over substance. Have you considered disabling the HC legend and creating a custom one outside the chart's container?

If you need any help with that too, let me know
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”