How to do horizontal scroll for bar chart?

[olgakozich]

I need to add scroll by x if count of element more then 7. How to do horizontal scroll for bar chart?

[wyze]

I don't think you can scroll an SVG. I think you might mean brush and zoom. See #31 or #32. Or a pure D3 example https://bl.ocks.org/mbostock/34f08d5e11952a80609169b7917d4172. Let me know if this is similar to what you are requesting or if it is something different.

[olgakozich]

@wyze No, for example, I need to display 6 elements, and if there are more of them, then there would be a scroll at the bottom, and scrolling to the right we would see the rest of the elements.

[wyze]

There are some solutions in this post you can check out: https://stackoverflow.com/questions/8344688/how-to-get-scrollbars-in-svg

[bmalbusca]

Bumping this. @olgakozich Did you reached to any solution?

[olgakozich]

@bmalbusca Unfortunately, not yet

[wyze]

I am going to close this because there is nothing actionable for us to do here. You can see an example I through together that achieves the original question. https://codesandbox.io/s/heuristic-cray-19rg3?file=/src/App.js

[bmalbusca]

Hi @wyze , there is a small thing that makes the difference on this issue. The x/y axis labels and keys labels are not sliced, they are shown as intended. I can't see a simple way to pick only the svg plot and give him a style with overflow, since the div will take the whole plot block (including the labels etc). Btw, I also found solutions, similar as yours, to handle svg scroll : https://jsfiddle.net/s2t2/kqg9L/ and https://jsfiddle.net/qTFxJ/30/ but they not solve this problem on Nivo's Bars plot

[wyze]

@bmalbusca Not sure I 100% understand but it seems like you want to keep the axis on the left. You can get creative to achieve this, by rendering a 2nd chart with only the left axis and positioning them side by side you can get that effect. https://codesandbox.io/s/recursing-sun-etijd?file=/src/App.js

[aphougat]

I think what you can do outside of Nivo is having a small arrow at the bottom of the graph. and when the user clicks is push the next set of data to responsivenivo chart. this arrow can be on both sides. could as well be a scroll.

[ice1080]

It's definitely a hacky solution but I was able to achieve an optional vertical scrollbar using basically what @wyze mentioned. Here's essentially what mine looks like (using react) with some of our style details left out:

const [mainChartWidth, setMainChartWidth] = React.useState();
const mainChartRef = React.useRef(null);

React.useEffect(() => {
  const observer = new ResizeObserver(() => {
    setMainChartWidth(mainChartRef.current.clientWidth);
  }).observe(mainChartRef.current);

  return () => {
    if (observer) {
      observer.unobserve(mainChartRef.current);
    }
  }
}, [mainChartRef])
    
const chartMargin = {..., bottom: 0};

const chartProps = {
  ...
  axisBottom: null,
  axisLeft: {...},
  margin: {...chartMargin},
}

return (
  <div style={{display: 'flex', flexDirection: 'column'}}>
    <div style={{overflowY: 'scroll'}}>
      <div ref={mainChartRef}>
        <ResponsiveBar {...chartProps} />
      </div>
    </div>
    <div style={{width: mainChartWidth ? mainChartWidth : '100%', height: X_AXIS_HEIGHT + 'px'>
      <ResponsiveBar
        {...chartProps}
        layers={['axes']}
        axisBottom={...}
        axisLeft={null}
        margin={{...chartMargin, bottom: X_AXIS_HEIGHT}}
      />
    </div>
  </div>
)

The ResizeObserver in the useEffect hook is so that the width of the x axis is exactly the width of the main chart, regardless of whether the scrollbar is visible or not.
Hopefully that's helpful to someone else!