ApexCharts 工具提示的 JavaScript 颜色问题

Question

我试图将工具提示颜色设置为黑色，但由于某种原因，颜色没有改变并保持白色。因此，当用户将鼠标悬停在图表中时，它会继续以白色显示图表， 用户设计不好。

请参阅下图以更好地理解 我尝试更改 darkOptions 代码，但没有成功。 有什么想法可以解决这个问题吗？或者先看哪里？

import dayjs from 'dayjs'
export const chartOptions = {

      tooltip: {
    enabled: true,
    shared: true,
    onDatasetHover: {
      highlightDataSeries: true,
    },
    x: {
      show: true,
    },
    y: {
      show: true,
    },
    style: {
      colors: ['#000000'], // Change this to the 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
            }
        }
    }
};

我尝试更改 darkOptions 代码，但没有成功。

Answer 1

您可以使用

 tooltip: {enabled: true, theme: "dark"}