apexchart method in react

Question

I'm working with apexcharts and react. And I need to hide a series but I don't know how to implements the methods in my code. The idea is use the data4 to make some calculations and show it on a custom tooltip. How can I hide the data4 in the chart but still using the data on the background?

My code is like this

import Chart from 'react-apexcharts'
import React from 'react';

class ApexChart1 extends React.Component {
 constructor(props) {
   super(props);
   
   this.state = {
          series: [{
            name: 'Data1',
            data: this.props.data.map(d=>{return +d.data1})
          }, {
            name: 'data2',
            data: this.props.data.map(d=>{return +d.data2})
          }, {
            name: 'data3',
            data: this.props.data.map(d=>{return +d.data3})
          }, {
            name: 'data4',
            data: this.props.data.map(d=>{return +d.data3})
          }],
    options:
     {...,
      tooltip: {
              // console.log()
              custom: function({series, seriesIndex, dataPointIndex, w}) {

                // Here I want to use the data4 series but hide that data when the chart renders
                  
              }
            }
     }
   }


   render() {
      return (
     <div>
            <Chart options={this.state.options} series={this.state.series} type="bar" height={425} />
     </div>
   )}
 }
}

Thanks for your help

Answer 1

Im not sure if i understood your idea but if you want to access data4 in your function use:

tooltip: {
     // console.log()
     custom: function({series, seriesIndex, dataPointIndex, w}) {
                let data4 = this.props.data.map(d=>{return +d.data3})
                // something to do with data4
             }
 }

if you want to hide data4 in graph just remove it from series so your series will looks like:

series: [{
        name: 'Data1',
        data: this.props.data.map(d=>{return +d.data1})
      }, {
        name: 'data2',
        data: this.props.data.map(d=>{return +d.data2})
      }, {
        name: 'data3',
        data: this.props.data.map(d=>{return +d.data3})
      }]