examples/area.html

@@ -13,9 +13,8 @@
       let options = {
         renderLegend: false, usePanning: false,
         axis: {
+          y: { invert: false, range: [0, 100] },
           x: { format: 'numeric', range: [0, 100] },
-          y: { invert: true, range: [0, 100] },
-          y1: { isActive: true, format: 'numeric', range: [0, 1000] },
         },
         zoomEvents: {
           mouse: { zoom: { isActive: false, orientation: 'horizontal' } },
@@ -25,18 +24,16 @@
       const data1 = [[0,0], [35, 40], [65, 60], [100, 100]];
       const data2 = [[0,0], [35, 50], [65, 65], [80, 100]];
       const data3 = [[0,0], [35, 20], [65, 50], [100, 80]];
-      const data4 = [[0,900], [35, 800], [65, 700], [100, 600]];
       var pod = new LinePod(
         document.getElementById('chart'),
         [
-          { target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
+          { target: 'test1', datapoints: data1, color: 'green' },
           { target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
-          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
-          { target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
+          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Above' },
         ],
         options
       );
-      pod.render();
+      pod.render();      
     </script>
   </body>
 </html>

src/index.ts

@@ -62,11 +62,6 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
   getRenderGenerator(renderArea: AreaType, yOrientation: yAxisOrientation): Generator {
     const yScale = yOrientation === yAxisOrientation.LEFT ? this.state.yScale : this.state.y1Scale;
-    const yValueRange = yOrientation === yAxisOrientation.LEFT ? this.state.yValueRange : this.state.y1ValueRange;
-    const yAxisOptions = yOrientation === yAxisOrientation.LEFT ? this.options.axis.y : this.options.axis.y1;
-
-    const topChartBorder = !yAxisOptions.invert ? yScale(yValueRange[1]) : yScale(yValueRange[0]);
-    const bottomChartBorder = !yAxisOptions.invert ? yScale(yValueRange[0]) : yScale(yValueRange[1]);
     switch(renderArea) {
       case AreaType.NONE:
         // return line generator
@@ -76,13 +71,13 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       case AreaType.ABOVE:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
-          .y0(topChartBorder)
+          .y0(this.height)
           .y1(d => yScale(d[1]));
       case AreaType.BELOW:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
           .y0(d => yScale(d[1]))
-          .y1(bottomChartBorder);
+          .y1(0);
       default:
         throw new Error(`Unknown type of renderArea: ${renderArea}`);
     }
@@ -443,7 +438,7 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
 
     // TODO: refactor core not to take _options explicitly
     if(
-      this.options._options.events !== undefined &&
+      this.options._options.events !== undefined && 
       this.options._options.events.zoomOut !== undefined
     ) {
       this.options._options.events.zoomOut(