The underlying issue here is that highcharts relies on the container width to display the chart, which means it will adjust to fit the parent container's dimensions.
If you want to increase the chart's width or height while keeping it contained within a box with scrolls, you can utilize the float property to position the element independently from its parent.
Here's what you need to do:
Firstly, add another div container above the main div
<div style="width:500px;height:600px">
Secondly, assign a CSS class like .main-container to the top container and .inner-container to the inner div.
Your HTML structure should resemble the following:
<div class="main-container">
<div class="inner-container">
<div id="recoranks" style="min-width: 100%; height: 100%; margin: 0 auto"> </div>
</div>
</div>
Next, add the following CSS classes:
.main-container {
width:500px;
height:600px;
overflow-x:scroll;
overflow-y:hidden;
}
.inner-container {
width:700px;
height:580px;
float:left
}
With these adjustments, the setup is complete.
To summarize our approach, we placed the chart div inside a restricted-size container with scrolls. This outer container specifies the desired dimensions for the chart container. The overflow properties control scrolling behavior, allowing horizontal scrolling as per your requirements. You have the flexibility to adjust these settings based on your needs.
The inner chart div is set to float, preventing it from expanding to match the parent's width. Its specified width and height dictate the final dimensions of the rendered chart.
For a demonstration using your code with the proposed solution, visit: http://codepen.io/Nasir_T/pen/QGbxRw