How to make my asp chart scrollable in the x direction

Question

I have an asp chart which looks like this:

<asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
  BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
  BackSecondaryColor="White" Height="700px" Width="1800px" onload="Chart1_Load" 
                    style="margin-top: 0px; margin-left: 10px; OVERFLOW-X:scroll;">

    <ChartAreas>
        <asp:ChartArea Name="ChartArea1">
        </asp:ChartArea>      
    </ChartAreas>
    <Titles>
        <asp:Title Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" Name="Title1" 
                                    Text="Graph" ForeColor="Blue">
        </asp:Title>
    </Titles>
</asp:Chart>

as you can see I've added some css which I thought would make my chart scrollable:

OVERFLOW-X:scroll;

However, this doesn't work. I've also tried to encapsulate this chart in a div and make the div scrollable but that makes the chart extend out of the page. How can I make this chart scrollable within the page and still keep my chart dimensions (700px by 1800px)

Answer 1

I was able to add this jquery in order to add a scroll and it worked great:

<script class="code" language="javascript" type="text/javascript">
    $(document).ready(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });

    $(window).resize(function () {
        var window_width = $(window).width() - 280;
        $("#chartdiv").css("width", window_width + "px");
    });
</script>

I also included my chart in a div like this:

<div id="chartdiv" style="overflow-x: scroll;">
    CHART GOES HERE
</div>

Answer 2

First of all, overflow will not work with the chart because charts are rendered into img tags and you can't set overflow to an image.

If I got you correctly I think this would be what you're looking for, try it:

First you have to set the viewport meta tag in your page heading:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />

And in the aspx page:

//The left div you mentioned in the comment
<div id="lefty" style="float:left;width:18vw;height:100vh;border:1px solid #000;"></div>
//The wrapper div of the chart
<div id="wrap" style="width:80vw;height:100vh;overflow:scroll;">
    <asp:Chart ID="Chart1" runat="server" BorderlineColor="Black"
                BorderlineDashStyle="Solid" BackColor="#B6D6EC" BackGradientStyle="TopBottom"
                BackSecondaryColor="White" Height="600px" Width="1800px"  Style="height:100%;">

                <ChartAreas>
                    <asp:ChartArea Name="ChartArea1">
                    </asp:ChartArea>
                </ChartAreas>
                <Titles>
                    <asp:Title Alignment="TopCenter" Font="Verdana, 12pt, style=Bold" Name="Title1"
                        Text="Graph" ForeColor="Blue">
                    </asp:Title>
                </Titles>
            </asp:Chart>
</div>

Briefly, what I did is that I set the width and height of the wrapper div as a percentage of the width and height of the viewport width and height and I set the wrapper to scroll the overflown part of the chart.

Hope this helps...

Answer 3

Just add the

overflow-x: scroll;

to your div