Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors?

https://i.stack.imgur.com/A3vUq.png

While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis label) had a specific complex selector:

#frappe-chart-0 > div > svg > g > g.x.axis > g:nth-child(3) > text

My page contains multiple instances of Frappe charts, each with a varying number of nth-child elements. Ideally, I would prefer a CSS selector with placeholders for flexibility:

#frappe-chart-* > div > svg > g > g.*.axis > g:nth-child(*) > text

However, this wildcard approach is not feasible. Are there any alternative methods to achieve this?

javascripthtmlcss

Answer №1

After some experimentation, I was able to make it functional by utilizing specific CSS selectors:

[id*="custom-chart-"] > div > svg > g > g.y.axis > g > text {
  fill: #FFFFFF;
}
[id*="custom-chart-"] > div > svg > g > g.x.axis > g > text {
  fill: #FFFFFF;
}

The wildcard id selector targets all custom charts across the webpage. Moreover, eliminating the nth-child(3) selector allows for the selection of all axis texts.

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

When using AngularJS and PHP together, I encountered an error that stated "

My POST http request is encountering an error with the message Undefined property: stdClass::$number and Undefined property: stdClass::$message. Below are the codes I've been using: smsController.js angular .module('smsApp') .contr ...

javascriptphpangularjs

Discovering hidden elements using Overflow:hidden

I need help figuring out how to display the cropped part of my text without using scroll bars in css. For example: td { overflow: hidden; } The hidden content is important, but the table property is fixed. table { table-layout: fixed; } I want the ...

css

Using React's useEffect to implement a mousedown event listener

I created a modal that automatically closes when the user clicks outside of it. method one - involves passing isModalOpened to update the state only if the modal is currently open. const [isModalOpened, toggleModal] = useState(false); const ref = useRef(n ...

javascriptreactjs

The Chrome browser is experiencing delays with processing ajax requests, causing them

When I make a series of 8 requests in quick succession, they load successfully. However, any requests made after that get stuck in a "pending" state. Below is my basic HTML template: <!DOCTYPE html> <html> <head> <meta charset= ...

javascriptajaxgoogle-chrome

Switch out the specific content within the p tag

Looking to update the highlighted text within a p tag. The code below addresses handling new line characters, but for some reason the replacement is not working as expected. Check out the HTML snippet: <p id="1-pagedata"> (d) 3 sdsdsd random: Subj ...

javascriptjqueryhtmlreplace

What is the best way to locate and extract the content of an HTML element using XPath in Selenium with VBA?

I am currently seeking a solution to extract the content of an element with the name "data-testid" from a website. This specific element appears approximately 35 times within various contexts in the HTML code. The particular element I am interested in look ...

htmlvbaseleniumxpath

Issues with executing the intended task for a jQuery onclick function

I have a unique jQuery script set up where when #block4 is clicked, the .maincontent div will show. Initially it works perfectly by showing and then hiding the div. However, after the first two clicks, the .maincontent div shows and immediately disappears. ...

javascriptjqueryclick

Error encountered: Unexpected character 'C' found at the beginning of the JSON data received during the Ajax callback

When checking the network debugger in the PHP file, it displays {message: "Success", data: {Name: "admin"}}. However, there seems to be an issue with the AJAX callback. Can someone help me troubleshoot this problem that has been bothering me for a while? T ...

phphtmljsonajax

Is it possible for us to customize the angular material chip design to be in a rectangular shape

I recently implemented angular material chips as tags, but I was wondering if it's possible to customize the default circular design to a rectangle using CSS? ...

cssangularangular-material

What is the best way to scale down my entire webpage to 65%?

Everything looks great on my 1920x1080 monitor, but when I switch to a 1024x768 monitor, the content on my webpage becomes too large. I've been manually resizing with CTRL+Scroll to reduce it to 65%, which works fine. Is there a code solution using CS ...

javascripthtmlcssjoomla

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

javascriptjqueryhtml

"Implementing a search bar feature using HTML, CSS, and

My attempt to implement a search bar CSS from CodePen is not working properly in React. Even though I used the exact code provided, the search bar seems to be buggy. If you want to take a look at the code sandbox for better reference, you can visit: https ...

htmlcssreactjs

Angular 6 and the intricacies of nested ternary conditions

I need help with a ternary condition in an HTML template file: <div *ngFor="let $m of $layer.child; let $childIndex=index" [Latitude]="$m.latitude" [Longitude]="$m.longitude" [IconInfo]="$childIndex== 0 ? _iconInfo1:$c ...

javascriptangulartypescriptngforconditional-operator

The grid is evenly populated with icons

Is it possible to evenly distribute the icons by only using CSS? I'm aiming to achieve a result similar to this (unfortunately, I can't post images due to my lack of reputation). You can find an example solution that uses JavaScript here: _htt ...

csshtmlgridmaterial-designflexbox

Copy password input field content in Vue to clipboard

I'm currently working on a Vue app that includes a form input for creating passwords. I've managed to implement a button that shows/hides the password, but I'm struggling with adding a copy to clipboard function. It doesn't seem to be w ...

javascriptvue.js

javascript issue with fetching data from URL using the GET method

Here is my attempt to fetch a JSON file from a server using asynchronous JavaScript promises. I am experiencing an issue where the result is undefined when using a specific URL, but it works when I use a different URL. Below is the working code with a dif ...

javascriptjqueryjson

Create a fresh trail underneath the overlay image

When utilizing fabric.js to draw a new path with isDrawingMode: true enabled (seen on the right side of the screenshot), I am encountering an issue where the path appears above my overlay image, which is a transparent png. https://i.stack.imgur.com/R3fGn. ...

javascripthtml5-canvasfabricjs

Exploring the Differences Between Meteor JS Backend and Express JS

I have a basic understanding, but I'm interested in learning more: I came across a comparison on Stack Overflow that likened Meteor JS and Express JS to oranges and potatoes. My current understanding is that Meteor JS is full stack (Front End, Back E ...

javascriptmongodbexpressmeteormongoose

Changing the background color of the canvas using Javascript

I want to create a rect on a canvas with a slightly transparent background, but I don't want the drawn rect to have any background. Here is an example of what I'm looking for: https://i.stack.imgur.com/axtcE.png The code I am using is as follo ...

javascripthtmlcsscanvas

Where should Babel and Webpack be placed in your package.json file - under devDependencies or Dependencies?

I'm a beginner when it comes to npm and I have doubts on what should be included in dependencies as opposed to devDependencies. I understand that testing libraries belong in dev, but what about tools like babel and webpack? Should they also be categor ...

javascriptnpmdependenciespackagepackage-managers