# An SVG clipped chart with an offset X axis

Strictly-speaking clipping isn't used - two SVG charts are drawn - both different colors - and HTML/CSS positioning and visibility is used to ensure the relevant portion of each is visible.

This goes in the documents header:

    <script src="RGraph.svg.common.core.js"></script>
    <script src="RGraph.svg.common.tooltips.js"></script>
    <script src="RGraph.svg.line.js"></script>

Put this where you want the chart to show up:

    <style>
        #container {
            position: relative;
            width: 700px;
            height: 300px;
        }

        #wrapper1 {
            position: absolute;
            top: 0px;
            left: 0;
            width: 700px;
            height: 219px;
            overflow: hidden;
        }

        #wrapper2 {
            position: absolute;
            top: 219px;
            left: 0;
            width: 700px;
            height: 81px;
            overflow: hidden;
        }

        #cc1 {
            width: 700px;
            height: 300px;
            position: absolute;
            top: 0;
            left: 0;
        }

        #cc2 {
            width: 700px;
            height: 300px;
            position: absolute;
            top: -219px;
            left: 0;
        }
    </style>

    <div id="container">
        <div id="wrapper1">   <div id="cc1"></div>   </div>
        <div id="wrapper2">   <div id="cc2"></div>   </div>
    </div>

This is the code that generates the chart - it should be placed AFTER the `<div>` tag: