Customizing Ext JS/Sencha Chart framework based on certain conditions

As someone who is new to Ext JS and Sencha charts, I have encountered a challenge with one of the charts in our application. Specifically, I needed to hide the dashes on the X-Axis of that particular chart. Our application is built using Ext JS version 5.1, which does not seem to have a dashSize property available. After some investigation within the framework, I resorted to implementing an empty override as shown below:

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

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

This solution worked perfectly for my current need, but it applied to all charts across the application. Now, I am looking for a way to make this override conditional. I envision something like the following code snippet, although I am unsure how to effectively 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();
}});

If anyone has insights on how to achieve this conditional override or requires additional details from me, your help would be greatly appreciated!

Answer №1

To eliminate the bottom axis completely, you can easily do so by setting the following code:

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

If hiding the entire axis is not ideal and you prefer to use an override, you can add a custom configuration to the axis as a conditional like this:

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

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]);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: Issues with URL redirection on localhost using Node.js

I've developed a service to verify if the user is logged in, but I'm encountering difficulties running the code on localhost. What could be causing this issue? The redirection isn't functioning as expected, should the code for redirecting t ...

Error in Angular 4: Undefined property 'replace' causing trouble

I've been trying to use the .replace() JavaScript function in Angular 4 to remove certain characters from a string. Here is the code snippet from my component: @Component({...}) export class SomeComponent implements OnInit { routerUrl: string = &apo ...

PHP Pagination Made Easy

Currently, I am developing a website focused on HIV prevention information warehousing. Numerous collaborators will be contributing articles using a tinyMCE GUI. The design team is keen on having control over page lengths. They are interested in implement ...

Identifying the hashKey and selected option in a dropdown menu

My attempt to set the selected option for the select menu is not working because the data in the ng-model that I am sending has a different $$hashKey compared to the data in the select menu, and the $$hashKey holds the values. <select class="form-contr ...

the button function is unresponsive

Can someone please help me troubleshoot my jQuery code? Everything seems fine, but the generate button is not working when clicked! PS: I've searched extensively for a solution to this problem but haven't been able to find one. I've also at ...

Adjust the jQuery.ScrollTo plugin to smoothly scroll an element to the middle of the page both vertically and horizontally, or towards the center as much as possible

Visit this link for more information Have you noticed that when scrolling to an element positioned to the left of your current scroll position, only half of the element is visible? It would be ideal if the entire element could be visible and even centere ...

Using javascript to overlay and position many images over another image

I've searched extensively but haven't been able to find any relevant answers here. Currently, I am developing a hockey scoring chance tracker. My goal is to display an image of the hockey ice where users can click to mark their input. Each click ...

retrieveValue() for SelectionDropdown

I have a simple task - I just need to retrieve the name of the Company and store it in the database. Initially, I was able to achieve this using plain text and the code snippet below: sport: this.refs.company.getValue(), which worked perfectly. However, ...

Change the color of the menu icon based on the specified HTML class or attribute

I'm trying to create a fixed menu that changes color depending on the background of different sections. Currently, I am using a data-color attribute but I am struggling with removing and adding the class to #open-button. Adding the class works fine, ...

The button colors in Material Ui do not update properly after switching themes

React Material UI is being utilized in this project. Although the theme is being overridden, the colors of buttons and inputs remain unchanged. Here is how the Material UI theme is created in theme.js // @flow import { createMuiTheme } from '@materi ...

Upgrading email functionality: Combining PHP mail() with AJAX

My issue revolves around using the mail() function. When AJAX code is present, the email gets sent but without any message (the subject is intact though). However, when I remove the AJAX code, the email goes through without any problems. I'm not well ...

Encountering a 400 bad request error when attempting to utilize AJAX within a WordPress environment

I am encountering a 400 error while attempting to retrieve the response from WordPress AJAX. Despite multiple attempts, I have been unable to pinpoint the root cause of the issue. The jQuery version being used is 3.6 and the filter.js file appears to be fu ...

Using Array.push within a promise chain can produce unexpected results

I have developed a method that is supposed to retrieve a list of devices connected to the network that the client has access to. export const connectedDevicesCore = (vpnId: string, vpnAuthToken: string) => Service.listVPNConnectionsCore ...

Error: Invalid parameter detected for Shopify script-tag

I'm encountering a persistent error message stating { errors: { script_tag: 'Required parameter missing or invalid' } } This issue arises when attempting to upload a script tag to a storefront. Currently, I'm just experimenting with s ...

What methods are available for identifying non-operational pointer-events?

According to this resource, Opera 12 does not support pointer-events, causing issues with my website. Interestingly, they do support the property in CSS but don't seem to implement it correctly. Modernizr's feature detection doesn't help in ...

Angular - a simple method to determine the number of non-empty inputs in a complex template-driven form

As I work on multiple substantial Angular 11 template forms containing basic inputs like text, radiolists, and checkboxes, I am looking for the most effective method to calculate the percentage of completed inputs while the user is actively engaging with ...

Creating aesthetically pleasing URLs from data: A simple guide

Can someone help me transform this data into a pretty URL? I am looking for something similar to Appreciate the assistance! :) var x = {data1, data2, data3}; $.ajax({ url: 'https://mywebsite.com/admin/leads/count/', data: x, type: &a ...

What steps should be taken to resolve the error message "EROFS: read-only file system, attempting to open '/var/task/db.json'?"

const jsonServer = require('json-server') const cors = require('cors') const path = require('path') const server = jsonServer.create() const router = jsonServer.router(path.join(__dirname, 'db.json')) const middlewa ...

What is the best way to create a reusable component for this particular version of Autocomplete?

Can anyone help me figure out how to make this Autocomplete component reusable? I am using it multiple times but struggling with defining the necessary useStates. <Autocomplete required value={firstName} onChange={(event, newV ...

Chrome's inability to efficiently handle chunked responses in comparison to Firefox and Safari

I am currently working on a unique test node server that sends chunked responses every two seconds with the specified headers: response.setHeader('Content-Type', 'text/plain') response.setHeader('Transfer-Encoding', 'chu ...