Conditionally overriding Ext JS/Sencha Chart framework

Question

I am new to Ext JS and Sencha charts. For our application we have multiple charts, one of the chart I need to hide the dashes on X - Axis. We are using Ext JS version 5.1, where I could not find dashSize property. After some digging in the framework, I did an empty override like below

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
override: 'Ext.chart.axis.sprite.Axis',

renderTicks: function (surface, ctx, layout, clipRect) {        
}});

This works like a charm for my requirement, but applies to all charts in the application, how do I make a conditional override so I would need something like this, but not quite sure how to pass the configuration to the framework

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
override: 'Ext.chart.axis.sprite.Axis',

renderTicks: function (surface, ctx, layout, clipRect) { 
   if(condition)
      //empty
   else
      this.superclass.renderTicks.call();
}});

Kindly help. Let me know if I need to provide more details...

Answer 1

If you don't need your bottom axis at all, you can just simply set:

axes: [{
    type: 'category',
    position: 'bottom',
    fields: 'name',
    hidden: true // this will hide the axis
}]

If this is not a good option, and your override works for you, you could simply add an additional config to the axis to use it as a conditional, like this:

axes: [{
    type: 'category',
    position: 'bottom',
    fields: 'name',
    hideMajorTicks: true // custom config
}]

Ext.define('Ext.overrides.chart.axis.sprite.Axis', {
    override: 'Ext.chart.axis.sprite.Axis',

    renderTicks: function (surface, ctx, layout, clipRect) {
        var axis = layout.segmenter && layout.segmenter.getAxis();

        if (axis && axis.hideMajorTicks) return;

        this.callParent([surface, ctx, layout, clipRect]);
    }
});