How to make my asp chart scrollable in the x direction


Tags: asp.net,css,asp.net-charts

Problem :

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)



Solution :

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>

    CSS Howto..

    How to divide content with CSS even, odd?

    How to (and how not to) load a css file that uses @font-face

    how to create multiple instance of a css class?

    How to adapt website to user's Screen Resolution?

    how to validate IE 7/8 CSS hacks?

    css how to increase the size of rounded image button with varying text

    How to prevent css keyframe animation to run on page load?

    CSS: How to move hint box (a:hover) to the left?

    How to create a vertical column in a table using css

    How much media queries?

    Css, text shadow - How to get it overflow off the div

    Setting a revealing onhover behaviour for multiple elements-pairs with only CSS - how come this works?

    views_slideshow controls modification Drupal 7

    How do I implement CSS + JavaScript scripts on specific pages on our Drupal site? [closed]

    How to align an element applying css margins that does not get modified according to browsers and screen resolutions?

    How to make responsive popup div?

    Show div on hover span styling

    How to create background css div/rounded corners?

    CSS radio button border how to remove it?

    How to place rectangle inside image and make hover animation for it in CSS?

    How to get the authored style properties of an element?

    How to get “position:fixed” css to work in IE 7+ with TRANSITIONAL doctype?

    CSS: How to make single div of multiple divs within a div show on the bottom

    How generate width html element to fill rest of width window

    How to create rounded edge panel in ExtJS 2.1

    How to change ol bullets for clickable images

    Liferay: how to avoid rebuilding/redeploying CSS files

    How to make CSS visible only for Android phone UC browser

    How do I code CSS to “change” when I load/pull content using ajax?

    How do I replicate this website in terms of responsiveness using only css?