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

Enhance Your Cards with Hover Zoom Text

I'm looking to place some text in front of a card hover zoom effect, but currently it appears behind the zoomed image upon hover. <div style="margin-top: 50px;" class="container imgzoom"> <div class="row ...

htmlcssbootstrap-5

Using PHP to send JSONP callback responses

Is it possible to achieve "two-way" communication using JSONP and PHP? For example: jQuery / JSONP $.ajax({ url: 'http://server/po.php', cache : false, dataType: 'jsonp', timeout: 30000, type: 'GET', ...

javascriptphpjqueryajaxjsonp

Optimizing Open Graph tags for sharing WhatsApp links

I am utilizing Open Graph tags to optimize sharing on social media platforms. The image I have specified is 1200 x 630 pixels and displays correctly on Facebook as well as Whatsapp: <meta property="og:image" content="https://emotionathlet ...

htmlfacebook-opengraphwhatsappsocial-media

Learn the process of incorporating animations into text with Material UI

I'm looking to incorporate a 3D animation effect with a 360-degree rotation on some text using Material UI. <Typography variant="overline" color="secondary" style={{fontFamily:'Roboto'}}> All about your needs </Typography> Ho ...

cssmaterial-ui

Discovering the closest date among the elements in an array

Currently, I am facing an issue while trying to identify the highest date within an array of objects which have varying dates assigned to each one. The code seems to be functioning well when the dates are above January 1st, 1970, however, any date prior to ...

javascripthtmlarraysfunctiondate

Improving the functionality of the JavaScript key press function

I have a small javascript snippet on my website that allows me to navigate the site using the arrow keys on my keyboard. document.onkeydown = function(evt) { evt = evt || window.event; switch (evt.keyCode) { case 37: ...

javascriptphpjqueryhtmlhttp-redirect

Retrieve data from the component within anonymous middleware in NuxtJS

Is there a way to retrieve the component data (like infos, similarPosts shown in this example) from an anonymous middleware within a Nuxt.js application? ...

javascriptvue.jsnuxt.jsmiddleware

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

Why do I keep encountering the error of an undefined variable? Where in my code am I making a mistake

I am struggling to troubleshoot an issue with creating a simple ease scroll effect using the jQuery plugins easing.js and jquery-1.11.0.min.js. $(function(){ //capturing all clicks $("a").click(function(){ // checking for # ...

javascriptjquery

Can Mongoose be integrated into a Next.js API environment?

My current project involves creating a website for my sister to showcase and sell her artwork. Utilizing Next.js, I have set up the framework where the website displays the artwork by fetching an array from a database and iterating through it. Let's ...

javascriptreactjsmongodbmongoosenext.js

Use JavaScript to change the text of a hyperlink to @sometext

<li class="some-class one-more"><label>twitter:</label> <a href="https://twitter.com/sometext?s=09" target="_blank" rel="noreferrer noopener">https://twitter.com/sometext?s=09</a> < ...

javascripthtmljquery

Replacing the CSS Reset with the Universal Selector

I implemented Eric Meyer's Reset to set the font, and then loaded my stylesheet to globally set the font using the universal selector. Even though I loaded the universal selector in my SASS after the reset, the reset is still taking precedence. (Atta ...

csscss-selectorscss-reset

Guide to using get() and res.sendFile() function to redirect webpages

Why is the page not redirecting properly? In my index.html file, I have this script: $.get( "/loginPage", function( data ) {}); The purpose of this script is to check if a user is logged in. If they are, it should redirect them to the lobbyPage. This is ...

javascriptnode.jsexpress

Update location when visibility changes

Looking for a way to automatically refresh an HTML page when a specific div becomes visible, but seems like I am missing something. There is a JavaScript code, divslide.js, that changes the display style of the div from none to inline at predetermined time ...

jqueryhtml

I am experiencing issues with Google Fonts not functioning properly when I insert the bootstrap CDN

I have encountered an issue while working on my landing page. I am using Google fonts for the design and trying to integrate Bootstrap as well. However, whenever I add the Bootstrap link, all the font styles stop working. I have checked the order of the CS ...

htmlcssbootstrap-5

Tips for positioning a div relative to another div while controlling its z-index

Hey there, take a look at the image below https://i.sstatic.net/zYiaY.png The issue I'm facing is quite common - I have div 1 and div 2 visible in a loop, but divs 3 are hidden. When div 2 is clicked on, everything is great so far. However, what I wa ...

javascriptjquerycsshtml

leveraging hooks in NextJS app router for static page generation

How can I make an action take effect on page-load for the app router equivalent of statically generated pages from static paths in NextJS? Everything is working fine with my page generation: // app/layout.js import Providers from '@/app/Providers&apo ...

javascriptnext.jsnext.js13react-server-componentsapp-router

What is the mechanism through which createStore fetches the initialState from the reducer function in redux?

While analyzing the code of redux in createStore.js, I am having trouble understanding how it retrieves the initial state from the reducer function when it is specified as the 1st argument. https://github.com/reduxjs/redux/blob/master/src/createStore.js#L ...

javascriptreactjsredux

Tips for showing a value in a disabled text input box

When users access the page, the table should appear as follows: Marks Per Answer Total Marks Marks Remaining (blank text input) 4 4 (blank text inp ...

phpjqueryhtml

Husky and lint-staged failing to run on Windows due to 'command not found' error

I'm facing issues with getting husky and lint-staged to function properly on my Windows 10 system. Here's how my setup looks like: .huskyrc.json { "hooks": { "pre-commit": "lint-staged" } } .lintstagedrc ( ...

javascriptnpmhookhuskylint-staged