0

Two Chartjs posts in one day!? Sorry.

Is there anyway to add vertical scrolling, but with your X Axis sticked? The idea here is that if I have 8 or more bars (or depending on the height) on my stacked bar chart, that I could scroll through all of them.

This is an image from the design:

enter image description here

Now, in order for my app to be responsive, I have the responsive: true line in there, which is not the best idea for this sort of thing, since it actually makes the chart no longer render. So would I need to put a hardcoded height and width in there for this to work? Is what I thought, so I added a hardcoded width and it just shows two datasets, the first and last.

Is there anyway to have this vertical scroll with a stick bottom x axis? I figure I can just change the background color of the x axis for when it scrolls down, but I can't even get to that step yet.

I made a CodeSandbox to test this.

I also did a little bit of digging to see if anyone had found anything and there's nothing super enlightening that I could find.

I did find this post, but I was unable to make it work for the x axis for a vertical scroll, not horizontal that the example shows: Make y-axis sticky when having horizontal scroll on chartJS and Angular

Also, I am getting a weird element showing up in the top left corner of my chart. I cannot make out what it is and cannot inspect it. Any ideas of what this is? enter image description here

Any tips or advice would be greatly appreciated!

Cheers!

LovelyAndy
  • 841
  • 8
  • 22

1 Answers1

1

I have played with your codesandox and:

Activate vertical scrollbar

Changing the styles you can have the scrolling:

<template>
  <div style="overflow-y: scroll">
    <div style="position: relative;  height:200px;">
      <canvas :id="id"></canvas>
    </div>
  </div>
</template>

and setting responsive: true and maintainAspectRatio: true you have the verticall scrolling on the chart.

Weird rendering

This is a bug in your configuration because you set 7 labels but you also set 8 values on the datasets. For this reason Datalabels plugin will show also the data even if there isn't any label. Adding a label, it works well.

user2057925
  • 2,377
  • 1
  • 12
  • 12
  • Thanks for the comment and tips! The only issue with this approach is that the who chart itself is scrolling and no just the y axis. I want the user to still be able to see the x axis. Again, I appreciate you checking it all out and giving me some great info! – LovelyAndy Sep 08 '22 at 16:28
  • 1
    In this case you could evaluate to use zoom plugin, pan option, mode: y. https://github.com/chartjs/chartjs-plugin-zoom – user2057925 Sep 08 '22 at 16:51
  • Thanks a bunch! I didn't even consider the zoom plugin! – LovelyAndy Sep 08 '22 at 19:24