Troubleshooting color inconsistency in ApexCharts tooltips using JavaScript

My attempt to change the tooltip color to black seems futile as it continues to display in white. Consequently, when a user hovers over the graph, it remains in its unaltered state with poor user design.

To gain better insight, refer to the image below: https://i.sstatic.net/92VLb.png I have made unsuccessful attempts to modify the darkOptions code. Any suggestions on how I can resolve this issue? or where should I begin troubleshooting first?

import dayjs from 'dayjs'
export const chartOptions = {

      tooltip: {
    enabled: true,
    shared: true,
    onDatasetHover: {
      highlightDataSeries: true,
    },
    x: {
      show: true,
    },
    y: {
      show: true,
    },
    style: {
      colors: ['#000000'], // Alter this to specify desired color
    },
  },
    colors: ["#3DBA4F", "#3DBA4F", "#3DBA4F", "#37A2CC", "#37A2CC", "#37A2CC"],
    chart: {
        type: 'candlestick',
        stacked: false,

    },
    dataLabels: {
        enabled: false
    },
    markers: {
        size: 0,
    },
    fill: {
        colors: ["#3DBA4F", "#3DBA4F", "#3DBA4F", "#37A2CC", "#37A2CC", "#37A2CC"],
        type: 'gradient',
        gradient: {
            inverseColors: false,
            opacityFrom: 1,
            opacityTo: 0,
            stops: [0, 90, 100]
        },
    },
yaxis: {
  min: 0,
  max: 1,
  tooltip: {
    theme: 'dark',
    enabled: true,
  },
  labels: {
    formatter: function (value) {
      let fixedDecimals = 3;
      if (value < 0.01) {
        fixedDecimals = 5;
      } else if (value < 0.0001) {
        fixedDecimals = 7;
      }
      return value.toFixed(fixedDecimals) + ' ETH';
    },
    style: {
      colors: ['#FFFFFF'],
    }
  },
  forceNiceScale: true,
},



    xaxis: {
        type: 'category',
        labels: {
            style: {
                color: '#000000',
            },
            formatter: function (val) {
                return dayjs(val).format('MMM DD')
            }
        }
    },
    title: {
        style: {
            color: '#26de81'
        },
        align: 'left'
    },
stroke: {
  curve: "straight",

  width: 3,
  fill: {
    type: "gradient",
    gradient: {
      type: "horizontal",
      colorStops: [
        [
          {
            offset: 0,
            color: "#3494B6",
            opacity: 1
          },
          {
            offset: 100,
            color: "#3CB552",
            opacity: 1
          }
        ]
      ]
    }
  }
},

    grid: {
        show: true,
        borderColor: '#6b8694',
        strokeDashArray: 0,
        position: 'back',
        xaxis: {
            lines: {
                show: true
            }
        },
        yaxis: {
            lines: {
                show: true
            }
        }
    }
};

