When i do selection in brush chart it removes xaxis annotation but it works on selection in main chart

[MikhailLyvak]

When i do selection in brush chart it removes xaxis annotation but it works on selection in main chart

Steps to Reproduce

1. Create main chart with annotation on React.

export const combinedChartDataOptions = (chartData: ChartData) => {
  const chartOptions: ApexOptions = {
    series: [
      {
        name: 'Bait filling',
        type: 'area',
        data: chartData.bait_filling || [],
        color: '#6A37D4',
      },
      {
        name: 'Eaten bait',
        type: 'bar',
        data: chartData.eaten_bait || [],
        color: '#fae600',
      },
    ],
    chart: {
      id: 'main-chart',
      height: 350,
      type: 'line',
      stacked: false,
      zoom: {
        enabled: true,
        type: 'x',
      },
      toolbar: {
        show: true,
      },
    },
    markers: {
      size: 0,
      shape: undefined,
    },
    stroke: {
      show: true,
      width: [2, 2],
      curve: 'smooth',
    },
    fill: {
      opacity: [0.2, 0.6],
    },
    plotOptions: {
      bar: {
        columnWidth: '20%',
        borderRadius: 3,
        hideZeroBarsWhenGrouped: true,
        borderRadiusApplication: 'around',
      },
    },
    xaxis: {
      categories: chartData.date_time || [],
      offsetY: 1,
      labels: {
        trim: false,
        style: {
          colors: '#9aa0ac',
        },
      },
      type: 'category',
      tickPlacement: 'on',
    },
    dataLabels: {
      enabled: true,
      background: {
        enabled: true,
      },
    },
    annotations: {
      xaxis: chartData.annotations,
    },
  };

  return chartOptions;
};

2. Creact brush chart for it

// Brush chart options
export const brushChartOptions = (chartData: ChartData) => {
  const brushOptions: ApexOptions = {
    series: [
      {
        name: 'Bait filling',
        type: 'line',
        data: chartData.bait_filling || [],
        color: '#6A37D4',
      },
    ],
    chart: {
      id: 'brush-chart',
      height: 100,
      type: 'line',
      stacked: false,
      zoom: {
        enabled: true,
        type: 'x',
      },
      brush: {
        enabled: true,
        target: 'main-chart',
      },
      // selection: {
      //   enabled: true,
      //   type: 'x',
      //   xaxis: {
      //     min: chartData.date_time.length - 10,
      //     max: chartData.date_time.length - 1,
      //   },
      // },
    },
    xaxis: {
      categories: chartData.date_time || [],
      offsetY: 1,
      labels: {
        trim: false,
        style: {
          colors: '#9aa0ac',
        },
      },
      type: 'category',
      tickPlacement: 'on',
    },
    plotOptions: {
      bar: {
        columnWidth: '50%',
        borderRadius: 3,
      },
    },
    legend: {
      show: false,
    },
    dataLabels: {
      enabled: false,
    },
    annotations: {
      xaxis: chartData.annotations,
    },
  };

  return brushOptions;
};

3. Select are in brush chart and annotation will disapear

Annotation must be shown

Desapear when use selection on brush chart but works correct on main chart selection

Screenshots

Reproduction Link <= Video of problem

[brianlagunas]

Please provide a link to a code pen that reproduces the issue. Something we can run ourselves.

I can reopen when provided.

[MikhailLyvak]

Can it be without codepen? All data from API and so mush custom hooks to provide here... Problem video and chartOptions are privided.

[brianlagunas]

Preferably you would use fake/mock data and not rely on a functioning API call. We need to be able to duplicate the issue and step through it to observe the code as the issue occurs.

If you can create a sample app that is very easy for us to run and debug, then that will be fine. Only include what is absolutely necessary for the issue to be replicated. If your sample is too difficult to debug, then we will ignore it.

[MikhailLyvak]

sad. I did +- same but cant connect my brush chart with main. Can i sand it? Maby code producer cen easylly fix it and my error will b eprovided/

[MikhailLyvak]

https://codesandbox.io/p/sandbox/react-basic-example-forked-dqzsc2?file=%2Fsrc%2FApp.js%3A4%2C1

[brianlagunas]

Your sample does not reproduce the issue. Please update your sample to reproduce the issue.

[MikhailLyvak]

Now it`s reproducing check pls