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.

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

<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>