leonaedelinski
Posts: 7
Joined: Tue Jan 31, 2023 8:18 pm

Background of yaxis becoming transparent when scrollbar for xAxis is added

Mon Mar 27, 2023 2:20 pm

I am experiencing a problem where the background of the y-axis in my Gantt chart becomes transparent when I add a scrollbar for the x-axis. The y-axis should have a solid background color, but it disappears along with some stylings and shows the background of the chart behind it.

I have tried adjusting the code and settings for the chart, but I can't seem to find a solution to this problem. I need the y-axis to have a solid background color, even when a scrollbar is added to the x-axis. Here is an example:

Image

jedrzej.r
Posts: 526
Joined: Tue Jan 24, 2023 11:21 am

Re: Background of yaxis becoming transparent when scrollbar for xAxis is added

Tue Mar 28, 2023 6:59 am

Hi!

Unfortunately, I'm not able to reproduce described problem, as you can see in this demo: https://jsfiddle.net/BlackLabel/j4rtLh95/. Try zooming in on the chart and you'll notice that yAxis labels have solid background color. Could you please share your code in a code editor, say jsFiddle? This way I can investigate it further and help you out.

Best regards!
Jędrzej Ruta
Highcharts Developer

leonaedelinski
Posts: 7
Joined: Tue Jan 31, 2023 8:18 pm

Re: Background of yaxis becoming transparent when scrollbar for xAxis is added

Tue Mar 28, 2023 8:05 am

Sorry, my bad in wording. I was thinking of "scrollablePlotArea" when talking about scrollbar. So simply adding this following code in the chart object in your JSFiddle code will reproduce that:

Code: Select all

scrollablePlotArea:{
    minWidth:800,
    }
Best Regards!

jedrzej.r
Posts: 526
Joined: Tue Jan 24, 2023 11:21 am

Re: Background of yaxis becoming transparent when scrollbar for xAxis is added

Tue Mar 28, 2023 12:46 pm

Hi!

You can set chart.scrollablePlotArea opacity to 1 and it will make yAxis labels filled with solid color.

API: https://api.highcharts.com/highcharts/c ... ea.opacity

Let me know if this what you were looking for!
Best regards!
Jędrzej Ruta
Highcharts Developer

leonaedelinski
Posts: 7
Joined: Tue Jan 31, 2023 8:18 pm

Re: Background of yaxis becoming transparent when scrollbar for xAxis is added

Wed Mar 29, 2023 9:19 am

That is it, yes. But can we somehow avoid losing the left and right border of the chart when adding "scrollablePlotArea"?

jedrzej.r
Posts: 526
Joined: Tue Jan 24, 2023 11:21 am

Re: Background of yaxis becoming transparent when scrollbar for xAxis is added

Wed Mar 29, 2023 2:50 pm

Unfortunately, it's not possible to avoid losing the borders in a simple way, because scrollablePlotArea consists of two SVG containers (one with scrollable area, the other with axis labels, title, menu etc.) overlapping each other with different z-index. There is an open issue on Highcharts repository that covers similiar topic, you can track its status here: https://github.com/highcharts/highcharts/issues/16237

​If you have further inquiries, you may reach out to me at any time.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”