opencharts/charts/area/area.css

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
}
body {
  margin: 0;
  padding: 0.1px;
}
.chart {
  width: 50vh;
  height: 50vh;
  margin: 25vh 25vw;
  background-color: #90ee90;
  position: relative;
}
.chart-container {
  width: 100%;
  height: 100%;
}
.axis {
  width: 100%;
  height: 100%;
  position: absolute;
}
.axis .axis-x,
.axis .axis-y {
  position: absolute;
  background-color: #d3d3d3;
}
.axis .axis-y {
  width: 1em;
  height: 100%;
}
.axis .axis-y .axis-line {
  left: 50%;
}
.axis .axis-y .axis-line .axis-line-container {
  margin: 0 -0.125em;
  height: 100%;
  width: 0.25em;
}
.axis .axis-x {
  height: 1em;
  width: 100%;
  bottom: 0;
}
.axis .axis-x .axis-line {
  top: 50%;
}
.axis .axis-x .axis-line .axis-line-container {
  margin: -0.125em 0;
  height: 0.25em;
  width: 100%;
}
.axis-line {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 5;
}
.axis-line-container {
  background-color: #000;
}
.scene {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  padding-left: 1em;
  padding-bottom: 1em;
}
.scene .scene-container {
  width: 100%;
  height: 100%;
  background-color: #add8e6;
  position: relative;
  overflow: hidden;
}
.line-inner {
  background-color: #008000;
  position: absolute;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -ms-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}
.line-part {
  position: absolute;
  width: 100%;
  height: 100%;
}
.area {
  position: absolute;
  overflow: hidden;
}
.area .area-rotated {
  -webkit-transform-origin: left top;
  -moz-transform-origin: left top;
  -ms-transform-origin: left top;
  -o-transform-origin: left top;
  transform-origin: left top;
}
.area .area-rotated,
.area .area-lower-block {
  position: absolute;
  background-color: #389ab9;
}
.area .area-lower-block {
  width: 100%;
}
/* {{p=it.points;}} */
/*{{ for(count=0;count<it.points.length;count++){ }}*/
.part-/*{{= count+1}}*/ {
/* 
    left: {{=it.points[count][0]}};
    top: {{=it.points[count][1]}};
    */
  junk: "";
}
.part-/*{{= count+1}}*/ .line-inner {
/*
        {{ if (count+1<it.points.length){ }}
        {{ 
            sqr=function(numb){return Math.pow(numb,2)};
            p1=p[count];
            p2=p[count+1];
            x2=Number(p2[0].slice(0,p2[0].length-1));
            x1=Number(p1[0].slice(0,p1[0].length-1));
            y2=100-Number(p2[1].slice(0,p2[1].length-1));
            y1=100-Number(p1[1].slice(0,p1[1].length-1));
            x_diff=(x2-x1);
            y_diff=(y2-y1);
            hypotenuse=Math.sqrt(sqr(x_diff)+sqr(y_diff));
            rot_angle= -180/Math.PI*Math.atan2(y_diff,x_diff)+"deg";
         }}
         width: {{= hypotenuse+"%" }} ; 
         -webkit-transform: rotate({{= rot_angle }});
         -moz-transform: rotate({{= rot_angle }});
         -ms-transform: rotate({{= rot_angle }});
         -o-transform: rotate({{= rot_angle }});
         transform: rotate({{= rot_angle }});
        */
/*{{ } }}*/
  junk: "";
}
.part-/*{{= count+1}}*/ .area {
/*
        width: {{=x_diff+"%"}};
        {{ if (count+1<it.points.length){ }}
            {{ if (y_diff<0){ }}
                {{ h=y1; }};
            {{ } }}
            {{ if (y_diff>0){ }}
                {{ h=y2; }};
                top: {{= -y_diff+"%" }};
            {{ } }}
            height: {{= h+"%" }};
        {{ } }}
        */
  junk: "";
}
.part-/*{{= count+1}}*/ .area .area-rotated {
/*
            width: {{= 100*hypotenuse/x_diff+"%" }};
            height: {{= Math.abs(y_diff)*100/h+"%" }};
            -webkit-transform: rotate( {{= rot_angle }} );
            -moz-transform: rotate( {{= rot_angle }} );
            -ms-transform: rotate( {{= rot_angle }} );
            -o-transform: rotate( {{= rot_angle }} );
            transform: rotate( {{= rot_angle }} );
            
            {{ if (y_diff<0){ }}
                // do nthng
            {{ } }}
            {{ if (y_diff>0){ }}

            top : {{= 100*Math.abs(y_diff)/y2+"%" }};
            {{ } }}
            */
  junk: "";
}
.part-/*{{= count+1}}*/ .area .area-lower-block {
/*
            {{ if (y_diff>0){ }}
                height: {{= (100*y1/y2)+"%" }};
                top : {{= 100*Math.abs(y_diff)/y2+"%" }};
            {{ } }}    
            {{ if (y_diff<0){ }}
                height: {{= (100*y2/y1)+"%" }};
                top: {{= Math.abs(y_diff)*100/y1+"%" }};
            {{ } }}
            */
  junk: "";
}
/* {{ } }} */
.non-area {
/*
    top: {{= -it.point_radius.slice(0,it.point_radius.length-2)+"px" }};
    */
  position: relative;
}
.line-inner {
/*
    {{ w= Number(it.point_radius.slice(0,it.point_radius.length-2))*2 +it.point_radius.slice(it.point_radius.length-2); }}
    
    height: {{= w }};
    */
  junk: "";
}
.point-inner {
  position: absolute;
/*
    left :-{{= it.point_radius }};
    width:{{= w }};
    height  :{{= w }};
    */
  border-radius: 50% 50%;
  background-color: #4a29f8;
}