3

I need the points of my chart to have a fixed width (say, 100px each). If the needed space exceed the width of the chart, I just want to be able to scroll horizontally (with the scrollbar.enabled parameter set to true).

This is the basic setup, without setting the points width:

http://jsfiddle.net/wxxdne19/

If I set the column width like this:

http://jsfiddle.net/wxxdne19/1/

The tickPixelInterval parameter is ignored (as the documentation says, of course).

I tried a bunch of other things, but none of them worked, and I ran out of ideas. How can I do what I need?

Update

To clarify what I need, think of it as if I have a column chart, and I need to force all the columns to have a fixed width. Something like this:

http://jsfiddle.net/4rx4snjh/

But, instead of the columns overlapping each other, I'd like the scrollbar to do its job :-) Furthermore, I need it to work with any kind of series (lines, areas...), not just columns.

César García Tapia
  • 3,326
  • 4
  • 27
  • 51
  • check [setExtremes](https://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes) Does this solves issue http://jsfiddle.net/vhnmjaj6/. – Deep 3015 Dec 09 '17 at 12:57
  • Not really. With setExtremes I should calculate how much 100px "intervals" fit in my chart, and it always would be just an approximation. Isn't really possible to force the width of the points? – César García Tapia Dec 09 '17 at 18:31
  • So you want **100px intervals** in axis – Deep 3015 Dec 11 '17 at 09:34
  • Correct. I need 100px intervals, and if there are more intervals than fits in the chart's width, the scrollbar should come in. – César García Tapia Dec 11 '17 at 09:35
  • Scroll bar will always be there . Check this http://jsfiddle.net/6mrb8mcm/ with `tickPixelInterval`. you can adjust `tickPixelInterval` amount you want – Deep 3015 Dec 11 '17 at 09:39
  • As I say in the original post, `tickPixelInterval` is ignored if `tickInterval` is set (which I need to do). – César García Tapia Dec 11 '17 at 09:45
  • In your example, if you change the tickPixelInterval, you change the interval where an axis' tick is set, not the width of the chart's data. Think of it as if I want to fix the column's width – César García Tapia Dec 11 '17 at 09:54
  • Now I can understand what you want. I will try to figure out – Deep 3015 Dec 11 '17 at 09:56
  • I think together with container width(which will make column width always same), hope you can achieve you requirements. http://jsfiddle.net/b05179ec/ . – Deep 3015 Dec 11 '17 at 13:57
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160934/discussion-between-cesar-garcia-tapia-and-deep-3015). – César García Tapia Dec 11 '17 at 14:15

1 Answers1

2

It seems that the solution here is to compute extremes manually and set them in load event:

  load: function() {

    var chart = this,
      xAxis = this.xAxis[0],
      visibleColumns = (xAxis.width - pointWidth) / pointWidth;

    xAxis.setExtremes(pointStart, pointStart + pointInterval * visibleColumns);

  }

Live demo: http://jsfiddle.net/kkulig/mpancrbc/

For some reason (bug probably) xAxis.min value must be initialized when the container width is a small value (in my example it's less that 400 px or so).

API reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

Kamil Kulig
  • 5,756
  • 1
  • 8
  • 12