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

score 1 · Answer 1 · answered Apr 10 '22 at 15:44

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})
      }]

score 1 · Answer 2 · edited Nov 18 '22 at 14:33

to access the documentation methods you must create an instance as follows:

// import 

import Chart from 'react-apexcharts' 
import ApexCharts from 'apexcharts'

// options relevants for chart: 

const options = {
chart: {
    id: 'chartBarSeries',-> give a id
    type: 'bar',
    /* ...etc */
}

// in render method

<Chart
    options={varOptions}
    series={varSeries}
    type="line"
    height={'auto'}
/>

// in a effect or button function 

const chart = ApexCharts.getChartByID('chartBarSeries')
                chart.hideSeries('your series name')-> or another method

apexchart method in react

2 Answers2

Linked