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

[Marius]

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

 

[Dimitar]

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

[Marius]

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

[Dimitar]

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