Shade the cells in a table with color

Is there a way to conditionally assign colors to individual cells in a table? I want to display them as green if the cell value is below a certain number, and red otherwise.

var data = [{
    type: 'table',
    header: {
        values: fore_draft_lst_show,
        align: "center",
        line: {
            width: 1,
            color: 'black'
        },
        fill: {
            color: "grey"
        },
        font: {
            family: "Arial",
            size: 12,
            color: "white"
        }
    },
    cells: {
        values: values,
        align: "center",
        line: {
            color: "black",
            width: 1
        },
        font: {
            family: "Arial",
            size: 11,
            color: ["black"]
        },
        fill: {
            color: [
                'rgba(140,124,66,1)',
                cellColorArray
            ] // where cellColorArray = ['rgba(255, 255, 255, 1)', 'rgba(100, 100, 100, 1)',...]
        }
    }
}];

I have encountered an issue where the code sets colors for entire rows instead of individual cells from the array provided. Any suggestions on how to resolve this?

javascriptplotly

Answer №1

The line within your script is being utilized instead of the cell.

Instead, consider implementing something straightforward (like this example in PHP)

<?php switch ($myvalue)
{ case 100: $style = "insert your style commands such as font-color:red and more":} ?>
<td style="<?php echo $style; ?>">

Answer №2

It's worth giving this document a shot to see if it can provide assistance check it out

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

Is there a way to deactivate the <script> tag using CSS specifically for media queries?

When designing a website exclusively for desktop usage, I encountered the issue of it not being viewable on mobile devices. I attempted to address this problem by utilizing the code below: script { display: none; pointer-events: none; } Unfortunat ...

javascripthtmlcss

Issue with ExpressJS Regex not correctly matching a path

I'm currently struggling with a simple regex that is supposed to match words consisting of letters (0-5) only, but for some reason it's not working as expected. Can anyone help me figure out the correct expression and how to implement it in Expre ...

javascriptregexnode.jsexpress

Exploring Apollo Client's invalidateQueries feature

React Query provides a functionality called invalidateQueries which allows us to designate cached data as outdated and triggers a refetch of related queries. Is there a similar feature available in Apollo Client? I currently have a list of entities that I ...

javascriptreactjstypescriptapollo-client

In the world of HTML, when it comes to deciding between the div and span tags, which

This inquiry may seem repetitive, however I am still not content with the clarification I discovered. I am curious: what potential outcomes would arise if I opt to use a span tag instead of a div tag? Both are non-semantic tags, as I am aware. Typically, ...

javascripthtmlcss

Do we need to pair Meteor with Angular?

As an experienced Angular developer, I've found that Angular is a valuable tool for creating dynamic single-page applications. However, my current exploration into Meteor has piqued my interest even further. Meteor offers unique capabilities, such as ...

javascriptangularjsnode.jsmeteor

Unable to eliminate the string "C:fakepath" using JavaScript's replace function and regular expressions

I've been struggling for quite some time with this issue. Let me share a snippet of the code that's causing trouble: jQuery(':file').change(function() { var path = jQuery(this).val(); var filename = path.replace(/C:\\ ...

javascriptjqueryregex

React Alert: Please be advised that whitespace text nodes are not allowed as children of <tr> elements

Currently, I am encountering an error message regarding the spaces left in . Despite my efforts to search for a solution on Stack Overflow, I have been unable to find one because my project does not contain any or table elements due to it being built with ...

javascripthtmlnode.jsreactjsvalidation

Dealing with two form submissions using a single handleSubmit function in react-hook-form

I have a React app with two address forms on one page. Each form has its own save address function that stores the address in the database. There is a single submit button that submits both fields and redirects to the next page (The plus button in the circ ...

javascriptreactjsreact-nativeformsreact-hook-form

Using Selenium to determine the quantity of elements that have a similar class present

Here is the test code I am using: it('count elements by class', async t => { let count = await driver.findElements(By.css('my-questions-class')).then(v => v.length); assert.equal(count, 3); // The count should b ...

javascriptnode.jsseleniumselenium-webdriver

The functionality of FormData in Expo CLI React Native seems to be experiencing some issues

I recently encountered a problem with the document upload feature in Expo CLI - React Native. The issue is that the file is not being transmitted to the backend as expected using FormData(); instead, it is arriving in a strange array format that is differe ...

javascriptreact-nativeexpomultipartform-dataform-data

step-by-step guide on implementing autocomplete using google.maps.places.autocomplete in ExtJS

Just to clarify... I initially wrote a code that was error-free before editing this post. However, after reading a comment on creating a Minimal, Complete, and Verifiable example, I became confused. My minimal script did not work properly, I couldn't ...

javascriptextjsgoogle-maps-api-3autocomplete

Can Browserify be used with AngularJS to bundle directive templateUrls using relative paths?

Currently, I am developing a web application using AngularJS and Browserify to bundle my JavaScript files into a single package for use on the webpage. My project structure looks something like this: app |-index.html |-index.js |-bundle.js |-components ...

javascriptangularjsbrowserify

Save log discrepancies to a document

Upon completing my website for graduation, there is still one important feature I want to add. I would like to implement a script that sends the name of the website where it is installed, as well as any error messages, to my website. For instance: The fol ...

javascriptphpjquerysyntax-error

Is my code incorrect, or is JQUERY failing to load correctly?

I'm currently experimenting with jQuery methods for ajax in order to create a dropdown menu. Below is the jQuery code I am using: JAVASCRIPT: <SCRIPT> $("select[name='carid']").on("change", function() { $.post( ...

javascriptphpjqueryhtmlajax

PHP and JavaScript are two powerful programming languages that are

While I understand that PHP and JavaScript operate in different locations, I am curious to know if there is a way to incorporate some PHP code into my JavaScript file. I need to create unique URLs for linking to profiles and news posts, such as /#/news/IDH ...

javascriptphpjqueryangularjs

Trigger a click event on the <select> element, excluding the <option> element

When my select element is clicked, it updates its options using the onclick() listener. However, I am facing an issue where the listener fires when an option is clicked as well, preventing the user from selecting anything in the updated list. groupSelect ...

javascripthtmlnode.jseventslistener

When clearInterval is used to stop a setInterval, it will not automatically restart if reset with setInterval

I am facing an issue with a countdown timer that I have created using setInterval in JavaScript. The timer is supposed to countdown from one minute at one second intervals. However, when I click the "start" button, it starts the countdown but if I click an ...

javascriptjquery

A standard procedure for evaluating an application using JavaScript on the client side

I am looking to streamline E2E testing for a web application. The frontend of the app is built on a JavaScript framework, while the backend uses Java technology. While I am aware of the tools and frameworks available for JavaScript testing, I am curious ...

javascriptselenium-webdriverintegration-testing

Jquery: Pressing Enter will cause the input field to lose

Take a look at this fiddle I created: http://jsfiddle.net/7wp9rs2s/. This is the progress I have made on my project so far. In the fiddle above, you can double click on one of the 4 items and a textbox will appear for editing. Instead of clicking out of t ...

javascriptjquery

React Native: Image not aligning vertically center in text within nested elements

Issue Description I am facing a challenge in nesting multiple images within a paragraph. If it were just a single line of text, I could have easily used a <View> with flexDirection: 'row'. Since that approach doesn't fit the requireme ...

javascriptcssreactjsimagereact-native