User avatar
dawid.d
Posts: 828
Joined: Thu Oct 06, 2022 11:31 am

Re: Pie-Chart legend

Do I understand it correctly that if I want the chart responsive then I must not set any height of width to it
Not completely. As for width, yes, setting it strictly will result in the chart not adapting itself but having a fixed width, which means that responsive options will not be able to be used. But height can be fixed without any problems.

I'm sorry, but I'm starting to get lost in your code because there's a lot of it. The easiest way would be to work on demos created, for example, on JSFiddle, where we could focus only on the code that strictly addresses this problem and on trying to solve it.

Example demo of the responsive rules options: https://jsfiddle.net/gh/get/library/pur ... sive/axis/

Best regards!
Dawid Draguła
Highcharts Developer
Martin01
Posts: 23
Joined: Wed Jan 31, 2024 12:09 pm

Re: Pie-Chart legend

I prepared a demo with a mocked legend, bcz the legend is not the problem here and I found a workaround for responsivity and this also is OK, I guess.

https://stackblitz.com/edit/react-ts-ck ... Charts.tsx

The problem is that if I go under some 590px the legend is shown only for the last chart and for the first 2 charts it is covered by svg.highcharts-root. I am already doing this

.sm-chart-container .sm-highcharts-container .highcharts-background {
height: 180px !important;
}

but this is not working for svg.highcharts-root

(styling is ugly, but it works - I had to convert it from SCSS and it is only working version still, there may be some extra divs, but those should not be the issue)
Martin01
Posts: 23
Joined: Wed Jan 31, 2024 12:09 pm

Re: Pie-Chart legend

Hi Dawid,

I just found out there are many more highcharts classes even in this demo that have a height over 300px and if I want to have the chart only 200px in height then the highcharts classes are covering the legend making it inactive so that it behaves like dead text.

Do I have to set the height in charts option to solve this problem? But if I do then the chart's sizing is different again and I have to change everything again.
Martin01
Posts: 23
Joined: Wed Jan 31, 2024 12:09 pm

Re: Pie-Chart legend

And I need the chart height 200px on mobile and 300px above mobile.
User avatar
dawid.d
Posts: 828
Joined: Thu Oct 06, 2022 11:31 am

Re: Pie-Chart legend

Hi,
I just found out there are many more highcharts classes even in this demo that have a height over 300px and if I want to have the chart only 200px in height then the highcharts classes are covering the legend making it inactive so that it behaves like dead text.
Of course, you can change the height of the container using CSS and it will work just as well as using options, but you must remember to refer to the appropriate HTML element. Since you're doing this using Highcharts-React integration, you can do it by passing the class name in container props: https://github.com/highcharts/highchart ... ns-details

Demo: https://stackblitz.com/edit/react-ts-dz ... ,style.css

I created also a demo trying to recreate the responsiveness that I guess you want to achieve:
https://jsfiddle.net/BlackLabel/kha2ymtq/

Maybe this will help you.
Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Usage”