examples/area.html

@@ -13,8 +13,9 @@
       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' } },
@@ -24,16 +25,18 @@
       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' },
+          { target: 'test1', datapoints: data1, color: 'green', renderArea: 'Above' },
           { target: 'test2', datapoints: data2, color: 'blue', renderArea: 'Below' },
-          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Above' },
+          { target: 'test3', datapoints: data3, color: 'orange', renderArea: 'Below', yOrientation: 'right' },
+          { target: 'test4', datapoints: data4, color: 'purple', renderArea: 'Above', yOrientation: 'right' },
         ],
         options
       );
-      pod.render();      
+      pod.render();
     </script>
   </body>
 </html>

src/index.ts

@@ -62,6 +62,11 @@ 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
@@ -71,13 +76,13 @@ class LinePod extends ChartwerkPod<LineTimeSerie, LineOptions> {
       case AreaType.ABOVE:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
-          .y0(this.height)
+          .y0(topChartBorder)
           .y1(d => yScale(d[1]));
       case AreaType.BELOW:
         return d3.area()
           .x(d => this.state.xScale(d[0]))
           .y0(d => yScale(d[1]))
-          .y1(0);
+          .y1(bottomChartBorder);
       default:
         throw new Error(`Unknown type of renderArea: ${renderArea}`);
     }
@@ -438,7 +443,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(