Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Highchart Gantt Yaxis label on click custom function for chart height adjustment

Hello Team,
I'm creating yaxis label on click function. I'm using uniquenames=true, and I have collapsible and expanding yaxis but when I'm applying the onclick function this does not changing the yaxis label class collapsed to expanded, Here is my logic.

Code: Select all

chart.yAxis[0].labelGroup.div.childNodes.forEach(function (label){
                    label.addEventListener("click", function() {
                        chart_height_manage_onclick(this, 'for_label');
                    });
 });
 

Code: Select all

                function chart_height_manage_onclick(e, onclick_variable) {
                    if(onclick_variable == 'for_label'){
                        chartHeight = for_label(e, chartHeight, chart);
                    }
                    };

Code: Select all


function for_label(e, chartHeight, chart){
    if ($(e).hasClass('highcharts-treegrid-node-expanded')){
        chartHeight = chartHeight + 150
    }else if ($(e).hasClass('highcharts-treegrid-node-collapsed')){
        chartHeight = chartHeight - 150
    }
    chart.setSize(undefined, chartHeight, true);
    chart_parent_div_scrollbar(chartHeight);
    return chartHeight
}
basically in this logic what I'm doing, I increase chart Height if the class is expanded and decreasing size if class is collapsed.
but classes are not changing by itself using highchart default behaviour.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

Hi!

Thanks for reaching out to us with your inquiry!

Could you please provide a minimal reproducible example with your config, so that I can investigate it further? You can start by editing this demo: https://jsfiddle.net/BlackLabel/qnohy10w/.

Patiently waiting for your reply.
Best regards!
Jędrzej Ruta
Highcharts Developer
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

I have added code,
https://jsfiddle.net/tbh9y4ru/8/

In my code base I'm actually fetching data using ajax then creating the chart I have inspect the chart and found if I click on arrow that is in yaxis it comes in elements and If I click on label it comes in div.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

Hi again!

Thanks for providing the demo with your implemenation!

First of all, y-axis labels and icons are both located under same SVG group, so you should access these elements via chart.yAxis[0].labelGroup.element.childNodes. Secondly, I don't quite understand the purpose of decreasing/increasing chart height on nodes toggling, as it's already taken care of inside the tree grid axis logic. Adding additional height changes inside it might interfere with chart ouput and make it illegible.

In case of any other questions related to Highcharts functionality feel free to contact us anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

The reason for doing this is that I'm using uniqueNames in yaxis and there is open bug in Highchart related to chart size if we use uniquenames=true. so that's why I'm changing chart size on purpose.
check this out bug.

https://github.com/highcharts/highcharts/issues/11796
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

I have this as y axis config.

Code: Select all

yAxis: [
            {
                className: 'yaxis-grid',
                uniqueNames: true,
                grid:{
                    borderColor: borderColor,
                },
                labels: {
                    style: {
                        textDecoration: 'none',
                    },
                    useHTML: true,
                    levels: level,
                    formatter: function() {
                        value = category_list.includes(category) ? this.value.replace(/\d+|-/g,'') : this.value;
                        if (this.value.includes('total_bar')){
                            return "<span style='font-size: 20px; font-weight: normal'>"+value.replace('total_bar', '')+"</span>"
                        }
                        return value;
                    },
                },
            },
        ],
so for icon and label both are in different
chart.yAxis[0].labelGroup.element.childNodes this is working fine with icons but for label we have to use chart.yAxis[0].labelGroup.div.childNodes but when we clicking the label highchart but changing classes expand to collapse or we can say it's default behaviour.
one more thing do we have anything to trigger toogleCollapse manually?
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

Thanks for elaborating a bit about this issue. As a workaround, you can set an arbitrary chart height inside the chart config, and therefore the chart height should stay the same on toggling the tree grid nodes.

Demo: https://jsfiddle.net/BlackLabel/8o47cdmw/

When it comes to toggling the nodes manually, you can take a look at this thread from Forum: viewtopic.php?p=191024#p191024.

Let me know if that's what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

This logic was working before, by the way on clicking on of the icon on yaxis label everything working fine.
but when I'm clicking on the yaxis label it does not changing their class expand to collapse or we can say it does not running togglecollapse.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

As you can see in provided example, the tree grid nodes change CSS classes from highcharts-treegrid-node-expanded to highcharts-treegrid-node-collapsed both clicking on label and icon. If that's not the problem, than could you please elaborate a bit more what is exactly the issue in this case? Perhaps a screenshot or screen recording would be helpful to determine the solution.

Best regards!
Jędrzej Ruta
Highcharts Developer
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

Image
https://drive.google.com/file/d/18IXEum ... sp=sharing
check here, when I'm clicking the label its expands and changes its class at first, but if I again click on the same label it should collapse and should change its classes but it does not collapsing or changing classes.
but clicking on the arrow everything is working fine. I have attached gif in drive please checkout that for the reference.
Kishan silawat
Posts: 25
Joined: Thu Nov 24, 2022 10:10 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

I got the problem, it was my mistake, at the time of my logic I was using some other version of gantt highachart. I have resolved this.
Thanks for the help, I'm using cdn for highchart gantt but forget to mention which specific version should I use.
Thanks for the help.
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Highchart Gantt Yaxis label on click custom function for chart height adjustment

I'm glad to hear that you've been able to resolve it on your own.

In case of any other questions related to Highcharts, feel free to ask anytime.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Gantt”