This is a migrated thread and some comments may be shown as answers.

How to hide value-axis in Multi-Axis, based on category

3 Answers 12 Views
This is a migrated thread and some comments may be shown as answers.
Marius
Top achievements
Rank 1
Marius asked on 21 Sep 2018, 10:51 AM

Hello

In the demo when I click the "mpg" category, the line is hidden ( as expected ), but the valueAxis is still visible. I also want this hidden, no point in showing the "miles per gallon" if there is no data on it.

Is there a way to hide this as well?

https://stackblitz.com/edit/multiaxis

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 25 Sep 2018, 09:03 AM
Hello Marius,

The desired result could be achieved by utilizing the Chart's legendItemClick event as follows:
<kendo-chart :title-text="'Hybrid car mileage report'" 
  ....          
  @legendItemClick="onLegendClick">
</kendo-chart>
  
new Vue({
  el: "#vueapp",
  methods: {
    onLegendClick: function(e){
        setTimeout(function() {
          var chart = e.sender;
          var seriesVisible = chart.findSeriesByIndex(e.seriesIndex)._options.visible;
          var axis = chart.options.valueAxis;
          var currentAxis;
 
          for(var i = 0; i < axis.length; i += 1) {
            if(axis[i].name == e.text) {
              currentAxis = axis[i];
              break;
            }
          }
           
          if(currentAxis) {
            if(!seriesVisible) {           
              currentAxis.visible = false;                       
              chart.refresh();
            } else {                    
              currentAxis.visible = true;                       
              chart.refresh();
            }     
          }                                     
        });                               
      }
  }
}

Here is an updated StackBlitz example.

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Marius
Top achievements
Rank 1
answered on 25 Sep 2018, 10:40 AM

Hello Dimitar

This looks great, one caveat is the name must match. In your example, only the "mpg" is hidden in both places.
if the series name and valueAxis are the same it works, an example here

0
Dimitar
Telerik team
answered on 25 Sep 2018, 12:22 PM
Hello Marius,

I am glad to hear that this works.

Thank you for providing an improved version of the initial example. I believe that it will be helpful for others who struggle with the same issue.

Regards,
Dimitar
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Marius
Top achievements
Rank 1
Answers by
Dimitar
Telerik team
Marius
Top achievements
Rank 1
Share this question
or