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

Retrieve information from a JavaScript file to incorporate into an HTML file

Seeking a solution to store the base URL in a separate JavaScript file, I've implemented a JavaScript file named config.js containing: export const baseUrl = "https://example.com/"; There are multiple HTML files utilizing this base URL for ...

What is the best way to update JSON data using JQuery?

I apologize for posing a seemingly simple query, but my understanding of JavaScript and JQuery is still in its early stages. The predicament I currently face involves retrieving JSON data from an external server where the information undergoes frequent ch ...

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

Utilize AngularJS to compile a roster of participants

Just starting out with AngularJS, and although I have some background in JavaScript, AngularJS seems quite challenging to grasp (at least for me). My current issue is as follows... I have a list of players and I want to allow users (such as coaches or an ...

Ways to retrieve the content from a textfield

Is there a way to retrieve text from a textfield in material UI without using the onChange method? It just seems odd that I would need to constantly track the value with onChange in order to use it for any other purpose. I decided to search for solutions ...

Creating a Higher Order Component (HOC) for your Next.js page

Upon running the following code, I encountered an error message Error: The default export is not a React Component in page: "/" pages/index.tsx import React, { useState, useRef } from "react"; import type { NextPage } from "next&q ...

"Launching a node server in Azure to get you up and running

Currently, I have a Single Page Application that is hosted on Microsoft Azure. This application requires refreshing some dashboard data every 5 seconds. To achieve this, I have developed a nodejs service that continuously requests data from the API and gen ...

Is it possible to restrict contenteditable elements to only accept numbers?

Is there a way to restrict contenteditable elements such that only numerical values can be entered? I attempted to use the following code snippet: onkeypress='return event.charCode >= 48 && event.charCode <= 57' However, despite a ...

AngularJS property sorting: organize your list by name

I have a complicated structure that resembles: { 'street35':[ {'address154': 'name14'}, {'address244': 'name2'} ], 'street2':[ {'address15& ...

Troubleshooting the Issue of Table Append not Functioning in Live Environment

I'm currently in the process of developing a website using Bootstrap, and I'm facing an issue where one of the tables gets cleared out and updated with new data when a button is clicked. This functionality works perfectly fine during testing on V ...

Utilize jQuery to extract URL parameters and incorporate them into a script

I have a unique link: http://mywebsite.org/product/page?var_one=result1&var_two=result2&var_three=result3&var_four=result4 The values can vary, meaning the parameters are not fixed. My example includes 4 parameters, but there could be more ...

Mapping the Way: Innovative Controls for Navigation

Currently, I am utilizing the HERE maps API for JavaScript. However, I would like to customize the design of the map controls similar to this: Below is an example for reference: HERE EXAMPLE Is it feasible to achieve this customization? ...

Utilizing Vue.js to Showcase Real-Time Data on an HTML Page

I am attempting to showcase the bill structure on an HTML page by retrieving data in Vue and Axios. There is a table where orders are listed, with each row having a "Print" button. When this button is clicked, I want to display the specific order details i ...

Exploring Angular 6 with Universal Karma for effective module testing

Issue I have been facing challenges while testing my Angular 6 application with Karma. I am encountering errors such as: Can't bind to 'ngModel' since it isn't a known property of 'mat-select'. Although the import works in ...

When it comes to MongoDB aggregation, the order of indexes is not taken into consideration

To retrieve the 100 latest documents from a MongoDB collection, where each document is a combination of multiple documents with a similar field (in this case timestamp), I have implemented a series of queries using Node.js: return q.ninvoke(collec ...

Using regular expressions to modify parameter values in a command-line argument between nodes and npm scripts

While experimenting with node.js, I encountered a perplexing behavior related to command line arguments: I have a program that utilizes a regex pattern to identify test files. This regex is passed as a command line argument: node index.js --require src/** ...

Make sure to attach a resize event handler just once

I am working with a widget that inserts a div element into the DOM. This div requires some JavaScript to handle the resize event effectively. Here's the issue: The widget may be added multiple times on the same page, but I want to avoid adding re ...

When you click on the column header to sort, the corresponding column row changes color in JavaScript

https://i.sstatic.net/4ELuv.jpg When a user clicks on a column to sort, the color of the column changes or highlights the row. In my tablesorter with ascending and descending sorting capabilities, I want the sorted column to change colors for better visib ...

Easiest method to globally disable form autocompletion in an application without manually setting autocomplete off for every individual form

Is there a quick way to disable autocomplete in all forms within the application without individually adding "autocomplete=off" to each form? ...

The error "Cannot invoke the indexOf method on an undefined element at order" is being encountered in Javascript

Looking for assistance with creating a function to sort a string where each word contains a single number from 1 to 9 (no 0). For instance, given the input: "is2 Thi1s T4est 3a", the desired output should be "Thi1s is2 3a T4est". The current code snippet ...