1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Initial Visibility of Chart Axes

Initial Visibility of Chart Axes

We have an EJS line chart with a Primary X and Primary Y axis defined.

In the <e-series-collection> we have also defined three other series that we want to plot on the same X Axis but on an Opposed Y Axis. Each of the additional series have differnt units so we have also defined three extra axis within the e-chart-axes element.

The extra series have their visible property set to false so on inital display they are not visible. Then we can toggle their visibility from the legend. However the visibility of the opposed Y Axes is an issue.

If we set the visible property, on the opposed Y Axes, to true they hide and show when the series visibility is toggled but they are all visible on initial load. 
If we set their visible property to false they are not all displayed on initial load but they also never appear when the series is toggled to visible.

How can we have them not displayed on initial load but have their visibility toggles by the related series ?

Thanks



10 Replies 1 reply marked as answer
SM Srihari Muthukaruppan Syncfusion Team February 10, 2021 12:13 PM UTC

Hi Pat, 
 
We have analyzed your query. Based on your requirement we have prepared a sample for your reference. In which we have not displayed the secondary axis on initial load and on legend click we have toggled the axis visibility based on the series visibility as per your requirement. Please find the sample and screenshot below. 
 
 
Screenshot: 
Before Click: 
 
 
After Click: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M  


PA Pat February 10, 2021 06:16 PM UTC

Is there a way of making the visibility of the additional series mutually exclusive i.e. When you toggle Australia on it toggles off England but Germany is always visible

SM Srihari Muthukaruppan Syncfusion Team February 11, 2021 09:33 AM UTC

Hi Pat, 
 
We have analyzed your query. Based on your requirement we have prepared a sample for your reference. In which we have set the default axis (primaryYAxis or Germany Axis) as visible all the time and as of now toggle on legend click are made based on the respective series you can also customize the toggle based on your requirement. Please find the sample and code snippet for further reference. 
 
 
Code Snippet: 
<ejs-chart id="lineContainer" legendClick="legendClick" title="Weather condition JPN vs DEU" load="window.onChartLoad"> 
    // add your additional code here 
</ejs-chart> 
// add your additional code here 
function legendClick(args) { 
        for (var i = 0; i < args.chart.axisCollections.length; i++) { 
            if (args.series.yAxisName == args.chart.axisCollections[i].name) { 
                args.chart.axisCollections[i].visible = args.series.visible; 
                args.chart.refresh(); 
            } 
        } 
    }; 
 
Screenshot: 
All series Hidden: 
 
After toggling second series: 
 
After toggling third series: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


Marked as answer
PA Pat February 16, 2021 09:30 AM UTC

I have some javascript that is working however it is causing the page to scroll to the the top every time I click on the Legend to hide/show. In your sample solution you need some content above the chart so that there is a vertical scroll bar

<script type="text/javascript">
        function legendClick(args) {

            for (var i = 0; i <= args.chart.axisCollections.length - 1; i++) {
                
                if (args.chart.axisCollections[i].name == "primaryXAxis" || args.chart.axisCollections[i].name == "primaryYAxis") {
                    continue;
                }
                else {
                    if (args.chart.axisCollections[i].name == args.series.yAxis.name) {
                        args.series.yAxis.visible = !args.series.yAxis.visible;
                    }
                    else {
                        args.chart.axisCollections[i].visible = false;
                        args.chart.axisCollections[i].series.forEach(function (series) {
                            series.visible = false;
                        });
                    }
                }
            }

            args.chart.refresh();
        };

PA Pat February 16, 2021 10:10 AM UTC

Replying because I could not get the "Edit" to work.

The issue I recently highlighted where the browser scrolls back to the top of the page on click of the series in the Legend is dependant on the vertical size of the viewport. For innstance if I open Dev Tools in Chrome, which further restricts the vertical space the scrolling to the top stops.



SM Srihari Muthukaruppan Syncfusion Team February 17, 2021 09:36 AM UTC

Hi Pat, 
 
We have analyzed your query. From that, we would like to let you know that the reported scenario occurs since the chart svg is removed from DOM while values changes. So, chart div element height value is set to be zero. That’s why, the focus is moved to top of the page. We can avoid this issue by setting height of the chart value to the scrollTop value in the loaded event to overcome the reported scenario. Please find the sample, code snippet and screenshot below for your reference. 
 
 
Code Snippet: 
<ejs-chart width="92%" height="450px" id="lineContainer" loaded="loaded" legendClick="legendClick" title="Weather condition JPN vs DEU">  
// add your additional code here 
</ejs-chart> 
 
// add your additional code here 
 
function loaded(args) { 
        var chart = document.getElementById("lineContainer"); 
        chart.scrollTop = chart.scrollHeight; 
    } 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


PA Pat February 18, 2021 11:47 AM UTC

There are a number of issues with your proposed solution for fixing the scroll jump.

1. It only works when your sample has the inline style set on the containing div, style="width:92%; height:450px". There is no mention of that in the reply nor is that something we can set in our HTML
2. The sample has a CSS block that is referencing a CSS property of scrollTop but that is not a valid CSS property
3. The reply says "setting height of the chart value to the scrollTop value in the loaded event" but the coide in the sample does the opposite and sets the scrollTop value to the height of the chart.

Please advise on a solution that does not require us to set the inline style. Also to replicate our layout you needs some content above the chart to cause some vertical scroll. I suggest about 40 lines of text depnding on your viewport size.



SM Srihari Muthukaruppan Syncfusion Team February 19, 2021 01:16 PM UTC

Hi Pat, 
 
Sorry for the inconvenience. 
 
We have analyzed your query. Hence to achieve your requirement without using parent div inline styles. We suggest you to use scrollIntoView() method in the loaded event of the chart. Based on your requirement we have also prepared a sample for your reference. Please find the sample and screenshot below. 
 
 
Code snippet: 
<div style="height: 600px"></div> 
    <ejs-chart id="lineContainer" loaded="loaded" legendClick="legendClick" > 
            // add your code snippet 
    </ejs-chart> 
 
<script> 
// add your code snippet 
    function loaded(args) { 
        document.getElementById('lineContainer').scrollIntoView(); 
    } 
// add your code snippet 
</script> 
 
Screenshot: 
 
 
Let us know if you have any concerns. 
 
Regards, 
Srihari M 


PA Pat February 23, 2021 03:14 PM UTC

Thanks. Great to get this fixed

SM Srihari Muthukaruppan Syncfusion Team February 24, 2021 06:18 AM UTC

Hi Pat, 
 
Most welcome. Kindly get in touch with us, if you requires further assistance. We are always happy in assisting you.   
   
Thanks,   
Srihari M 


Loader.
Up arrow icon