How to toggle series of an apex chart from a component but the chart is in another component?

Question

I'm working with Apexchart. I'm having 2 components. The apex chart is in the second component, and I want to call a function in the first component to toggle or unselect some series of the chart in the second component. These 2 components are unrelated, not parents, child

Apex chart HTML:

<div class="row">
        <div id="chart" style="display: block;float:center;margin-left: auto;margin-right: auto;" class="col-10">
          <apx-chart 
          #chart
          [series]="chartOptions.series"
          [chart]="chartOptions.chart"
          [xaxis]="chartOptions.xaxis"
          [stroke]="chartOptions.stroke"
          [tooltip]="chartOptions.tooltip"
          [dataLabels]="chartOptions.dataLabels"
        ></apx-chart>

        </div>
       
      </div>

score 0 · Answer 1 · edited Nov 17 '22 at 14:48

Check this post: apexchart method in react

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

How to toggle series of an apex chart from a component but the chart is in another component?

1 Answers1