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 remove outline dotted border with using css

    How to correctly display HTML page in browser and mobile

    How to remap CSS shortcut key in Mac Bluefish text editor

    CSS 2 Sass: How do I change the output format of the generated SCSS?

    How to use CSS position sticky to keep a sidebar visible with Bootstrap 4

    How to avoid gaps using Isotope with Masonry layout sortby random

    How to decode data:image/png:base64… to a real image using javascript

    How to detect which button is clicked in javascript?

    How to parse xmlwebservice in phonegap

    How to link a main.css to all Django templates? [closed]

    How to use a different stylesheet for iphone or android?

    How to use `attr` when not on `content` property [duplicate]

    using the unorthodox `head {display: block}` to show text to user?

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How to add the footer with social icons in bootstrap?

    How do I detect that facebook app is loading page to change CSS?

    How to take in account children for :nth-child

    How can I make DIVs within a display: table-cell fill the cell?

    CSS Problem: How to make the images in a made of images touch vertically?
    .game td img { display: block; } Images come with their own white space...
    Read more

    How to make certain text not selectable with CSS [duplicate]

    How to align a horizontal list to the center in css

    How can I modify a CSS class using JavaScript?

    How to apply External CSS to Html Helper Class Elements?

    Table: how to change pictures on mouseover on single rows?

    How to show the vertical image into horizontal manner using HTML and CSS?

    How to detect CSS inheritance source?

    How to make div 10% of device screen height css

    How To Pick Desired Image From CSS Sprites In A DIV Background And Position It?

    How to write special css for IE in external css file using css conditional comments [closed]

    how to color the whole star icon when button is clicked