export const chartOptionsDark = {
  crosshairs: {
    tooltip: {
      enabled: true,
      borderColor: '#ffffff', // Set the border color for dark mode
      style: {
        fontSize: '14px',
        color: '#ffffff', // Set the text color for dark mode
        background: 'rgba(0, 0, 0, 0.8)' // Set the background color for dark mode
      }
    }
  
  },
  tooltip: {
    enabled: true,
    shared: true,
    onDatasetHover: {
      highlightDataSeries: true,
    },
    x: {
      show: true,
    },
    y: {
      show: true,
    },
    style: {
      colors: ['#ffffff'], // Set the text color to white for dark mode
      background: 'rgba(0, 0, 0, 0.8)', // Set the background color for dark mode tooltip
    },
  },


    colors: ["#3DBA4F", "#3DBA4F", "#3DBA4F", "#37A2CC", "#37A2CC", "#37A2CC"],
    chart: {
        type: 'candlestick',

    },
    dataLabels: {
        enabled: false
    },
    markers: {
        size: 0,
    },
    fill: {
        colors: ["#3DBA4F", "#3DBA4F", "#3DBA4F", "#37A2CC", "#37A2CC", "#37A2CC"],
        type: 'gradient',
        gradient: {
            inverseColors: false,
            opacityFrom: 1,
            opacityTo: 0,
            stops: [0, 90, 100]
        },
    },
yaxis: {
  min: 0,
  max: 1,
  tooltip: {
    theme: 'dark',
    enabled: true,
  },
  labels: {
    formatter: function (value) {
      let fixedDecimals = 3;
      if (value < 0.01) {
        fixedDecimals = 5;
      } else if (value < 0.0001) {
        fixedDecimals = 7;
      }
      return value.toFixed(fixedDecimals) + ' ETH';
    },
  },
},


  xaxis: {
    type: 'category',
    labels: {
      style: {
        colors: Array.from({ length: 100 }, () => "#FFFFFF"),
      },
      formatter: function (val) {
        return dayjs(val).format('MMM DD')
      }
    }
  },
    title: {
        style: {
            color: '#FFFFFF'
        },
        align: 'left'
    },
stroke: {
  curve: "straight",

  width: 3,
  fill: {
    type: "gradient",
    gradient: {
      type: "horizontal",
      colorStops: [
        [
          {
            offset: 0,
            color: "#3494B6",
            opacity: 1
          },
          {
            offset: 100,
            color: "#3CB552",
            opacity: 1
          }
        ]
      ]
    }
  }
},
grid: {
        show: true,
        borderColor: '#6b8694',
        strokeDashArray: 0,
        position: 'back',
        xaxis: {
            lines: {
                show: true
            }
        },
        yaxis: {
            lines: {
                show: true
            }
        }
    }
};

I've attempted to edit the darkOptions code without any favorable outcome.

javascripttooltipapexchartsdarkmode

Answer №1

If you enable the tooltip with the following settings: 

