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

Background of yaxis becoming transparent when scrollbar for xAxis is added

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: 700
Joined: Tue Jan 24, 2023 11:21 am

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

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

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: 700
Joined: Tue Jan 24, 2023 11:21 am

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

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

That is it, yes. But can we somehow avoid losing the left and right border of the chart when adding "scrollablePlotArea"?
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

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

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”