Mixed charts - Zoomable time series & Multiple series – Group rows

[Stephen-Strange]

Is it possible to combine Zoomable time series (type "line") & Multiple series – Group rows (type "rangeBar") to create a graph similar to this?

I have a sample code, but this is not working.

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

const MixedChart = () => {
  const options = {
    chart: {
      type: 'line',
      zoom: {
        enabled: true,
        type: 'x', // Zoom in on the x-axis (time axis)
        autoScaleYaxis: true,
      },
    },
    xaxis: {
      type: 'datetime', // Time-based x-axis for both charts
    },
    plotOptions: {
      bar: {
        horizontal: true, // Used for grouped rows (timeline)
      },
    },
    stroke: {
      width: [2, 2],
    },
    tooltip: {
      shared: true,
    },
    yaxis: [
      {
        title: {
          text: 'Time Series',
        },
      },
      {
        opposite: true,
        title: {
          text: 'Grouped Rows',
        },
      },
    ],
  };

  const series = [
    {
      name: 'Zoomable Time Series',
      type: 'line', // Time series as a line chart
      data: [
        [new Date('2023-01-01').getTime(), 30],
        [new Date('2023-01-02').getTime(), 40],
        [new Date('2023-01-03').getTime(), 35],
        [new Date('2023-01-04').getTime(), 50],
      ],
    },
    {
      name: 'Group Rows',
      type: 'rangeBar', // Group rows as rangeBar (timeline)
      data: [
        {
          x: 'Task 1',
          y: [
            new Date('2023-01-01').getTime(),
            new Date('2023-01-02').getTime(),
          ],
        },
        {
          x: 'Task 2',
          y: [
            new Date('2023-01-03').getTime(),
            new Date('2023-01-04').getTime(),
          ],
        },
      ],
    },
  ];

  return <Chart options={options} series={series} type="line" height={350} />;
};

export default MixedChart;

The following error is shown :

Versions used :
"react-apexcharts": "1.4.1",
"react": "17.0.1"
"next": "10.0.5",

[khjabir]

+1

[steve-ragors]

+1

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.