1

The variation of the size (number of points on the x-axis) of my charts is broad. So, when there are too many points, the labels get mixed/overlapped. I want to change the width of the chart dynamically.

I don't want the container width to change coz then i'll have to change the width of the page to fit (change the general layout) which I did and it didn't look good.

Instead I want to keep the same width of the container, but to have a horizontal scrollbar to it that will enable me to navigate the chart (whose width is dynamically determined).

I talked a lot but I hope it's clear.

A. B
  • 687
  • 9
  • 18
  • 2
    What have you tried? What didn't work?...Can you offer code example, screenshot, or a jsfiddle to help us help you? – MikeM Oct 31 '13 at 19:51
  • I tried the suggestion in http://stackoverflow.com/questions/258372/css-div-element-how-to-show-horizontal-scroll-bars-only/8319119#8319119 and couldn't make it work. But the suggestion given by MikeM works. Thanks. – A. B Nov 03 '13 at 02:57

2 Answers2

2

use overflow (or overflow-x) on the container element to provide horizontal scrolling for just that container.

jsfiddle example

<div id="container">
    <div id="chart"></div>
</div>

#container {
    margin: 40px;
    overflow-x: scroll;
}
#chart {
    background: gray url(//placehold.it/3000x300&text=Some+Chart);
    height: 300px;
    width: 3000px;
}

note: overflow-x/overflow-y are not supported in IE8 and below, use overflow for legacy support

MikeM
  • 27,227
  • 4
  • 64
  • 80
2

In highcharts, you can use highstock.js and enable scrollbar, inclding defition of min/max values.

See simple example: http://jsfiddle.net/highcharts/fj6d2/

Sebastian Bochan
  • 37,348
  • 3
  • 49
  • 75
  • That would be much easier. However, I noticed that the y-axis values increase and decrease based on where you scroll (which is not an intended behavior). Do you know if I can disable it? – A. B Nov 05 '13 at 15:50
  • How can I reprodcue this ? which steps should I do – Sebastian Bochan Nov 06 '13 at 02:08
  • I mean in the jsfiddle example that you provided above. If you scroll to the right you can see the y-axis labels change (the max changes from 200 to 250). Can you disable this? – A. B Nov 06 '13 at 04:52
  • You need use tickPositioner / tickPositions. – Sebastian Bochan Nov 06 '13 at 15:06