Apexcharts.js: Simple horizontal scrollbar

[cedrouille]

I d'like add an simple horizontal scrollbar (scroll + zoom) instead of brush chart more complex, as I found in your documentation here.:

But I failed to configure it :/
Is it just an mockup you added in your documentation ? Or is there a solution to my need?

Thks

[wsjscss]

Still searching for solution for this. I saw this example in README file, but can't find it in documentation and examples.
https://github.com/apexcharts/apexcharts.js#interactivity

[artemiusgreat]

I think, I'm facing the same thing.
When I update Time Series with a new data, it's resizing existing bars instead of scrolling.
https://codepen.io/artemiusgreat/pen/ZEbmrOg

[darshanDevrai]

I am facing the same issue. Anyone got it working??

[KobetiakVasyl]

Seems like I added default scroll on chart. Here is steps:

1. Set width of your chart depending on your data length multiplied by (columnWidth * 2):
   chart: { type: "bar", height: 650, // here width: data.body.length * 100,

2. Add parent div on your chart and set overflow: auto property

I hope it will help

[Moin-chan]

This is such a pity, that this feature is still unavailable.
REQUESTED

[Dinuz]

@KobetiakVasyl I tried your solution, but it doesn't work.
When I change the chart width, the bar get resized automatically to fit in the new dimensions.
The chart scales up or down, it doesn't keep the dimensions.

Could you please show how you let the chart getting a scrollbar?

[KobetiakVasyl]

@Dinuz see below

// js
// "data" is your graph data

const dynamicWidth = data.length * 100;
const chartWidth = dynamicWidth < window.innerWidth ? '100%' : dynamicWidth;

chart: {
type: "bar",
height: 650,
width: chartWidth,
// other settings

// for html you just need to wrap your apx-chart tag into div with class "chart"

// css
.chart {
overflow: auto;
}

[Dinuz]

@KobetiakVasyl That works! Thank you.
I slightly modified your solution to set a columns width in px (const dynamicWidth = data.length * 100 * width in px of your column).

However I find inconsistent the gap between columns, it is not constant between columns (e.g. if the column width is 100%, it should be zero, but it isn't. Sometime is positive, sometime is negative, sometime is zero.