CODEWITHSUNDEEP
reactjsuser-interfaceapexcharts
lucaswerner
lucaswerner

Reputation: 378

Apexcharts tooltip styles don't applied

I'm trying to apply some basic style into my tooltip using ApexCharts in React.

This is my configuration:

const options = {
    chart: {
      foreColor: "#ffffff12",
      toolbar: {
        show: false
      }
    },
    colors: ["white"],
    stroke: {
      width: 3
    },
    grid: {
      borderColor: "#ffffff12",
      borderWidth: 1,
      clipMarkers: false,
      yaxis: {
        lines: {
          show: false
        }
      },
      xaxis: {
        lines: {
          show: true,
        },
      }
    },
    dataLabels: {
      enabled: false
    },
    fill: {
      gradient: {
        enabled: true,
        opacityFrom: 0.4,
        opacityTo: 0
      }
    },
    markers: {
      size: 0
    },
    tooltip: {
      enabled: true,
      style: {
        fontSize: '20px',
        fontFamily: 'Roboto'
      },
      x: {
        show: true,
        format:'HH:mm'
      },
      y: {
        formatter:(value) => `${value}$`
      },
      marker: {
        show: false,
      },
      theme:'dark'
    },
    ...

I'm able to see it with the dark default values (like dark background and white font color etc...), but I'm not able to make it work with my own.

Thanks in advance!

Upvotes: 2

Views: 17858

Answers (3)

Mohamed Sabry
Mohamed Sabry

Reputation: 31

.apexcharts-tooltip.light{    
background:red;
color:green;    
}

Upvotes: 0

Jason G
Jason G

Reputation: 128

Please add id property to parent of chart element like this.

#chartContainer .apexcharts-tooltip {
  color: #000000;
}

#chartContainer .apexcharts-tooltip .apexcharts-tooltip-series-group.active {
  background: #ffffff !important;
}

Upvotes: 6

junedchhipa
junedchhipa

Reputation: 5627

The tooltip in ApexCharts can be targetted directly through CSS as it is just an HTML element. Change the tooltip style by overriding .apexcharts-tooltip class and any inner elements inside it.

Upvotes: 3

Related Questions