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

MikhailLyvak commented 3 hours ago

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

Steps to Reproduce

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;
};

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;
};

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 commented 3 hours ago

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

I can reopen when provided.

MikhailLyvak commented 3 hours ago

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

brianlagunas commented 3 hours ago

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 commented 3 hours ago

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 commented 3 hours ago

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

brianlagunas commented 2 hours ago

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

apexcharts / apexcharts.js