diff --git a/samples/react/timelines/brush-rangebars.html b/samples/react/timelines/brush-rangebars.html
new file mode 100644
index 000000000..8a37da65a
--- /dev/null
+++ b/samples/react/timelines/brush-rangebars.html
@@ -0,0 +1,297 @@
+
+
+
+
+
+
+ Brush with range bars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div id="wrapper">
+ <div id="chart-TopChart">
+ <ReactApexChart options={this.state.options} series={this.state.series} type="rangeBar" height={230} />
+</div>
+ <div id="chart-BrushChart">
+ <ReactApexChart options={this.state.optionsBrushChart} series={this.state.seriesBrushChart} type="rangeBar" height={100} />
+</div>
+</div>
+
+
+
+
+
+
+
diff --git a/samples/source/timelines/brush-rangebars.xml b/samples/source/timelines/brush-rangebars.xml
new file mode 100644
index 000000000..3f57ee752
--- /dev/null
+++ b/samples/source/timelines/brush-rangebars.xml
@@ -0,0 +1,227 @@
+Brush with range bars
+
+
+
+
+
+
+
+
+
+ {{ charts['TopChart'] }}
+ {{ charts['BrushChart'] }}
+
+
+
+
+TopChart
+
+
+
+chart: {
+ height: 230,
+ type: 'rangeBar',
+ id: 'TopChart',
+ toolbar: {
+ show: false,
+ },
+ zoom: {
+ enabled: false,
+ },
+},
+
+plotOptions: {
+ bar: {
+ horizontal: true,
+ barHeight: '50%',
+ borderRadius: 2,
+ rangeBarGroupRows: true
+ }
+},
+
+xaxis: {
+ type: 'datetime',
+ tooltip: {
+ enabled: false,
+ },
+},
+
+colors: barColors,
+
+fill: {
+ type: 'solid',
+ opacity: 0.5,
+},
+
+stroke: {
+ show: true,
+ width: 2,
+},
+
+dataLabels: {
+ enabled: false,
+},
+
+tooltip: {
+ enabled: true,
+ x: {
+ show: true,
+ formatter: function (value, opts) {
+ if (typeof value === 'number') {
+ var d = new Date(value)
+ const timeLabel = `${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}`
+ return timeLabel;
+ }
+ return value;
+ }
+ },
+},
+
+legend: {
+ show: false,
+}
+
+
+
+
+dataSeries
+
+
+
+
+BrushChart
+
+
+
+chart: {
+ height: 100,
+ type: 'rangeBar',
+ id: 'BrushChart',
+ brush: {
+ target: 'TopChart',
+ enabled: true
+ },
+ toolbar: {
+ show: false,
+ },
+ selection: {
+ enabled: true,
+ type: 'x',
+ xaxis: {
+ min: new Date("2023-10-25T00:00:00.000Z").getTime(),
+ max: new Date("2023-10-30T00:00:00.000Z").getTime(),
+ }
+ },
+},
+
+plotOptions: {
+ bar: {
+ horizontal: true,
+ barHeight: '50%',
+ rangeBarGroupRows: true
+ }
+},
+
+xaxis: {
+ type: 'datetime',
+ min: new Date("2023-10-01T00:00:00.000Z").getTime(),
+ max: new Date("2023-10-30T00:00:00.000Z").getTime(),
+ tooltip: {
+ enabled: false,
+ },
+},
+
+yaxis: {
+ labels: {
+ style: {
+ colors: ['#fff', '#fff', '#fff'], // just hiding the labels here
+ }
+ },
+},
+
+colors: barColors,
+
+fill: {
+ type: 'solid',
+ opacity: 0.5,
+},
+
+stroke: {
+ show: true,
+ width: 1,
+},
+
+dataLabels: {
+ enabled: false,
+},
+
+tooltip: {
+ enabled: true,
+ x: {
+ show: true,
+ },
+},
+
+legend: {
+ show: false,
+}
+
+
+
+
+dataSeries
+
+
+
diff --git a/samples/vanilla-js/timelines/brush-rangebars.html b/samples/vanilla-js/timelines/brush-rangebars.html
new file mode 100644
index 000000000..2f9b64f2a
--- /dev/null
+++ b/samples/vanilla-js/timelines/brush-rangebars.html
@@ -0,0 +1,260 @@
+
+
+
+
+
+
+ Brush with range bars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/samples/vue/timelines/brush-rangebars.html b/samples/vue/timelines/brush-rangebars.html
new file mode 100644
index 000000000..4fbc64f2d
--- /dev/null
+++ b/samples/vue/timelines/brush-rangebars.html
@@ -0,0 +1,283 @@
+
+
+
+
+
+
+ Brush with range bars
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ <div id="wrapper">
+ <div id="chart-TopChart">
+ <apexchart type="rangeBar" height="230" :options="chartOptions" :series="series"></apexchart>
+ </div>
+ <div id="chart-BrushChart">
+ <apexchart type="rangeBar" height="100" :options="chartOptionsBrushChart" :series="seriesBrushChart"></apexchart>
+ </div>
+ </div>
+
+
+
+
+
+