Sticky Y axis and X axis when graph is scrollable

[knz237]

Description

When the graph SVG extends the viewport and is inside a scrollable div, Can we have an option to

1. Provide fixed position X axis labels/legends so that they're always on center of the viewing area
2. Provide a fixed Y axis, so that [like excel] we have a relative idea of unit on Y axis

Steps to check or reproduce

• Create a simple bar graph with 2000 px width for SVG
• put the container div as width: 100% [1366px viewport] and overflow auto
• See that the legend for X axis is hidden after the scroll and after we scroll, the Y axis disappears.

[watnab]

SubChart looks a little like scrollbar.
https://naver.github.io/billboard.js/demo/#Interaction.SubChart
https://naver.github.io/billboard.js/release/latest/doc/Options.html#.subchart

• axis.x can be hidden.
• opacity: 0 can hide g.bb-chart of SubChart.
• However I could not find the way selecting range programmatically.

[watnab]

the way selecting range programmatically

#260
https://naver.github.io/billboard.js/release/latest/doc/Chart.html#zoom

chart.zoom.enable(true);
chart.zoom([1, 2]); //1st -> won't work?
chart.zoom([1, 2]); //2nd -> works.

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.zoom

var chart = bb.generate({
  data: {...},
  bindto: ...,
  zoom: {enabled: true}
});
chart.zoom([1, 2]); //1st -> works.

[watnab]

https://naver.github.io/billboard.js/demo/#Interaction.Zoom

When is zoomed, navigate with dragging it.

<- I could not find this.

https://naver.github.io/billboard.js/release/latest/doc/Options.html#.zoom

zoom.enabled

https://naver.github.io/billboard.js/release/latest/doc/Chart.html#zoom%25E2%2580%25A4enable

zoom․enable(enabled)

@knz237 may possibly want scrollable chart rather than sticky axis/legend against wrapper div scroll.

[knz237]

Thanks for the suggestions, watnab, but zoom won't work in our case.
We need something like below:
https://jsfiddle.net/EmmaLouise/eb1aqpx8/3/

It is okay if we can achieve the similar result using some tweaks, but the positioning of SVG elements is not possible.

[watnab]

We need something like below

In your example, when I scroll to the right, the y-axis overlaps the main chart. Is it the result you want?

---

Steps to check or reproduce
Create a simple bar graph with 2000 px width for SVG
put the container div as width: 100% [1366px viewport] and overflow auto

Here, why do you set the width of SVG to 2000 px ?

• To show scrollbar of the wrapper div for example.
• The width of your chart must always be 2000 px in some reason even if it is greater than viewport.

---

<- I could not find this.
but zoom won't work in our case.

What't the reason zoom won' work?

• Zoom can not be used in your case even if the main chart can be draggable to scroll when it is zoomed.
• Your case needs scrollbar.
• You need the overlap.

[watnab]

I want scrollable chart in our project like knz237's example. So I have strong interest in this issue.
I don't want the overlap. Because it makes the chart hard to see.
I want scrollbar if it is available. Because it's not easy to find that main chart can be dragged to scroll. The cursor icon may imply it though.

[watnab]

https://jsfiddle.net/tonh94wy/
I don't know why the width of bar get narrow when scrolling to right.

[watnab]

https://jsfiddle.net/wg9zr0d2/1/

• It seems padding.bottom can be negative.
• pointer-events: none can prevent SubChart from firing mouse event.

[watnab]

I don't know why the width of bar get narrow when scrolling to right.

-> #1476

---

Can we have an option to
fixed position X axis labels/legends
a fixed Y axis

I could not find options in this library to provide fixed position of X axis labels/legends/Y axis against scrolling wrapper div.
However there is already a way to provide fixed position of legends/Y axis against scrolling chart body.
However it's not so easy to provide something like scrollbar to chart.

[knz237]

Hi watnab,

In your example, when I scroll to the right, the y-axis overlaps the main chart. Is it the result you want?
No. I don't need the overlap. The effect in your examples is okay.

Another issue with the example is that the chart by default has to have a zoom. Hence the left most bars are partially hidden on the initial rendering. - Can be visible in your examples too.

Can this be addressed somehow?

[watnab]

Hence the left most bars are partially hidden on the initial rendering.

• Can be visible in your examples too.
  Can this be addressed somehow?

https://jsfiddle.net/ucwkygba/1/

chartTest.zoom([-0.5, 60]);

It seems min value should be -0.5.

[watnab]

Recharts seems to have something like scrollbar.
http://recharts.org/en-US/examples/BrushBarChart
http://recharts.org/en-US/examples/SynchronizedLineChart
http://recharts.org/en-US/api/Brush

SubChart seems to be more advanced.
However it's harder to find the way to use.

An option to select initially may possibly help to find the way.

[watnab]

SubChart seems to be more advanced.

Brush can have child components.
https://codesandbox.io/s/zqqvzwy9qm?file=/index.js

startIndex/endIndex may mean initial selection.