tooltip: { enabled: true, shared: true, theme:"dark", onDatasetHover: { highlightDataSeries: true, },

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

Troubles with the compatibility of javascript and jquery's multiselect plugin

I've been utilizing the multiselect API to create a dropdown with multiple select options. This is my HTML code: <select id="options" multiple="multiple"></select> And this is my JS code: render:function(){ // $('#viewTemp& ...

javascriptjquerymulti-select

The video is unavailable due to issues with ImageKit

In my project, I am incorporating ImageKit into the workflow. Currently, I have set up a basic process that only includes the video upload feature. On the backend, I have a lone file named index.js. I haven't developed a frontend yet, so I have been e ...

javascriptarrayspostmanimagekit

What could be causing the sudden disappearance of the button?

There is an element with the ID "alpha" that contains the text "Now I'm here...". When the button is clicked, only the text should be removed, not the button itself. <div id="alpha">Now I'm here...</div> <button type="button" oncl ...

javascripthtmldom

Utilizing HTML5 to Access and Update custom data attributes

I have implemented the following code: var activeFilter = $('<li></li>').data('input-id', 'mycustomId'); $('#container').append(activeFilter); Now, I am faced with the challenge of retrieving a specific ...

javascriptjqueryhtmljquery-data

Retrieve the height of a div element in an AngularJS framework, and assign this value to a corresponding attribute of another element

Is it possible to retrieve the height of an element using AngularJS and assign it to another div's attribute? In my Bootstrap website, I have a fixed sidebar that needs to stop before reaching the footer. To achieve this, I currently have to manually ...

javascripthtmlangularjs

What is the best way to use ajax/jquery to load blade or php content into a view in Laravel?

Can anyone advise on how to dynamically load content in a view using ajax requests? I am familiar with loading html elements like this: ("#div_place").html(<p>...), but I'm facing an issue when trying to load php/blade objects into a div. Is the ...

javascriptphpajaxlaravel

Sending a function return to a React component

What I want to achieve is sending the response from an API call to a React Component and using it to generate a List. My confusion lies in how to pass the value from a function to the component. Do I require state for this process? searchMealsHandler(even ...

javascriptreactjs

Ways to utilize array reduce for organizing information

Can someone please guide me on how to use the reduce array method to sort entries by date in the following data: const entries = [ {date: 'lu'}, {date: 'lu'}, {date: 'ma'}, {date: 'ma'} ] I would like the ou ...

javascripttypescriptreact-native

My React project is altering the direction of my image

Below is the code snippet used to retrieve the user's favorite products import React, { useEffect, useState } from "react"; import { Pagination, Row } from "react-bootstrap"; import { useDispatch, useSelector } from "react-red ...

javascriptnode.jsreactjsfrontendbackend

The middleware failed to detect the user session following authentication, resulting in a redirection loop

I am currently working on a project using Next.js with Supabase authentication. I have encountered an issue where the user session is not being detected in the middleware after a successful authentication callback. This results in the middleware continuous ...

javascriptnext.jssupabase

Encountered an error while attempting to search for '/user/profile' in the views directory

I am currently working on developing a shopping cart using node.js, express.js, and mongodb. I am focusing on setting up the sign-up functionality at the moment. However, when I attempt to access the localhost:3000/user/profile link, I encounter the follow ...

javascriptnode.jsmongodbexpress

There was an issue with rendering: "TypeError: Unable to access the 'name' property of an undefined object" [Vue alert]

I encountered the following error message: TypeError: Cannot read property 'name' of undefined Here's the snippet from the Vue file where the error occurred: <tr v-for="user in fields.data" :key="user.id"> <td>{{ user.id ...

javascriptvue.js

Obtaining the HTML content of a div element that has been retrieved through an AJAX request to a PHP script

My challenge is to fetch a dropdown menu from a server and then manipulate it using jQuery after loading. Although everything loads correctly, I am unable to interact with the dropdown items because they were dynamically added post AJAX response instead of ...

javascriptphpjqueryhtmlajax

Issues with dynamic head tags not being reflected in Next.js

Despite my efforts, the Next.js next/link head tag and next-seo OGP are not being reflected on my website. I've spent over 5 hours trying to troubleshoot this issue without success. The only tag that seems to be working is the one in the Head of _doc ...

javascriptreactjsnext.js

A comprehensive guide on using Lua Script in Node.js to efficiently insert multiple records into a Redis Hash

How can I efficiently insert multiple records into a Redis Hash using Lua Script in Node.js? I currently have the following code which utilizes multi and exec for inserting data. How can I modify it to use a lua script instead? return new Promise ...

javascriptnode.jsluaredis

Node.js equivalent of PHP's SimpleXMLParser

One of the most user-friendly XML reading and writing APIs I've come across is PHP's SimpleXMLElement. For instance, to generate a DOM for the following XML code: <root> <foo> <bar baz="goo"> moo ...

javascriptxmlapinode.js

Oops! React js material-table is throwing a TypeError because it's having trouble converting undefined or null to

{ title: 'Stores', field: 'Depolar', editComponent: props => ( <Select name="Depolar" type="text" value={that.state.selectedStores} multiple inp ...

javascriptreactjs

Difficulty with Mongoose persisting data on api/mlab

I've developed a search API that utilizes the Imgur API to fetch JSON data of images based on user queries. Additionally, it keeps track of users' latest searches in the "/latest" URL. However, I'm encountering an issue where the array retur ...

javascriptnode.jsmongodb

Add the element to a fresh array only if there are no duplicate values present

I am faced with a challenge involving an array of names where duplicate entries, such as "Kenny," are causing some confusion. I only want each name to be included in the new array once, but I'm struggling to achieve this. Here's my progress so fa ...

javascriptjqueryarraysajax

Having difficulty importing app.js into other modules within ExpressJS

Having trouble importing app.js into other modules in ExpressJs. It imports successfully, but I can't use the functions defined in the app.js file. The code snippet I am working with is as follows: I have this app.js var app = express(); var express ...

javascriptnode.jsexpresswebsocket